pixel-react 1.9.2 → 1.9.4

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 (203) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  3. package/lib/components/Charts/MultiRadialChart/types.d.ts +2 -0
  4. package/lib/components/Table/Table.d.ts +1 -1
  5. package/lib/components/Table/Types.d.ts +8 -0
  6. package/lib/components/TableTree/Components/TableCell.d.ts +1 -1
  7. package/lib/components/TableTree/Components/TableRow.d.ts +1 -1
  8. package/lib/components/TableTree/data.d.ts +54 -222
  9. package/lib/components/TableTree/types.d.ts +0 -6
  10. package/lib/index.d.ts +15 -2
  11. package/lib/index.esm.js +21314 -21374
  12. package/lib/index.esm.js.map +1 -1
  13. package/lib/index.js +21319 -21378
  14. package/lib/index.js.map +1 -1
  15. package/lib/tsconfig.tsbuildinfo +1 -1
  16. package/lib/utils/swapArrayItem/dragAndDropUtils.d.ts +1 -0
  17. package/package.json +1 -1
  18. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +55 -0
  19. package/src/assets/Themes/BaseTheme.scss +17 -6
  20. package/src/assets/Themes/BlueTheme.scss +12 -0
  21. package/src/assets/Themes/DarkTheme.scss +20 -6
  22. package/src/assets/icons/approval_pending.svg +8 -8
  23. package/src/assets/icons/azure.svg +9 -0
  24. package/src/assets/icons/bitbucket.svg +9 -0
  25. package/src/assets/icons/configuration.svg +3 -3
  26. package/src/assets/icons/defects.svg +8 -8
  27. package/src/assets/icons/element.svg +4 -4
  28. package/src/assets/icons/github.svg +9 -0
  29. package/src/assets/icons/gitlab.svg +9 -0
  30. package/src/assets/icons/jenkins.svg +9 -0
  31. package/src/assets/icons/jira_logo.svg +9 -0
  32. package/src/assets/icons/primary_calendar_icon.svg +3 -0
  33. package/src/assets/icons/project_element.svg +4 -4
  34. package/src/assets/icons/slack.svg +9 -0
  35. package/src/assets/icons/step_group.svg +10 -10
  36. package/src/assets/icons/variable.svg +3 -3
  37. package/src/assets/icons/web_service_icon.svg +3 -3
  38. package/src/components/Charts/BarChart/BarChart.stories.tsx +2 -1
  39. package/src/components/Charts/BarChart/BarChart.tsx +6 -2
  40. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +0 -2
  41. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +7 -1
  42. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +5 -2
  43. package/src/components/Charts/MultiRadialChart/types.ts +2 -0
  44. package/src/components/DatePicker/DatePicker.scss +379 -632
  45. package/src/components/DatePicker/DatePicker.tsx +130 -98
  46. package/src/components/DatePicker/Timepicker.tsx +1 -13
  47. package/src/components/Icon/iconList.ts +16 -0
  48. package/src/components/Table/Table.scss +44 -11
  49. package/src/components/Table/Table.stories.tsx +60 -1
  50. package/src/components/Table/Table.tsx +190 -123
  51. package/src/components/Table/Types.ts +8 -0
  52. package/src/components/TableTree/Components/TableBody.tsx +17 -19
  53. package/src/components/TableTree/Components/TableCell.tsx +4 -7
  54. package/src/components/TableTree/Components/TableRow.tsx +4 -7
  55. package/src/components/TableTree/TableTree.stories.tsx +10 -10
  56. package/src/components/TableTree/TableTree.tsx +1 -1
  57. package/src/components/TableTree/data.ts +53 -331
  58. package/src/components/TableTree/types.ts +0 -6
  59. package/src/components/TextArea/Textarea.scss +24 -6
  60. package/src/index.ts +3 -1
  61. package/src/utils/swapArrayItem/dragAndDropUtils.ts +11 -0
  62. package/lib/1fb4472b34e4fe07.css +0 -1
  63. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  64. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  65. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  66. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  67. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  68. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  69. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  70. package/lib/components/AddButton/AddButton.d.ts +0 -5
  71. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  72. package/lib/components/AddButton/index.d.ts +0 -1
  73. package/lib/components/AddButton/types.d.ts +0 -4
  74. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  75. package/lib/components/AddVariables/AddVariables.d.ts +0 -5
  76. package/lib/components/AddVariables/index.d.ts +0 -1
  77. package/lib/components/AddVariables/types.d.ts +0 -35
  78. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
  79. package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
  80. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  81. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
  82. package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
  83. package/lib/components/Button/Button.stories.d.ts +0 -13
  84. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  85. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
  86. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  87. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  88. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  89. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  90. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
  91. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  92. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  93. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  94. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  95. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  96. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  97. package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
  98. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  99. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  100. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  101. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  102. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  103. package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +0 -8
  104. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +0 -4
  105. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
  106. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
  107. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
  108. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
  109. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
  110. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
  111. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
  112. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
  113. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
  114. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
  115. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
  116. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
  117. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
  118. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
  119. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
  120. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
  121. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
  122. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
  123. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
  124. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
  125. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
  126. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
  127. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
  128. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
  129. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
  130. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
  131. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
  132. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
  133. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
  134. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
  135. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
  136. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
  137. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
  138. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
  139. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
  140. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
  141. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
  142. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  143. package/lib/components/ExcelFile/Types.d.ts +0 -129
  144. package/lib/components/ExcelFile/index.d.ts +0 -1
  145. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  146. package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
  147. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  148. package/lib/components/Form/Form.stories.d.ts +0 -7
  149. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  150. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  151. package/lib/components/Icon/Icon.stories.d.ts +0 -8
  152. package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
  153. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
  154. package/lib/components/Input/Input.stories.d.ts +0 -9
  155. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  156. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -13
  157. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  158. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
  159. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
  160. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
  161. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  162. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
  163. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -11
  164. package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
  165. package/lib/components/NLPInput/type.d.ts +0 -70
  166. package/lib/components/Paper/Paper.stories.d.ts +0 -11
  167. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  168. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
  169. package/lib/components/Search/Search.stories.d.ts +0 -6
  170. package/lib/components/Select/Select.stories.d.ts +0 -14
  171. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  172. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
  173. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
  174. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.d.ts +0 -4
  175. package/lib/components/SequentialConnectingBranch/components/AddBrowserModal/types.d.ts +0 -3
  176. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.d.ts +0 -4
  177. package/lib/components/SequentialConnectingBranch/components/DatasetListModal/types.d.ts +0 -3
  178. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  179. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  180. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  181. package/lib/components/Table/Table.stories.d.ts +0 -13
  182. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  183. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  184. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  185. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  186. package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
  187. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  188. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  189. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  190. package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
  191. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  192. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  193. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  194. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  195. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  196. package/lib/utils/find/findAndInsert.d.ts +0 -7
  197. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  198. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
  199. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
  200. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  201. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  202. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  203. package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
