@true-engineering/true-react-common-ui-kit 1.0.2 → 1.2.0

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 (135) hide show
  1. package/dist/components/AccountInfo/AccountInfo.d.ts +4 -4
  2. package/dist/components/AccountInfo/AccountInfo.styles.d.ts +60 -56
  3. package/dist/components/AddButton/AddButton.d.ts +6 -6
  4. package/dist/components/AddButton/AddButton.styles.d.ts +23 -23
  5. package/dist/components/Button/Button.d.ts +19 -33
  6. package/dist/components/Button/Button.styles.d.ts +144 -144
  7. package/dist/components/Checkbox/Checkbox.d.ts +16 -27
  8. package/dist/components/Checkbox/Checkbox.styles.d.ts +39 -42
  9. package/dist/components/CloseButton/CloseButton.d.ts +4 -4
  10. package/dist/components/CloseButton/CloseButton.styles.d.ts +22 -22
  11. package/dist/components/Colors/Colors.styles.d.ts +28 -28
  12. package/dist/components/CssBaseline/CssBaseline.d.ts +1 -1
  13. package/dist/components/CssBaseline/CssBaseline.styles.d.ts +7 -7
  14. package/dist/components/DateInput/DateInput.d.ts +8 -9
  15. package/dist/components/DateInput/DateInput.styles.d.ts +7 -7
  16. package/dist/components/DatePicker/DatePicker.d.ts +29 -36
  17. package/dist/components/DatePicker/DatePicker.styles.d.ts +38 -34
  18. package/dist/components/DatePicker/DatePickerHeader/DatePickerHeader.d.ts +9 -9
  19. package/dist/components/DatePicker/DatePickerHeader/DatePickerHeader.styles.d.ts +59 -59
  20. package/dist/components/DatePicker/DatePickerInput/DatePickerInput.d.ts +7 -9
  21. package/dist/components/DatePicker/DatePickerInput/DatePickerInput.styles.d.ts +16 -16
  22. package/dist/components/Description/Description.d.ts +6 -6
  23. package/dist/components/Description/Description.styles.d.ts +18 -18
  24. package/dist/components/FiltersPane/FilterInterval/FilterInterval.d.ts +19 -19
  25. package/dist/components/FiltersPane/FilterInterval/FilterInterval.styles.d.ts +44 -44
  26. package/dist/components/FiltersPane/FilterMultiSelect/FilterMultiSelect.d.ts +2 -8
  27. package/dist/components/FiltersPane/FilterSelect/FilterSelect.d.ts +17 -35
  28. package/dist/components/FiltersPane/FilterSelect/FilterSelect.styles.d.ts +111 -111
  29. package/dist/components/FiltersPane/FilterSelect/locales.d.ts +6 -10
  30. package/dist/components/FiltersPane/FilterValueView/FilterValueView.d.ts +1 -9
  31. package/dist/components/FiltersPane/FilterValueView/FilterValueView.styles.d.ts +8 -8
  32. package/dist/components/FiltersPane/FilterWithDates/FilterWithDates.d.ts +13 -21
  33. package/dist/components/FiltersPane/FilterWithDates/FilterWithDates.styles.d.ts +41 -41
  34. package/dist/components/FiltersPane/FilterWithPeriod/FilterWithPeriod.d.ts +8 -8
  35. package/dist/components/FiltersPane/FilterWithPeriod/FilterWithPeriod.styles.d.ts +7 -7
  36. package/dist/components/FiltersPane/FilterWrapper/FilterWrapper.d.ts +18 -41
  37. package/dist/components/FiltersPane/FilterWrapper/FilterWrapper.styles.d.ts +92 -92
  38. package/dist/components/FiltersPane/FiltersPane.d.ts +15 -34
  39. package/dist/components/FiltersPane/FiltersPane.styles.d.ts +50 -50
  40. package/dist/components/FiltersPane/FiltersPaneSearch/FiltersPaneSearch.d.ts +18 -37
  41. package/dist/components/FiltersPane/FiltersPaneSearch/FiltersPaneSearch.styles.d.ts +82 -82
  42. package/dist/components/FiltersPane/locales.d.ts +22 -28
  43. package/dist/components/FiltersPane/types.d.ts +38 -65
  44. package/dist/components/Flag/Flag.d.ts +2 -2
  45. package/dist/components/Flag/Flag.styles.d.ts +8 -8
  46. package/dist/components/FlexibleTable/FlexibleTable.d.ts +20 -45
  47. package/dist/components/FlexibleTable/FlexibleTable.styles.d.ts +93 -93
  48. package/dist/components/FlexibleTable/TableRow.d.ts +21 -38
  49. package/dist/components/FlexibleTable/TableValue.d.ts +16 -28
  50. package/dist/components/FlexibleTable/types.d.ts +31 -37
  51. package/dist/components/Icon/ComplexIconBoilerplate.d.ts +1 -1
  52. package/dist/components/Icon/Icon.d.ts +2 -2
  53. package/dist/components/Icon/Icon.styles.d.ts +4 -4
  54. package/dist/components/Icon/IconBoilerplate.d.ts +1 -1
  55. package/dist/components/Icon/complexIcons/icons.d.ts +1 -1
  56. package/dist/components/Icon/icons/icons.d.ts +5 -97
  57. package/dist/components/IncrementInput/ChangeButton.d.ts +5 -5
  58. package/dist/components/IncrementInput/IncrementInput.d.ts +3 -4
  59. package/dist/components/IncrementInput/IncrementInput.styles.d.ts +52 -52
  60. package/dist/components/Input/Input.d.ts +37 -48
  61. package/dist/components/Input/Input.styles.d.ts +242 -242
  62. package/dist/components/List/List.d.ts +12 -12
  63. package/dist/components/List/List.styles.d.ts +35 -35
  64. package/dist/components/Modal/Modal.d.ts +19 -19
  65. package/dist/components/Modal/Modal.styles.d.ts +235 -235
  66. package/dist/components/MoreMenu/MoreMenu.d.ts +7 -7
  67. package/dist/components/MoreMenu/MoreMenu.styles.d.ts +45 -45
  68. package/dist/components/MultiSelect/MultiSelect.d.ts +13 -28
  69. package/dist/components/MultiSelect/MultiSelect.styles.d.ts +38 -38
  70. package/dist/components/MultiSelect/MultiSelectInput/MultiSelectInput.d.ts +6 -12
  71. package/dist/components/MultiSelect/MultiSelectInput/MultiSelectInput.styles.d.ts +58 -58
  72. package/dist/components/MultiSelectList/MultiSelectList.d.ts +20 -43
  73. package/dist/components/MultiSelectList/MultiSelectList.styles.d.ts +90 -90
  74. package/dist/components/MultiSelectList/locales.d.ts +6 -10
  75. package/dist/components/Notification/Notification.d.ts +9 -14
  76. package/dist/components/Notification/Notification.styles.d.ts +30 -33
  77. package/dist/components/NumberInput/NumberInput.d.ts +10 -16
  78. package/dist/components/NumberInput/helpers.d.ts +2 -10
  79. package/dist/components/PhoneInput/PhoneInput.d.ts +7 -14
  80. package/dist/components/PhoneInput/PhoneInput.styles.d.ts +60 -60
  81. package/dist/components/PhoneInput/PhoneInputCountryList/PhoneInputCountryList.d.ts +7 -7
  82. package/dist/components/PhoneInput/PhoneInputCountryList/PhoneInputCountryList.styles.d.ts +74 -78
  83. package/dist/components/PhoneInput/types.d.ts +11 -11
  84. package/dist/components/RadioButton/RadioButton.d.ts +8 -18
  85. package/dist/components/RadioButton/RadioButton.styles.d.ts +25 -25
  86. package/dist/components/ScrollIntoViewIfNeeded/ScrollIntoViewIfNeeded.d.ts +374 -634
  87. package/dist/components/SearchInput/SearchInput.d.ts +2 -12
  88. package/dist/components/SearchInput/SearchInput.styles.d.ts +32 -32
  89. package/dist/components/Select/Select.d.ts +24 -51
  90. package/dist/components/Select/Select.styles.d.ts +53 -53
  91. package/dist/components/Select/SelectList/SelectList.d.ts +17 -32
  92. package/dist/components/Select/SelectList/SelectList.styles.d.ts +35 -37
  93. package/dist/components/Select/helpers.d.ts +3 -9
  94. package/dist/components/SmartInput/SmartInput.d.ts +16 -28
  95. package/dist/components/SmartInput/helpers.d.ts +4 -8
  96. package/dist/components/Switch/Switch.d.ts +13 -26
  97. package/dist/components/Switch/Switch.styles.d.ts +58 -58
  98. package/dist/components/TextArea/TextArea.d.ts +23 -26
  99. package/dist/components/TextArea/TextArea.styles.d.ts +124 -124
  100. package/dist/components/TextWithInfo/TextWithInfo.d.ts +9 -9
  101. package/dist/components/TextWithInfo/TextWithInfo.styles.d.ts +40 -40
  102. package/dist/components/TextWithTooltip/TextWithTooltip.d.ts +12 -12
  103. package/dist/components/TextWithTooltip/TextWithTooltip.styles.d.ts +10 -10
  104. package/dist/components/ThemedPreloader/ThemedPreloader.d.ts +4 -4
  105. package/dist/components/ThemedPreloader/ThemedPreloader.styles.d.ts +10 -10
  106. package/dist/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.d.ts +1 -1
  107. package/dist/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.styles.d.ts +35 -35
  108. package/dist/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.d.ts +2 -2
  109. package/dist/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.styles.d.ts +5 -5
  110. package/dist/components/Toaster/Toaster.d.ts +11 -16
  111. package/dist/components/Toaster/Toaster.styles.d.ts +41 -41
  112. package/dist/components/Tooltip/Tooltip.d.ts +4 -4
  113. package/dist/components/Tooltip/Tooltip.styles.d.ts +27 -25
  114. package/dist/helpers/data-attributes.d.ts +4 -11
  115. package/dist/helpers/phone.d.ts +8 -28
  116. package/dist/helpers/utils.d.ts +7 -28
  117. package/dist/hooks/use-did-mount-effect.d.ts +1 -4
  118. package/dist/hooks/use-dropdown.d.ts +7 -14
  119. package/dist/hooks/use-is-mounted.d.ts +1 -1
  120. package/dist/hooks/use-on-click-outside.d.ts +4 -25
  121. package/dist/hooks/use-theme.d.ts +5 -10
  122. package/dist/hooks/use-tweak-styles.d.ts +1 -5
  123. package/dist/style.css +90 -205
  124. package/dist/theme.d.ts +55 -51
  125. package/dist/true-react-common-ui-kit.js +16711 -24314
  126. package/dist/true-react-common-ui-kit.js.map +1 -1
  127. package/dist/true-react-common-ui-kit.umd.cjs +39 -35
  128. package/dist/true-react-common-ui-kit.umd.cjs.map +1 -1
  129. package/dist/types.d.ts +23 -77
  130. package/package.json +1 -1
  131. package/src/components/Select/Select.stories.tsx +16 -12
  132. package/src/components/Select/Select.tsx +51 -41
  133. package/src/components/Select/SelectList/SelectList.tsx +17 -22
  134. package/src/components/Select/helpers.ts +14 -6
  135. package/src/components/SmartInput/SmartInput.tsx +130 -127
