@true-engineering/true-react-common-ui-kit 1.12.1 → 2.0.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 (265) hide show
  1. package/LICENSE +201 -201
  2. package/dist/components/DateInput/DateInput.d.ts +8 -8
  3. package/dist/components/DateInput/DateInput.styles.d.ts +2 -2
  4. package/dist/components/DateInput/constants.d.ts +2 -0
  5. package/dist/components/DateInput/index.d.ts +1 -0
  6. package/dist/components/DatePicker/DatePicker.d.ts +16 -24
  7. package/dist/components/DatePicker/DatePicker.styles.d.ts +12 -24
  8. package/dist/components/DatePicker/DatePickerHeader/DatePickerHeader.d.ts +3 -9
  9. package/dist/components/DatePicker/DatePickerHeader/index.d.ts +1 -0
  10. package/dist/components/DatePicker/constants.d.ts +1 -0
  11. package/dist/components/DatePicker/helpers.d.ts +3 -0
  12. package/dist/components/DatePicker/index.d.ts +1 -2
  13. package/dist/components/DatePicker/types.d.ts +4 -0
  14. package/dist/components/FiltersPane/FilterWithDates/FilterWithDates.d.ts +1 -1
  15. package/dist/components/Flag/augment.d.ts +1 -1
  16. package/dist/components/Icon/complexIcons/augment.d.ts +1 -1
  17. package/dist/helpers/utils.d.ts +2 -1
  18. package/dist/style.css +125 -50
  19. package/dist/true-react-common-ui-kit.js +389 -425
  20. package/dist/true-react-common-ui-kit.js.map +1 -1
  21. package/dist/true-react-common-ui-kit.umd.cjs +389 -425
  22. package/dist/true-react-common-ui-kit.umd.cjs.map +1 -1
  23. package/dist/types.d.ts +1 -1
  24. package/dist/vite-env.d.ts +1 -1
  25. package/package.json +91 -91
  26. package/src/components/AccountInfo/AccountInfo.stories.tsx +35 -35
  27. package/src/components/AccountInfo/AccountInfo.styles.ts +55 -55
  28. package/src/components/AccountInfo/AccountInfo.tsx +106 -106
  29. package/src/components/AccountInfo/index.ts +2 -2
  30. package/src/components/AddButton/AddButton.stories.tsx +21 -21
  31. package/src/components/AddButton/AddButton.styles.ts +34 -34
  32. package/src/components/AddButton/AddButton.tsx +49 -49
  33. package/src/components/AddButton/index.ts +2 -2
  34. package/src/components/Button/Button.stories.tsx +61 -61
  35. package/src/components/Button/Button.styles.ts +196 -196
  36. package/src/components/Button/Button.tsx +207 -207
  37. package/src/components/Button/index.ts +2 -2
  38. package/src/components/Checkbox/Checkbox.stories.tsx +35 -35
  39. package/src/components/Checkbox/Checkbox.styles.ts +62 -62
  40. package/src/components/Checkbox/Checkbox.tsx +106 -106
  41. package/src/components/Checkbox/index.ts +2 -2
  42. package/src/components/CloseButton/CloseButton.styles.ts +34 -34
  43. package/src/components/CloseButton/CloseButton.tsx +37 -37
  44. package/src/components/CloseButton/index.ts +2 -2
  45. package/src/components/Colors/Colors.stories.tsx +7 -7
  46. package/src/components/Colors/Colors.styles.ts +38 -38
  47. package/src/components/Colors/Colors.tsx +34 -34
  48. package/src/components/Colors/index.ts +2 -2
  49. package/src/components/CssBaseline/CssBaseline.styles.ts +15 -15
  50. package/src/components/CssBaseline/CssBaseline.tsx +17 -17
  51. package/src/components/CssBaseline/index.ts +2 -2
  52. package/src/components/DateInput/DateInput.stories.tsx +67 -63
  53. package/src/components/DateInput/DateInput.styles.ts +14 -14
  54. package/src/components/DateInput/DateInput.tsx +101 -60
  55. package/src/components/DateInput/constants.ts +2 -0
  56. package/src/components/DateInput/index.ts +3 -2
  57. package/src/components/DatePicker/DatePicker.stories.tsx +90 -96
  58. package/src/components/DatePicker/DatePicker.styles.ts +44 -54
  59. package/src/components/DatePicker/DatePicker.tsx +354 -358
  60. package/src/components/DatePicker/DatePickerHeader/DatePickerHeader.styles.ts +84 -84
  61. package/src/components/DatePicker/DatePickerHeader/DatePickerHeader.tsx +80 -94
  62. package/src/components/DatePicker/DatePickerHeader/index.ts +2 -1
  63. package/src/components/DatePicker/constants.ts +1 -0
  64. package/src/components/DatePicker/helpers.ts +24 -0
  65. package/src/components/DatePicker/index.ts +3 -4
  66. package/src/components/DatePicker/types.ts +40 -0
  67. package/src/components/Description/Description.stories.tsx +29 -29
  68. package/src/components/Description/Description.styles.ts +31 -31
  69. package/src/components/Description/Description.tsx +69 -69
  70. package/src/components/Description/index.ts +2 -2
  71. package/src/components/FiltersPane/FilterInterval/FilterInterval.styles.ts +64 -64
  72. package/src/components/FiltersPane/FilterInterval/FilterInterval.tsx +162 -162
  73. package/src/components/FiltersPane/FilterInterval/index.ts +1 -1
  74. package/src/components/FiltersPane/FilterMultiSelect/FilterMultiSelect.tsx +14 -14
  75. package/src/components/FiltersPane/FilterMultiSelect/index.ts +1 -1
  76. package/src/components/FiltersPane/FilterSelect/FilterSelect.styles.ts +144 -144
  77. package/src/components/FiltersPane/FilterSelect/FilterSelect.tsx +397 -397
  78. package/src/components/FiltersPane/FilterSelect/index.ts +1 -1
  79. package/src/components/FiltersPane/FilterSelect/locales.ts +37 -37
  80. package/src/components/FiltersPane/FilterValueView/FilterValueView.styles.tsx +15 -15
  81. package/src/components/FiltersPane/FilterValueView/FilterValueView.tsx +186 -186
  82. package/src/components/FiltersPane/FilterValueView/index.tsx +1 -1
  83. package/src/components/FiltersPane/FilterWithDates/FilterWithDates.styles.ts +60 -60
  84. package/src/components/FiltersPane/FilterWithDates/FilterWithDates.tsx +210 -222
  85. package/src/components/FiltersPane/FilterWithDates/index.ts +1 -1
  86. package/src/components/FiltersPane/FilterWithPeriod/FilterWithPeriod.styles.ts +17 -17
  87. package/src/components/FiltersPane/FilterWithPeriod/FilterWithPeriod.tsx +231 -231
  88. package/src/components/FiltersPane/FilterWithPeriod/index.ts +1 -1
  89. package/src/components/FiltersPane/FilterWrapper/FilterWrapper.styles.ts +110 -110
  90. package/src/components/FiltersPane/FilterWrapper/FilterWrapper.tsx +360 -360
  91. package/src/components/FiltersPane/FilterWrapper/index.ts +1 -1
  92. package/src/components/FiltersPane/FiltersPane.stories.tsx +308 -308
  93. package/src/components/FiltersPane/FiltersPane.styles.ts +71 -71
  94. package/src/components/FiltersPane/FiltersPane.tsx +193 -193
  95. package/src/components/FiltersPane/FiltersPaneSearch/FiltersPaneSearch.styles.ts +109 -109
  96. package/src/components/FiltersPane/FiltersPaneSearch/FiltersPaneSearch.tsx +175 -175
  97. package/src/components/FiltersPane/FiltersPaneSearch/index.ts +1 -1
  98. package/src/components/FiltersPane/index.ts +20 -20
  99. package/src/components/FiltersPane/locales.ts +107 -107
  100. package/src/components/FiltersPane/types.ts +126 -126
  101. package/src/components/Flag/Flag.stories.tsx +29 -29
  102. package/src/components/Flag/Flag.styles.ts +18 -18
  103. package/src/components/Flag/Flag.tsx +28 -28
  104. package/src/components/Flag/augment.d.ts +1 -1
  105. package/src/components/Flag/index.ts +2 -2
  106. package/src/components/FlexibleTable/FlexibleTable.stories.tsx +86 -86
  107. package/src/components/FlexibleTable/FlexibleTable.styles.ts +131 -131
  108. package/src/components/FlexibleTable/FlexibleTable.tsx +243 -243
  109. package/src/components/FlexibleTable/TableRow.tsx +171 -171
  110. package/src/components/FlexibleTable/TableValue.tsx +81 -81
  111. package/src/components/FlexibleTable/fixture-test.ts +254 -254
  112. package/src/components/FlexibleTable/index.ts +3 -3
  113. package/src/components/FlexibleTable/types.ts +58 -58
  114. package/src/components/Icon/ComplexIconBoilerplate.tsx +17 -17
  115. package/src/components/Icon/Icon.stories.tsx +88 -88
  116. package/src/components/Icon/Icon.styles.ts +10 -10
  117. package/src/components/Icon/Icon.tsx +34 -34
  118. package/src/components/Icon/IconBoilerplate.tsx +42 -42
  119. package/src/components/Icon/complexIcons/augment.d.ts +1 -1
  120. package/src/components/Icon/complexIcons/avatarGreen.svg +57 -57
  121. package/src/components/Icon/complexIcons/icons.ts +7 -7
  122. package/src/components/Icon/complexIcons/index.ts +1 -1
  123. package/src/components/Icon/icons/icons.ts +838 -838
  124. package/src/components/Icon/icons/index.ts +1 -1
  125. package/src/components/Icon/index.ts +4 -4
  126. package/src/components/IncrementInput/ChangeButton.tsx +34 -34
  127. package/src/components/IncrementInput/IncrementInput.stories.tsx +34 -34
  128. package/src/components/IncrementInput/IncrementInput.styles.ts +77 -77
  129. package/src/components/IncrementInput/IncrementInput.tsx +95 -95
  130. package/src/components/IncrementInput/index.ts +2 -2
  131. package/src/components/Input/Input.stories.tsx +92 -92
  132. package/src/components/Input/Input.styles.ts +307 -307
  133. package/src/components/Input/Input.tsx +321 -321
  134. package/src/components/Input/index.ts +2 -2
  135. package/src/components/List/List.stories.tsx +62 -62
  136. package/src/components/List/List.styles.ts +52 -52
  137. package/src/components/List/List.tsx +82 -82
  138. package/src/components/List/index.ts +2 -2
  139. package/src/components/Modal/Modal.stories.tsx +113 -113
  140. package/src/components/Modal/Modal.styles.ts +308 -308
  141. package/src/components/Modal/Modal.tsx +210 -210
  142. package/src/components/Modal/index.ts +2 -2
  143. package/src/components/MoreMenu/MoreMenu.stories.tsx +46 -46
  144. package/src/components/MoreMenu/MoreMenu.styles.ts +70 -70
  145. package/src/components/MoreMenu/MoreMenu.tsx +102 -102
  146. package/src/components/MoreMenu/index.ts +2 -2
  147. package/src/components/MultiSelect/MultiSelect.stories.tsx +46 -46
  148. package/src/components/MultiSelect/MultiSelect.styles.ts +55 -55
  149. package/src/components/MultiSelect/MultiSelect.tsx +98 -98
  150. package/src/components/MultiSelect/MultiSelectInput/MultiSelectInput.styles.ts +73 -73
  151. package/src/components/MultiSelect/MultiSelectInput/MultiSelectInput.tsx +62 -62
  152. package/src/components/MultiSelect/MultiSelectInput/index.ts +1 -1
  153. package/src/components/MultiSelect/index.ts +3 -3
  154. package/src/components/MultiSelectList/MultiSelectList.styles.ts +125 -125
  155. package/src/components/MultiSelectList/MultiSelectList.tsx +519 -519
  156. package/src/components/MultiSelectList/index.ts +2 -2
  157. package/src/components/MultiSelectList/locales.ts +37 -37
  158. package/src/components/Notification/Notification.stories.tsx +51 -51
  159. package/src/components/Notification/Notification.styles.ts +50 -50
  160. package/src/components/Notification/Notification.tsx +84 -84
  161. package/src/components/Notification/index.ts +2 -2
  162. package/src/components/NumberInput/NumberInput.stories.tsx +36 -36
  163. package/src/components/NumberInput/NumberInput.tsx +154 -154
  164. package/src/components/NumberInput/helpers.ts +87 -87
  165. package/src/components/NumberInput/index.ts +1 -1
  166. package/src/components/PhoneInput/PhoneInput.stories.tsx +71 -71
  167. package/src/components/PhoneInput/PhoneInput.styles.ts +84 -84
  168. package/src/components/PhoneInput/PhoneInput.tsx +223 -223
  169. package/src/components/PhoneInput/PhoneInputCountryList/PhoneInputCountryList.stories.tsx +21 -21
  170. package/src/components/PhoneInput/PhoneInputCountryList/PhoneInputCountryList.styles.ts +100 -100
  171. package/src/components/PhoneInput/PhoneInputCountryList/PhoneInputCountryList.tsx +171 -171
  172. package/src/components/PhoneInput/PhoneInputCountryList/index.ts +2 -2
  173. package/src/components/PhoneInput/index.ts +6 -6
  174. package/src/components/PhoneInput/phone-info.ts +2167 -2167
  175. package/src/components/PhoneInput/types.ts +16 -16
  176. package/src/components/RadioButton/RadioButton.stories.tsx +46 -46
  177. package/src/components/RadioButton/RadioButton.styles.ts +37 -37
  178. package/src/components/RadioButton/RadioButton.tsx +56 -56
  179. package/src/components/RadioButton/index.ts +2 -2
  180. package/src/components/ScrollIntoViewIfNeeded/ScrollIntoViewIfNeeded.ts +66 -66
  181. package/src/components/ScrollIntoViewIfNeeded/index.ts +1 -1
  182. package/src/components/SearchInput/SearchInput.stories.tsx +24 -24
  183. package/src/components/SearchInput/SearchInput.styles.ts +50 -50
  184. package/src/components/SearchInput/SearchInput.tsx +63 -63
  185. package/src/components/SearchInput/index.ts +2 -2
  186. package/src/components/Select/MultiSelect.stories.tsx +263 -263
  187. package/src/components/Select/Select.stories.tsx +258 -258
  188. package/src/components/Select/Select.styles.ts +96 -96
  189. package/src/components/Select/Select.tsx +630 -630
  190. package/src/components/Select/SelectList/SelectList.styles.ts +72 -72
  191. package/src/components/Select/SelectList/SelectList.tsx +165 -165
  192. package/src/components/Select/SelectList/index.ts +1 -1
  193. package/src/components/Select/SelectListItem/SelectListItem.styles.ts +14 -14
  194. package/src/components/Select/SelectListItem/SelectListItem.tsx +73 -73
  195. package/src/components/Select/constants.ts +2 -2
  196. package/src/components/Select/helpers.ts +29 -29
  197. package/src/components/Select/index.ts +4 -4
  198. package/src/components/Select/types.ts +1 -1
  199. package/src/components/SmartInput/SmartInput.stories.tsx +63 -63
  200. package/src/components/SmartInput/SmartInput.tsx +180 -180
  201. package/src/components/SmartInput/helpers.ts +85 -85
  202. package/src/components/SmartInput/index.ts +1 -1
  203. package/src/components/Switch/Switch.stories.tsx +40 -40
  204. package/src/components/Switch/Switch.styles.ts +75 -75
  205. package/src/components/Switch/Switch.tsx +89 -89
  206. package/src/components/Switch/index.ts +2 -2
  207. package/src/components/TextArea/TextArea.stories.tsx +35 -35
  208. package/src/components/TextArea/TextArea.styles.ts +153 -153
  209. package/src/components/TextArea/TextArea.tsx +178 -178
  210. package/src/components/TextArea/index.ts +2 -2
  211. package/src/components/TextWithInfo/TextWithInfo.stories.tsx +53 -53
  212. package/src/components/TextWithInfo/TextWithInfo.styles.ts +60 -60
  213. package/src/components/TextWithInfo/TextWithInfo.tsx +67 -67
  214. package/src/components/TextWithInfo/index.ts +2 -2
  215. package/src/components/TextWithTooltip/TextWithTooltip.stories.tsx +58 -58
  216. package/src/components/TextWithTooltip/TextWithTooltip.styles.ts +19 -19
  217. package/src/components/TextWithTooltip/TextWithTooltip.tsx +163 -163
  218. package/src/components/TextWithTooltip/index.ts +2 -2
  219. package/src/components/ThemedPreloader/ThemedPreloader.stories.tsx +41 -41
  220. package/src/components/ThemedPreloader/ThemedPreloader.styles.ts +21 -21
  221. package/src/components/ThemedPreloader/ThemedPreloader.tsx +56 -56
  222. package/src/components/ThemedPreloader/components/DefaultPreloader/DefaultPreloader.tsx +34 -34
  223. package/src/components/ThemedPreloader/components/DefaultPreloader/index.ts +1 -1
  224. package/src/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.styles.ts +54 -54
  225. package/src/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.tsx +18 -18
  226. package/src/components/ThemedPreloader/components/DotsPreloader/index.ts +2 -2
  227. package/src/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.styles.ts +11 -11
  228. package/src/components/ThemedPreloader/components/SvgPreloader/SvgPreloader.tsx +32 -32
  229. package/src/components/ThemedPreloader/components/SvgPreloader/index.ts +2 -2
  230. package/src/components/ThemedPreloader/components/index.ts +2 -2
  231. package/src/components/ThemedPreloader/index.ts +2 -2
  232. package/src/components/Toaster/Toaster.stories.tsx +34 -34
  233. package/src/components/Toaster/Toaster.styles.ts +59 -59
  234. package/src/components/Toaster/Toaster.tsx +113 -113
  235. package/src/components/Toaster/index.ts +2 -2
  236. package/src/components/Tooltip/Tooltip.stories.tsx +21 -21
  237. package/src/components/Tooltip/Tooltip.styles.ts +45 -45
  238. package/src/components/Tooltip/Tooltip.tsx +40 -40
  239. package/src/components/Tooltip/index.ts +3 -3
  240. package/src/components/Tooltip/types.ts +1 -1
  241. package/src/components/index.ts +36 -36
  242. package/src/helpers/colors.ts +2 -2
  243. package/src/helpers/dateHelpers/date-helpers.ts +9 -9
  244. package/src/helpers/index.ts +4 -4
  245. package/src/helpers/phone.ts +106 -106
  246. package/src/helpers/popper-helpers.ts +17 -17
  247. package/src/helpers/snippets.tsx +5 -5
  248. package/src/helpers/utils.ts +261 -250
  249. package/src/hooks/index.ts +6 -6
  250. package/src/hooks/use-did-mount-effect.ts +21 -21
  251. package/src/hooks/use-dropdown.ts +85 -85
  252. package/src/hooks/use-is-mounted.ts +15 -15
  253. package/src/hooks/use-on-click-outside.ts +92 -92
  254. package/src/hooks/use-theme.ts +36 -36
  255. package/src/hooks/use-tweak-styles.ts +14 -14
  256. package/src/index.ts +6 -6
  257. package/src/theme.ts +155 -155
  258. package/src/types.ts +105 -106
  259. package/src/vite-env.d.ts +1 -1
  260. package/dist/components/DatePicker/DatePickerInput/DatePickerInput.d.ts +0 -11
  261. package/dist/components/DatePicker/DatePickerInput/DatePickerInput.styles.d.ts +0 -20
  262. package/dist/components/DatePicker/DatePickerInput/index.d.ts +0 -1
  263. package/src/components/DatePicker/DatePickerInput/DatePickerInput.styles.ts +0 -25
  264. package/src/components/DatePicker/DatePickerInput/DatePickerInput.tsx +0 -31
  265. package/src/components/DatePicker/DatePickerInput/index.ts +0 -1