@@ -3,23 +3,10 @@
3
3
 
4
4
  /* Custom date picker styling */
5
5
  .ff-date-picker {
6
- // day-picker variable override
7
- .rdp-root {
8
- --rdp-accent-color: var(--brand-color);
9
- --rdp-day-height: 24px;
10
- --rdp-day-width: 36px;
11
- --rdp-day_button-height: 24px;
12
- --rdp-day_button-width: 36px;
13
- @include fonts.fontPoppins(12px);
14
- --rdp-font-family: 'Poppins', sans-serif;
15
- }
16
-
17
6
  .ff-cursor-pointer {
18
7
  cursor: pointer;
19
8
  }
20
9
 
21
- position: relative;
22
-
23
10
  .ff-datepicker-input-container {
24
11
  display: flex;
25
12
  gap: 10px;
@@ -60,6 +47,7 @@
60
47
 
61
48
  .ff-date-input-field {
62
49
  flex: 1;
50
+
63
51
  .ff-date-input {
64
52
  width: 100%;
65
53
  }
@@ -69,6 +57,7 @@
69
57
  padding: 0px 4px;
70
58
  margin-left: 8px;
71
59
  line-height: 12px;
60
+
72
61
  &--danger {
73
62
  color: var(--input-error-text-color);
74
63
  }
@@ -77,190 +66,229 @@
77
66
 
78
67
  .ff-time-input-field {
79
68
  flex: 0 0 120px;
69
+
80
70
  .ff-time-input {
81
71
  width: 100%;
82
72
  }
83
73
  }
84
74
  }
85
- .ff-date-picker-container {
75
+ }
76
+
77
+ .ff-date-picker-container {
78
+ // day-picker variable override
79
+ .rdp-root {
80
+ --rdp-accent-color: var(--brand-color);
81
+ --rdp-day-height: 24px;
82
+ --rdp-day-width: 36px;
83
+ --rdp-day_button-height: 24px;
84
+ --rdp-day_button-width: 36px;
85
+ @include fonts.fontPoppins(12px);
86
+ --rdp-font-family: 'Poppins', sans-serif;
87
+ }
88
+
89
+ display: flex;
90
+ flex-direction: column;
91
+ position: fixed;
92
+ border-radius: 8px;
93
+ padding: 4px;
94
+ box-sizing: border-box;
95
+ background-color: var(--tab-bg-color);
96
+ box-shadow: 0 0 12px 0 #00000033;
97
+ gap: 8px;
98
+
99
+ .ff-calendar-container {
86
100
  display: flex;
87
- flex-direction: column;
88
- position: fixed;
89
- border-radius: 8px;
101
+ align-items: flex-start;
102
+ gap: 4px;
103
+ height: 240px;
104
+ }
105
+
106
+ .ff-date-picker-controls {
90
107
  padding: 4px;
91
- box-sizing: border-box;
92
- background-color: var(--tab-bg-color);
93
- box-shadow: 0 0 12px 0 #00000033;
108
+ display: flex;
109
+ justify-content: end;
94
110
  gap: 8px;
111
+ border-top: 1px solid var(--border-color);
95
112
 
96
- .ff-calendar-container {
97
- display: flex;
98
- align-items: flex-start;
99
- gap: 4px;
100
- height: 240px;
113
+ .ff-date-picker-button {
114
+ font-weight: 600;
115
+ line-height: 15px;
101
116
  }
117
+ }
118
+ }
102
119
 
103
- .ff-date-picker-controls {
104
- padding: 4px;
105
- display: flex;
106
- justify-content: end;
107
- gap: 8px;
108
- border-top: 1px solid var(--border-color);
120
+ .ff-calendar {
121
+ .ff-calendar-nav-button {
122
+ margin: 0 5px;
123
+ border: 1px solid var(--border-color);
124
+ background-color: var(--toggle-button-bg-color);
125
+ box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);
126
+ padding: 0px;
127
+ border-radius: 30%;
128
+ cursor: pointer;
109
129
 
110
- .ff-date-picker-button {
111
- font-weight: 600;
112
- line-height: 15px;
113
- }
130
+ &:disabled {
131
+ cursor: auto;
132
+ opacity: 0.5;
114
133
  }
115
134
  }
116
135
 
117
- .ff-calendar {
118
- .ff-calendar-nav-button {
119
- margin: 0 5px;
120
- border: 1px solid var(--border-color);
121
- background-color: var(--toggle-button-bg-color);
122
- box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);
123
- padding: 0px;
124
- border-radius: 30%;
125
- cursor: pointer;
136
+ .ff-calendar-haeder {
137
+ display: flex;
138
+ align-items: center;
139
+ gap: 5px;
140
+ color: var(--text-color);
141
+ }
126
142
 
127
- &:disabled {
128
- cursor: auto;
129
- opacity: 0.5;
130
- }
131
- }
143
+ .ff-custom-year_grid,
144
+ .ff-custom-month_grid {
145
+ width: calc((var(--rdp-day_button-width) + 4px) * 7);
146
+ display: grid;
147
+ grid-template-columns: repeat(3, 1fr);
148
+ gap: 10px;
149
+ padding: 5px;
150
+ max-width: 100%;
132
151
 
133
- .ff-calendar-haeder {
134
- display: flex;
135
- align-items: center;
136
- gap: 5px;
137
- color: var(--text-color);
138
- }
152
+ .ff-custom-year,
153
+ .ff-custom-month {
154
+ padding: 10px 0;
155
+ text-align: center;
156
+ cursor: pointer;
157
+ border-radius: 8px;
158
+ background-color: var(--disabled-primary-color);
139
159
 
140
- .ff-custom-year_grid,
141
- .ff-custom-month_grid {
142
- width: calc((var(--rdp-day-width) + 4px) * 7);
143
- display: grid;
144
- grid-template-columns: repeat(3, 1fr);
145
- gap: 10px;
146
- padding: 5px;
147
- max-width: 100%;
148
-
149
- .ff-custom-year,
150
- .ff-custom-month {
151
- padding: 10px 0;
152
- text-align: center;
153
- cursor: pointer;
154
- border-radius: 8px;
155
- background-color: #f9f9f9; // color need to be change
160
+ &--selected {
161
+ background-color: var(--brand-color);
162
+ color: var(--primary-button-text-color);
163
+ }
156
164
 
157
- &--selected {
158
- background-color: var(--brand-color);
159
- color: var(--primary-button-text-color);
160
- }
161
- &--disabled {
162
- color: var(--text-color-light);
163
- cursor: default;
165
+ &--disabled {
166
+ color: var(--text-color-light);
167
+ cursor: default;
164
168
 
165
- &.ff-custom-month--selected,
166
- &.ff-custom-year--selected {
167
- background-color: var(--disable-color);
168
- }
169
+ &.ff-custom-month--selected,
170
+ &.ff-custom-year--selected {
171
+ background-color: var(--disable-color);
169
172
  }
170
173
  }
171
174
  }
175
+ }
172
176
 
173
- .rdp-weekdays {
174
- th {
175
- color: #6f7c8e; // color need to be change
176
- font-weight: 400;
177
- }
177
+ .rdp-weekdays {
178
+ th {
179
+ color: #6f7c8e; // color need to be change
180
+ font-weight: 400;
178
181
  }
182
+ }
179
183
 
180
- .rdp-day {
181
- padding: 2px;
182
- font-weight: 500;
183
- }
184
+ .rdp-day {
185
+ padding: 2px;
186
+ font-weight: 500;
187
+ }
184
188
 
185
- .rdp-day_button {
186
- border-radius: 4px;
187
- padding: 3px 9px;
189
+ .rdp-day_button {
190
+ border-radius: 4px;
191
+ padding: 3px 9px;
188
192
 
189
- &:hover {
190
- background-color: var(--hover-color);
191
- }
193
+ &:hover {
194
+ background-color: var(--hover-color);
192
195
  }
193
- .rdp-selected {
194
- font: inherit;
195
- .rdp-day_button {
196
- background: var(--rdp-accent-color);
197
- color: var(--drawer-footer-bg);
198
- border: none;
199
- }
196
+ }
197
+
198
+ .rdp-selected {
199
+ font: inherit;
200
+
201
+ .rdp-day_button {
202
+ background: var(--rdp-accent-color);
203
+ color: var(--drawer-footer-bg);
204
+ border: none;
200
205
  }
201
- .rdp-today:not(.rdp-outside) {
202
- .rdp-day_button {
203
- border: 2px solid var(--rdp-accent-color);
204
- }
206
+ }
207
+
208
+ .rdp-today:not(.rdp-outside) {
209
+ .rdp-day_button {
210
+ border: 2px solid var(--rdp-accent-color);
205
211
  }
206
212
  }
213
+ }
207
214
 
208
- // Timepicker css ************************************************************************
215
+ // Timepicker css ************************************************************************
209
216
 
210
- .ff-time-picker-container {
211
- position: relative;
212
- width: 150px;
213
- height: 100%;
214
- overflow-y: hidden;
215
- border-left: 1px solid #ccc;
216
- padding: 10px 5px;
217
- box-sizing: border-box;
217
+ .ff-time-picker-container {
218
+ position: relative;
219
+ width: 150px;
220
+ height: 100%;
221
+ overflow-y: hidden;
222
+ border-left: 1px solid #ccc;
223
+ padding: 10px 5px;
224
+ box-sizing: border-box;
218
225
 
219
- &::-webkit-scrollbar {
220
- display: none;
221
- }
226
+ &::-webkit-scrollbar {
227
+ display: none;
228
+ }
222
229
 
223
- .ff-time-picker-fields {
230
+ .ff-time-picker-fields {
231
+ display: flex;
232
+ height: 14%;
233
+ width: 100%;
234
+ margin-bottom: 5px;
235
+ box-sizing: border-box;
236
+
237
+ .ff-time-input-container {
224
238
  display: flex;
225
- height: 14%;
226
- width: 100%;
227
- margin-bottom: 5px;
228
- box-sizing: border-box;
239
+ border: 1px solid var(--border-color);
240
+ border-right: 0;
241
+ border-radius: 4px 0 0 4px;
242
+ width: 55%;
243
+ position: relative;
229
244
 
230
- .ff-time-input-container {
231
- display: flex;
232
- border: 1px solid var(--border-color);
233
- border-right: 0;
245
+ .ff-time-input {
246
+ border: none;
247
+ padding: 5px;
248
+ width: 100%;
249
+ text-align: center;
234
250
  border-radius: 4px 0 0 4px;
235
- width: 55%;
236
- position: relative;
237
-
238
- .ff-time-input {
239
- border: none;
240
- padding: 5px;
241
- width: 100%;
242
- text-align: center;
243
- border-radius: 4px 0 0 4px;
244
- font-weight: 400;
245
- @extend .fontSm;
251
+ font-weight: 400;
252
+ @extend .fontSm;
246
253
 
247
- &::placeholder {
248
- opacity: 0;
249
- line-height: 18px;
250
- }
254
+ &::placeholder {
255
+ opacity: 0;
256
+ line-height: 18px;
251
257
  }
258
+ }
252
259
 
253
- .ff-time-input-label {
254
- position: absolute;
255
- left: 10px;
256
- top: 50%;
257
- transform: translateY(-50%);
258
- transition: 0.2s ease all;
259
- color: var(--input-default-label-color);
260
- pointer-events: none;
260
+ .ff-time-input-label {
261
+ position: absolute;
262
+ left: 10px;
263
+ top: 50%;
264
+ transform: translateY(-50%);
265
+ transition: 0.2s ease all;
266
+ color: var(--input-default-label-color);
267
+ pointer-events: none;
268
+ }
269
+
270
+ &--float .ff-time-input-label {
271
+ top: 0;
272
+ left: 5px;
273
+ color: var(--brand-color);
274
+ background-color: var(--input-label-bg-color);
275
+ line-height: 12px;
276
+ padding: 0 2px;
277
+ font-size: 8px !important;
278
+
279
+ &--danger {
280
+ color: var(--input-error-text-color);
261
281
  }
282
+ }
262
283
 
263
- &--float .ff-time-input-label {
284
+ &:hover {
285
+ border-color: var(--input-hover-border-color);
286
+ }
287
+
288
+ &:focus-within {
289
+ border-color: var(--brand-color);
290
+
291
+ .ff-time-input-label {
264
292
  top: 0;
265
293
  left: 5px;
266
294
  color: var(--brand-color);
@@ -274,522 +302,242 @@
274
302
  }
275
303
  }
276
304
 
277
- &:hover {
278
- border-color: var(--input-hover-border-color);
279
- }
280
-
281
- &:focus-within {
282
- border-color: var(--brand-color);
283
-
284
- .ff-time-input-label {
285
- top: 0;
286
- left: 5px;
287
- color: var(--brand-color);
288
- background-color: var(--input-label-bg-color);
289
- line-height: 12px;
290
- padding: 0 2px;
291
- font-size: 8px !important;
292
-
293
- &--danger {
294
- color: var(--input-error-text-color);
295
- }
296
- }
297
-
298
- .ff-time-input {
299
- &::placeholder {
300
- opacity: 1;
301
- margin-bottom: 1px;
302
- }
305
+ .ff-time-input {
306
+ &::placeholder {
307
+ opacity: 1;
308
+ margin-bottom: 1px;
303
309
  }
304
310
  }
311
+ }
305
312
 
306
- &--danger {
307
- border-color: var(--input-error-text-color) !important;
308
- }
313
+ &--danger {
314
+ border-color: var(--input-error-text-color) !important;
315
+ }
309
316
 
310
- .ff-time-input:focus {
311
- outline: none;
312
- }
317
+ .ff-time-input:focus {
318
+ outline: none;
313
319
  }
314
- .ff-time-period-container {
315
- position: relative;
316
- width: 45%;
320
+ }
321
+
322
+ .ff-time-period-container {
323
+ position: relative;
324
+ width: 45%;
325
+ display: flex;
326
+ border: 1px solid var(--border-color);
327
+ border-radius: 0 4px 4px 0;
328
+
329
+ .ff-time-period-select {
317
330
  display: flex;
318
- border: 1px solid var(--border-color);
319
- border-radius: 0 4px 4px 0;
320
-
321
- .ff-time-period-select {
322
- display: flex;
323
- align-items: center;
324
- padding: 0 5px;
325
- width: 100%;
326
- border-radius: 4px;
327
- background-color: white;
328
- cursor: pointer;
329
- border: none;
330
- }
331
- &--active {
332
- border-color: var(--brand-color) !important;
333
- }
334
- &:hover {
335
- border-color: var(--input-hover-border-color);
336
- }
331
+ align-items: center;
332
+ padding: 0 5px;
333
+ width: 100%;
334
+ border-radius: 4px;
335
+ background-color: white;
336
+ cursor: pointer;
337
+ border: none;
338
+ }
337
339
 
338
- .ff-time-period-icon {
339
- svg {
340
- path {
341
- fill: var(--default-icon-color);
342
- }
343
- }
344
- margin-left: auto;
345
- pointer-events: none;
346
- }
340
+ &--active {
341
+ border-color: var(--brand-color) !important;
342
+ }
347
343
 
348
- &:hover {
349
- svg {
350
- path {
351
- fill: var(--brand-color);
352
- }
353
- }
354
- }
344
+ &:hover {
345
+ border-color: var(--input-hover-border-color);
346
+ }
355
347
 
356
- .ff-time-period-options {
357
- position: fixed;
358
- z-index: 100;
359
- min-width: 60px;
360
- margin: 4px 0 0;
361
- padding: 0;
362
- list-style: none;
363
- border: 1px solid var(--ff-select-background-color);
364
- border-radius: 4px;
365
- background-color: var(--primary-button-text-color);
366
- box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
348
+ .ff-time-period-icon {
349
+ svg {
350
+ path {
351
+ fill: var(--default-icon-color);
352
+ }
367
353
  }
368
354
 
369
- .ff-option-item {
370
- padding: 8px;
371
- color: var(--text-color);
372
- border-radius: 4px;
373
- cursor: pointer;
374
- transition: background-color 0.2s ease;
355
+ margin-left: auto;
356
+ pointer-events: none;
357
+ }
375
358
 
376
- &:hover {
377
- background-color: var(--ff-select-option-hover-color);
359
+ &:hover {
360
+ svg {
361
+ path {
362
+ fill: var(--brand-color);
378
363
  }
379
364
  }
380
365
  }
381
- }
382
- .ff-time-picker-options {
383
- height: 86%;
384
- overflow-y: auto;
385
- padding-right: 5px;
386
-
387
- &::-webkit-scrollbar {
388
- width: 4px;
389
- height: 12px;
390
-
391
- &-thumb {
392
- background-color: var(--ff-select-scroll-thumb-color);
393
- border-radius: 4px;
394
- }
395
366
 
396
- &-track {
397
- background-color: var(--hover-color); // color need to be change
398
- border-radius: 4px;
399
- }
367
+ .ff-time-period-options {
368
+ position: absolute;
369
+ top: 100%;
370
+ left: 0;
371
+ z-index: 100;
372
+ min-width: 60px;
373
+ margin: 4px 0 0;
374
+ padding: 0;
375
+ list-style: none;
376
+ border: 1px solid var(--ff-select-background-color);
377
+ border-radius: 4px;
378
+ background-color: var(--primary-button-text-color);
379
+ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
400
380
  }
401
381
 
402
- .ff-time-option {
403
- padding: 10px 12px;
382
+ .ff-option-item {
383
+ padding: 8px;
384
+ color: var(--text-color);
385
+ border-radius: 4px;
404
386
  cursor: pointer;
405
- text-align: center;
406
- border-radius: 8px;
407
- background-color: rgba(249, 249, 249); // color need to be change
408
- margin: 10px 0;
387
+ transition: background-color 0.2s ease;
388
+
389
+ &:hover {
390
+ background-color: var(--ff-select-option-hover-color);
391
+ }
409
392
  }
410
393
  }
411
394
  }
412
- }
413
-
414
-
415
-
416
-
417
- // Adding react day picker library node modules css here to get the css style available in platform
418
-
419
- /* Variables declaration */
420
- /* prettier-ignore */
421
- .rdp-root {
422
- --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
423
- --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
424
- --rdp-font-family: system-ui; /* The font family used by the calendar. Note that `inherit`does not work here. */
425
-
426
- --rdp-day-font: inherit; /* The font used for the day cells. */
427
- --rdp-day-height: 2.75rem; /* The height of the day cells. */
428
- --rdp-day-width: 2.75rem; /* The width of the day cells. */
429
-
430
- --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
431
- --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
432
- --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */
433
- --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */
434
-
435
- --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
436
- --rdp-selected-font: bold large var(--rdp-font-family); /* The font of the selected days. */
437
- --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
438
- --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
439
- --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */
440
-
441
- --rdp-dropdown-gap: 0.5rem;/* The gap between the dropdowns used in the month captons. */
442
-
443
- --rdp-month_caption-font: bold larger var(--rdp-font-family); /* The font of the month caption. */
444
- --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */
445
-
446
- --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
447
- --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
448
- --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
449
- --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */
450
-
451
- --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
452
- --rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */
453
- --rdp-range_middle-foreground-color: white; /* The font for days in the middle of a range. */
454
- --rdp-range_middle-color: inherit;/* The color of the range text. */
455
-
456
- --rdp-range_start-color: white; /* The color of the range text. */
457
- --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */
458
- --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */
459
-
460
- --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */
461
- --rdp-range_end-color: white;/* The color of the range text. */
462
- --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */
463
-
464
- --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
465
- --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
466
- --rdp-week_number-font: 400 small var(--rdp-font-family); /* The font of the week number cells. */
467
- --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
468
- --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
469
- --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
470
- --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
471
-
472
- --rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
473
- --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
474
- --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
475
- --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
476
-
477
- --rdp-gradient-direction: 90deg;
478
- }
479
-
480
- .rdp-root[dir="rtl"] {
481
- --rdp-gradient-direction: -90deg;
482
- }
483
-
484
- /* Root of the component. */
485
- .rdp-root {
486
- position: relative; /* Required to position the navigation toolbar. */
487
- box-sizing: border-box;
488
- }
489
-
490
- .rdp-root * {
491
- box-sizing: border-box;
492
- }
493
-
494
- .rdp-day {
495
- width: var(--rdp-day-width);
496
- height: var(--rdp-day-height);
497
- font: var(--rdp-day-font);
498
- text-align: center;
499
- }
500
-
501
- .rdp-day_button {
502
- background: none;
503
- padding: 0;
504
- margin: 0;
505
- cursor: pointer;
506
- font: inherit;
507
- color: inherit;
508
- justify-content: center;
509
- align-items: center;
510
- display: flex;
511
-
512
- width: var(--rdp-day_button-width);
513
- height: var(--rdp-day_button-height);
514
- border: var(--rdp-day_button-border);
515
- border-radius: var(--rdp-day_button-border-radius);
516
- }
517
-
518
- .rdp-day_button:disabled {
519
- cursor: revert;
520
- }
521
-
522
- .rdp-caption_label {
523
- z-index: 1;
524
-
525
- position: relative;
526
- display: inline-flex;
527
- align-items: center;
528
-
529
- white-space: nowrap;
530
- border: 0;
531
- }
532
-
533
- .rdp-button_next,
534
- .rdp-button_previous {
535
- border: none;
536
- background: none;
537
- padding: 0;
538
- margin: 0;
539
- cursor: pointer;
540
- font: inherit;
541
- color: inherit;
542
- -moz-appearance: none;
543
- -webkit-appearance: none;
544
- display: inline-flex;
545
- align-items: center;
546
- justify-content: center;
547
- position: relative;
548
- appearance: none;
549
-
550
- width: var(--rdp-nav_button-width);
551
- height: var(--rdp-nav_button-height);
552
- }
553
-
554
- .rdp-button_next:disabled,
555
- .rdp-button_previous:disabled {
556
- cursor: revert;
557
-
558
- opacity: var(--rdp-nav_button-disabled-opacity);
559
- }
560
-
561
- .rdp-chevron {
562
- display: inline-block;
563
- fill: var(--rdp-accent-color);
564
- }
565
-
566
- .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
567
- transform: rotate(180deg);
568
- }
569
395
 
570
- .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
571
- transform: rotate(180deg);
572
- transform-origin: 50%;
573
- }
574
-
575
- .rdp-dropdowns {
576
- position: relative;
577
- display: inline-flex;
578
- align-items: center;
579
- gap: var(--rdp-dropdown-gap);
580
- }
581
- .rdp-dropdown {
582
- z-index: 2;
583
-
584
- /* Reset */
585
- opacity: 0;
586
- appearance: none;
587
- position: absolute;
588
- inset-block-start: 0;
589
- inset-block-end: 0;
590
- inset-inline-start: 0;
591
- width: 100%;
592
- margin: 0;
593
- padding: 0;
594
- cursor: inherit;
595
- border: none;
596
- line-height: inherit;
597
- }
598
-
599
- .rdp-dropdown_root {
600
- position: relative;
601
- display: inline-flex;
602
- align-items: center;
603
- }
604
-
605
- .rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
606
- opacity: var(--rdp-disabled-opacity);
607
- }
608
-
609
- .rdp-month_caption {
610
- display: flex;
611
- align-content: center;
612
- height: var(--rdp-nav-height);
613
- font: var(--rdp-month_caption-font);
614
- }
615
-
616
- .rdp-months {
617
- position: relative;
618
- display: flex;
619
- flex-wrap: wrap;
620
- gap: var(--rdp-months-gap);
621
- max-width: fit-content;
622
- }
396
+ .ff-time-picker-options {
397
+ height: 86%;
398
+ overflow-y: auto;
399
+ padding-right: 5px;
623
400
 
624
- .rdp-month_grid {
625
- border-collapse: collapse;
626
- }
627
-
628
- .rdp-nav {
629
- position: absolute;
630
- inset-block-start: 0;
631
- inset-inline-end: 0;
632
-
633
- display: flex;
634
- align-items: center;
635
-
636
- height: var(--rdp-nav-height);
637
- }
638
-
639
- .rdp-weekday {
640
- opacity: var(--rdp-weekday-opacity);
641
- padding: var(--rdp-weekday-padding);
642
- font: var(--rdp-weekday-font);
643
- text-align: var(--rdp-weekday-text-align);
644
- text-transform: var(--rdp-weekday-text-transform);
645
- }
646
-
647
- .rdp-week_number {
648
- opacity: var(--rdp-week_number-opacity);
649
- font: var(--rdp-week_number-font);
650
- height: var(--rdp-week_number-height);
651
- width: var(--rdp-week_number-width);
652
- border: var(--rdp-week_number-border);
653
- border-radius: var(--rdp-week_number-border-radius);
654
- text-align: var(--rdp-weeknumber-text-align);
655
- }
656
-
657
- /* DAY MODIFIERS */
658
- .rdp-today:not(.rdp-outside) {
659
- color: var(--rdp-today-color);
660
- }
661
-
662
- .rdp-selected {
663
- font: var(--rdp-selected-font);
664
- }
665
-
666
- .rdp-selected .rdp-day_button {
667
- border: var(--rdp-selected-border);
668
- }
669
-
670
- .rdp-outside {
671
- opacity: var(--rdp-outside-opacity);
672
- }
673
-
674
- .rdp-disabled {
675
- opacity: var(--rdp-disabled-opacity);
676
- }
677
-
678
- .rdp-hidden {
679
- visibility: hidden;
680
- color: var(--rdp-range_start-color);
681
- }
682
-
683
- .rdp-range_start {
684
- background: var(--rdp-range_start-background);
685
- }
686
-
687
- .rdp-range_start .rdp-day_button {
688
- background-color: var(--rdp-range_start-date-background-color);
689
- color: var(--rdp-range_start-color);
690
- }
691
-
692
- .rdp-range_middle {
693
- background-color: var(--rdp-range_middle-background-color);
694
- font: var(--rdp-range_middle-font);
695
- }
696
-
697
- .rdp-range_middle .rdp-day_button {
698
- border-color: transparent;
699
- border: unset;
700
- border-radius: unset;
701
- color: var(--rdp-range_middle-color);
702
- }
703
-
704
- .rdp-range_end {
705
- background: var(--rdp-range_end-background);
706
- color: var(--rdp-range_end-color);
707
- }
401
+ &::-webkit-scrollbar {
402
+ width: 4px;
403
+ height: 12px;
708
404
 
709
- .rdp-range_end .rdp-day_button {
710
- color: var(--rdp-range_start-color);
711
- background-color: var(--rdp-range_end-date-background-color);
712
- }
405
+ &-thumb {
406
+ background-color: var(--ff-select-scroll-thumb-color);
407
+ border-radius: 4px;
408
+ }
713
409
 
714
- .rdp-range_start.rdp-range_end {
715
- background: revert;
716
- }
410
+ &-track {
411
+ background-color: var(--hover-color); // color need to be change
412
+ border-radius: 4px;
413
+ }
414
+ }
717
415
 
718
- .rdp-focusable {
719
- cursor: pointer;
416
+ .ff-time-option {
417
+ padding: 10px 12px;
418
+ cursor: pointer;
419
+ text-align: center;
420
+ border-radius: 8px;
421
+ background-color: rgba(249, 249, 249); // color need to be change
422
+ margin: 10px 0;
423
+ }
424
+ }
720
425
  }
721
426
 
722
-
723
- // Adding react day picker library node modules css here to get the css style available in platform
427
+ // Adding react day picker library node modules css here to get the css style available in platform
724
428
 
725
429
  /* Variables declaration */
726
430
  /* prettier-ignore */
727
431
  .rdp-root {
728
- --rdp-accent-color: blue; /* The accent color used for selected days and UI elements. */
729
- --rdp-accent-background-color: #f0f0ff; /* The accent background color used for selected days and UI elements. */
730
- --rdp-font-family: system-ui; /* The font family used by the calendar. Note that `inherit`does not work here. */
731
-
732
- --rdp-day-font: inherit; /* The font used for the day cells. */
733
- --rdp-day-height: 2.75rem; /* The height of the day cells. */
734
- --rdp-day-width: 2.75rem; /* The width of the day cells. */
735
-
736
- --rdp-day_button-border-radius: 100%; /* The border radius of the day cells. */
737
- --rdp-day_button-border: 2px solid transparent; /* The border of the day cells. */
738
- --rdp-day_button-height: var(--rdp-day-height); /* The height of the day cells. */
739
- --rdp-day_button-width: var(--rdp-day-width); /* The width of the day cells. */
740
-
741
- --rdp-selected-border: 2px solid var(--rdp-accent-color); /* The border of the selected days. */
742
- --rdp-selected-font: bold large var(--rdp-font-family); /* The font of the selected days. */
743
- --rdp-disabled-opacity: 0.5; /* The opacity of the disabled days. */
744
- --rdp-outside-opacity: 0.75; /* The opacity of the days outside the current month. */
745
- --rdp-today-color: var(--rdp-accent-color); /* The color of the today's date. */
746
-
747
- --rdp-dropdown-gap: 0.5rem;/* The gap between the dropdowns used in the month captons. */
748
-
749
- --rdp-month_caption-font: bold larger var(--rdp-font-family); /* The font of the month caption. */
750
- --rdp-months-gap: 2rem; /* The gap between the months in the multi-month view. */
751
-
752
- --rdp-nav_button-disabled-opacity: 0.5; /* The opacity of the disabled navigation buttons. */
753
- --rdp-nav_button-height: 2.25rem; /* The height of the navigation buttons. */
754
- --rdp-nav_button-width: 2.25rem; /* The width of the navigation buttons. */
755
- --rdp-nav-height: 2.75rem; /* The height of the navigation bar. */
756
-
757
- --rdp-range_middle-background-color: var(--rdp-accent-background-color); /* The color of the background for days in the middle of a range. */
758
- --rdp-range_middle-font: normal medium var(--rdp-font-family); /* The font for days in the middle of a range. */
759
- --rdp-range_middle-foreground-color: white; /* The font for days in the middle of a range. */
760
- --rdp-range_middle-color: inherit;/* The color of the range text. */
761
-
762
- --rdp-range_start-color: white; /* The color of the range text. */
763
- --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%); /* Used for the background of the start of the selected range. */
764
- --rdp-range_start-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the start of the selected range. */
765
-
766
- --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%); /* Used for the background of the end of the selected range. */
767
- --rdp-range_end-color: white;/* The color of the range text. */
768
- --rdp-range_end-date-background-color: var(--rdp-accent-color); /* The background color of the date when at the end of the selected range. */
769
-
770
- --rdp-week_number-border-radius: 100%; /* The border radius of the week number. */
771
- --rdp-week_number-border: 2px solid transparent; /* The border of the week number. */
772
- --rdp-week_number-font: 400 small var(--rdp-font-family); /* The font of the week number cells. */
773
- --rdp-week_number-height: var(--rdp-day-height); /* The height of the week number cells. */
774
- --rdp-week_number-opacity: 0.75; /* The opacity of the week number. */
775
- --rdp-week_number-width: var(--rdp-day-width); /* The width of the week number cells. */
776
- --rdp-weeknumber-text-align: center; /* The text alignment of the weekday cells. */
777
-
778
- --rdp-weekday-font: 500 smaller var(--rdp-font-family); /* The font of the weekday. */
779
- --rdp-weekday-opacity: 0.75; /* The opacity of the weekday. */
780
- --rdp-weekday-padding: 0.5rem 0rem; /* The padding of the weekday. */
781
- --rdp-weekday-text-align: center; /* The text alignment of the weekday cells. */
432
+ --rdp-accent-color: blue;
433
+ /* The accent color used for selected days and UI elements. */
434
+ --rdp-accent-background-color: #f0f0ff;
435
+ /* The accent background color used for selected days and UI elements. */
436
+ --rdp-font-family: system-ui;
437
+ /* The font family used by the calendar. Note that `inherit`does not work here. */
438
+
439
+ --rdp-day-font: inherit;
440
+ /* The font used for the day cells. */
441
+ --rdp-day-height: 2.75rem;
442
+ /* The height of the day cells. */
443
+ --rdp-day-width: 2.75rem;
444
+ /* The width of the day cells. */
445
+
446
+ --rdp-day_button-border-radius: 100%;
447
+ /* The border radius of the day cells. */
448
+ --rdp-day_button-border: 2px solid transparent;
449
+ /* The border of the day cells. */
450
+ --rdp-day_button-height: var(--rdp-day-height);
451
+ /* The height of the day cells. */
452
+ --rdp-day_button-width: var(--rdp-day-width);
453
+ /* The width of the day cells. */
454
+
455
+ --rdp-selected-border: 2px solid var(--rdp-accent-color);
456
+ /* The border of the selected days. */
457
+ --rdp-selected-font: bold large var(--rdp-font-family);
458
+ /* The font of the selected days. */
459
+ --rdp-disabled-opacity: 0.5;
460
+ /* The opacity of the disabled days. */
461
+ --rdp-outside-opacity: 0.75;
462
+ /* The opacity of the days outside the current month. */
463
+ --rdp-today-color: var(--rdp-accent-color);
464
+ /* The color of the today's date. */
465
+
466
+ --rdp-dropdown-gap: 0.5rem;
467
+ /* The gap between the dropdowns used in the month captons. */
468
+
469
+ --rdp-month_caption-font: bold larger var(--rdp-font-family);
470
+ /* The font of the month caption. */
471
+ --rdp-months-gap: 2rem;
472
+ /* The gap between the months in the multi-month view. */
473
+
474
+ --rdp-nav_button-disabled-opacity: 0.5;
475
+ /* The opacity of the disabled navigation buttons. */
476
+ --rdp-nav_button-height: 2.25rem;
477
+ /* The height of the navigation buttons. */
478
+ --rdp-nav_button-width: 2.25rem;
479
+ /* The width of the navigation buttons. */
480
+ --rdp-nav-height: 2.75rem;
481
+ /* The height of the navigation bar. */
482
+
483
+ --rdp-range_middle-background-color: var(--rdp-accent-background-color);
484
+ /* The color of the background for days in the middle of a range. */
485
+ --rdp-range_middle-font: normal medium var(--rdp-font-family);
486
+ /* The font for days in the middle of a range. */
487
+ --rdp-range_middle-foreground-color: white;
488
+ /* The font for days in the middle of a range. */
489
+ --rdp-range_middle-color: inherit;
490
+ /* The color of the range text. */
491
+
492
+ --rdp-range_start-color: white;
493
+ /* The color of the range text. */
494
+ --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%);
495
+ /* Used for the background of the start of the selected range. */
496
+ --rdp-range_start-date-background-color: var(--rdp-accent-color);
497
+ /* The background color of the date when at the start of the selected range. */
498
+
499
+ --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%);
500
+ /* Used for the background of the end of the selected range. */
501
+ --rdp-range_end-color: white;
502
+ /* The color of the range text. */
503
+ --rdp-range_end-date-background-color: var(--rdp-accent-color);
504
+ /* The background color of the date when at the end of the selected range. */
505
+
506
+ --rdp-week_number-border-radius: 100%;
507
+ /* The border radius of the week number. */
508
+ --rdp-week_number-border: 2px solid transparent;
509
+ /* The border of the week number. */
510
+ --rdp-week_number-font: 400 small var(--rdp-font-family);
511
+ /* The font of the week number cells. */
512
+ --rdp-week_number-height: var(--rdp-day-height);
513
+ /* The height of the week number cells. */
514
+ --rdp-week_number-opacity: 0.75;
515
+ /* The opacity of the week number. */
516
+ --rdp-week_number-width: var(--rdp-day-width);
517
+ /* The width of the week number cells. */
518
+ --rdp-weeknumber-text-align: center;
519
+ /* The text alignment of the weekday cells. */
520
+
521
+ --rdp-weekday-font: 500 smaller var(--rdp-font-family);
522
+ /* The font of the weekday. */
523
+ --rdp-weekday-opacity: 0.75;
524
+ /* The opacity of the weekday. */
525
+ --rdp-weekday-padding: 0.5rem 0rem;
526
+ /* The padding of the weekday. */
527
+ --rdp-weekday-text-align: center;
528
+ /* The text alignment of the weekday cells. */
782
529
 
783
530
  --rdp-gradient-direction: 90deg;
784
531
  }
785
532
 
786
- .rdp-root[dir="rtl"] {
533
+ .rdp-root[dir='rtl'] {
787
534
  --rdp-gradient-direction: -90deg;
788
535
  }
789
536
 
790
537
  /* Root of the component. */
791
538
  .rdp-root {
792
- position: relative; /* Required to position the navigation toolbar. */
539
+ position: relative;
540
+ /* Required to position the navigation toolbar. */
793
541
  box-sizing: border-box;
794
542
  }
795
543
 
@@ -869,11 +617,11 @@
869
617
  fill: var(--rdp-accent-color);
870
618
  }
871
619
 
872
- .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
620
+ .rdp-root[dir='rtl'] .rdp-nav .rdp-chevron {
873
621
  transform: rotate(180deg);
874
622
  }
875
623
 
876
- .rdp-root[dir="rtl"] .rdp-nav .rdp-chevron {
624
+ .rdp-root[dir='rtl'] .rdp-nav .rdp-chevron {
877
625
  transform: rotate(180deg);
878
626
  transform-origin: 50%;
879
627
  }
@@ -884,6 +632,7 @@
884
632
  align-items: center;
885
633
  gap: var(--rdp-dropdown-gap);
886
634
  }
635
+
887
636
  .rdp-dropdown {
888
637
  z-index: 2;
889
638
 
@@ -908,7 +657,7 @@
908
657
  align-items: center;
909
658
  }
910
659
 
911
- .rdp-dropdown_root[data-disabled="true"] .rdp-chevron {
660
+ .rdp-dropdown_root[data-disabled='true'] .rdp-chevron {
912
661
  opacity: var(--rdp-disabled-opacity);
913
662
  }
914
663
 
@@ -1024,5 +773,3 @@
1024
773
  .rdp-focusable {
1025
774
  cursor: pointer;
1026
775
  }
1027
-
1028
-