package/dist/style.css CHANGED
@@ -1,87 +1,65 @@
1
1
  @charset "UTF-8";
2
2
  .react-datepicker__year-read-view--down-arrow,
3
3
  .react-datepicker__month-read-view--down-arrow,
4
- .react-datepicker__month-year-read-view--down-arrow,
5
- .react-datepicker__navigation-icon::before {
4
+ .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
6
5
  border-color: #ccc;
7
6
  border-style: solid;
8
7
  border-width: 3px 3px 0 0;
9
- content: '';
8
+ content: "";
10
9
  display: block;
11
10
  height: 9px;
12
11
  position: absolute;
13
12
  top: 6px;
14
13
  width: 9px;
15
14
  }
16
- .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle,
17
- .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {
15
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
18
16
  margin-left: -4px;
19
17
  position: absolute;
20
18
  width: 0;
21
19
  }
22
- .react-datepicker-popper[data-placement^='top']
23
- .react-datepicker__triangle::before,
24
- .react-datepicker-popper[data-placement^='bottom']
25
- .react-datepicker__triangle::before,
26
- .react-datepicker-popper[data-placement^='top']
27
- .react-datepicker__triangle::after,
28
- .react-datepicker-popper[data-placement^='bottom']
29
- .react-datepicker__triangle::after {
20
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
30
21
  box-sizing: content-box;
31
22
  position: absolute;
32
23
  border: 8px solid transparent;
33
24
  height: 0;
34
25
  width: 1px;
35
- content: '';
26
+ content: "";
36
27
  z-index: -1;
37
28
  border-width: 8px;
38
29
  left: -8px;
39
30
  }