package/dist/style.css CHANGED
@@ -68,7 +68,6 @@
68
68
  display: inline-block;
69
69
  padding: 0;
70
70
  border: 0;
71
- width: 100%;
72
71
  }
73
72
 
74
73
  .react-datepicker {
@@ -154,7 +153,7 @@
154
153
  .react-datepicker__month-dropdown-container--scroll,
155
154
  .react-datepicker__month-year-dropdown-container--scroll {
156
155
  display: inline-block;
157
- margin: 0 2px;
156
+ margin: 0 15px;
158
157
  }
159
158
 
160
159
  .react-datepicker__current-month,
@@ -309,7 +308,7 @@
309
308
  border: 1px solid #aeaeae;
310
309
  border-radius: 0.3rem;
311
310
  position: absolute;
312
- right: -72px;
311
+ right: -87px;
313
312
  top: 0;
314
313
  }
315
314
  .react-datepicker__time-container .react-datepicker__time {
@@ -327,7 +326,7 @@
327
326
  .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
328
327
  list-style: none;
329
328
  margin: 0;
330
- height: calc(195px + (1.7rem / 2));
329
+ height: calc(195px + 1.7rem / 2);
331
330
  overflow-y: scroll;
332
331
  padding-right: 0;
333
332
  padding-left: 0;
@@ -370,20 +369,37 @@
370
369
  .react-datepicker__week-number.react-datepicker__week-number--clickable {
371
370
  cursor: pointer;
372
371
  }
373
- .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
372
+ .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,
373
+ .react-datepicker__week-number--keyboard-selected):hover {
374
374
  border-radius: 0.3rem;
375
375
  background-color: #f0f0f0;
376
376
  }
377
-
378
- .react-datepicker__day-names,
379
- .react-datepicker__week {
380
- white-space: nowrap;
377
+ .react-datepicker__week-number--selected {
378
+ border-radius: 0.3rem;
379
+ background-color: #216ba5;
380
+ color: #fff;
381
+ }
382
+ .react-datepicker__week-number--selected:hover {
383
+ background-color: #1d5d90;
384
+ }
385
+ .react-datepicker__week-number--keyboard-selected {
386
+ border-radius: 0.3rem;
387
+ background-color: #2a87d0;
388
+ color: #fff;
389
+ }
390
+ .react-datepicker__week-number--keyboard-selected:hover {
391
+ background-color: #1d5d90;
381
392
  }
382
393
 
383
394
  .react-datepicker__day-names {
395
+ white-space: nowrap;
384
396
  margin-bottom: -8px;
385
397
  }
386
398
 
399
+ .react-datepicker__week {
400
+ white-space: nowrap;
401
+ }
402
+
387
403
  .react-datepicker__day-name,
388
404
  .react-datepicker__day,
389
405
  .react-datepicker__time-name {
@@ -395,31 +411,6 @@
395
411
  margin: 0.166rem;
396
412
  }
397
413
 
398
- .react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,
399
- .react-datepicker__quarter--selected,
400
- .react-datepicker__quarter--in-selecting-range,
401
- .react-datepicker__quarter--in-range {
402
- border-radius: 0.3rem;
403
- background-color: #216ba5;
404
- color: #fff;
405
- }
406
- .react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
407
- .react-datepicker__quarter--selected:hover,
408
- .react-datepicker__quarter--in-selecting-range:hover,
409
- .react-datepicker__quarter--in-range:hover {
410
- background-color: #1d5d90;
411
- }
412
- .react-datepicker__month--disabled,
413
- .react-datepicker__quarter--disabled {
414
- color: #ccc;
415
- pointer-events: none;
416
- }
417
- .react-datepicker__month--disabled:hover,
418
- .react-datepicker__quarter--disabled:hover {
419
- cursor: default;
420
- background-color: transparent;
421
- }
422
-
423
414
  .react-datepicker__day,
424
415
  .react-datepicker__month-text,
425
416
  .react-datepicker__quarter-text,
@@ -465,6 +456,45 @@
465
456
  .react-datepicker__year-text--highlighted-custom-2 {
466
457
  color: green;
467
458
  }
459
+ .react-datepicker__day--holidays,
460
+ .react-datepicker__month-text--holidays,
461
+ .react-datepicker__quarter-text--holidays,
462
+ .react-datepicker__year-text--holidays {
463
+ position: relative;
464
+ border-radius: 0.3rem;
465
+ background-color: #ff6803;
466
+ color: #fff;
467
+ }
468
+ .react-datepicker__day--holidays .holiday-overlay,
469
+ .react-datepicker__month-text--holidays .holiday-overlay,
470
+ .react-datepicker__quarter-text--holidays .holiday-overlay,
471
+ .react-datepicker__year-text--holidays .holiday-overlay {
472
+ position: absolute;
473
+ bottom: 100%;
474
+ left: 50%;
475
+ transform: translateX(-50%);
476
+ background-color: #333;
477
+ color: #fff;
478
+ padding: 4px;
479
+ border-radius: 4px;
480
+ white-space: nowrap;
481
+ visibility: hidden;
482
+ opacity: 0;
483
+ transition: visibility 0s, opacity 0.3s ease-in-out;
484
+ }
485
+ .react-datepicker__day--holidays:hover,
486
+ .react-datepicker__month-text--holidays:hover,
487
+ .react-datepicker__quarter-text--holidays:hover,
488
+ .react-datepicker__year-text--holidays:hover {
489
+ background-color: #cf5300;
490
+ }
491
+ .react-datepicker__day--holidays:hover .holiday-overlay,
492
+ .react-datepicker__month-text--holidays:hover .holiday-overlay,
493
+ .react-datepicker__quarter-text--holidays:hover .holiday-overlay,
494
+ .react-datepicker__year-text--holidays:hover .holiday-overlay {
495
+ visibility: visible;
496
+ opacity: 1;
497
+ }
468
498
  .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
469
499
  .react-datepicker__month-text--selected,
470
500
  .react-datepicker__month-text--in-selecting-range,
@@ -496,8 +526,8 @@
496
526
  .react-datepicker__quarter-text--keyboard-selected,
497
527
  .react-datepicker__year-text--keyboard-selected {
498
528
  border-radius: 0.3rem;
499
- background-color: #2579ba;
500
- color: #fff;
529
+ background-color: #bad9f1;
530
+ color: rgb(0, 0, 0);
501
531
  }
502
532
  .react-datepicker__day--keyboard-selected:hover,
503
533
  .react-datepicker__month-text--keyboard-selected:hover,
@@ -526,18 +556,33 @@
526
556
  .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
527
557
  .react-datepicker__month-text--in-selecting-range,
528
558
  .react-datepicker__quarter-text--in-selecting-range,
559
+ .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
560
+ .react-datepicker__month-text--in-selecting-range,
561
+ .react-datepicker__quarter-text--in-selecting-range,
529
562
  .react-datepicker__year-text--in-selecting-range),