40
- .react-datepicker-popper[data-placement^='top']
41
- .react-datepicker__triangle::before,
42
- .react-datepicker-popper[data-placement^='bottom']
43
- .react-datepicker__triangle::before {
31
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
44
32
  border-bottom-color: #aeaeae;
45
33
  }
46
34
 
47
- .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {
35
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
48
36
  top: 0;
49
37
  margin-top: -8px;
50
38
  }
51
- .react-datepicker-popper[data-placement^='bottom']
52
- .react-datepicker__triangle::before,
53
- .react-datepicker-popper[data-placement^='bottom']
54
- .react-datepicker__triangle::after {
39
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
55
40
  border-top: none;
56
41
  border-bottom-color: #f0f0f0;
57
42
  }
58
- .react-datepicker-popper[data-placement^='bottom']
59
- .react-datepicker__triangle::after {
43
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
60
44
  top: 0;
61
45
  }
62
- .react-datepicker-popper[data-placement^='bottom']
63
- .react-datepicker__triangle::before {
46
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
64
47
  top: -1px;
65
48
  border-bottom-color: #aeaeae;
66
49
  }
67
50
 
68
- .react-datepicker-popper[data-placement^='top'] .react-datepicker__triangle {
51
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
69
52
  bottom: 0;
70
53
  margin-bottom: -8px;
71
54
  }