530
563
  .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
531
564
  .react-datepicker__month-text--in-selecting-range,
532
565
  .react-datepicker__quarter-text--in-selecting-range,
533
566
  .react-datepicker__year-text--in-selecting-range),
567
+ .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
568
+ .react-datepicker__month-text--in-selecting-range,
569
+ .react-datepicker__quarter-text--in-selecting-range,
570
+ .react-datepicker__year-text--in-selecting-range),
534
571
  .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
535
572
  .react-datepicker__month-text--in-selecting-range,
536
573
  .react-datepicker__quarter-text--in-selecting-range,
537
574
  .react-datepicker__year-text--in-selecting-range),
575
+ .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
576
+ .react-datepicker__month-text--in-selecting-range,
577
+ .react-datepicker__quarter-text--in-selecting-range,
578
+ .react-datepicker__year-text--in-selecting-range),
538
579
  .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
539
580
  .react-datepicker__month-text--in-selecting-range,
540
581
  .react-datepicker__quarter-text--in-selecting-range,
582
+ .react-datepicker__year-text--in-selecting-range),
583
+ .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
584
+ .react-datepicker__month-text--in-selecting-range,
585
+ .react-datepicker__quarter-text--in-selecting-range,
541
586
  .react-datepicker__year-text--in-selecting-range) {
542
587
  background-color: #f0f0f0;
543
588
  color: #000;
@@ -556,23 +601,20 @@
556
601
  background-color: transparent;
557
602
  }
558
603
 
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,
560
- .react-datepicker__quarter-text.react-datepicker__month--selected:hover,
561
- .react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
562
- .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
563
- .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
564
- background-color: #216ba5;
565
- }
566
- .react-datepicker__month-text:hover,
567
- .react-datepicker__quarter-text:hover {
568
- background-color: #f0f0f0;
569
- }
570
-
571
604
  .react-datepicker__input-container {
572
605
  position: relative;
573
606
  display: inline-block;
574
607
  width: 100%;
575
608
  }
609
+ .react-datepicker__input-container .react-datepicker__calendar-icon {
610
+ position: absolute;
611
+ padding: 0.5rem;
612
+ box-sizing: content-box;
613
+ }
614
+
615
+ .react-datepicker__view-calendar-icon input {
616
+ padding: 6px 10px 5px 25px;
617
+ }
576
618
 
577
619
  .react-datepicker__year-read-view,
578
620
  .react-datepicker__month-read-view,
@@ -702,6 +744,13 @@
702
744
  vertical-align: middle;
703
745
  content: "×";
704
746
  }
747
+ .react-datepicker__close-icon--disabled {
748
+ cursor: default;
749
+ }
750
+ .react-datepicker__close-icon--disabled::after {
751
+ cursor: default;
752
+ background-color: #ccc;
753
+ }
705
754
 