72
- .react-datepicker-popper[data-placement^='top']
73
- .react-datepicker__triangle::before,
74
- .react-datepicker-popper[data-placement^='top']
75
- .react-datepicker__triangle::after {
55
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
76
56
  border-bottom: none;
77
57
  border-top-color: #fff;
78
58
  }
79
- .react-datepicker-popper[data-placement^='top']
80
- .react-datepicker__triangle::after {
59
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
81
60
  bottom: 0;
82
61
  }
83
- .react-datepicker-popper[data-placement^='top']
84
- .react-datepicker__triangle::before {
62
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
85
63
  bottom: -1px;
86
64
  border-top-color: #aeaeae;
87
65
  }
@@ -94,7 +72,7 @@
94
72
  }
95
73
 
96
74
  .react-datepicker {
97
- font-family: 'Helvetica Neue', helvetica, arial, sans-serif;
75
+ font-family: "Helvetica Neue", helvetica, arial, sans-serif;
98
76
  font-size: 0.8rem;
99
77
  background-color: #fff;
100
78
  color: #000;
@@ -124,29 +102,27 @@
124
102
  .react-datepicker-popper {
125
103
  z-index: 1;
126
104
  }
127
- .react-datepicker-popper[data-placement^='bottom'] {
105
+ .react-datepicker-popper[data-placement^=bottom] {
128
106
  padding-top: 10px;
129
107
  }
130
- .react-datepicker-popper[data-placement='bottom-end']
131
- .react-datepicker__triangle,
132
- .react-datepicker-popper[data-placement='top-end'] .react-datepicker__triangle {
108
+ .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
133
109
  left: auto;
134
110
  right: 50px;
135
111
  }
136
- .react-datepicker-popper[data-placement^='top'] {
112
+ .react-datepicker-popper[data-placement^=top] {
137
113
  padding-bottom: 10px;
138
114
  }
139
- .react-datepicker-popper[data-placement^='right'] {
115
+ .react-datepicker-popper[data-placement^=right] {
140
116
  padding-left: 8px;
141
117
  }
142
- .react-datepicker-popper[data-placement^='right'] .react-datepicker__triangle {
118
+ .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
143
119
  left: auto;
144
120
  right: 42px;
145
121
  }
146
- .react-datepicker-popper[data-placement^='left'] {
122
+ .react-datepicker-popper[data-placement^=left] {
147
123
  padding-right: 8px;
148
124
  }
149
- .react-datepicker-popper[data-placement^='left'] .react-datepicker__triangle {
125
+ .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
150
126
  left: 42px;
151
127
  right: auto;
152
128
  }
@@ -219,9 +195,7 @@
219
195
  .react-datepicker__navigation--next {
220
196
  right: 2px;
221
197
  }
222
- .react-datepicker__navigation--next--with-time:not(
223
- .react-datepicker__navigation--next--with-today-button
224
- ) {
198
+ .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
225
199
  right: 85px;
226
200
  }
227
201
  .react-datepicker__navigation--years {
@@ -302,42 +276,25 @@
302
276
  .react-datepicker__input-time-container .react-datepicker-time__caption {
303
277
  display: inline-block;
304
278
  }
305
- .react-datepicker__input-time-container
306
- .react-datepicker-time__input-container {
279
+ .react-datepicker__input-time-container .react-datepicker-time__input-container {
307
280
  display: inline-block;
308
281
  }
309
- .react-datepicker__input-time-container
310
- .react-datepicker-time__input-container
311
- .react-datepicker-time__input {
282
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
312
283
  display: inline-block;
313
284
  margin-left: 10px;
314
285
  }
315
- .react-datepicker__input-time-container
316
- .react-datepicker-time__input-container
317
- .react-datepicker-time__input
318
- input {
286
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
319
287
  width: auto;
320
288
  }
321
- .react-datepicker__input-time-container
322
- .react-datepicker-time__input-container
323
- .react-datepicker-time__input
324
- input[type='time']::-webkit-inner-spin-button,
325
- .react-datepicker__input-time-container
326
- .react-datepicker-time__input-container
327
- .react-datepicker-time__input
328
- input[type='time']::-webkit-outer-spin-button {
289
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
290
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
329
291
  -webkit-appearance: none;
330
292
  margin: 0;
331
293
  }
332
- .react-datepicker__input-time-container
333
- .react-datepicker-time__input-container
334
- .react-datepicker-time__input
335
- input[type='time'] {
294
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
336
295
  -moz-appearance: textfield;
337
296
  }
338
- .react-datepicker__input-time-container
339
- .react-datepicker-time__input-container
340
- .react-datepicker-time__delimiter {
297
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
341
298
  margin-left: 5px;
342
299
  display: inline-block;
343
300
  }
@@ -360,19 +317,14 @@
360
317
  background: white;
361
318
  border-bottom-right-radius: 0.3rem;
362
319
  }
363
- .react-datepicker__time-container
364
- .react-datepicker__time
365
- .react-datepicker__time-box {
320
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
366
321
  width: 85px;
367
322
  overflow-x: hidden;
368
323
  margin: 0 auto;
369
324
  text-align: center;
370
325
  border-bottom-right-radius: 0.3rem;
371
326
  }
372
- .react-datepicker__time-container
373
- .react-datepicker__time
374
- .react-datepicker__time-box
375
- ul.react-datepicker__time-list {
327
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
376
328
  list-style: none;
377
329
  margin: 0;
378
330
  height: calc(195px + (1.7rem / 2));
@@ -382,51 +334,27 @@
382
334
  width: 100%;
383
335
  box-sizing: content-box;
384
336
  }
385
- .react-datepicker__time-container
386
- .react-datepicker__time
387
- .react-datepicker__time-box
388
- ul.react-datepicker__time-list
389
- li.react-datepicker__time-list-item {
337
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
390
338
  height: 30px;
391
339
  padding: 5px 10px;
392
340
  white-space: nowrap;
393
341
  }
394
- .react-datepicker__time-container
395
- .react-datepicker__time
396
- .react-datepicker__time-box
397
- ul.react-datepicker__time-list
398
- li.react-datepicker__time-list-item:hover {
342
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
399
343
  cursor: pointer;
400
344
  background-color: #f0f0f0;
401
345
  }
402
- .react-datepicker__time-container
403
- .react-datepicker__time
404
- .react-datepicker__time-box
405
- ul.react-datepicker__time-list
406
- li.react-datepicker__time-list-item--selected {
346
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
407
347
  background-color: #216ba5;
408
348
  color: white;
409
349
  font-weight: bold;
410
350
  }
411
- .react-datepicker__time-container
412
- .react-datepicker__time
413
- .react-datepicker__time-box
414
- ul.react-datepicker__time-list
415
- li.react-datepicker__time-list-item--selected:hover {
351
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
416
352
  background-color: #216ba5;
417
353
  }
418
- .react-datepicker__time-container
419
- .react-datepicker__time
420
- .react-datepicker__time-box
421
- ul.react-datepicker__time-list
422
- li.react-datepicker__time-list-item--disabled {
354
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
423
355
  color: #ccc;
424
356
  }
425
- .react-datepicker__time-container
426
- .react-datepicker__time
427
- .react-datepicker__time-box
428
- ul.react-datepicker__time-list
429
- li.react-datepicker__time-list-item--disabled:hover {
357
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
430
358
  cursor: default;
431
359
  background-color: transparent;
432
360
  }
@@ -467,9 +395,7 @@
467
395
  margin: 0.166rem;
468
396
  }
469
397
 
470
- .react-datepicker__month--selected,
471
- .react-datepicker__month--in-selecting-range,
472
- .react-datepicker__month--in-range,
398
+ .react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,
473
399
  .react-datepicker__quarter--selected,
474
400
  .react-datepicker__quarter--in-selecting-range,
475
401
  .react-datepicker__quarter--in-range {
@@ -477,9 +403,7 @@
477
403
  background-color: #216ba5;
478
404
  color: #fff;
479
405
  }
480
- .react-datepicker__month--selected:hover,
481
- .react-datepicker__month--in-selecting-range:hover,
482
- .react-datepicker__month--in-range:hover,
406
+ .react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
483
407
  .react-datepicker__quarter--selected:hover,
484
408
  .react-datepicker__quarter--in-selecting-range:hover,
485
409
  .react-datepicker__quarter--in-range:hover {
@@ -541,9 +465,7 @@
541
465
  .react-datepicker__year-text--highlighted-custom-2 {
542
466
  color: green;
543
467
  }
544
- .react-datepicker__day--selected,
545
- .react-datepicker__day--in-selecting-range,
546
- .react-datepicker__day--in-range,
468
+ .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
547
469
  .react-datepicker__month-text--selected,
548
470
  .react-datepicker__month-text--in-selecting-range,
549
471
  .react-datepicker__month-text--in-range,
@@ -557,9 +479,7 @@
557
479
  background-color: #216ba5;
558
480
  color: #fff;
559
481
  }
560
- .react-datepicker__day--selected:hover,
561
- .react-datepicker__day--in-selecting-range:hover,
562
- .react-datepicker__day--in-range:hover,
482
+ .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
563
483
  .react-datepicker__month-text--selected:hover,
564
484
  .react-datepicker__month-text--in-selecting-range:hover,
565
485
  .react-datepicker__month-text--in-range:hover,
@@ -585,60 +505,40 @@
585
505
  .react-datepicker__year-text--keyboard-selected:hover {
586
506
  background-color: #1d5d90;
587
507
  }
588
- .react-datepicker__day--in-selecting-range:not(
589
- .react-datepicker__day--in-range,
590
- .react-datepicker__month-text--in-range,
591
- .react-datepicker__quarter-text--in-range,
592
- .react-datepicker__year-text--in-range
593
- ),
594
- .react-datepicker__month-text--in-selecting-range:not(
595
- .react-datepicker__day--in-range,
596
- .react-datepicker__month-text--in-range,
597
- .react-datepicker__quarter-text--in-range,
598
- .react-datepicker__year-text--in-range
599
- ),
600
- .react-datepicker__quarter-text--in-selecting-range:not(
601
- .react-datepicker__day--in-range,
602
- .react-datepicker__month-text--in-range,
603
- .react-datepicker__quarter-text--in-range,
604
- .react-datepicker__year-text--in-range
605
- ),
606
- .react-datepicker__year-text--in-selecting-range:not(
607
- .react-datepicker__day--in-range,
608
- .react-datepicker__month-text--in-range,
609
- .react-datepicker__quarter-text--in-range,
610
- .react-datepicker__year-text--in-range
611
- ) {
508
+ .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
509
+ .react-datepicker__month-text--in-range,
510
+ .react-datepicker__quarter-text--in-range,
511
+ .react-datepicker__year-text--in-range),
512
+ .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
513
+ .react-datepicker__month-text--in-range,
514
+ .react-datepicker__quarter-text--in-range,
515
+ .react-datepicker__year-text--in-range),
516
+ .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
517
+ .react-datepicker__month-text--in-range,
518
+ .react-datepicker__quarter-text--in-range,
519
+ .react-datepicker__year-text--in-range),
520
+ .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
521
+ .react-datepicker__month-text--in-range,
522
+ .react-datepicker__quarter-text--in-range,
523
+ .react-datepicker__year-text--in-range) {
612
524
  background-color: rgba(33, 107, 165, 0.5);
613
525
  }
614
- .react-datepicker__month--selecting-range
615
- .react-datepicker__day--in-range:not(
616
- .react-datepicker__day--in-selecting-range,
617
- .react-datepicker__month-text--in-selecting-range,
618
- .react-datepicker__quarter-text--in-selecting-range,
619
- .react-datepicker__year-text--in-selecting-range
620
- ),
621
- .react-datepicker__month--selecting-range
622
- .react-datepicker__month-text--in-range:not(
623
- .react-datepicker__day--in-selecting-range,
624
- .react-datepicker__month-text--in-selecting-range,
625
- .react-datepicker__quarter-text--in-selecting-range,
626
- .react-datepicker__year-text--in-selecting-range
627
- ),
628
- .react-datepicker__month--selecting-range
629
- .react-datepicker__quarter-text--in-range:not(
630
- .react-datepicker__day--in-selecting-range,
631
- .react-datepicker__month-text--in-selecting-range,
632
- .react-datepicker__quarter-text--in-selecting-range,
633
- .react-datepicker__year-text--in-selecting-range
634
- ),
635
- .react-datepicker__month--selecting-range
636
- .react-datepicker__year-text--in-range:not(
637
- .react-datepicker__day--in-selecting-range,
638
- .react-datepicker__month-text--in-selecting-range,
639
- .react-datepicker__quarter-text--in-selecting-range,
640
- .react-datepicker__year-text--in-selecting-range
641
- ) {
526
+ .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
527
+ .react-datepicker__month-text--in-selecting-range,
528
+ .react-datepicker__quarter-text--in-selecting-range,
529
+ .react-datepicker__year-text--in-selecting-range),
530
+ .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
531
+ .react-datepicker__month-text--in-selecting-range,
532
+ .react-datepicker__quarter-text--in-selecting-range,
533
+ .react-datepicker__year-text--in-selecting-range),
534
+ .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
535
+ .react-datepicker__month-text--in-selecting-range,
536
+ .react-datepicker__quarter-text--in-selecting-range,
537
+ .react-datepicker__year-text--in-selecting-range),
538
+ .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
539
+ .react-datepicker__month-text--in-selecting-range,
540
+ .react-datepicker__quarter-text--in-selecting-range,
541
+ .react-datepicker__year-text--in-selecting-range) {
642
542
  background-color: #f0f0f0;
643
543
  color: #000;
644
544
  }