706
755
  .react-datepicker__today-button {
707
756
  background: #f0f0f0;
@@ -733,8 +782,8 @@
733
782
  }
734
783
  @media (max-width: 400px), (max-height: 550px) {
735
784
  .react-datepicker__portal .react-datepicker__day-name,
736
- .react-datepicker__portal .react-datepicker__day,
737
- .react-datepicker__portal .react-datepicker__time-name {
785
+ .react-datepicker__portal .react-datepicker__day,
786
+ .react-datepicker__portal .react-datepicker__time-name {
738
787
  width: 2rem;
739
788
  line-height: 2rem;
740
789
  }
@@ -743,3 +792,29 @@
743
792
  .react-datepicker__portal .react-datepicker-time__header {
744
793
  font-size: 1.44rem;
745
794
  }
795
+
796
+ .react-datepicker__children-container {
797
+ width: 13.8rem;
798
+ margin: 0.4rem;
799
+ padding-right: 0.2rem;
800
+ padding-left: 0.2rem;
801
+ height: auto;
802
+ }
803
+
804
+ .react-datepicker__aria-live {
805
+ position: absolute;
806
+ clip-path: circle(0);
807
+ border: 0;
808
+ height: 1px;
809
+ margin: -1px;
810
+ overflow: hidden;
811
+ padding: 0;
812
+ width: 1px;
813
+ white-space: nowrap;
814
+ }
815
+
816
+ .react-datepicker__calendar-icon {
817
+ width: 1em;
818
+ height: 1em;
819
+ vertical-align: -0.125em;
820
+ }