@@ -656,10 +556,7 @@
656
556
  background-color: transparent;
657
557
  }
658
558
 
659
- .react-datepicker__month-text.react-datepicker__month--selected:hover,
660
- .react-datepicker__month-text.react-datepicker__month--in-range:hover,
661
- .react-datepicker__month-text.react-datepicker__quarter--selected:hover,
662
- .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
559
+ .react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
663
560
  .react-datepicker__quarter-text.react-datepicker__month--selected:hover,
664
561
  .react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
665
562
  .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
@@ -689,18 +586,12 @@
689
586
  .react-datepicker__month-year-read-view:hover {
690
587
  cursor: pointer;
691
588
  }
692
- .react-datepicker__year-read-view:hover
693
- .react-datepicker__year-read-view--down-arrow,
694
- .react-datepicker__year-read-view:hover
695
- .react-datepicker__month-read-view--down-arrow,
696
- .react-datepicker__month-read-view:hover
697
- .react-datepicker__year-read-view--down-arrow,
698
- .react-datepicker__month-read-view:hover
699
- .react-datepicker__month-read-view--down-arrow,
700
- .react-datepicker__month-year-read-view:hover
701
- .react-datepicker__year-read-view--down-arrow,
702
- .react-datepicker__month-year-read-view:hover
703
- .react-datepicker__month-read-view--down-arrow {
589
+ .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
590
+ .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
591
+ .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
592
+ .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
593
+ .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
594
+ .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
704
595
  border-top-color: #b3b3b3;
705
596
  }
706
597
  .react-datepicker__year-read-view--down-arrow,
@@ -766,20 +657,14 @@
766
657
  .react-datepicker__month-year-option:hover {
767
658
  background-color: #ccc;
768
659
  }
769
- .react-datepicker__year-option:hover
770
- .react-datepicker__navigation--years-upcoming,
771
- .react-datepicker__month-option:hover
772
- .react-datepicker__navigation--years-upcoming,
773
- .react-datepicker__month-year-option:hover
774
- .react-datepicker__navigation--years-upcoming {
660
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
661
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
662
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
775
663
  border-bottom-color: #b3b3b3;
776
664
  }
777
- .react-datepicker__year-option:hover
778
- .react-datepicker__navigation--years-previous,
779
- .react-datepicker__month-option:hover
780
- .react-datepicker__navigation--years-previous,
781
- .react-datepicker__month-year-option:hover
782
- .react-datepicker__navigation--years-previous {
665
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
666
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
667
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
783
668
  border-top-color: #b3b3b3;
784
669
  }
785
670
  .react-datepicker__year-option--selected,
@@ -815,7 +700,7 @@
815
700
  text-align: center;
816
701
  display: table-cell;
817
702
  vertical-align: middle;
818
- content: '×';
703
+ content: "×";
819
704
  }
820
705
 
821
706
  .react-datepicker__today-button {
@@ -848,8 +733,8 @@
848
733
  }
849
734
  @media (max-width: 400px), (max-height: 550px) {
850
735
  .react-datepicker__portal .react-datepicker__day-name,
851
- .react-datepicker__portal .react-datepicker__day,
852
- .react-datepicker__portal .react-datepicker__time-name {
736
+ .react-datepicker__portal .react-datepicker__day,
737
+ .react-datepicker__portal .react-datepicker__time-name {
853
738
  width: 2rem;
854
739
  line-height: 2rem;
855
740
  }
package/dist/theme.d.ts CHANGED
@@ -1,63 +1,67 @@
1
1
  import { UiKitHelpers, UiKitTheme } from './types';
2
2
  export declare const colors: {
3
- readonly FONT_MAIN: '#222a37';
4
- readonly FONT_MEDIUM: '#505f79';
5
- readonly FONT_LABEL: '#7a869a';
6
- readonly FONT_DISABLED: '#95a0b3';
7
- readonly GREY_ACTIVE: '#95a0b3';
8
- readonly BORDER_MAIN: '#d0d6e1';
9
- readonly BORDER_LIGHT: '#dde3ed';
10
- readonly GREY_HOVER: '#dde3ed';
11
- readonly GREY_FOCUS: '#eceff5';
12
- readonly GREY_DISABLED: '#eceff5';
13
- readonly GREY_BACKGROUND: '#f6f8fc';
14
- readonly CLASSIC_WHITE: '#ffffff';
15
- readonly RED_ACTIVE: '#912e34';
16
- readonly RED_HOVER: '#c13e45';
17
- readonly RED_WARNING: '#f14d56';
18
- readonly RED_WARNING_LIGHT: '#ff6261';
19
- readonly RED_BACKGROUND: '#feedee';
20
- readonly ORANGE_BACKGROUND: '#fff4e9';
21
- readonly GREEN_BACKGROUND: '#f4f9e6';
22
- readonly BLUE_BACKGROUND: '#ebf1ff';
23
- readonly GREEN_FOCUS: '#97ba1e';
24
- readonly ORANGE_FOCUS: '#ff991f';
3
+ readonly FONT_MAIN: "#222a37";
4
+ readonly FONT_MEDIUM: "#505f79";
5
+ readonly FONT_LABEL: "#7a869a";
6
+ readonly FONT_DISABLED: "#95a0b3";
7
+ readonly GREY_ACTIVE: "#95a0b3";
8
+ readonly BORDER_MAIN: "#d0d6e1";
9
+ readonly BORDER_LIGHT: "#dde3ed";
10
+ readonly GREY_HOVER: "#dde3ed";
11
+ readonly GREY_FOCUS: "#eceff5";
12
+ readonly GREY_DISABLED: "#eceff5";
13
+ readonly GREY_BACKGROUND: "#f6f8fc";
14
+ readonly CLASSIC_WHITE: "#ffffff";
15
+ readonly RED_ACTIVE: "#912e34";
16
+ readonly RED_HOVER: "#c13e45";
17
+ readonly RED_WARNING: "#f14d56";
18
+ readonly RED_WARNING_LIGHT: "#ff6261";
19
+ readonly RED_BACKGROUND: "#feedee";
20
+ readonly ORANGE_BACKGROUND: "#fff4e9";
21
+ readonly GREEN_BACKGROUND: "#f4f9e6";
22
+ readonly BLUE_BACKGROUND: "#ebf1ff";
23
+ readonly GREEN_FOCUS: "#97ba1e";
24
+ readonly ORANGE_FOCUS: "#ff991f";
25
25
  };
26
26
  export declare const dimensions: {
27
- readonly BORDER_RADIUS_LARGE: 16;
28
- readonly BORDER_RADIUS_MEDIUM: 12;
29
- readonly BORDER_RADIUS_STD: 8;
30
- readonly BORDER_RADIUS_SMALL: 6;
31
- readonly BORDER_RADIUS_EXTRA_SMALL: 4;
32
- readonly CONTROL_HEIGHT: 48;
27
+ readonly BORDER_RADIUS_LARGE: 16;
28
+ readonly BORDER_RADIUS_MEDIUM: 12;
29
+ readonly BORDER_RADIUS_STD: 8;
30
+ readonly BORDER_RADIUS_SMALL: 6;
31
+ readonly BORDER_RADIUS_EXTRA_SMALL: 4;
32
+ readonly CONTROL_HEIGHT: 48;
33
33
  };
34
34
  export declare const helpers: UiKitHelpers;
35
35
  export declare const animations: {
36
- slideUp: {
37
- 'slide-up-enter': {
38
- opacity: number;
39
- transform: string;
36
+ slideUp: {
37
+ 'slide-up-enter': {
38
+ opacity: number;
39
+ transform: string;
40
+ };
41
+ 'slide-up-enter-active': {
42
+ opacity: number;
43
+ transform: string;
44
+ transition: ({ timeout }: {
45
+ timeout: number;
46
+ }) => string;
47
+ transitionProperty: string;
48
+ };
49
+ 'slide-up-exit-active': {
50
+ opacity: number;
51
+ transform: string;
52
+ };
53
+ 'slide-up-exit': {
54
+ opacity: number;
55
+ transform: string;
56
+ transition: ({ timeout }: {
57
+ timeout: number;
58
+ }) => string;
59
+ transitionProperty: string;
60
+ };
40
61
  };
41
- 'slide-up-enter-active': {
42
- opacity: number;
43
- transform: string;
44
- transition: ({ timeout }: { timeout: number }) => string;
45
- transitionProperty: string;
46
- };
47
- 'slide-up-exit-active': {
48
- opacity: number;
49
- transform: string;
50
- };
51
- 'slide-up-exit': {
52
- opacity: number;
53
- transform: string;
54
- transition: ({ timeout }: { timeout: number }) => string;
55
- transitionProperty: string;
56
- };
57
- };
58
62
  };
59
63
  export interface CommonUiKitTheme extends UiKitTheme {
60
- colors: typeof colors;
61
- dimensions: typeof dimensions;
64
+ colors: typeof colors;
65
+ dimensions: typeof dimensions;
62
66
  }
63
67
  export declare const commonTheme: CommonUiKitTheme;