pixel-react 1.6.7 → 1.6.9

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 (881) hide show
  1. package/.prettierrc.js +13 -13
  2. package/.storybook/main.ts +26 -26
  3. package/.storybook/preview-head.html +2 -2
  4. package/.storybook/preview.ts +26 -26
  5. package/.yarnrc.yml +1 -1
  6. package/README.md +75 -75
  7. package/index.scss +4 -4
  8. package/lib/components/AddVariables/types.d.ts +67 -3
  9. package/lib/components/AppHeader/types.d.ts +2 -0
  10. package/lib/components/Charts/BarChart/BarChart.d.ts +1 -0
  11. package/lib/components/Charts/DashboardDonutChart/types.d.ts +6 -0
  12. package/lib/components/CreateVariable/types.d.ts +2 -2
  13. package/lib/components/FileDropzone/RadioFilePreview.d.ts +4 -0
  14. package/lib/components/FileDropzone/types.d.ts +61 -0
  15. package/lib/components/InputWithDropdown/InputWithDropdown.d.ts +1 -1
  16. package/lib/components/MenuOption/types.d.ts +3 -2
  17. package/lib/components/Modal/types.d.ts +1 -1
  18. package/lib/components/PopUpModal/types.d.ts +2 -1
  19. package/lib/components/Search/Search.d.ts +1 -1
  20. package/lib/components/Search/types.d.ts +4 -0
  21. package/lib/components/Table/Types.d.ts +1 -1
  22. package/lib/components/Tabs/types.d.ts +1 -0
  23. package/lib/index.css +1 -0
  24. package/lib/index.d.ts +168 -31
  25. package/lib/index.esm.css +1 -0
  26. package/lib/index.esm.js +567 -327
  27. package/lib/index.esm.js.map +1 -1
  28. package/lib/index.js +568 -326
  29. package/lib/index.js.map +1 -1
  30. package/lib/tsconfig.tsbuildinfo +1 -1
  31. package/lib/utils/FormatString/FormatString.d.ts +1 -0
  32. package/package.json +81 -81
  33. package/rollup.config.mjs +67 -67
  34. package/src/StyleGuide/ColorPalette/ColorPalette.scss +62 -62
  35. package/src/StyleGuide/ColorPalette/ColorPalette.stories.tsx +16 -16
  36. package/src/StyleGuide/ColorPalette/ColorPalette.tsx +67 -67
  37. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +294 -279
  38. package/src/StyleGuide/ColorPalette/index.ts +1 -1
  39. package/src/StyleGuide/ColorPalette/types.ts +19 -19
  40. package/src/StyleGuide/Typography/Typography.scss +99 -99
  41. package/src/StyleGuide/Typography/Typography.stories.tsx +16 -16
  42. package/src/StyleGuide/Typography/Typography.tsx +60 -60
  43. package/src/StyleGuide/Typography/TypographyList.ts +3 -3
  44. package/src/StyleGuide/Typography/types.ts +9 -9
  45. package/src/assets/Themes/BaseTheme.scss +281 -279
  46. package/src/assets/Themes/DarkTheme.scss +288 -286
  47. package/src/assets/Themes/Theme.scss +16 -16
  48. package/src/assets/icons/Arrow.svg +4 -4
  49. package/src/assets/icons/Header_preset.svg +18 -18
  50. package/src/assets/icons/accordion_header_icon.svg +10 -10
  51. package/src/assets/icons/active_license_icon.svg +3 -3
  52. package/src/assets/icons/add_archive.svg +9 -9
  53. package/src/assets/icons/add_label_icon.svg +3 -3
  54. package/src/assets/icons/add_locator.svg +4 -4
  55. package/src/assets/icons/add_testcase.svg +3 -3
  56. package/src/assets/icons/add_user.svg +9 -9
  57. package/src/assets/icons/add_variable.svg +11 -11
  58. package/src/assets/icons/add_variable_icon.svg +4 -4
  59. package/src/assets/icons/alert.svg +17 -17
  60. package/src/assets/icons/all_borders.svg +3 -3
  61. package/src/assets/icons/all_projects.svg +3 -3
  62. package/src/assets/icons/android.svg +9 -9
  63. package/src/assets/icons/android_icon.svg +6 -6
  64. package/src/assets/icons/apk_file_type.svg +4 -4
  65. package/src/assets/icons/app_switch.svg +11 -11
  66. package/src/assets/icons/arrow_down.svg +3 -3
  67. package/src/assets/icons/arrow_right.svg +4 -4
  68. package/src/assets/icons/arrow_up.svg +3 -3
  69. package/src/assets/icons/arrows_down_icon.svg +3 -3
  70. package/src/assets/icons/arrows_right_icon.svg +10 -10
  71. package/src/assets/icons/arrows_top_icon.svg +3 -3
  72. package/src/assets/icons/attachment_icon.svg +3 -3
  73. package/src/assets/icons/authorization_icon.svg +4 -4
  74. package/src/assets/icons/automation_testcase.svg +4 -4
  75. package/src/assets/icons/back_icon.svg +3 -3
  76. package/src/assets/icons/backward.svg +10 -10
  77. package/src/assets/icons/backward_icon.svg +3 -3
  78. package/src/assets/icons/beautify_icon.svg +3 -3
  79. package/src/assets/icons/bold.svg +3 -3
  80. package/src/assets/icons/border_bottom.svg +3 -3
  81. package/src/assets/icons/border_left.svg +3 -3
  82. package/src/assets/icons/border_right.svg +3 -3
  83. package/src/assets/icons/border_top.svg +3 -3
  84. package/src/assets/icons/browser_stack.svg +9 -9
  85. package/src/assets/icons/browserstack_icon.svg +24 -24
  86. package/src/assets/icons/calendar_icon.svg +9 -9
  87. package/src/assets/icons/capture_icon.svg +2 -2
  88. package/src/assets/icons/check_mark.svg +3 -3
  89. package/src/assets/icons/chrome.svg +12 -12
  90. package/src/assets/icons/client_profile.svg +4 -4
  91. package/src/assets/icons/clock_icon.svg +11 -11
  92. package/src/assets/icons/clone_icon.svg +3 -3
  93. package/src/assets/icons/close_pill.svg +3 -3
  94. package/src/assets/icons/cloud_server_host_icon.svg +3 -3
  95. package/src/assets/icons/collapse-icon.svg +6 -6
  96. package/src/assets/icons/compressed_file_type.svg +4 -4
  97. package/src/assets/icons/continue_without_sign.svg +3 -3
  98. package/src/assets/icons/copy-icon.svg +3 -3
  99. package/src/assets/icons/csv_file_type.svg +4 -4
  100. package/src/assets/icons/dashboard_icon.svg +31 -31
  101. package/src/assets/icons/dashboard_mobile_icon.svg +47 -47
  102. package/src/assets/icons/dashboard_web_icon.svg +9 -9
  103. package/src/assets/icons/data_provider.svg +8 -8
  104. package/src/assets/icons/dataset_list.svg +3 -3
  105. package/src/assets/icons/delete.svg +3 -3
  106. package/src/assets/icons/delete_info.svg +17 -17
  107. package/src/assets/icons/details.svg +3 -3
  108. package/src/assets/icons/double_underline.svg +5 -5
  109. package/src/assets/icons/download-icon.svg +3 -3
  110. package/src/assets/icons/download_file_icon.svg +3 -3
  111. package/src/assets/icons/download_icon.svg +4 -4
  112. package/src/assets/icons/drag_icon.svg +4 -4
  113. package/src/assets/icons/drawer_maximize.svg +6 -6
  114. package/src/assets/icons/dropzone_icon.svg +18 -18
  115. package/src/assets/icons/edge.svg +30 -30
  116. package/src/assets/icons/edit_icon.svg +5 -5
  117. package/src/assets/icons/error.svg +17 -17
  118. package/src/assets/icons/excel_corner_menu.svg +3 -3
  119. package/src/assets/icons/executions_icon.svg +3 -3
  120. package/src/assets/icons/expand-icon.svg +6 -6
  121. package/src/assets/icons/export.svg +4 -4
  122. package/src/assets/icons/export_collection_icon.svg +13 -13
  123. package/src/assets/icons/eye_closed.svg +3 -3
  124. package/src/assets/icons/eye_open_icon.svg +3 -3
  125. package/src/assets/icons/failed_status_icon.svg +12 -12
  126. package/src/assets/icons/file.svg +11 -11
  127. package/src/assets/icons/fill_color.svg +7 -7
  128. package/src/assets/icons/filter.svg +4 -4
  129. package/src/assets/icons/fire_fox.svg +106 -106
  130. package/src/assets/icons/fireflink_finder_logo.svg +7 -7
  131. package/src/assets/icons/fireflink_icon.svg +4 -4
  132. package/src/assets/icons/fireflink_logo.svg +13 -13
  133. package/src/assets/icons/fireflink_platform.svg +4 -4
  134. package/src/assets/icons/firefox.svg +84 -84
  135. package/src/assets/icons/flaky_status_icon.svg +12 -12
  136. package/src/assets/icons/formate_painter.svg +5 -5
  137. package/src/assets/icons/formula_icon.svg +3 -3
  138. package/src/assets/icons/forward.svg +3 -3
  139. package/src/assets/icons/forward_icon.svg +3 -3
  140. package/src/assets/icons/full_access_icon.svg +4 -4
  141. package/src/assets/icons/gif_file_type.svg +4 -4
  142. package/src/assets/icons/global_variable_icon.svg +4 -4
  143. package/src/assets/icons/hamburger_menu.svg +3 -3
  144. package/src/assets/icons/hide_access_icon.svg +3 -3
  145. package/src/assets/icons/hide_icon.svg +9 -9
  146. package/src/assets/icons/history_icon.svg +19 -19
  147. package/src/assets/icons/html_file_type.svg +4 -4
  148. package/src/assets/icons/impactList.svg +6 -6
  149. package/src/assets/icons/import.svg +4 -4
  150. package/src/assets/icons/import_icon.svg +4 -0
  151. package/src/assets/icons/info.svg +17 -17
  152. package/src/assets/icons/info_icon.svg +5 -5
  153. package/src/assets/icons/info_user.svg +5 -5
  154. package/src/assets/icons/internet_explorer.svg +3 -3
  155. package/src/assets/icons/ipk_file_type.svg +4 -4
  156. package/src/assets/icons/italic.svg +3 -3
  157. package/src/assets/icons/jira.svg +3 -3
  158. package/src/assets/icons/jpg_file_type.svg +4 -4
  159. package/src/assets/icons/json_file_type.svg +4 -4
  160. package/src/assets/icons/label_icon.svg +8 -8
  161. package/src/assets/icons/label_plus.svg +3 -3
  162. package/src/assets/icons/lambda_icon.svg +3 -3
  163. package/src/assets/icons/left_arrow_icon.svg +3 -3
  164. package/src/assets/icons/license_expired.svg +20 -20
  165. package/src/assets/icons/license_info.svg +28 -28
  166. package/src/assets/icons/license_warning.svg +10 -10
  167. package/src/assets/icons/link_expired.svg +186 -186
  168. package/src/assets/icons/linked_defects.svg +11 -11
  169. package/src/assets/icons/linux.svg +42 -42
  170. package/src/assets/icons/local.svg +3 -3
  171. package/src/assets/icons/local_variable_icon.svg +4 -4
  172. package/src/assets/icons/logo.svg +17 -17
  173. package/src/assets/icons/mac.svg +9 -9
  174. package/src/assets/icons/machine_disable_icon.svg +18 -18
  175. package/src/assets/icons/machine_enable_icon.svg +10 -10
  176. package/src/assets/icons/manage_apps.svg +3 -3
  177. package/src/assets/icons/manual_locator.svg +7 -7
  178. package/src/assets/icons/manual_testcase.svg +3 -3
  179. package/src/assets/icons/maximize_icon.svg +5 -5
  180. package/src/assets/icons/maximize_script.svg +12 -12
  181. package/src/assets/icons/maximize_tree.svg +3 -3
  182. package/src/assets/icons/minimize_script.svg +5 -5
  183. package/src/assets/icons/mobile_icon.svg +3 -3
  184. package/src/assets/icons/moon_stars.svg +10 -10
  185. package/src/assets/icons/more.svg +10 -10
  186. package/src/assets/icons/move_icon.svg +5 -5
  187. package/src/assets/icons/ms_dynamic.svg +4 -4
  188. package/src/assets/icons/ms_dynamic_icon.svg +15 -15
  189. package/src/assets/icons/nlp_help_icon.svg +3 -3
  190. package/src/assets/icons/no_access_icon.svg +4 -4
  191. package/src/assets/icons/no_border.svg +3 -3
  192. package/src/assets/icons/no_data.svg +13 -13
  193. package/src/assets/icons/no_license_found.svg +22 -22
  194. package/src/assets/icons/notification_icon.svg +3 -3
  195. package/src/assets/icons/opera.svg +9 -9
  196. package/src/assets/icons/passed_status_icon.svg +12 -12
  197. package/src/assets/icons/pdf_file_type.svg +4 -4
  198. package/src/assets/icons/plus_icon.svg +11 -11
  199. package/src/assets/icons/plus_user_icon.svg +3 -3
  200. package/src/assets/icons/png_file_type.svg +4 -4
  201. package/src/assets/icons/project_env_variable_icon.svg +4 -4
  202. package/src/assets/icons/project_status_icon.svg +10 -10
  203. package/src/assets/icons/quick_run_setting_icon.svg +5 -5
  204. package/src/assets/icons/refresh-icon.svg +4 -4
  205. package/src/assets/icons/refresh_icon.svg +4 -4
  206. package/src/assets/icons/reload.svg +3 -3
  207. package/src/assets/icons/remove.svg +11 -11
  208. package/src/assets/icons/remove_user.svg +3 -3
  209. package/src/assets/icons/replace.svg +11 -11
  210. package/src/assets/icons/replace_file.svg +13 -13
  211. package/src/assets/icons/replace_icon.svg +6 -6
  212. package/src/assets/icons/reset-link.svg +52 -52
  213. package/src/assets/icons/right_arrow_icon.svg +4 -4
  214. package/src/assets/icons/rotate_icon.svg +10 -10
  215. package/src/assets/icons/run_automation_scripts_icon.svg +33 -33
  216. package/src/assets/icons/run_icon.svg +26 -26
  217. package/src/assets/icons/run_manual_testcase_icon.svg +4 -4
  218. package/src/assets/icons/safari.svg +93 -93
  219. package/src/assets/icons/safari_icon.svg +12 -12
  220. package/src/assets/icons/sales_force.svg +7 -7
  221. package/src/assets/icons/salesforce_icon.svg +14 -14
  222. package/src/assets/icons/sample_template_first.svg +29 -29
  223. package/src/assets/icons/sample_template_second.svg +47 -47
  224. package/src/assets/icons/sause_lab.svg +3 -3
  225. package/src/assets/icons/save_as_step.svg +3 -3
  226. package/src/assets/icons/search.svg +3 -3
  227. package/src/assets/icons/send_step.svg +4 -4
  228. package/src/assets/icons/skipped_status_icon.svg +12 -12
  229. package/src/assets/icons/standard_template.svg +30 -30
  230. package/src/assets/icons/strike_through.svg +3 -3
  231. package/src/assets/icons/success.svg +17 -17
  232. package/src/assets/icons/suites_icon.svg +3 -3
  233. package/src/assets/icons/sun_icon.svg +10 -10
  234. package/src/assets/icons/swipe_icon.svg +9 -9
  235. package/src/assets/icons/switch_license_icon.svg +123 -123
  236. package/src/assets/icons/system_warning.svg +61 -61
  237. package/src/assets/icons/tap_icon.svg +3 -3
  238. package/src/assets/icons/text_align_center.svg +3 -3
  239. package/src/assets/icons/text_align_left.svg +3 -3
  240. package/src/assets/icons/text_align_right.svg +3 -3
  241. package/src/assets/icons/text_color.svg +3 -3
  242. package/src/assets/icons/tick_icon.svg +4 -4
  243. package/src/assets/icons/toast_close.svg +3 -3
  244. package/src/assets/icons/txt_file_type.svg +4 -4
  245. package/src/assets/icons/underline.svg +4 -4
  246. package/src/assets/icons/update_icon.svg +3 -3
  247. package/src/assets/icons/user_password_lock.svg +220 -220
  248. package/src/assets/icons/user_profile.svg +3 -3
  249. package/src/assets/icons/user_warning.svg +235 -235
  250. package/src/assets/icons/user_with_system.svg +637 -637
  251. package/src/assets/icons/variable_icon.svg +4 -4
  252. package/src/assets/icons/vertical_separator.svg +3 -3
  253. package/src/assets/icons/view_access_icon.svg +4 -4
  254. package/src/assets/icons/view_icon.svg +3 -3
  255. package/src/assets/icons/warning.svg +17 -17
  256. package/src/assets/icons/warning_status_icon.svg +12 -12
  257. package/src/assets/icons/web&mobile_icon.svg +3 -3
  258. package/src/assets/icons/web_icon.svg +3 -3
  259. package/src/assets/icons/web_mobile_icon.svg +29 -29
  260. package/src/assets/icons/web_services_icon.svg +30 -30
  261. package/src/assets/icons/window_maximize.svg +3 -4
  262. package/src/assets/icons/window_minimize.svg +3 -3
  263. package/src/assets/icons/window_restore.svg +4 -0
  264. package/src/assets/icons/windows.svg +10 -10
  265. package/src/assets/icons/wrong_mark.svg +3 -3
  266. package/src/assets/icons/wswb_delete_icon.svg +3 -3
  267. package/src/assets/icons/wswb_plus_icon.svg +4 -4
  268. package/src/assets/icons/xls_file_type.svg +4 -4
  269. package/src/assets/icons/xlsx_file_type.svg +4 -4
  270. package/src/assets/icons/xml_file_type.svg +4 -4
  271. package/src/assets/styles/_colors.scss +151 -151
  272. package/src/assets/styles/_fonts.scss +45 -45
  273. package/src/assets/styles/_mixins.scss +21 -21
  274. package/src/assets/utils/functionUtils.ts +96 -96
  275. package/src/components/Accordion/Accordion.scss +46 -46
  276. package/src/components/Accordion/Accordion.stories.tsx +35 -35
  277. package/src/components/Accordion/Accordion.tsx +68 -68
  278. package/src/components/Accordion/index.ts +1 -1
  279. package/src/components/Accordion/types.ts +40 -40
  280. package/src/components/AddResourceButton/AddButton.scss +36 -36
  281. package/src/components/AddResourceButton/AddButton.stories.tsx +126 -126
  282. package/src/components/AddResourceButton/AddButton.tsx +121 -121
  283. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss +161 -161
  284. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +38 -38
  285. package/src/components/AddResourceButton/index.ts +1 -1
  286. package/src/components/AddResourceButton/type.ts +92 -92
  287. package/src/components/AddVariables/AddVariables.scss +14 -14
  288. package/src/components/AddVariables/AddVariables.stories.tsx +82 -44
  289. package/src/components/AddVariables/AddVariables.tsx +129 -113
  290. package/src/components/AddVariables/index.ts +1 -1
  291. package/src/components/AddVariables/types.ts +103 -36
  292. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +189 -189
  293. package/src/components/AllProjectsDropdown/AllProjectsDropdown.stories.tsx +117 -117
  294. package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx +152 -152
  295. package/src/components/AllProjectsDropdown/types.ts +12 -12
  296. package/src/components/AppHeader/AppHeader.scss +215 -182
  297. package/src/components/AppHeader/AppHeader.stories.tsx +553 -425
  298. package/src/components/AppHeader/AppHeader.tsx +197 -198
  299. package/src/components/AppHeader/index.ts +1 -1
  300. package/src/components/AppHeader/types.ts +54 -52
  301. package/src/components/AttachImage/AttachImage.scss +76 -76
  302. package/src/components/AttachImage/AttachImage.stories.tsx +24 -24
  303. package/src/components/AttachImage/AttachImage.tsx +60 -60
  304. package/src/components/AttachImage/index.ts +2 -2
  305. package/src/components/AttachImage/types.ts +26 -26
  306. package/src/components/AttachmentButton/AttachmentButton.scss +9 -9
  307. package/src/components/AttachmentButton/AttachmentButton.stories.tsx +81 -81
  308. package/src/components/AttachmentButton/AttachmentButton.tsx +129 -129
  309. package/src/components/AttachmentButton/types.ts +13 -13
  310. package/src/components/Avatar/Avatar.scss +27 -27
  311. package/src/components/Avatar/Avatar.stories.tsx +76 -76
  312. package/src/components/Avatar/Avatar.tsx +41 -41
  313. package/src/components/Avatar/types.ts +35 -35
  314. package/src/components/Button/Button.scss +155 -155
  315. package/src/components/Button/Button.stories.tsx +81 -81
  316. package/src/components/Button/Button.tsx +73 -73
  317. package/src/components/Button/index.ts +1 -1
  318. package/src/components/Button/types.ts +69 -69
  319. package/src/components/Charts/BarChart/BarChart.scss +69 -66
  320. package/src/components/Charts/BarChart/BarChart.stories.tsx +67 -67
  321. package/src/components/Charts/BarChart/BarChart.tsx +342 -328
  322. package/src/components/Charts/BarChart/types.ts +12 -12
  323. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +164 -157
  324. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +55 -54
  325. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +531 -502
  326. package/src/components/Charts/DashboardDonutChart/types.ts +58 -52
  327. package/src/components/Charts/DonutChart/DonutChart.scss +76 -76
  328. package/src/components/Charts/DonutChart/DonutChart.stories.tsx +30 -30
  329. package/src/components/Charts/DonutChart/DonutChart.tsx +246 -246
  330. package/src/components/Charts/DonutChart/index.ts +1 -1
  331. package/src/components/Charts/DonutChart/type.ts +23 -23
  332. package/src/components/Charts/IconRadialChart/IconRadialChart.scss +25 -25
  333. package/src/components/Charts/IconRadialChart/IconRadialChart.stories.tsx +51 -51
  334. package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +173 -173
  335. package/src/components/Charts/IconRadialChart/types.ts +28 -28
  336. package/src/components/Charts/LineChart/LineChart.scss +92 -88
  337. package/src/components/Charts/LineChart/LineChart.stories.tsx +255 -255
  338. package/src/components/Charts/LineChart/LineChart.tsx +286 -282
  339. package/src/components/Charts/LineChart/index.ts +1 -1
  340. package/src/components/Charts/LineChart/types.ts +29 -29
  341. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +86 -86
  342. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +116 -116
  343. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +292 -292
  344. package/src/components/Charts/MultiRadialChart/index.ts +1 -1
  345. package/src/components/Charts/MultiRadialChart/types.ts +25 -25
  346. package/src/components/Charts/PieChart/PieChart.scss +41 -41
  347. package/src/components/Charts/PieChart/PieChart.stories.tsx +46 -46
  348. package/src/components/Charts/PieChart/PieChart.tsx +192 -192
  349. package/src/components/Charts/PieChart/index.ts +1 -1
  350. package/src/components/Charts/PieChart/types.ts +28 -28
  351. package/src/components/Charts/RadialChart/RadialChart.scss +16 -16
  352. package/src/components/Charts/RadialChart/RadialChart.stories.tsx +36 -36
  353. package/src/components/Charts/RadialChart/RadialChart.tsx +180 -180
  354. package/src/components/Charts/RadialChart/index.ts +1 -1
  355. package/src/components/Charts/RadialChart/types.ts +32 -32
  356. package/src/components/Checkbox/Checkbox.scss +146 -146
  357. package/src/components/Checkbox/Checkbox.stories.tsx +123 -123
  358. package/src/components/Checkbox/Checkbox.tsx +58 -58
  359. package/src/components/Checkbox/types.ts +34 -34
  360. package/src/components/Chip/Chip.scss +85 -85
  361. package/src/components/Chip/Chip.stories.tsx +116 -116
  362. package/src/components/Chip/Chip.tsx +35 -35
  363. package/src/components/Chip/index.ts +1 -1
  364. package/src/components/Chip/types.ts +19 -19
  365. package/src/components/Comment/Comments.scss +166 -166
  366. package/src/components/Comment/Comments.stories.tsx +212 -212
  367. package/src/components/Comment/Comments.tsx +51 -51
  368. package/src/components/Comment/comment/Comment.tsx +206 -206
  369. package/src/components/Comment/comment/useNode.ts +51 -51
  370. package/src/components/Comment/index.ts +1 -1
  371. package/src/components/Comment/type.ts +36 -36
  372. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +128 -128
  373. package/src/components/ConnectingBranch/ConnectingBranch.scss +233 -233
  374. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +21 -21
  375. package/src/components/ConnectingBranch/ConnectingBranch.tsx +182 -182
  376. package/src/components/ConnectingBranch/data.ts +137 -137
  377. package/src/components/ConnectingBranch/index.ts +1 -1
  378. package/src/components/ConnectingBranch/types.ts +21 -21
  379. package/src/components/CreateVariable/CreateVariableSlider.scss +18 -18
  380. package/src/components/CreateVariable/CreateVariableSlider.stories.tsx +66 -66
  381. package/src/components/CreateVariable/CreateVariableSlider.tsx +95 -95
  382. package/src/components/CreateVariable/index.ts +1 -1
  383. package/src/components/CreateVariable/types.ts +58 -58
  384. package/src/components/DatePicker/DatePicker.scss +413 -402
  385. package/src/components/DatePicker/DatePicker.stories.tsx +193 -174
  386. package/src/components/DatePicker/DatePicker.tsx +502 -451
  387. package/src/components/DatePicker/Timepicker.tsx +372 -372
  388. package/src/components/DatePicker/types.ts +105 -105
  389. package/src/components/DownloadClient/DownloadClient.scss +80 -80
  390. package/src/components/DownloadClient/DownloadClient.stories.tsx +26 -26
  391. package/src/components/DownloadClient/DownloadClient.tsx +81 -81
  392. package/src/components/DownloadClient/type.ts +40 -40
  393. package/src/components/DragAndDrop/DragAndDrop.d.ts +5 -5
  394. package/src/components/DragAndDrop/DragAndDrop.stories.tsx +25 -25
  395. package/src/components/DragAndDrop/DragAndDrop.ts +7 -7
  396. package/src/components/DragAndDrop/DragAndDropList.scss +69 -69
  397. package/src/components/DragAndDrop/DragAndDropList.tsx +151 -151
  398. package/src/components/Drawer/Drawer.scss +139 -139
  399. package/src/components/Drawer/Drawer.stories.tsx +155 -155
  400. package/src/components/Drawer/Drawer.tsx +232 -232
  401. package/src/components/Drawer/Types.ts +157 -157
  402. package/src/components/EditTextField/EditTextField.scss +97 -97
  403. package/src/components/EditTextField/EditTextField.stories.tsx +127 -127
  404. package/src/components/EditTextField/EditTextField.tsx +181 -181
  405. package/src/components/EditTextField/index.ts +1 -1
  406. package/src/components/EditTextField/types.ts +55 -55
  407. package/src/components/Editor/Editor.scss +56 -56
  408. package/src/components/Editor/Editor.stories.tsx +54 -54
  409. package/src/components/Editor/Editor.tsx +250 -250
  410. package/src/components/Editor/VariableDropdown.scss +27 -27
  411. package/src/components/Editor/VariableDropdown.tsx +57 -57
  412. package/src/components/Editor/constants.ts +180 -180
  413. package/src/components/Editor/types.ts +89 -89
  414. package/src/components/Excel/ColorBarSelector/ColorBarSelector.scss +15 -15
  415. package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +43 -43
  416. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +27 -27
  417. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +42 -42
  418. package/src/components/Excel/ExcelFile/ExcelFile.scss +68 -68
  419. package/src/components/Excel/ExcelFile/ExcelFile.tsx +491 -491
  420. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +131 -131
  421. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +238 -238
  422. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +168 -168
  423. package/src/components/Excel/ExcelFile/ExcelFileComponents/Copied.tsx +25 -25
  424. package/src/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.tsx +56 -56
  425. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx +37 -37
  426. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +85 -85
  427. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +31 -31
  428. package/src/components/Excel/ExcelFile/ExcelFileComponents/HeaderRow.tsx +5 -5
  429. package/src/components/Excel/ExcelFile/ExcelFileComponents/Row.tsx +5 -5
  430. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +154 -154
  431. package/src/components/Excel/ExcelFile/ExcelFileComponents/Selected.tsx +32 -32
  432. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +146 -146
  433. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +479 -479
  434. package/src/components/Excel/ExcelFile/ExcelFileComponents/Table.tsx +19 -19
  435. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +548 -548
  436. package/src/components/Excel/ExcelFile/ExcelFileComponents/areModelsEqual.ts +18 -18
  437. package/src/components/Excel/ExcelFile/ExcelFileComponents/context.ts +12 -12
  438. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/engine.ts +153 -153
  439. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/formula.ts +31 -31
  440. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/index.ts +2 -2
  441. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/point-graph.ts +152 -152
  442. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/point-hash.ts +10 -10
  443. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/point-set.ts +69 -69
  444. package/src/components/Excel/ExcelFile/ExcelFileComponents/index.ts +49 -49
  445. package/src/components/Excel/ExcelFile/ExcelFileComponents/matrix.ts +382 -382
  446. package/src/components/Excel/ExcelFile/ExcelFileComponents/point-range.ts +82 -82
  447. package/src/components/Excel/ExcelFile/ExcelFileComponents/point.ts +15 -15
  448. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +673 -673
  449. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +819 -819
  450. package/src/components/Excel/ExcelFile/ExcelFileComponents/selection.ts +257 -257
  451. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +255 -255
  452. package/src/components/Excel/ExcelFile/ExcelFileComponents/typings/fast-formula-parser.d.ts +58 -58
  453. package/src/components/Excel/ExcelFile/ExcelFileComponents/use-dispatch.ts +8 -8
  454. package/src/components/Excel/ExcelFile/ExcelFileComponents/use-selector.ts +9 -9
  455. package/src/components/Excel/ExcelFile/ExcelFileComponents/util.ts +172 -172
  456. package/src/components/Excel/ExcelFile.stories.tsx +167 -167
  457. package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +96 -96
  458. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +397 -397
  459. package/src/components/Excel/Types.ts +196 -196
  460. package/src/components/Excel/dataConversion.ts +173 -173
  461. package/src/components/Excel/index.ts +1 -1
  462. package/src/components/ExpandableMenu/ExpandableMenu.scss +110 -110
  463. package/src/components/ExpandableMenu/ExpandableMenu.stories.tsx +67 -67
  464. package/src/components/ExpandableMenu/ExpandableMenu.tsx +101 -101
  465. package/src/components/ExpandableMenu/index.ts +1 -1
  466. package/src/components/ExpandableMenu/types.ts +34 -34
  467. package/src/components/FF_Captcha/Recaptcha.scss +10 -10
  468. package/src/components/FF_Captcha/Recaptcha.tsx +40 -40
  469. package/src/components/FF_Captcha/captcha.stories.tsx +40 -40
  470. package/src/components/FF_Captcha/types.ts +22 -22
  471. package/src/components/FieldSet/FieldSet.scss +10 -10
  472. package/src/components/FieldSet/FieldSet.stories.tsx +104 -104
  473. package/src/components/FieldSet/FieldSet.tsx +29 -29
  474. package/src/components/FieldSet/index.ts +1 -1
  475. package/src/components/FieldSet/types.ts +8 -8
  476. package/src/components/FileDropzone/Dropzone.tsx +105 -57
  477. package/src/components/FileDropzone/FileDropzone.scss +163 -135
  478. package/src/components/FileDropzone/FileDropzone.stories.tsx +219 -98
  479. package/src/components/FileDropzone/FileDropzone.tsx +144 -111
  480. package/src/components/FileDropzone/FilePreview.tsx +77 -77
  481. package/src/components/FileDropzone/RadioFilePreview.tsx +76 -0
  482. package/src/components/FileDropzone/index.ts +1 -1
  483. package/src/components/FileDropzone/types.ts +199 -126
  484. package/src/components/Form/Form.d.ts +2 -2
  485. package/src/components/Form/Form.scss +158 -158
  486. package/src/components/Form/Form.stories.tsx +508 -508
  487. package/src/components/Form/Form.ts +2 -2
  488. package/src/components/Form/Forms.tsx +41 -41
  489. package/src/components/Form/validation.json +29 -29
  490. package/src/components/GridLayout/GridLayout.scss +69 -69
  491. package/src/components/GridLayout/GridLayout.stories.tsx +90 -90
  492. package/src/components/GridLayout/GridLayout.tsx +39 -39
  493. package/src/components/GridLayout/GridLayoutStory.scss +25 -25
  494. package/src/components/GridLayout/types.ts +84 -84
  495. package/src/components/HighlightText/HighlightText.scss +3 -3
  496. package/src/components/HighlightText/HighlightText.stories.tsx +22 -22
  497. package/src/components/HighlightText/HighlightText.tsx +33 -33
  498. package/src/components/HighlightText/index.ts +1 -1
  499. package/src/components/HighlightText/types.ts +4 -4
  500. package/src/components/Icon/Icon.stories.tsx +65 -65
  501. package/src/components/Icon/Icon.tsx +88 -88
  502. package/src/components/Icon/Icons.scss +50 -50
  503. package/src/components/Icon/iconList.ts +494 -489
  504. package/src/components/Icon/index.ts +1 -1
  505. package/src/components/Icon/types.ts +14 -14
  506. package/src/components/IconButton/IconButton.scss +54 -54
  507. package/src/components/IconButton/IconButton.stories.tsx +34 -34
  508. package/src/components/IconButton/IconButton.tsx +32 -32
  509. package/src/components/IconButton/index.ts +1 -1
  510. package/src/components/IconButton/types.ts +5 -5
  511. package/src/components/IconRadioGroup/IconRadioGroup.scss +64 -64
  512. package/src/components/IconRadioGroup/IconRadioGroup.stories.tsx +108 -108
  513. package/src/components/IconRadioGroup/IconRadioGroup.tsx +73 -73
  514. package/src/components/IconRadioGroup/index.ts +1 -1
  515. package/src/components/IconRadioGroup/type.ts +49 -49
  516. package/src/components/Input/Input.scss +171 -159
  517. package/src/components/Input/Input.stories.tsx +141 -141
  518. package/src/components/Input/Input.tsx +120 -114
  519. package/src/components/Input/types.ts +85 -85
  520. package/src/components/InputWithDropdown/InputWithDropdown.scss +220 -213
  521. package/src/components/InputWithDropdown/InputWithDropdown.stories.tsx +169 -169
  522. package/src/components/InputWithDropdown/InputWithDropdown.tsx +129 -122
  523. package/src/components/InputWithDropdown/index.ts +1 -1
  524. package/src/components/InputWithDropdown/types.ts +113 -113
  525. package/src/components/LabelEditTextField/LabelEditTextField.scss +86 -86
  526. package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +192 -192
  527. package/src/components/LabelEditTextField/LabelEditTextField.tsx +246 -246
  528. package/src/components/LabelEditTextField/index.ts +1 -1
  529. package/src/components/LabelEditTextField/types.ts +46 -46
  530. package/src/components/LazyLoad/LazyLoad.d.ts +3 -3
  531. package/src/components/LazyLoad/LazyLoad.stories.tsx +33 -33
  532. package/src/components/LazyLoad/LazyLoad.ts +2 -2
  533. package/src/components/LazyLoad/LazyLoading.tsx +19 -19
  534. package/src/components/LazyLoad/index.ts +1 -1
  535. package/src/components/MachineInputField/MachineInputField.scss +59 -59
  536. package/src/components/MachineInputField/MachineInputField.stories.tsx +32 -32
  537. package/src/components/MachineInputField/MachineInputField.tsx +87 -87
  538. package/src/components/MachineInputField/index.ts +1 -1
  539. package/src/components/MachineInputField/types.ts +13 -13
  540. package/src/components/MenuOption/MenuOption.scss +97 -97
  541. package/src/components/MenuOption/MenuOption.stories.tsx +158 -157
  542. package/src/components/MenuOption/MenuOption.tsx +219 -219
  543. package/src/components/MenuOption/types.ts +230 -228
  544. package/src/components/MiniModal/MiniModal.scss +170 -170
  545. package/src/components/MiniModal/MiniModal.stories.tsx +735 -735
  546. package/src/components/MiniModal/MiniModal.tsx +344 -344
  547. package/src/components/MiniModal/index.ts +1 -1
  548. package/src/components/MiniModal/types.ts +123 -123
  549. package/src/components/Modal/Modal.stories.tsx +70 -70
  550. package/src/components/Modal/Modal.tsx +100 -100
  551. package/src/components/Modal/index.tsx +1 -1
  552. package/src/components/Modal/modal.scss +51 -51
  553. package/src/components/Modal/types.ts +43 -43
  554. package/src/components/ModulesChip/ModuleChip.scss +33 -20
  555. package/src/components/ModulesChip/ModuleChip.stories.tsx +41 -41
  556. package/src/components/ModulesChip/ModuleChip.tsx +28 -31
  557. package/src/components/ModulesChip/types.ts +14 -14
  558. package/src/components/MultiSelect/Dropdown.scss +78 -78
  559. package/src/components/MultiSelect/Dropdown.tsx +142 -135
  560. package/src/components/MultiSelect/MultiSelect.scss +246 -246
  561. package/src/components/MultiSelect/MultiSelect.stories.tsx +290 -287
  562. package/src/components/MultiSelect/MultiSelect.tsx +483 -482
  563. package/src/components/MultiSelect/MultiSelectTypes.ts +47 -47
  564. package/src/components/MultiSelect/dropdownTypes.ts +19 -19
  565. package/src/components/MultiSelect/index.ts +1 -1
  566. package/src/components/NLPInput/NLPInput.scss +246 -246
  567. package/src/components/NLPInput/NlpInput.stories.tsx +136 -136
  568. package/src/components/NLPInput/NlpInput.tsx +374 -374
  569. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +60 -60
  570. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +83 -83
  571. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +180 -180
  572. package/src/components/NLPInput/index.ts +1 -1
  573. package/src/components/NLPInput/type.tsx +124 -124
  574. package/src/components/Paper/Paper.scss +13 -13
  575. package/src/components/Paper/Paper.stories.tsx +77 -77
  576. package/src/components/Paper/Paper.tsx +14 -14
  577. package/src/components/Paper/types.ts +19 -19
  578. package/src/components/PhoneInput/PhoneInput.d.ts +3 -3
  579. package/src/components/PhoneInput/PhoneInput.stories.tsx +95 -95
  580. package/src/components/PhoneInput/PhoneInput.tsx +90 -90
  581. package/src/components/PhoneInput/index.ts +1 -1
  582. package/src/components/PhoneInput/phoneInput.scss +3 -3
  583. package/src/components/PhoneInput/types.ts +10 -10
  584. package/src/components/PopUpModal/PopUpModal.scss +36 -36
  585. package/src/components/PopUpModal/PopUpModal.stories.tsx +67 -62
  586. package/src/components/PopUpModal/PopUpModal.tsx +87 -86
  587. package/src/components/PopUpModal/types.ts +16 -15
  588. package/src/components/RadioButton/RadioButton.scss +106 -106
  589. package/src/components/RadioButton/RadioButton.stories.tsx +43 -43
  590. package/src/components/RadioButton/RadioButton.tsx +41 -41
  591. package/src/components/RadioButton/index.ts +1 -1
  592. package/src/components/RadioButton/radioButtonTypes.tsx +62 -62
  593. package/src/components/RadioGroup/RadioGroup.scss +11 -11
  594. package/src/components/RadioGroup/RadioGroup.stories.tsx +150 -150
  595. package/src/components/RadioGroup/RadioGroup.tsx +49 -49
  596. package/src/components/RadioGroup/index.ts +1 -1
  597. package/src/components/RadioGroup/radioGroupTypes.tsx +96 -96
  598. package/src/components/Search/Search.scss +103 -103
  599. package/src/components/Search/Search.stories.tsx +45 -26
  600. package/src/components/Search/Search.tsx +130 -127
  601. package/src/components/Search/index.ts +1 -1
  602. package/src/components/Search/types.ts +19 -15
  603. package/src/components/Select/Select.scss +213 -213
  604. package/src/components/Select/Select.stories.tsx +355 -355
  605. package/src/components/Select/Select.tsx +278 -278
  606. package/src/components/Select/components/Dropdown.scss +61 -61
  607. package/src/components/Select/components/Dropdown.tsx +140 -140
  608. package/src/components/Select/components/types.ts +24 -24
  609. package/src/components/Select/index.ts +1 -1
  610. package/src/components/Select/types.ts +134 -134
  611. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +128 -128
  612. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +56 -56
  613. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +167 -167
  614. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss +51 -51
  615. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx +107 -107
  616. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts +5 -5
  617. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +190 -190
  618. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +236 -236
  619. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +25 -25
  620. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.scss +3 -3
  621. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +68 -68
  622. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +17 -17
  623. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss +31 -31
  624. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx +85 -85
  625. package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts +4 -4
  626. package/src/components/SequentialConnectingBranch/index.ts +1 -1
  627. package/src/components/SequentialConnectingBranch/types.ts +60 -60
  628. package/src/components/StateDropdown/StateDropdown.stories.tsx +104 -104
  629. package/src/components/StateDropdown/StateDropdown.tsx +245 -245
  630. package/src/components/StateDropdown/StateDropdownTypes.tsx +27 -27
  631. package/src/components/StatusButton/StatusButton.scss +90 -90
  632. package/src/components/StatusButton/StatusButton.stories.tsx +91 -91
  633. package/src/components/StatusButton/StatusButton.tsx +46 -46
  634. package/src/components/StatusButton/index.ts +1 -1
  635. package/src/components/StatusButton/types.ts +45 -45
  636. package/src/components/StatusCard/StatusCard.scss +94 -94
  637. package/src/components/StatusCard/StatusCard.stories.tsx +58 -58
  638. package/src/components/StatusCard/StatusCard.tsx +49 -49
  639. package/src/components/StatusCard/index.ts +1 -1
  640. package/src/components/StatusCard/types.ts +10 -10
  641. package/src/components/Table/Table.scss +117 -116
  642. package/src/components/Table/Table.stories.tsx +373 -373
  643. package/src/components/Table/Table.tsx +178 -178
  644. package/src/components/Table/Types.ts +124 -124
  645. package/src/components/Table/index.ts +1 -1
  646. package/src/components/TableTree/Components/TableBody.tsx +35 -35
  647. package/src/components/TableTree/Components/TableCell.tsx +59 -59
  648. package/src/components/TableTree/Components/TableHead.tsx +39 -39
  649. package/src/components/TableTree/Components/TableRow.tsx +37 -37
  650. package/src/components/TableTree/TableTree.scss +205 -205
  651. package/src/components/TableTree/TableTree.stories.tsx +179 -179
  652. package/src/components/TableTree/TableTree.tsx +245 -245
  653. package/src/components/TableTree/TableTreeStories.scss +22 -22
  654. package/src/components/TableTree/Utils/getAllChildIds.ts +12 -12
  655. package/src/components/TableTree/data.ts +322 -322
  656. package/src/components/TableTree/index.ts +1 -1
  657. package/src/components/TableTree/types.ts +68 -68
  658. package/src/components/TableWithAccordion/TableWithAccordion.scss +54 -54
  659. package/src/components/TableWithAccordion/TableWithAccordion.stories.tsx +94 -94
  660. package/src/components/TableWithAccordion/TableWithAccordion.tsx +174 -174
  661. package/src/components/TableWithAccordion/data.ts +36 -36
  662. package/src/components/TableWithAccordion/types.ts +69 -69
  663. package/src/components/Tabs/Tabs.scss +132 -78
  664. package/src/components/Tabs/Tabs.stories.tsx +153 -134
  665. package/src/components/Tabs/Tabs.tsx +71 -62
  666. package/src/components/Tabs/index.ts +1 -1
  667. package/src/components/Tabs/types.ts +48 -48
  668. package/src/components/TextArea/Textarea.scss +144 -144
  669. package/src/components/TextArea/Textarea.stories.tsx +92 -92
  670. package/src/components/TextArea/Textarea.tsx +84 -84
  671. package/src/components/TextArea/Types.ts +82 -82
  672. package/src/components/TextArea/index.tsx +1 -1
  673. package/src/components/ThemeProvider/ThemeProvider.tsx +27 -27
  674. package/src/components/ThemeProvider/index.ts +1 -1
  675. package/src/components/ThemeProvider/types.ts +14 -14
  676. package/src/components/Toast/Toast.scss +121 -121
  677. package/src/components/Toast/Toast.stories.tsx +144 -144
  678. package/src/components/Toast/Toast.tsx +117 -117
  679. package/src/components/Toast/index.ts +1 -1
  680. package/src/components/Toast/types.ts +27 -27
  681. package/src/components/Toastify/Toastify.stories.tsx +71 -71
  682. package/src/components/Toastify/Toastify.tsx +94 -94
  683. package/src/components/Toastify/index.ts +1 -1
  684. package/src/components/Toastify/types.ts +9 -9
  685. package/src/components/Toggle/Toggle.scss +133 -133
  686. package/src/components/Toggle/Toggle.stories.tsx +132 -132
  687. package/src/components/Toggle/Toggle.tsx +96 -96
  688. package/src/components/Toggle/index.ts +1 -1
  689. package/src/components/Toggle/types.ts +43 -43
  690. package/src/components/ToggleSwitch/ToggleSwitch.scss +58 -58
  691. package/src/components/ToggleSwitch/ToggleSwitch.stories.tsx +52 -52
  692. package/src/components/ToggleSwitch/ToggleSwitch.tsx +30 -30
  693. package/src/components/ToggleSwitch/index.ts +1 -1
  694. package/src/components/Tooltip/Tooltip.scss +27 -27
  695. package/src/components/Tooltip/Tooltip.stories.tsx +98 -98
  696. package/src/components/Tooltip/Tooltip.tsx +194 -194
  697. package/src/components/Tooltip/index.ts +1 -1
  698. package/src/components/Tooltip/types.ts +66 -66
  699. package/src/components/Typography/Typography.scss +25 -25
  700. package/src/components/Typography/Typography.stories.tsx +59 -59
  701. package/src/components/Typography/Typography.tsx +41 -41
  702. package/src/components/Typography/index.ts +1 -1
  703. package/src/components/Typography/types.ts +57 -57
  704. package/src/components/VariableInput/VariableInput.scss +127 -127
  705. package/src/components/VariableInput/VariableInput.stories.tsx +32 -32
  706. package/src/components/VariableInput/VariableInput.tsx +352 -352
  707. package/src/components/VariableInput/types.ts +56 -56
  708. package/src/hooks/keyboardevents/useEscKeyEvent.tsx +30 -30
  709. package/src/hooks/useClickOutside.tsx +30 -30
  710. package/src/hooks/useFileDropzone.tsx +275 -274
  711. package/src/hooks/usePortalPosition.tsx +53 -53
  712. package/src/hooks/useTheme.tsx +13 -13
  713. package/src/index.ts +203 -200
  714. package/src/utils/FormatString/FormatString.stories.tsx +58 -0
  715. package/src/utils/FormatString/FormatString.tsx +41 -0
  716. package/src/utils/TableCell/TableCell.ts +16 -16
  717. package/src/utils/capitalize/capitalize.stories.tsx +44 -44
  718. package/src/utils/capitalize/capitalize.tsx +4 -4
  719. package/src/utils/checkDuplicates/CheckDuplicates.stories.tsx +40 -40
  720. package/src/utils/checkDuplicates/checkDuplicates.ts +13 -13
  721. package/src/utils/checkEmpty/checkEmpty.stories.tsx +34 -34
  722. package/src/utils/checkEmpty/checkEmpty.ts +24 -24
  723. package/src/utils/compareArrays/compareArrays.stories.tsx +62 -62
  724. package/src/utils/compareArrays/compareArrays.ts +31 -31
  725. package/src/utils/compareObjects/compareObjects.stories.tsx +51 -51
  726. package/src/utils/compareObjects/compareObjects.ts +53 -53
  727. package/src/utils/debounce/debounce.stories.tsx +81 -81
  728. package/src/utils/debounce/debounce.ts +28 -28
  729. package/src/utils/downloadFile/saveFileFromBlob.stories.tsx +62 -62
  730. package/src/utils/downloadFile/saveFileFromBlob.ts +40 -40
  731. package/src/utils/ffID/ffID.stories.tsx +35 -35
  732. package/src/utils/ffID/ffid.ts +7 -7
  733. package/src/utils/findAndInsert/findAndInsert.stories.tsx +119 -119
  734. package/src/utils/findAndInsert/findAndInsert.ts +49 -49
  735. package/src/utils/getEncryptedData/getEncryptedData.stories.tsx +55 -55
  736. package/src/utils/getEncryptedData/getEncryptedData.ts +8 -8
  737. package/src/utils/getExtension/getExtension.stories.tsx +23 -23
  738. package/src/utils/getExtension/getExtension.ts +28 -28
  739. package/src/utils/getSelectOptionValue/getSelectOptionValue.ts +31 -31
  740. package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx +72 -72
  741. package/src/utils/getSequentialPayload/getSequentialPayload.ts +16 -16
  742. package/src/utils/getSequentialPayload/types.ts +32 -32
  743. package/src/utils/throttle/throttle.stories.tsx +100 -100
  744. package/src/utils/throttle/throttle.ts +33 -33
  745. package/src/utils/truncateText/truncateText.stories.tsx +37 -37
  746. package/src/utils/truncateText/truncateText.ts +4 -4
  747. package/tsconfig.json +55 -55
  748. package/vite.config.js +14 -14
  749. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  750. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  751. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  752. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  753. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  754. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  755. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  756. package/lib/components/AddButton/AddButton.d.ts +0 -5
  757. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  758. package/lib/components/AddButton/index.d.ts +0 -1
  759. package/lib/components/AddButton/types.d.ts +0 -4
  760. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  761. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
  762. package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
  763. package/lib/components/AttachImage/AttachImage.stories.d.ts +0 -7
  764. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
  765. package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
  766. package/lib/components/Button/Button.stories.d.ts +0 -13
  767. package/lib/components/Charts/BarChart/BarChart.stories.d.ts +0 -6
  768. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
  769. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  770. package/lib/components/Charts/IconRadialChart/IconRadialChart.stories.d.ts +0 -8
  771. package/lib/components/Charts/LineChart/LineChart.stories.d.ts +0 -7
  772. package/lib/components/Charts/MultiRadialChart/MultiRadialChart.stories.d.ts +0 -8
  773. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
  774. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  775. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  776. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  777. package/lib/components/ConnectingBranch/ConnectingBranch.stories.d.ts +0 -6
  778. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  779. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  780. package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
  781. package/lib/components/EditTextField/EditTextField.stories.d.ts +0 -10
  782. package/lib/components/Editor/Editor.stories.d.ts +0 -6
  783. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  784. package/lib/components/Excel/ExcelFile.stories.d.ts +0 -6
  785. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  786. package/lib/components/ExcelFile/ColorBarSelector/ColorBarSelector.d.ts +0 -8
  787. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +0 -4
  788. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
  789. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
  790. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
  791. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
  792. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
  793. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
  794. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
  795. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
  796. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
  797. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
  798. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
  799. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
  800. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
  801. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
  802. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
  803. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
  804. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
  805. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
  806. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
  807. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
  808. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
  809. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
  810. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
  811. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
  812. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
  813. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
  814. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
  815. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
  816. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
  817. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
  818. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
  819. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
  820. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
  821. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
  822. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
  823. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
  824. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
  825. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  826. package/lib/components/ExcelFile/Types.d.ts +0 -129
  827. package/lib/components/ExcelFile/index.d.ts +0 -1
  828. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  829. package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
  830. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  831. package/lib/components/Form/Form.stories.d.ts +0 -7
  832. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  833. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  834. package/lib/components/Icon/Icon.stories.d.ts +0 -8
  835. package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
  836. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
  837. package/lib/components/Input/Input.stories.d.ts +0 -9
  838. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  839. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -13
  840. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  841. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
  842. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
  843. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
  844. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  845. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
  846. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -11
  847. package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
  848. package/lib/components/Paper/Paper.stories.d.ts +0 -11
  849. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  850. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
  851. package/lib/components/Search/Search.stories.d.ts +0 -6
  852. package/lib/components/Select/Select.stories.d.ts +0 -14
  853. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  854. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
  855. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
  856. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  857. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  858. package/lib/components/StatusCard/StatusCard.stories.d.ts +0 -11
  859. package/lib/components/Table/Table.stories.d.ts +0 -13
  860. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  861. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  862. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  863. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  864. package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
  865. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  866. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  867. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  868. package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
  869. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  870. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  871. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  872. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  873. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  874. package/lib/utils/find/findAndInsert.d.ts +0 -7
  875. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  876. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
  877. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
  878. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  879. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +0 -10
  880. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  881. package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
package/lib/index.js CHANGED
@@ -371,7 +371,9 @@ const SvgForwardIcon = (props) => /* @__PURE__ */ React__namespace.createElement
371
371
 
372
372
  const SvgReload = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M13.6483 2.35282C12.4042 1.10288 10.7824 0.299891 9.03527 0.0688652C7.28812 -0.16216 5.51372 0.191745 3.98832 1.07548C2.46292 1.95921 1.27213 3.32318 0.601357 4.95502C-0.0694201 6.58686 -0.182542 8.395 0.279602 10.0979C0.741747 11.8008 1.75322 13.3029 3.15655 14.3704C4.55988 15.4378 6.2763 16.0107 8.03858 15.9998C9.80085 15.989 11.5101 15.3949 12.9002 14.3102C14.2902 13.2255 15.2831 11.7111 15.7243 10.0026H13.6483C13.2813 11.0382 12.6372 11.953 11.7862 12.6469C10.9352 13.3408 9.91013 13.7871 8.82296 13.9372C7.73579 14.0872 6.62836 13.9351 5.62165 13.4976C4.61494 13.0601 3.74769 12.3539 3.11465 11.4562C2.48161 10.5586 2.10714 9.50398 2.03214 8.40764C1.95715 7.3113 2.18451 6.21541 2.6894 5.2397C3.19429 4.264 3.95728 3.44601 4.89501 2.87511C5.83273 2.30422 6.90912 2.00238 8.00656 2.00257C8.79185 2.00381 9.569 2.16189 10.2925 2.46754C11.0161 2.77319 11.6715 3.22027 12.2203 3.78264L9.00446 7.00695H16V0.00205947L13.6483 2.35282Z", fill: "currentColor" }));
373
373
 
374
- const SvgWindowMaximize = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M4.58189 0H14.2429C14.7086 0.00113232 15.1548 0.188831 15.4841 0.522043C15.8134 0.855255 15.9989 1.30686 16 1.7781V11.3632C15.9989 11.8345 15.8134 12.2861 15.4841 12.6193C15.1548 12.9525 14.7086 13.1402 14.2429 13.1413H4.58189C4.11623 13.1402 3.66997 12.9525 3.3407 12.6193C3.01143 12.2861 2.82595 11.8345 2.82483 11.3632V1.7781C2.82595 1.30686 3.01143 0.855255 3.3407 0.522043C3.66997 0.188831 4.11623 0.00113232 4.58189 0ZM4.58189 11.3618H14.2429V1.7781H4.58189V11.3618Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M1.75706 2.85889H11.4181C11.8837 2.86002 12.33 3.04772 12.6593 3.38093C12.9885 3.71414 13.174 4.16575 13.1751 4.63698V14.2221C13.174 14.6933 12.9885 15.145 12.6593 15.4782C12.33 15.8114 11.8837 15.9991 11.4181 16.0002H1.75706C1.2914 15.9991 0.845138 15.8114 0.515867 15.4782C0.186597 15.145 0.00111893 14.6933 0 14.2221V4.63698C0.00111893 4.16575 0.186597 3.71414 0.515867 3.38093C0.845138 3.04772 1.2914 2.86002 1.75706 2.85889ZM1.75706 14.2207H11.4181V4.63698H1.75706V14.2207Z", fill: "currentColor" }));
374
+ const SvgWindowMaximize = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M2.13379 0H13.8662C14.4317 0.00137864 14.9737 0.229908 15.3735 0.635605C15.7734 1.0413 15.9986 1.59115 16 2.16489V13.8351C15.9986 14.4089 15.7734 14.9587 15.3735 15.3644C14.9737 15.7701 14.4317 15.9986 13.8662 16H2.13379C1.56829 15.9986 1.02634 15.7701 0.626474 15.3644C0.226604 14.9587 0.00135883 14.4089 0 13.8351V2.16489C0.00135883 1.59115 0.226604 1.0413 0.626474 0.635605C1.02634 0.229908 1.56829 0.00137864 2.13379 0ZM2.13379 13.8334H13.8662V2.16489H2.13379V13.8334Z", fill: "currentColor" }));
375
+
376
+ const SvgWindowRestore = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M4.58189 0H14.2429C14.7086 0.00113232 15.1548 0.188831 15.4841 0.522043C15.8134 0.855255 15.9989 1.30686 16 1.7781V11.3632C15.9989 11.8345 15.8134 12.2861 15.4841 12.6193C15.1548 12.9525 14.7086 13.1402 14.2429 13.1413H4.58189C4.11623 13.1402 3.66997 12.9525 3.3407 12.6193C3.01143 12.2861 2.82595 11.8345 2.82483 11.3632V1.7781C2.82595 1.30686 3.01143 0.855255 3.3407 0.522043C3.66997 0.188831 4.11623 0.00113232 4.58189 0ZM4.58189 11.3618H14.2429V1.7781H4.58189V11.3618Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M1.75706 2.85889H11.4181C11.8837 2.86002 12.33 3.04772 12.6593 3.38093C12.9885 3.71414 13.174 4.16575 13.1751 4.63698V14.2221C13.174 14.6933 12.9885 15.145 12.6593 15.4782C12.33 15.8114 11.8837 15.9991 11.4181 16.0002H1.75706C1.2914 15.9991 0.845138 15.8114 0.515867 15.4782C0.186597 15.145 0.00111893 14.6933 0 14.2221V4.63698C0.00111893 4.16575 0.186597 3.71414 0.515867 3.38093C0.845138 3.04772 1.2914 2.86002 1.75706 2.85889ZM1.75706 14.2207H11.4181V4.63698H1.75706V14.2207Z", fill: "currentColor" }));
375
377
 
376
378
  const SvgWindowMinimize = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 4", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.5008 0H1.5008C1.10276 0 0.721029 0.158121 0.439574 0.439575C0.15812 0.72103 0 1.10276 0 1.5008L0 2.5008C0 2.89884 0.15812 3.28057 0.439574 3.56203C0.721029 3.84348 1.10276 4.0016 1.5008 4.0016H14.5008C14.8986 4.00117 15.2799 3.84287 15.561 3.56146C15.8421 3.28005 16 2.89856 16 2.5008V1.5008C16 1.10304 15.8421 0.721548 15.561 0.44014C15.2799 0.158731 14.8986 0.000424051 14.5008 0Z", fill: "currentColor" }));
377
379
 
@@ -625,6 +627,8 @@ const SvgSuitesIcon = (props) => /* @__PURE__ */ React__namespace.createElement(
625
627
 
626
628
  const SvgExecutionsIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.42014 8.97643C7.46283 8.90515 7.43976 8.81322 7.36892 8.77079L7.36865 8.77063C7.29803 8.72803 7.20609 8.75093 7.16353 8.8218L7.16352 8.82182L6.57195 9.8062L6.48624 9.94883L6.40053 9.8062L5.80905 8.82196L7.42014 8.97643ZM7.42014 8.97643L6.69178 10.1882L6.66082 10.2397L6.69178 10.2912L7.4202 11.5034C7.4202 11.5034 7.42021 11.5034 7.42021 11.5034C7.46274 11.5742 7.43983 11.6661 7.36892 11.7086L7.36827 11.709C7.34457 11.7234 7.31833 11.7303 7.29187 11.7303C7.2409 11.7303 7.19165 11.7044 7.16355 11.6576L7.16352 11.6576L6.57195 10.6732L6.48624 10.5305L6.40053 10.6732L5.80896 11.6576L5.80893 11.6576C5.7809 11.7043 5.7314 11.7303 5.6803 11.7303C5.65428 11.7303 5.62788 11.7235 5.60361 11.7088L5.60325 11.7086C5.53234 11.6661 5.50943 11.5742 5.55195 11.5034C5.55196 11.5034 5.55196 11.5034 5.55197 11.5034L6.28039 10.2912L6.31135 10.2397L6.28039 10.1882L5.55203 8.97643C5.55202 8.97642 5.55202 8.97642 5.55202 8.97641C5.50934 8.90513 5.53242 8.81321 5.60325 8.77079L5.60351 8.77063C5.67402 8.7281 5.76603 8.75082 5.80896 8.82182L7.42014 8.97643ZM10.8504 1.00273L10.8504 1.00273C10.785 0.937312 10.6962 0.9 10.6031 0.9H5.35437C4.07756 0.9 3.03905 1.93885 3.03905 3.21563V7.50031H1.19468C0.763824 7.50031 0.413428 7.85071 0.413428 8.28156V12.1978C0.413428 12.6287 0.763824 12.9791 1.19468 12.9791H3.03905V14.7844C3.03905 16.0611 4.07756 17.1 5.35437 17.1H13.2712C14.548 17.1 15.5866 16.0611 15.5866 14.7844V5.88469C15.5866 5.79207 15.5499 5.70284 15.4841 5.63711L10.8504 1.00273ZM3.45343 10.2422H3.35343V10.3422V11.3306V11.4306H3.45343H4.81405C4.89703 11.4306 4.96405 11.4978 4.96405 11.5803C4.96405 11.6632 4.89695 11.7303 4.81405 11.7303H3.20374C3.12084 11.7303 3.05374 11.6632 3.05374 11.5803V8.89906C3.05374 8.81617 3.12084 8.74906 3.20374 8.74906H4.81405C4.89695 8.74906 4.96405 8.81617 4.96405 8.89906C4.96405 8.98156 4.89703 9.04875 4.81405 9.04875H3.45343H3.35343V9.14875V9.8425V9.9425H3.45343H4.70343C4.78601 9.9425 4.85312 10.0096 4.85312 10.0922C4.85312 10.1752 4.78593 10.2422 4.70343 10.2422H3.45343ZM5.46624 9.02781C5.3953 8.90938 5.43343 8.75594 5.55187 8.685C5.66999 8.61375 5.82343 8.65219 5.89468 8.77031L5.46624 9.02781ZM8.49999 10.2422H8.39999V10.3422V11.3306V11.4306H8.49999H9.86062C9.94359 11.4306 10.0106 11.4978 10.0106 11.5803C10.0106 11.6632 9.94351 11.7303 9.86062 11.7303H8.2503C8.16741 11.7303 8.1003 11.6632 8.1003 11.5803V8.89906C8.1003 8.81617 8.16741 8.74906 8.2503 8.74906H9.86062C9.94351 8.74906 10.0106 8.81617 10.0106 8.89906C10.0106 8.98156 9.94359 9.04875 9.86062 9.04875H8.49999H8.39999V9.14875V9.8425V9.9425H8.49999H9.74999C9.83257 9.9425 9.89968 10.0096 9.89968 10.0922C9.89968 10.1752 9.83249 10.2422 9.74999 10.2422H8.49999ZM14.8869 14.7844C14.8869 15.6754 14.1619 16.4003 13.2712 16.4003H5.35437C4.46367 16.4003 3.73874 15.6754 3.73874 14.7844V12.9791H11.8697C12.3005 12.9791 12.6509 12.6287 12.6509 12.1978V8.28156C12.6509 7.85071 12.3005 7.50031 11.8697 7.50031H3.73874V3.21563C3.73874 2.32459 4.46367 1.59969 5.35437 1.59969H10.2531V5.38406C10.2531 5.85293 10.634 6.23438 11.1025 6.23438H14.8869V14.7844Z", fill: "currentColor", stroke: "currentColor", strokeWidth: 0.2 }));
627
629
 
630
+ const SvgImportIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.6006 9.17662L6.68843 12.5781V11.1817C6.68843 11.1128 6.6324 11.0567 6.56343 11.0567H1.37695V7.29659H6.56343C6.63246 7.29659 6.68843 7.24065 6.68843 7.17159V5.77518L10.6006 9.17662ZM14.9394 1.55273L16.4502 3.06355H14.9394V1.55273Z", fill: "currentColor", stroke: "currentColor", strokeWidth: 0.2 }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.3145 4.21158H7.23353C7.09525 4.21158 6.98337 4.0997 6.98337 3.96158C6.98337 3.82389 7.09525 3.71173 7.23353 3.71173H12.3144C12.4526 3.71173 12.5644 3.82392 12.5644 3.96158C12.5645 4.0997 12.4526 4.21158 12.3145 4.21158ZM14.5616 14.3913C14.5616 14.5295 14.4494 14.6414 14.3116 14.6414H7.23353C7.09525 14.6414 6.98337 14.5295 6.98337 14.3913C6.98337 14.2536 7.09525 14.1413 7.23353 14.1413H14.3116C14.4494 14.1413 14.5616 14.2536 14.5616 14.3913ZM14.5616 12.3054C14.5616 12.4435 14.4494 12.5554 14.3116 12.5554H8.68625C8.54812 12.5554 8.43625 12.4435 8.43625 12.3054C8.43625 12.1676 8.54812 12.0554 8.68625 12.0554H14.3116C14.4494 12.0554 14.5616 12.1676 14.5616 12.3054ZM14.5616 8.13343C14.5616 8.27171 14.4494 8.38359 14.3116 8.38359H11.2879C11.1498 8.38359 11.0379 8.27171 11.0379 8.13343C11.0379 7.99574 11.1498 7.88355 11.2879 7.88355H14.3116C14.4494 7.88355 14.5616 7.99574 14.5616 8.13343ZM14.5616 10.2194C14.5616 10.3575 14.4494 10.4694 14.3116 10.4694H11.2879C11.1498 10.4694 11.0379 10.3575 11.0379 10.2194C11.0379 10.0817 11.1498 9.9694 11.2879 9.9694H14.3116C14.4494 9.9694 14.5616 10.0817 14.5616 10.2194ZM14.5616 6.04758C14.5616 6.18571 14.4494 6.29758 14.3116 6.29758H8.68625C8.54812 6.29758 8.43625 6.18571 8.43625 6.04758C8.43625 5.90974 8.54812 5.79758 8.68625 5.79758H14.3116C14.4494 5.79755 14.5616 5.90974 14.5616 6.04758ZM5.04287 16.501H16.5019V3.43842H14.8144C14.6763 3.43842 14.5644 3.3267 14.5644 3.18858V1.50101H5.04287V6.92158H6.31356V5.5007C6.31356 5.40295 6.37062 5.3138 6.45978 5.27324C6.54881 5.23255 6.65346 5.24789 6.72718 5.3123L10.955 8.98796C11.0097 9.03543 11.041 9.10412 11.041 9.17665C11.041 9.24887 11.0097 9.31787 10.955 9.36549L6.72718 13.041C6.6809 13.0814 6.62253 13.1026 6.56312 13.1026C6.52818 13.1026 6.49281 13.0951 6.45978 13.0801C6.37059 13.0395 6.31356 12.9503 6.31356 12.8526V11.4316H5.04287V16.501ZM1.50195 7.42158V10.9317H6.56343C6.70125 10.9317 6.81343 11.0436 6.81343 11.1817V12.3038L10.4101 9.17665L6.81343 6.04949V7.17158C6.81343 7.30986 6.70125 7.42158 6.56343 7.42158H1.50195ZM15.0644 1.85448L16.1485 2.93851H15.0644V1.85448ZM16.9288 3.01195L14.991 1.0741C14.9441 1.02723 14.8806 1.00098 14.8144 1.00098H4.79287C4.65474 1.00098 4.54287 1.11285 4.54287 1.25098V6.92155H1.25195C1.11383 6.92155 1.00195 7.03343 1.00195 7.17155V11.1817C1.00195 11.3198 1.11383 11.4315 1.25195 11.4315H4.54287V16.751C4.54287 16.8891 4.65474 17.001 4.79287 17.001H16.752C16.8901 17.001 17.002 16.8891 17.002 16.751V3.18854C17.002 3.12223 16.9757 3.05882 16.9288 3.01195Z", fill: "currentColor", stroke: "currentColor", strokeWidth: 0.2 }));
631
+
628
632
  let Components = {};
629
633
  Components['success'] = SvgSuccess;
630
634
  Components['alert'] = SvgAlert;
@@ -750,6 +754,7 @@ Components['backward_icon'] = SvgBackwardIcon;
750
754
  Components['forward_icon'] = SvgForwardIcon;
751
755
  Components['reload'] = SvgReload;
752
756
  Components['window_maximize'] = SvgWindowMaximize;
757
+ Components['window_restore'] = SvgWindowRestore;
753
758
  Components['window_minimize'] = SvgWindowMinimize;
754
759
  Components['hamburger_menu'] = SvgHamburgerMenu;
755
760
  Components['app_switch'] = SvgAppSwitch;
@@ -864,6 +869,7 @@ Components['machine_enable_icon'] = SvgMachineEnableIcon;
864
869
  Components['machine_disable_icon'] = SvgMachineDisableIcon;
865
870
  Components['executions_icon'] = SvgExecutionsIcon;
866
871
  Components['suites_icon'] = SvgSuitesIcon;
872
+ Components['import_icon'] = SvgImportIcon;
867
873
 
868
874
  var css_248z$1f = ".ff-icon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 4px;\n box-sizing: content-box;\n}\n.ff-icon-container.ff-icon-danger:hover {\n background-color: var(--ff-icon-color-danger-variant);\n}\n.ff-icon-container.ff-icon-dark {\n background-color: var(--brand-color);\n border-radius: 4px;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover {\n background-color: white;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n\n.ff-icon-click {\n cursor: pointer;\n box-sizing: content-box;\n}\n.ff-icon-click:hover {\n border-radius: 4px;\n background-color: var(--ff-icon-hover-fill-color);\n}\n.ff-icon-click:hover > svg {\n color: var(--brand-color);\n}\n\n.ff-icon-disabled {\n cursor: no-drop;\n}\n.ff-icon-disabled > svg {\n color: var(--toggle-strip-color);\n}\n.ff-icon-disabled:hover {\n box-shadow: none;\n}\n.ff-icon-disabled:hover > svg {\n color: var(--toggle-strip-color);\n}";
869
875
  styleInject(css_248z$1f);
@@ -1042,7 +1048,7 @@ function useEscapeKey(key) {
1042
1048
  };
1043
1049
  }
1044
1050
 
1045
- var css_248z$1c = ":root {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #71347b;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}\n\n:root {\n --base-bg-color: #1e1a22;\n --brand-color: #71347b;\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n --file-details-bg: #0d0d0d;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347b;\n --avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #333234;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-search-field-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-active-status-color: #4caf50;\n --ff-machine-running-status-color: #2055de;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}\n\n.ff-light-theme {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #71347b;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}\n\n.ff-dark-theme {\n --base-bg-color: #1e1a22;\n --brand-color: #71347b;\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n --file-details-bg: #0d0d0d;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347b;\n --avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #333234;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-search-field-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-active-status-color: #4caf50;\n --ff-machine-running-status-color: #2055de;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}";
1051
+ var css_248z$1c = ":root {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #71347b;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}\n\n:root {\n --base-bg-color: #1e1a22;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n --file-details-bg: #0d0d0d;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347b;\n --avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #333234;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-search-field-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-active-status-color: #4caf50;\n --ff-machine-running-status-color: #2055de;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}\n\n.ff-light-theme {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #71347b;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}\n\n.ff-dark-theme {\n --base-bg-color: #1e1a22;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n --file-details-bg: #0d0d0d;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347b;\n --avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #333234;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-search-field-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-active-status-color: #4caf50;\n --ff-machine-running-status-color: #2055de;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}";
1046
1052
  styleInject(css_248z$1c);
1047
1053
 
1048
1054
  const ThemeContext = /*#__PURE__*/React.createContext(undefined);
@@ -1568,9 +1574,10 @@ const Dropdown$2 = /*#__PURE__*/React.forwardRef(({
1568
1574
  dropdownPosition = {},
1569
1575
  zIndex,
1570
1576
  withSelectButton,
1571
- labelAccessor
1577
+ labelAccessor = 'label',
1578
+ valueAccessor = 'value'
1572
1579
  }, ref) => {
1573
- const filteredOptions = options ? options.filter(option => getLabel(option, labelAccessor)?.toLowerCase().includes(searchedKeyword.toLowerCase())) : [];
1580
+ const filteredOptions = options ? options.filter(option => getValue$1(option, valueAccessor)?.toLowerCase().includes(searchedKeyword.toLowerCase())) : [];
1574
1581
  const {
1575
1582
  verticalMargin,
1576
1583
  optionHeight,
@@ -1580,6 +1587,12 @@ const Dropdown$2 = /*#__PURE__*/React.forwardRef(({
1580
1587
  e.stopPropagation();
1581
1588
  handleOptionChange({}, false);
1582
1589
  };
1590
+ const renderOption = (info, labelAccessor) => {
1591
+ if (typeof info[labelAccessor] === 'string') {
1592
+ return truncateText(getLabel(info, labelAccessor), 25);
1593
+ }
1594
+ return info[labelAccessor];
1595
+ };
1583
1596
  const topPosition = React.useMemo(() => {
1584
1597
  let calculatedDropdownHeight = Math.min(filteredOptions.length * optionHeight, maxDropdownHeight);
1585
1598
  if (filteredOptions.length < 5 && withSelectButton) {
@@ -1629,10 +1642,10 @@ const Dropdown$2 = /*#__PURE__*/React.forwardRef(({
1629
1642
  disabled: info?.isDisabled
1630
1643
  }), jsxRuntime.jsx(Tooltip, {
1631
1644
  zIndex: zIndex + 1,
1632
- title: getLabel(info, labelAccessor).length > 25 ? getLabel(info, labelAccessor) : '',
1645
+ title: typeof info[labelAccessor] === 'string' && getLabel(info, labelAccessor)?.length > 25 ? getLabel(info, labelAccessor) : '',
1633
1646
  children: jsxRuntime.jsx(Typography, {
1634
1647
  className: "dropdown-option-label",
1635
- children: truncateText(getLabel(info, labelAccessor), 25)
1648
+ children: renderOption(info, labelAccessor)
1636
1649
  })
1637
1650
  })]
1638
1651
  }, getLabel(info, labelAccessor)))
@@ -1666,7 +1679,7 @@ const ChipElement = ({
1666
1679
  fontSize: 10,
1667
1680
  lineHeight: '14px',
1668
1681
  className: "stye",
1669
- children: truncateText(label, 25)
1682
+ children: typeof label === 'string' ? truncateText(label, 25) : label
1670
1683
  })
1671
1684
  })
1672
1685
  }), !disableChip && jsxRuntime.jsx(Icon, {
@@ -1698,8 +1711,8 @@ const MultiSelect = ({
1698
1711
  className = '',
1699
1712
  highlightedMachine = '',
1700
1713
  onSelectButtonClick = () => {},
1701
- labelAccessor = '',
1702
- valueAccessor = labelAccessor,
1714
+ labelAccessor = 'label',
1715
+ valueAccessor = 'value',
1703
1716
  withSelectButton = variant === 'machines' ? true : false,
1704
1717
  onEnter = () => {}
1705
1718
  }) => {
@@ -1805,7 +1818,7 @@ const MultiSelect = ({
1805
1818
  setSearchedKeyword(input);
1806
1819
  onSearch?.(input);
1807
1820
  if (input.length > 2) {
1808
- const matchedOption = allOptions.find(option => getLabel(option, labelAccessor)?.toLowerCase() === input.toLowerCase());
1821
+ const matchedOption = allOptions.find(option => getLabel(option, valueAccessor)?.toLowerCase() === input.toLowerCase());
1809
1822
  setDisplayIcon(!matchedOption);
1810
1823
  } else {
1811
1824
  setDisplayIcon(false);
@@ -1855,9 +1868,9 @@ const MultiSelect = ({
1855
1868
  };
1856
1869
  }, [isOpen]);
1857
1870
  React.useEffect(() => {
1858
- if (!checkEmpty(options?.length)) {
1871
+ if (!checkEmpty(options)) {
1859
1872
  let initializeOptions = options;
1860
- if (!checkEmpty(selectedOptions?.length)) {
1873
+ if (!checkEmpty(selectedOptions)) {
1861
1874
  initializeOptions = options.map(option => ({
1862
1875
  ...option,
1863
1876
  isChecked: selectedOptions.some(selectedOption => getValue$1(selectedOption, valueAccessor) === getValue$1(option, valueAccessor))
@@ -2273,7 +2286,7 @@ const Chip = ({
2273
2286
  });
2274
2287
  };
2275
2288
 
2276
- var css_248z$11 = ".fontXs, .ff-input-container .ff-input::placeholder, .ff-input-container .ff-input-label-container::placeholder, .ff-input-container:focus-within .ff-input-label-container, .ff-input-container .ff-input-message {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-input-container .ff-input, .ff-input-container .ff-input-label-container {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-input-container {\n display: flex;\n flex-direction: column;\n position: relative;\n}\n.ff-input-container .ff-input, .ff-input-container .ff-input-label-container {\n padding: 6px 8px;\n border: 1px solid var(--input-default-border-color);\n border-radius: 4px;\n outline: none;\n line-height: 18px;\n}\n.ff-input-container .ff-input--medium {\n padding: 10px 9px;\n}\n.ff-input-container .ff-input:disabled, .ff-input-container .ff-input-label-container:disabled {\n cursor: not-allowed;\n}\n.ff-input-container .ff-input::placeholder, .ff-input-container .ff-input-label-container::placeholder {\n opacity: 0;\n line-height: 15px;\n}\n.ff-input-container .ff-input--disabled {\n background: transparent;\n border-color: var(--input-default-border-color);\n}\n.ff-input-container .ff-input--danger {\n border-color: var(--input-error-text-color);\n}\n.ff-input-container .ff-input--transparentBackground {\n background: transparent;\n}\n.ff-input-container .ff-input--no-border {\n border: none;\n}\n.ff-input-container .ff-input--placeholder::placeholder {\n opacity: 1;\n}\n.ff-input-container .ff-input-label-container {\n display: flex;\n gap: 2px;\n position: absolute;\n border: none;\n outline: none;\n line-height: 18px;\n margin-top: 1px;\n transition: all 0.3s ease-in-out;\n}\n.ff-input-container .ff-input-label-container--medium {\n line-height: 25px;\n}\n.ff-input-container .ff-input-label-container .ff-input-label {\n color: var(--input-default-label-color);\n}\n.ff-input-container .ff-input-label-container .ff-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-container .ff-input-label-container .ff-input-label--disabled {\n color: var(--input-default-border-color);\n background-color: var(--input-label-bg-color);\n}\n.ff-input-container .ff-input-label-container .required-asterisk {\n color: var(--input-error-text-color);\n}\n.ff-input-container:hover .ff-input-label {\n color: var(--input-default-label-color);\n}\n.ff-input-container:hover .ff-input-label--no-hover {\n color: var(--input-default-label-color);\n}\n.ff-input-container:hover .ff-input-label--disabled {\n color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-container:hover .ff-input, .ff-input-container:hover .ff-input-label-container {\n border-color: var(--brand-color);\n}\n.ff-input-container:hover .ff-input--no-hover {\n border-color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input--disabled {\n background: transparent;\n border-color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input--danger {\n border-color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input-label-container {\n top: -9px;\n background-color: var(--input-label-bg-color);\n line-height: 15px;\n padding: 0px 2px;\n margin-left: 10px;\n}\n.ff-input-container:focus-within .ff-input-label--primary {\n color: var(--brand-color);\n}\n.ff-input-container:focus-within .ff-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input, .ff-input-container:focus-within .ff-input-label-container {\n border-color: var(--brand-color);\n}\n.ff-input-container:focus-within .ff-input--danger {\n border-color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input::placeholder, .ff-input-container:focus-within .ff-input-label-container::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-input-container .ff-input-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 15px;\n}\n.ff-input-container .ff-input-message--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-container--float .ff-input-label-container {\n top: -9px;\n font-size: 10px;\n background-color: var(--input-label-bg-color);\n line-height: 15px;\n padding: 0px 2px;\n margin-left: 10px;\n}\n.ff-input-container--float--disabled {\n cursor: not-allowed;\n}\n.ff-input-container--float--disabled .ff-input-label-container {\n cursor: not-allowed;\n}";
2289
+ var css_248z$11 = ".fontXs, .ff-input-fieldset .ff-input-container .ff-input::placeholder, .ff-input-fieldset .ff-input-container .ff-input-label-container::placeholder, .ff-input-fieldset .ff-input-container:focus-within .ff-input-label-container, .ff-input-fieldset .ff-input-container .ff-input-message {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-input-fieldset .ff-input-container .ff-input, .ff-input-fieldset .ff-input-container .ff-input-label-container {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-input-fieldset {\n display: inline-block;\n border: none;\n padding: 0;\n margin: 0;\n width: 100%;\n}\n.ff-input-fieldset--disabled {\n border: 1px solid var(--input-default-border-color);\n background: var(--input-disabled-background-color);\n border-radius: 4px;\n opacity: 0.5;\n}\n.ff-input-fieldset .ff-input-container {\n display: flex;\n flex-direction: column;\n position: relative;\n}\n.ff-input-fieldset .ff-input-container .ff-input, .ff-input-fieldset .ff-input-container .ff-input-label-container {\n padding: 6px 8px;\n border: 1px solid var(--input-default-border-color);\n border-radius: 4px;\n outline: none;\n line-height: 18px;\n}\n.ff-input-fieldset .ff-input-container .ff-input--medium {\n padding: 10px 9px;\n}\n.ff-input-fieldset .ff-input-container .ff-input:disabled, .ff-input-fieldset .ff-input-container .ff-input-label-container:disabled {\n cursor: not-allowed;\n border: none;\n background: transparent;\n}\n.ff-input-fieldset .ff-input-container .ff-input::placeholder, .ff-input-fieldset .ff-input-container .ff-input-label-container::placeholder {\n opacity: 0;\n line-height: 15px;\n}\n.ff-input-fieldset .ff-input-container .ff-input--danger {\n border-color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container .ff-input--transparentBackground {\n background: transparent;\n}\n.ff-input-fieldset .ff-input-container .ff-input--no-border {\n border: none;\n}\n.ff-input-fieldset .ff-input-container .ff-input--placeholder::placeholder {\n opacity: 1;\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container {\n display: flex;\n gap: 2px;\n position: absolute;\n border: none;\n outline: none;\n line-height: 18px;\n margin-top: 1px;\n transition: all 0.3s ease-in-out;\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container--medium {\n line-height: 25px;\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container .ff-input-label {\n color: var(--input-default-label-color);\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container .ff-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container .ff-input-label--disabled {\n color: var(--input-default-border-color);\n background-color: var(--input-label-bg-color);\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container .required-asterisk {\n color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input-label {\n color: var(--input-default-label-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input-label--no-hover {\n color: var(--input-default-label-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input-label--disabled {\n color: var(--input-default-border-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input, .ff-input-fieldset .ff-input-container:hover .ff-input-label-container {\n border-color: var(--brand-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input--no-hover {\n border-color: var(--input-default-border-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input--disabled {\n background: transparent;\n border-color: var(--input-default-border-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input--danger {\n border-color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input-label-container {\n top: -9px;\n background-color: var(--input-label-bg-color);\n line-height: 15px;\n padding: 0px 2px;\n margin-left: 10px;\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input-label--primary {\n color: var(--brand-color);\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input, .ff-input-fieldset .ff-input-container:focus-within .ff-input-label-container {\n border-color: var(--brand-color);\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input--danger {\n border-color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input::placeholder, .ff-input-fieldset .ff-input-container:focus-within .ff-input-label-container::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-input-fieldset .ff-input-container .ff-input-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 15px;\n}\n.ff-input-fieldset .ff-input-container .ff-input-message--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container--float .ff-input-label-container {\n top: -9px;\n font-size: 10px;\n background-color: var(--input-label-bg-color);\n line-height: 15px;\n padding: 0px 2px;\n margin-left: 10px;\n}\n.ff-input-fieldset .ff-input-container--float--disabled {\n cursor: not-allowed;\n}\n.ff-input-fieldset .ff-input-container--float--disabled .ff-input-label-container {\n cursor: not-allowed;\n}";
2277
2290
  styleInject(css_248z$11);
2278
2291
 
2279
2292
  const Input = /*#__PURE__*/React.forwardRef(({
@@ -2301,57 +2314,62 @@ const Input = /*#__PURE__*/React.forwardRef(({
2301
2314
  ...props
2302
2315
  }, ref) => {
2303
2316
  const isValueFilled = !checkEmpty(value);
2304
- return jsxRuntime.jsxs("div", {
2305
- className: classNames('ff-input-container', {
2306
- 'ff-input-container--float': isValueFilled,
2307
- 'ff-input-container--disabled': !!disabled
2317
+ return jsxRuntime.jsx("fieldset", {
2318
+ className: classNames('ff-input-fieldset', {
2319
+ 'ff-input-fieldset--disabled': disabled
2308
2320
  }),
2309
- children: [isLabelRequired && jsxRuntime.jsxs("label", {
2310
- htmlFor: name,
2311
- className: classNames(`ff-input-label-container ff-input-label-container--${size}`, {
2312
- 'ff-input-label-container--danger': !!error
2321
+ children: jsxRuntime.jsxs("div", {
2322
+ className: classNames('ff-input-container', {
2323
+ 'ff-input-container--float': isValueFilled,
2324
+ 'ff-input-container--disabled': !!disabled
2313
2325
  }),
2314
- children: [required && jsxRuntime.jsx("span", {
2315
- className: "required-asterisk",
2316
- children: "*"
2317
- }), jsxRuntime.jsx("span", {
2318
- className: classNames(`ff-input-label ff-input-label--${variant}`, {
2319
- 'ff-input-label--no-hover': !!value,
2320
- 'ff-input-label--disabled': !!disabled,
2321
- 'ff-input-label--danger': !!error
2326
+ children: [isLabelRequired && jsxRuntime.jsxs("label", {
2327
+ htmlFor: name,
2328
+ className: classNames(`ff-input-label-container ff-input-label-container--${size}`, {
2329
+ 'ff-input-label-container--danger': !!error
2322
2330
  }),
2323
- children: label
2331
+ children: [required && jsxRuntime.jsx("span", {
2332
+ className: "required-asterisk",
2333
+ children: "*"
2334
+ }), jsxRuntime.jsx("span", {
2335
+ className: classNames(`ff-input-label ff-input-label--${variant}`, {
2336
+ 'ff-input-label--no-hover': !!value,
2337
+ 'ff-input-label--disabled': !!disabled,
2338
+ 'ff-input-label--danger': !!error
2339
+ }),
2340
+ children: label
2341
+ })]
2342
+ }), jsxRuntime.jsx("input", {
2343
+ ref: ref,
2344
+ name: name,
2345
+ value: value,
2346
+ type: type,
2347
+ spellCheck: false,
2348
+ id: name,
2349
+ className: classNames(`ff-input ff-input-${variant} default-input ff-input--${size}`, {
2350
+ ['ff-input--transparentBackground']: !!transparentBackground,
2351
+ 'ff-input--no-hover': !!value,
2352
+ 'ff-input--disabled': !!disabled,
2353
+ 'ff-input--danger': !!error,
2354
+ 'ff-input--no-border': !!noBorder,
2355
+ 'ff-input--placeholder': !isLabelRequired
2356
+ }, `${className}`),
2357
+ placeholder: placeholder,
2358
+ disabled: disabled,
2359
+ onChange: onChange,
2360
+ onFocus: onFocus,
2361
+ onBlur: onBlur,
2362
+ autoComplete: autoComplete,
2363
+ min: minValue,
2364
+ max: maxValue,
2365
+ ...props
2366
+ }), helperText && error && jsxRuntime.jsx("span", {
2367
+ className: classNames('ff-input-message', {
2368
+ 'ff-input-message--danger': !!error
2369
+ }),
2370
+ children: helperText
2324
2371
  })]
2325
- }), jsxRuntime.jsx("input", {
2326
- ref: ref,
2327
- name: name,
2328
- value: value,
2329
- type: type,
2330
- spellCheck: false,
2331
- id: name,
2332
- className: classNames(`ff-input ff-input-${variant} default-input ff-input--${size}`, {
2333
- ['ff-input--transparentBackground']: !!transparentBackground,
2334
- 'ff-input--no-hover': !!value,
2335
- 'ff-input--disabled': !!disabled,
2336
- 'ff-input--danger': !!error,
2337
- 'ff-input--no-border': !!noBorder,
2338
- 'ff-input--placeholder': !isLabelRequired
2339
- }, `${className}`),
2340
- placeholder: placeholder,
2341
- disabled: disabled,
2342
- onChange: onChange,
2343
- onFocus: onFocus,
2344
- onBlur: onBlur,
2345
- autoComplete: autoComplete,
2346
- min: minValue,
2347
- max: maxValue,
2348
- ...props
2349
- }), helperText && error && jsxRuntime.jsx("span", {
2350
- className: classNames('ff-input-message', {
2351
- 'ff-input-message--danger': !!error
2352
- }),
2353
- children: helperText
2354
- })]
2372
+ })
2355
2373
  });
2356
2374
  });
2357
2375
 
@@ -3159,7 +3177,7 @@ const OptionCard = ({
3159
3177
  children: options.map(opt => jsxRuntime.jsx(Option$1, {
3160
3178
  option: opt,
3161
3179
  onClick: onClick
3162
- }, opt.label))
3180
+ }, opt.value))
3163
3181
  }), document.body);
3164
3182
  };
3165
3183
  const MenuOption = ({
@@ -3256,7 +3274,7 @@ const MenuOption = ({
3256
3274
  });
3257
3275
  };
3258
3276
 
3259
- var css_248z$V = ".ff-fixed-header-table {\n overflow-y: auto;\n}\n\n.ff-table-icon {\n position: absolute;\n top: 10px;\n right: 0;\n margin-right: 10px;\n z-index: 100;\n cursor: pointer;\n}\n\n.ff-table {\n width: 100%;\n}\n.ff-table th,\n.ff-table td {\n text-align: left;\n font-size: 12px;\n padding: 9px 8px;\n}\n.ff-table thead tr th {\n border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-table thead tr th .ff-label-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table thead tr th .ff-label-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table tbody tr .action-column {\n opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n padding-left: 10px;\n opacity: 0;\n display: flex;\n justify-content: flex-end;\n transition: opacity 0.3s ease, transform 0.3s ease;\n transform: translateX(20px);\n}\n.ff-table tbody tr:hover {\n background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container {\n opacity: 1;\n transform: translateX(0);\n}\n.ff-table tbody tr td {\n position: relative;\n color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n cursor: pointer;\n}\n.ff-table tbody tr td .ff-data-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table tbody tr td .ff-data-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table .primary-bg {\n background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n background-color: var(--slider-table-color);\n}\n.ff-table .default-bg {\n background-color: transparent;\n}\n.ff-table .default-color {\n color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n color: var(--brand-color);\n}\n\n.border-borderRadius {\n border: 1px solid var(--slider-table-color);\n border-radius: 5px;\n border-collapse: none !important;\n}\n\n.ff-fixed-header {\n position: sticky !important;\n top: 0;\n z-index: 99;\n background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\ntbody tr.disabled-row {\n opacity: 0.5;\n cursor: not-allowed;\n}";
3277
+ var css_248z$V = ".ff-fixed-header-table {\n overflow-y: auto;\n}\n\n.ff-table-icon {\n position: absolute;\n top: 10px;\n right: 0;\n margin-right: 10px;\n z-index: 100;\n cursor: pointer;\n}\n\n.ff-table {\n width: 100%;\n}\n.ff-table th,\n.ff-table td {\n text-align: left;\n font-size: 12px;\n padding: 9px 8px;\n}\n.ff-table thead tr th {\n border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-table thead tr th .ff-label-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table thead tr th .ff-label-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table tbody tr .action-column {\n opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n padding-left: 10px;\n opacity: 0;\n display: flex;\n justify-content: flex-end;\n transition: opacity 0.3s ease, transform 0.3s ease;\n transform: translateX(20px);\n}\n.ff-table tbody tr:hover {\n background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container {\n opacity: 1;\n transform: translateX(0);\n}\n.ff-table tbody tr td {\n position: relative;\n color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n cursor: pointer;\n}\n.ff-table tbody tr td .ff-data-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table tbody tr td .ff-data-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table .primary-bg {\n background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n background-color: var(--slider-table-color);\n}\n.ff-table .tertiary-bg {\n background-color: var(--custom-table-header-bg-color);\n}\n.ff-table .default-bg {\n background-color: transparent;\n}\n.ff-table .default-color {\n color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n color: var(--brand-color);\n}\n\n.border-borderRadius {\n border: 1px solid var(--slider-table-color);\n border-radius: 5px;\n border-collapse: none !important;\n}\n\n.ff-fixed-header {\n position: sticky !important;\n top: 0;\n z-index: 99;\n background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\ntbody tr.disabled-row {\n opacity: 0.5;\n cursor: not-allowed;\n}";
3260
3278
  styleInject(css_248z$V);
3261
3279
 
3262
3280
  const isFunction$2 = functionToCheck => {
@@ -3826,7 +3844,8 @@ const useFileDropzone = options => {
3826
3844
  maxSizeErrorMessage,
3827
3845
  invalidFileMessage,
3828
3846
  fileExistMessage,
3829
- validateMIMEType = false
3847
+ validateMIMEType = false,
3848
+ isApiResponseError
3830
3849
  } = options;
3831
3850
  const [files, setFiles] = React.useState({
3832
3851
  accepted: [],
@@ -3849,7 +3868,7 @@ const useFileDropzone = options => {
3849
3868
  }
3850
3869
  const extensionWithPeriod = getExtensionWithPeriod(file).toLowerCase();
3851
3870
  if (validateMIMEType) {
3852
- if (!validateFileMIMEType(file, extensionWithPeriod)) {
3871
+ if (!validateFileMIMEType(file, extensionWithPeriod) || isApiResponseError) {
3853
3872
  errors.push({
3854
3873
  message: invalidFileMessage ? invalidFileMessage : 'Unsupported File Format',
3855
3874
  code: 'file-invalid-type'
@@ -3972,9 +3991,152 @@ const useFileDropzone = options => {
3972
3991
  };
3973
3992
  };
3974
3993
 
3975
- var css_248z$R = ".ff-file-dropzone-wrapper {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n padding: 16px 0;\n border-radius: 8px;\n background: var(--file-dropzone-default-color);\n border: 1px dashed var(--brand-color);\n display: flex;\n align-items: center;\n flex-direction: column;\n text-align: center;\n gap: 8px;\n transition: background-color 0.2s ease;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone:hover, .ff-file-dropzone-wrapper .ff-file-dropzone--active {\n background-color: var(--file-dropzone-selected-color);\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__icon {\n height: 80px;\n width: 80px;\n display: grid;\n place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn {\n margin: 0 auto;\n position: relative;\n font-weight: 600;\n line-height: 15px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper {\n display: flex;\n flex-direction: column;\n gap: 10px;\n max-height: 300px;\n overflow-y: auto;\n scroll-behavior: smooth;\n padding: 2px;\n -ms-overflow-style: none;\n scrollbar-width: thin;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper ::-webkit-scrollbar {\n width: 2px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px;\n border-radius: 4px;\n background-color: var(--file-details-bg);\n box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);\n overflow: hidden;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info {\n display: flex;\n align-items: center;\n gap: 4px;\n width: 87%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info .ff-file-info__icon {\n display: grid;\n place-items: center;\n height: 24px;\n width: 24px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper {\n display: flex;\n flex-direction: column;\n gap: 2px;\n justify-content: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper__name {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: block;\n color: var(--text-color);\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-replace, .ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-remove {\n height: 24px;\n width: 24px;\n display: grid;\n place-items: center;\n cursor: pointer;\n}";
3994
+ var css_248z$R = ".ff-file-dropzone-wrapper {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n padding: 16px 0;\n border-radius: 8px;\n background: var(--file-dropzone-default-color);\n border: 1px dashed var(--brand-color);\n display: flex;\n align-items: center;\n flex-direction: column;\n text-align: center;\n gap: 8px;\n transition: background-color 0.2s ease;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone .ff-radio-group-wrapper {\n position: relative;\n bottom: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone:hover, .ff-file-dropzone-wrapper .ff-file-dropzone--active {\n background-color: var(--file-dropzone-selected-color);\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone--webservice-file {\n display: grid;\n place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone--webservice-container {\n display: grid;\n place-items: center;\n padding: 16px 0 40px 0;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__icon {\n height: 80px;\n width: 80px;\n display: grid;\n place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn {\n margin: 0 auto;\n position: relative;\n font-weight: 600;\n line-height: 15px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__webservice-file {\n padding: 4px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper {\n display: flex;\n flex-direction: column;\n gap: 10px;\n max-height: 300px;\n overflow-y: auto;\n scroll-behavior: smooth;\n padding: 2px;\n -ms-overflow-style: none;\n scrollbar-width: thin;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper ::-webkit-scrollbar {\n width: 2px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px;\n border-radius: 4px;\n background-color: var(--file-details-bg);\n box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);\n overflow: hidden;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info {\n display: flex;\n align-items: center;\n gap: 4px;\n width: 87%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info .ff-file-info__icon {\n display: grid;\n place-items: center;\n height: 24px;\n width: 24px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper {\n display: flex;\n flex-direction: column;\n gap: 2px;\n justify-content: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper__name {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: block;\n color: var(--text-color);\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-replace, .ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-remove {\n height: 24px;\n width: 24px;\n display: grid;\n place-items: center;\n cursor: pointer;\n}\n\n.ff-webservice-file-wrapper {\n display: flex;\n gap: 8px;\n}\n.ff-webservice-file-wrapper .ff-webservice-file-name {\n position: relative;\n bottom: 2px;\n}\n\n.ff-input-ref {\n display: none;\n}\n\n.ff-disable-file-dropzone-wrapper {\n opacity: 0.5;\n cursor: not-allowed;\n}";
3976
3995
  styleInject(css_248z$R);
3977
3996
 
3997
+ var css_248z$Q = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-radio-wrapper .ff-radio {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-radio-wrapper {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-radio-wrapper .ff-radio {\n position: relative;\n color: var(--text-color);\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input {\n display: none;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom {\n box-sizing: content-box;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n border: 1px solid var(--radio-button-border);\n position: relative;\n margin-right: 8px;\n transition: border-color background-color;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::before {\n content: \"\";\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: #fbfdff;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: background-color 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::after {\n content: \"\";\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 4px solid #f7edff;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom {\n border: 1px solid var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::before {\n background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::after {\n opacity: 1;\n transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom {\n border-color: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom::before {\n background: var(--brand-color);\n height: 12px;\n width: 12px;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom {\n border: 1px solid var(--radio-button-border);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::before {\n background: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::after {\n border: 4px solid var(--radio-button-hover);\n opacity: 0;\n transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom {\n border-color: var(--brand-color);\n background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom::before {\n background: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio--disabled {\n cursor: default;\n}\n.ff-radio-wrapper .ff-radio--disabled .ff-radio-custom {\n opacity: 0.5;\n}";
3998
+ styleInject(css_248z$Q);
3999
+
4000
+ const RadioButton = ({
4001
+ label,
4002
+ name,
4003
+ checked,
4004
+ onChange,
4005
+ value,
4006
+ disabled = false,
4007
+ showTooltip = false,
4008
+ tooltipChildren = 'Custom JSX',
4009
+ tooltipTitle = 'Custom JSX'
4010
+ }) => {
4011
+ return jsxRuntime.jsxs("div", {
4012
+ className: "ff-radio-wrapper",
4013
+ children: [jsxRuntime.jsxs("label", {
4014
+ className: classNames('ff-radio', {
4015
+ 'ff-radio--disabled': disabled
4016
+ }),
4017
+ children: [jsxRuntime.jsx("input", {
4018
+ disabled: disabled,
4019
+ type: "radio",
4020
+ name: name,
4021
+ value: value,
4022
+ checked: checked,
4023
+ onChange: onChange,
4024
+ className: "ff-radio-input"
4025
+ }), jsxRuntime.jsx("span", {
4026
+ className: "ff-radio-custom"
4027
+ }), jsxRuntime.jsx(Typography, {
4028
+ color: "var(--text-color)",
4029
+ children: label
4030
+ })]
4031
+ }), showTooltip && jsxRuntime.jsx(Tooltip, {
4032
+ title: tooltipTitle,
4033
+ children: tooltipChildren
4034
+ })]
4035
+ });
4036
+ };
4037
+
4038
+ var css_248z$P = ".ff-radio-group {\n display: flex;\n flex-direction: row;\n gap: 12px;\n}\n\n.ff-radio-label-wrapper {\n position: relative;\n top: 2px;\n}\n\n.ff-required-asterisk {\n color: var(--input-error-text-color);\n}";
4039
+ styleInject(css_248z$P);
4040
+
4041
+ const RadioGroup = ({
4042
+ options,
4043
+ name,
4044
+ selectedValue,
4045
+ onChange,
4046
+ label,
4047
+ isLabel = false,
4048
+ isAsteriskRequired = false,
4049
+ className,
4050
+ classNameForLabel
4051
+ }) => {
4052
+ return jsxRuntime.jsxs("div", {
4053
+ className: classNames('ff-radio-group', className),
4054
+ children: [isLabel && jsxRuntime.jsxs(Typography, {
4055
+ fontWeight: 'semi-bold',
4056
+ className: classNames(classNameForLabel),
4057
+ children: [' ', isAsteriskRequired && jsxRuntime.jsxs(Typography, {
4058
+ className: classNames('ff-required-asterisk'),
4059
+ children: ["*", ' ']
4060
+ }), label, ' ']
4061
+ }), options.map(option => jsxRuntime.jsx(RadioButton, {
4062
+ label: option.label,
4063
+ showTooltip: option?.showTooltip,
4064
+ tooltipChildren: option?.tooltipChildren,
4065
+ tooltipTitle: option?.tooltipTitle,
4066
+ name: name,
4067
+ value: option.value,
4068
+ checked: selectedValue === option.value,
4069
+ onChange: () => onChange?.(option),
4070
+ disabled: option.disabled
4071
+ }, option.value))]
4072
+ });
4073
+ };
4074
+
4075
+ const RadioFilePreview = ({
4076
+ selectedFile,
4077
+ onFileRemoveClick,
4078
+ onFileReplaceClick
4079
+ }) => {
4080
+ const fileInputRef = React.useRef(null);
4081
+ const handleReplaceClick = () => {
4082
+ if (fileInputRef.current) {
4083
+ fileInputRef.current.click();
4084
+ }
4085
+ };
4086
+ const handleFileChange = event => {
4087
+ const file = event.target.files?.[0];
4088
+ if (file) {
4089
+ onFileReplaceClick?.(file);
4090
+ }
4091
+ };
4092
+ return jsxRuntime.jsxs("div", {
4093
+ className: "ff-webservice-file-wrapper",
4094
+ children: [jsxRuntime.jsx("div", {
4095
+ className: "ff-file-info",
4096
+ children: jsxRuntime.jsx(jsxRuntime.Fragment, {
4097
+ children: jsxRuntime.jsx(Tooltip, {
4098
+ title: selectedFile,
4099
+ children: jsxRuntime.jsx(Typography, {
4100
+ lineHeight: "18px",
4101
+ fontWeight: "semi-bold",
4102
+ color: 'var(--text-color)',
4103
+ className: "ff-webservice-file-name",
4104
+ children: selectedFile
4105
+ })
4106
+ })
4107
+ })
4108
+ }), jsxRuntime.jsx(jsxRuntime.Fragment, {
4109
+ children: jsxRuntime.jsx(Tooltip, {
4110
+ title: "Remove",
4111
+ children: jsxRuntime.jsx(Icon, {
4112
+ name: "close",
4113
+ height: 12,
4114
+ width: 12,
4115
+ hoverEffect: true,
4116
+ onClick: onFileRemoveClick
4117
+ })
4118
+ })
4119
+ }), jsxRuntime.jsxs(jsxRuntime.Fragment, {
4120
+ children: [jsxRuntime.jsx(Tooltip, {
4121
+ title: "Replace",
4122
+ children: jsxRuntime.jsx(Icon, {
4123
+ name: "replace_file",
4124
+ color: 'var(--icons-default-color)',
4125
+ height: 16,
4126
+ width: 16,
4127
+ hoverEffect: true,
4128
+ onClick: handleReplaceClick
4129
+ })
4130
+ }), jsxRuntime.jsx("input", {
4131
+ type: "file",
4132
+ ref: fileInputRef,
4133
+ className: 'ff-input-ref',
4134
+ onChange: handleFileChange
4135
+ })]
4136
+ })]
4137
+ });
4138
+ };
4139
+
3978
4140
  const Dropzone = ({
3979
4141
  icon,
3980
4142
  primaryLabel,
@@ -3983,43 +4145,81 @@ const Dropzone = ({
3983
4145
  getRootProps,
3984
4146
  getInputProps,
3985
4147
  isDragActive = false,
3986
- height = 188
4148
+ height = 188,
4149
+ isWebServiceFileDropZone = false,
4150
+ selectedRadioOption,
4151
+ radioOptions,
4152
+ handleOptionChange,
4153
+ selectedFile,
4154
+ setSelectedFile,
4155
+ handleRemoveFile,
4156
+ isDisable
3987
4157
  }) => {
3988
- return jsxRuntime.jsxs("div", {
4158
+ const isWebServiceFile = selectedFile?.name && isWebServiceFileDropZone;
4159
+ return jsxRuntime.jsx("div", {
3989
4160
  ...getRootProps(),
3990
4161
  className: classNames('ff-file-dropzone', {
3991
- 'ff-file-dropzone--active': isDragActive
4162
+ 'ff-file-dropzone--active': isDragActive,
4163
+ 'ff-file-dropzone--webservice-file': isWebServiceFile,
4164
+ 'ff-file-dropzone--webservice-container': isWebServiceFileDropZone
3992
4165
  }),
3993
4166
  style: {
3994
4167
  height: height
3995
4168
  },
3996
- children: [jsxRuntime.jsx("div", {
3997
- className: "ff-file-dropzone-content__icon",
3998
- children: icon
3999
- }), jsxRuntime.jsxs("div", {
4000
- className: "ff-file-dropzone-content__labels",
4001
- children: [jsxRuntime.jsx(Typography, {
4002
- as: "p",
4003
- fontWeight: "semi-bold",
4004
- lineHeight: "18px",
4005
- textAlign: "center",
4006
- color: 'var(--text-color)',
4007
- children: primaryLabel
4008
- }), jsxRuntime.jsx(Typography, {
4009
- as: "p",
4010
- lineHeight: "18px",
4011
- textAlign: "center",
4012
- color: 'var(--text-color)',
4013
- children: secondaryLabel
4014
- }), jsxRuntime.jsx(Button$1, {
4015
- variant: "primary",
4016
- label: buttonLabel,
4017
- className: "choose-file-btn",
4018
- children: jsxRuntime.jsx("input", {
4019
- ...getInputProps()
4020
- })
4169
+ children: isWebServiceFile ? jsxRuntime.jsx(RadioFilePreview, {
4170
+ selectedFile: selectedFile.name,
4171
+ onFileRemoveClick: handleRemoveFile,
4172
+ onFileReplaceClick: setSelectedFile,
4173
+ setSelectedFile: setSelectedFile
4174
+ }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
4175
+ children: [jsxRuntime.jsx("div", {
4176
+ className: "ff-file-dropzone-content__icon",
4177
+ children: icon
4178
+ }), jsxRuntime.jsxs("div", {
4179
+ className: "ff-file-dropzone-content__labels",
4180
+ children: [jsxRuntime.jsx(Typography, {
4181
+ as: "p",
4182
+ fontWeight: "semi-bold",
4183
+ lineHeight: "18px",
4184
+ textAlign: "center",
4185
+ color: 'var(--text-color)',
4186
+ children: primaryLabel
4187
+ }), jsxRuntime.jsx(Typography, {
4188
+ as: "p",
4189
+ lineHeight: "18px",
4190
+ textAlign: "center",
4191
+ color: 'var(--text-color)',
4192
+ children: secondaryLabel
4193
+ }), isWebServiceFileDropZone ? jsxRuntime.jsxs("div", {
4194
+ className: "ff-radio-group-wrapper",
4195
+ children: [jsxRuntime.jsxs(Typography, {
4196
+ fontWeight: "semi-bold",
4197
+ children: [' ', "Choose file from", ' ']
4198
+ }), jsxRuntime.jsx(RadioGroup, {
4199
+ name: "radio_btn_file_dropzone",
4200
+ options: radioOptions ?? [{
4201
+ label: 'Default Label',
4202
+ value: 'default_value'
4203
+ }],
4204
+ selectedValue: selectedRadioOption?.value,
4205
+ onChange: handleOptionChange
4206
+ })]
4207
+ }) : jsxRuntime.jsx(Button$1, {
4208
+ variant: "primary",
4209
+ label: buttonLabel,
4210
+ className: 'choose-file-btn',
4211
+ disabled: isDisable,
4212
+ children: jsxRuntime.jsx("input", {
4213
+ ...(isDisable ? {
4214
+ style: {
4215
+ cursor: 'not-allowed'
4216
+ },
4217
+ disabled: true
4218
+ } : getInputProps())
4219
+ })
4220
+ })]
4021
4221
  })]
4022
- })]
4222
+ })
4023
4223
  });
4024
4224
  };
4025
4225
 
@@ -4115,7 +4315,17 @@ const FileDropzone = ({
4115
4315
  width = 640,
4116
4316
  height = 188,
4117
4317
  getAcceptedFiles = () => {},
4118
- getRejectedFiles = () => {}
4318
+ getRejectedFiles = () => {},
4319
+ isWebServiceFileDropZone = false,
4320
+ selectedRadioOption,
4321
+ radioOptions,
4322
+ handleOptionChange,
4323
+ selectedFile,
4324
+ setSelectedFile,
4325
+ handleFileChange,
4326
+ handleRemoveFile,
4327
+ isApiResponseError = false,
4328
+ isDisable = false
4119
4329
  }) => {
4120
4330
  const {
4121
4331
  getRootProps,
@@ -4134,7 +4344,8 @@ const FileDropzone = ({
4134
4344
  maxSizeErrorMessage,
4135
4345
  invalidFileMessage,
4136
4346
  fileExistMessage,
4137
- validateMIMEType
4347
+ validateMIMEType,
4348
+ isApiResponseError
4138
4349
  // onDrop: (accepted, rejected, event) => {}, //onDrop function to handle dropped or selected files explicitly.
4139
4350
  });
4140
4351
  getAcceptedFiles(acceptedFiles);
@@ -4144,6 +4355,11 @@ const FileDropzone = ({
4144
4355
  onRemoveClick: handleRemoveClick,
4145
4356
  onReplaceClick: handleReplaceClick
4146
4357
  }, file.name)), [acceptedFiles, handleRemoveClick, handleReplaceClick]);
4358
+ React.useEffect(() => {
4359
+ if (!checkEmpty(acceptedFiles) && setSelectedFile) {
4360
+ setSelectedFile(acceptedFiles[0] || null);
4361
+ }
4362
+ }, [acceptedFiles, setSelectedFile]);
4147
4363
  const rejectedFilesList = React.useMemo(() => rejectedFiles.map(rejectedFile => jsxRuntime.jsx(FilePreview, {
4148
4364
  file: rejectedFile.file,
4149
4365
  error: rejectedFile.errors[0]?.message,
@@ -4151,7 +4367,9 @@ const FileDropzone = ({
4151
4367
  onReplaceClick: handleReplaceClick
4152
4368
  }, rejectedFile.file.name)), [rejectedFiles, handleRemoveClick, handleReplaceClick]);
4153
4369
  return jsxRuntime.jsxs("div", {
4154
- className: "ff-file-dropzone-wrapper",
4370
+ className: classNames('ff-file-dropzone-wrapper', {
4371
+ 'ff-disable-file-dropzone-wrapper': isDisable
4372
+ }),
4155
4373
  style: {
4156
4374
  width: `${width}px`
4157
4375
  },
@@ -4163,8 +4381,20 @@ const FileDropzone = ({
4163
4381
  getRootProps: getRootProps,
4164
4382
  getInputProps: getInputProps,
4165
4383
  isDragActive: isDragActive,
4166
- height: `${height}px`
4167
- }), jsxRuntime.jsxs("div", {
4384
+ height: `${height}px`,
4385
+ isWebServiceFileDropZone: isWebServiceFileDropZone,
4386
+ selectedRadioOption: selectedRadioOption,
4387
+ radioOptions: radioOptions ?? [{
4388
+ label: 'Default Label',
4389
+ value: 'default_value'
4390
+ }],
4391
+ handleOptionChange: handleOptionChange,
4392
+ selectedFile: selectedFile,
4393
+ handleFileChange: handleFileChange,
4394
+ handleRemoveFile: handleRemoveFile,
4395
+ setSelectedFile: setSelectedFile,
4396
+ isDisable: isDisable
4397
+ }), isWebServiceFileDropZone ? null : jsxRuntime.jsxs("div", {
4168
4398
  className: 'ff-file-details-wrapper',
4169
4399
  style: {
4170
4400
  width: `${width}px`
@@ -7693,7 +7923,7 @@ function createFormControl(props = {}) {
7693
7923
  timer = setTimeout(callback, wait);
7694
7924
  };
7695
7925
  const _updateValid = async (shouldUpdateValid) => {
7696
- if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
7926
+ if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
7697
7927
  const isValid = _options.resolver
7698
7928
  ? isEmptyObject((await _executeSchema()).errors)
7699
7929
  : await executeBuiltInValidation(_fields, true);
@@ -7705,7 +7935,7 @@ function createFormControl(props = {}) {
7705
7935
  }
7706
7936
  };
7707
7937
  const _updateIsValidating = (names, isValidating) => {
7708
- if (!props.disabled &&
7938
+ if (!_options.disabled &&
7709
7939
  (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
7710
7940
  (names || Array.from(_names.mount)).forEach((name) => {
7711
7941
  if (name) {
@@ -7721,7 +7951,7 @@ function createFormControl(props = {}) {
7721
7951
  }
7722
7952
  };
7723
7953
  const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
7724
- if (args && method && !props.disabled) {
7954
+ if (args && method && !_options.disabled) {
7725
7955
  _state.action = true;
7726
7956
  if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
7727
7957
  const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -7785,7 +8015,7 @@ function createFormControl(props = {}) {
7785
8015
  const output = {
7786
8016
  name,
7787
8017
  };
7788
- if (!props.disabled) {
8018
+ if (!_options.disabled) {
7789
8019
  const disabledField = !!(get$1(_fields, name) &&
7790
8020
  get$1(_fields, name)._f &&
7791
8021
  get$1(_fields, name)._f.disabled);
@@ -7921,7 +8151,7 @@ function createFormControl(props = {}) {
7921
8151
  }
7922
8152
  _names.unMount = new Set();
7923
8153
  };
7924
- const _getDirty = (name, data) => !props.disabled &&
8154
+ const _getDirty = (name, data) => !_options.disabled &&
7925
8155
  (name && data && set$1(_formValues, name, data),
7926
8156
  !deepEqual(getValues(), _defaultValues));
7927
8157
  const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -8237,7 +8467,7 @@ function createFormControl(props = {}) {
8237
8467
  };
8238
8468
  const register = (name, options = {}) => {
8239
8469
  let field = get$1(_fields, name);
8240
- const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
8470
+ const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
8241
8471
  set$1(_fields, name, {
8242
8472
  ...(field || {}),
8243
8473
  _f: {
@@ -8253,7 +8483,7 @@ function createFormControl(props = {}) {
8253
8483
  field,
8254
8484
  disabled: isBoolean(options.disabled)
8255
8485
  ? options.disabled
8256
- : props.disabled,
8486
+ : _options.disabled,
8257
8487
  name,
8258
8488
  value: options.value,
8259
8489
  });
@@ -8263,7 +8493,7 @@ function createFormControl(props = {}) {
8263
8493
  }
8264
8494
  return {
8265
8495
  ...(disabledIsDefined
8266
- ? { disabled: options.disabled || props.disabled }
8496
+ ? { disabled: options.disabled || _options.disabled }
8267
8497
  : {}),
8268
8498
  ...(_options.progressive
8269
8499
  ? {
@@ -8347,6 +8577,12 @@ function createFormControl(props = {}) {
8347
8577
  e.preventDefault && e.preventDefault();
8348
8578
  e.persist && e.persist();
8349
8579
  }
8580
+ if (_options.disabled) {
8581
+ if (onInvalid) {
8582
+ await onInvalid({ ..._formState.errors }, e);
8583
+ }
8584
+ return;
8585
+ }
8350
8586
  let fieldValues = cloneObject(_formValues);
8351
8587
  _subjects.state.next({
8352
8588
  isSubmitting: true,
@@ -8525,7 +8761,9 @@ function createFormControl(props = {}) {
8525
8761
  : fieldReference.ref;
8526
8762
  if (fieldRef.focus) {
8527
8763
  fieldRef.focus();
8528
- options.shouldSelect && fieldRef.select();
8764
+ options.shouldSelect &&
8765
+ isFunction$1(fieldRef.select) &&
8766
+ fieldRef.select();
8529
8767
  }
8530
8768
  }
8531
8769
  };
@@ -8726,11 +8964,6 @@ function useForm(props = {}) {
8726
8964
  values: control._getWatch(),
8727
8965
  });
8728
8966
  }, [props.shouldUnregister, control]);
8729
- React.useEffect(() => {
8730
- if (_formControl.current) {
8731
- _formControl.current.watch = _formControl.current.watch.bind({});
8732
- }
8733
- }, [formState]);
8734
8967
  _formControl.current.formState = getProxyFormState(formState, control);
8735
8968
  return _formControl.current;
8736
8969
  }
@@ -8777,10 +9010,10 @@ const Forms = ({
8777
9010
  };
8778
9011
  const ForwardedForms = /*#__PURE__*/React.forwardRef(Forms);
8779
9012
 
8780
- var css_248z$Q = ".fontXs, .ff-input-with-dropdown-container .ff-helper-text {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-input-with-dropdown-container {\n display: flex;\n flex-direction: column;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown {\n display: flex;\n border: 1px solid var(--input-default-border-color);\n border-radius: 4px;\n padding: 0;\n position: relative;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-input-with-dropdown--left {\n display: flex;\n flex-direction: row-reverse;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-input-with-dropdown--right {\n display: flex;\n flex-direction: row;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-input--left-dropdown {\n width: 698px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n position: absolute;\n z-index: 9;\n color: var(--input-default-border-color);\n top: 6px;\n left: 7px;\n transition: all 0.3s ease-in-out;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label .ff-required-asterisk {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--filled {\n color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--no-hover {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--error {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n position: relative;\n padding: 6px 7px;\n line-height: 18px;\n border: none;\n outline: none;\n border-right: 1px solid var(--input-default-border-color);\n border-radius: 4px 0 0 4px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-outer-spin-button, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::placeholder {\n opacity: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input:disabled {\n cursor: not-allowed;\n background: transparent;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input--left-dropdown::placeholder {\n opacity: 1;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--no-hover {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown {\n min-width: 120px;\n border: none;\n outline: none;\n margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown:disabled {\n cursor: not-allowed;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown--left {\n min-width: 94px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .seperatorline {\n height: 26px;\n margin-top: 3px;\n border-right: 0.5px solid var(--brand-color);\n flex-shrink: 0;\n border-radius: 2px;\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown {\n border-color: var(--brand-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--filled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--disabled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label {\n color: var(--input-hover-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--filled {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--disabled {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--error {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input {\n border-color: var(--brand-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--filled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--disabled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown {\n border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label {\n top: -9px;\n background-color: var(--input-label-bg-color);\n padding: 0px 2px;\n color: var(--input-active-text-color);\n line-height: 15px;\n font-size: 10px !important;\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label--error {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input {\n border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input::placeholder {\n opacity: 1;\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container {\n border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n top: -9px;\n background-color: var(--input-label-bg-color);\n padding: 0px 2px;\n line-height: 15px;\n font-size: 10px !important;\n}\n.ff-input-with-dropdown-container--filled span {\n font-size: 8px;\n}\n.ff-input-with-dropdown-container--filled .required-asterisk {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-helper-text {\n color: var(--input-error-text-color);\n padding: 0 11px;\n}";
8781
- styleInject(css_248z$Q);
9013
+ var css_248z$O = ".fontXs, .ff-input-with-dropdown-container .ff-helper-text {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-input-with-dropdown-container {\n display: flex;\n flex-direction: column;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown {\n display: flex;\n border: 1px solid var(--input-default-border-color);\n border-radius: 4px;\n padding: 0;\n position: relative;\n justify-content: space-between;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-input-with-dropdown--left {\n display: flex;\n flex-direction: row-reverse;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-input-with-dropdown--right {\n display: flex;\n flex-direction: row;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-input--left-dropdown {\n width: 698px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container {\n display: flex;\n flex: 1;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n position: absolute;\n z-index: 9;\n color: var(--input-default-border-color);\n top: 6px;\n left: 7px;\n transition: all 0.3s ease-in-out;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label .ff-required-asterisk {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--filled {\n color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--no-hover {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--error {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n width: 100%;\n padding: 6px 7px;\n line-height: 18px;\n border: none;\n outline: none;\n border-right: 1px solid var(--input-default-border-color);\n border-radius: 4px 0 0 4px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-outer-spin-button, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::placeholder {\n opacity: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input:disabled {\n cursor: not-allowed;\n background: transparent;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input--left-dropdown::placeholder {\n opacity: 1;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--no-hover {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown {\n width: 100%;\n border: none;\n outline: none;\n margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown:disabled {\n cursor: not-allowed;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown:hover {\n background-color: var(--dropdown-bg-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown--left {\n min-width: 94px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .seperatorline {\n height: 26px;\n margin-top: 3px;\n border-right: 0.5px solid var(--brand-color);\n flex-shrink: 0;\n border-radius: 2px;\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown {\n border-color: var(--brand-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--filled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--disabled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label {\n color: var(--input-hover-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--filled {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--disabled {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--error {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input {\n border-color: var(--brand-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--filled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--disabled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown {\n border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label {\n top: -9px;\n background-color: var(--input-label-bg-color);\n padding: 0px 2px;\n color: var(--input-active-text-color);\n line-height: 15px;\n font-size: 10px !important;\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label--error {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input {\n border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input::placeholder {\n opacity: 1;\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container {\n border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n top: -9px;\n background-color: var(--input-label-bg-color);\n padding: 0px 2px;\n line-height: 15px;\n font-size: 10px !important;\n}\n.ff-input-with-dropdown-container--filled span {\n font-size: 8px;\n}\n.ff-input-with-dropdown-container--filled .required-asterisk {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-helper-text {\n color: var(--input-error-text-color);\n padding: 0 11px;\n}";
9014
+ styleInject(css_248z$O);
8782
9015
 
8783
- const InputWithDropdown = ({
9016
+ const InputWithDropdown = /*#__PURE__*/React.forwardRef(({
8784
9017
  name = '',
8785
9018
  label,
8786
9019
  value,
@@ -8798,7 +9031,7 @@ const InputWithDropdown = ({
8798
9031
  optionsRequired = true,
8799
9032
  dropdownPosition = 'right',
8800
9033
  type = 'text'
8801
- }) => {
9034
+ }, ref) => {
8802
9035
  const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
8803
9036
  return jsxRuntime.jsxs("div", {
8804
9037
  className: classNames('ff-input-with-dropdown-container', {
@@ -8844,6 +9077,7 @@ const InputWithDropdown = ({
8844
9077
  required: required,
8845
9078
  children: label
8846
9079
  }), jsxRuntime.jsx("input", {
9080
+ ref: ref,
8847
9081
  name: name,
8848
9082
  type: type,
8849
9083
  id: name,
@@ -8881,85 +9115,7 @@ const InputWithDropdown = ({
8881
9115
  children: helperText
8882
9116
  })]
8883
9117
  });
8884
- };
8885
-
8886
- var css_248z$P = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-radio-wrapper .ff-radio {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-radio-wrapper {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-radio-wrapper .ff-radio {\n position: relative;\n color: var(--text-color);\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input {\n display: none;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom {\n box-sizing: content-box;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n border: 1px solid var(--radio-button-border);\n position: relative;\n margin-right: 8px;\n transition: border-color background-color;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::before {\n content: \"\";\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: #fbfdff;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: background-color 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::after {\n content: \"\";\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 4px solid #f7edff;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom {\n border: 1px solid var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::before {\n background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::after {\n opacity: 1;\n transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom {\n border-color: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom::before {\n background: var(--brand-color);\n height: 12px;\n width: 12px;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom {\n border: 1px solid var(--radio-button-border);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::before {\n background: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::after {\n border: 4px solid var(--radio-button-hover);\n opacity: 0;\n transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom {\n border-color: var(--brand-color);\n background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom::before {\n background: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio--disabled {\n cursor: default;\n}\n.ff-radio-wrapper .ff-radio--disabled .ff-radio-custom {\n opacity: 0.5;\n}";
8887
- styleInject(css_248z$P);
8888
-
8889
- const RadioButton = ({
8890
- label,
8891
- name,
8892
- checked,
8893
- onChange,
8894
- value,
8895
- disabled = false,
8896
- showTooltip = false,
8897
- tooltipChildren = 'Custom JSX',
8898
- tooltipTitle = 'Custom JSX'
8899
- }) => {
8900
- return jsxRuntime.jsxs("div", {
8901
- className: "ff-radio-wrapper",
8902
- children: [jsxRuntime.jsxs("label", {
8903
- className: classNames('ff-radio', {
8904
- 'ff-radio--disabled': disabled
8905
- }),
8906
- children: [jsxRuntime.jsx("input", {
8907
- disabled: disabled,
8908
- type: "radio",
8909
- name: name,
8910
- value: value,
8911
- checked: checked,
8912
- onChange: onChange,
8913
- className: "ff-radio-input"
8914
- }), jsxRuntime.jsx("span", {
8915
- className: "ff-radio-custom"
8916
- }), jsxRuntime.jsx(Typography, {
8917
- color: "var(--text-color)",
8918
- children: label
8919
- })]
8920
- }), showTooltip && jsxRuntime.jsx(Tooltip, {
8921
- title: tooltipTitle,
8922
- children: tooltipChildren
8923
- })]
8924
- });
8925
- };
8926
-
8927
- var css_248z$O = ".ff-radio-group {\n display: flex;\n flex-direction: row;\n gap: 12px;\n}\n\n.ff-radio-label-wrapper {\n position: relative;\n top: 2px;\n}\n\n.ff-required-asterisk {\n color: var(--input-error-text-color);\n}";
8928
- styleInject(css_248z$O);
8929
-
8930
- const RadioGroup = ({
8931
- options,
8932
- name,
8933
- selectedValue,
8934
- onChange,
8935
- label,
8936
- isLabel = false,
8937
- isAsteriskRequired = false,
8938
- className,
8939
- classNameForLabel
8940
- }) => {
8941
- return jsxRuntime.jsxs("div", {
8942
- className: classNames('ff-radio-group', className),
8943
- children: [isLabel && jsxRuntime.jsxs(Typography, {
8944
- fontWeight: 'semi-bold',
8945
- className: classNames(classNameForLabel),
8946
- children: [' ', isAsteriskRequired && jsxRuntime.jsxs(Typography, {
8947
- className: classNames('ff-required-asterisk'),
8948
- children: ["*", ' ']
8949
- }), label, ' ']
8950
- }), options.map(option => jsxRuntime.jsx(RadioButton, {
8951
- label: option.label,
8952
- showTooltip: option?.showTooltip,
8953
- tooltipChildren: option?.tooltipChildren,
8954
- tooltipTitle: option?.tooltipTitle,
8955
- name: name,
8956
- value: option.value,
8957
- checked: selectedValue === option.value,
8958
- onChange: () => onChange?.(option),
8959
- disabled: option.disabled
8960
- }, option.value))]
8961
- });
8962
- };
9118
+ });
8963
9119
 
8964
9120
  var css_248z$N = ".ff-mini-modal-overlay {\n position: fixed;\n inset: 0;\n width: 100vw;\n height: 100vh;\n}\n\n.ff-mini-edit-modal-container {\n width: fit-content;\n padding: 0;\n position: absolute;\n visibility: hidden;\n}\n.ff-mini-edit-modal-container.modalVisible {\n visibility: visible;\n}\n.ff-mini-edit-modal-container.animatedModal {\n animation: slideDown 0.5s ease, opacity 0.5s ease;\n}\n.ff-mini-edit-modal-container .popover-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n z-index: 102;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top {\n bottom: 100%;\n left: 30px;\n padding: 0 3px 0 0;\n border-color: transparent transparent var(--ff-mini-modal-border) transparent;\n filter: drop-shadow(0 -1px 1px var(--ff-mini-modal-arrow-shadow));\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 4px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: -0.5px;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left {\n left: -15px;\n border-color: transparent var(--ff-mini-modal-border) transparent transparent;\n filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));\n padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left::before {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: 0;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom {\n top: 100%;\n left: 30px;\n border-color: var(--ff-mini-modal-border) transparent transparent transparent;\n filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));\n padding: 0 3px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: -2px;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right {\n right: -10px;\n top: 66px;\n border-color: transparent transparent transparent var(--ff-mini-modal-border);\n filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));\n padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: 0;\n left: -2px;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-top-arrow {\n top: 10%;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-middle-arrow {\n top: 45%;\n}\n.ff-mini-edit-modal-container .wrapped-div {\n height: 35px;\n background-color: transparent;\n outline: 8px solid var(--ff-mini-modal-border);\n outline-offset: -8px;\n position: absolute;\n top: -34px;\n border-radius: 7px 7px 0 0;\n}\n.ff-mini-edit-modal-container .wrapped-div::before, .ff-mini-edit-modal-container .wrapped-div::after {\n position: absolute;\n content: \"\";\n width: 13px;\n height: 13px;\n background: transparent;\n border-radius: 50%;\n bottom: 0;\n box-shadow: 8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .wrapped-div::before {\n left: -13px;\n clip-path: polygon(100% 100%, 110% 45%, 0% 70%, 0% 100%);\n}\n.ff-mini-edit-modal-container .wrapped-div::after {\n right: -13px;\n clip-path: polygon(-5% 100%, 0% 40%, 100% 70%, 100% 100%);\n box-shadow: -8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .mini-edit-modal {\n background: var(--ff-mini-modal-border);\n position: relative;\n max-height: fit-content;\n padding: 4px;\n width: 100%;\n margin: 0 0 0 -5px;\n height: 100%;\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-wrapper-shadow {\n box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-arrow-shadow {\n box-shadow: 0px 0px 16px 0px var(--ff-mini-modal-arrow-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal header {\n border-radius: 4px 4px 0 0;\n}\n.ff-mini-edit-modal-container .mini-edit-modal footer {\n border-radius: 0 0 4px 4px;\n}\n.ff-mini-edit-modal-container .mini-edit-modal .modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 5px;\n background-color: var(--ff-mini-modal-footer-background);\n height: 24px;\n padding: 0 10px 0 0;\n transition: transform 0.3s ease-in-out;\n}\n@keyframes slideDown {\n 0% {\n transform: translateY(-50px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n.ff-mini-modal-buttons-flex {\n display: flex;\n}\n\n.ff-mini-modal-gap-10 {\n gap: 10px;\n}\n\n.ff-mini-edit-model-icon {\n color: var(--ff-mini-modal-box-shadow);\n border: 2px solid var(--ff-mini-modal-box-shadow);\n border-radius: 4px;\n}";
8965
9121
  styleInject(css_248z$N);
@@ -9415,7 +9571,7 @@ const TreeTable = ({
9415
9571
  });
9416
9572
  };
9417
9573
 
9418
- var css_248z$L = ":root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-tabs-container {\n box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row--default {\n display: flex;\n gap: 8px;\n border-radius: 8px 8px 0 0;\n padding: 7px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n border: none;\n background: none;\n padding: 0 4px;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-label {\n padding-bottom: 4px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar {\n width: 100%;\n border-radius: 2px 2px 0 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar--active {\n border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.ff-tabs-container .ff-tab-row--capsule {\n display: flex;\n gap: 8px;\n border: 1px solid var(--tabs-border-color);\n border-radius: 8px;\n padding: 3px 4px;\n background-color: var(--tabs-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule {\n background: transparent;\n border: none;\n padding: 3px 4px;\n border-radius: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule.active {\n background-color: var(--tab-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule .ff-tab-bar {\n display: none;\n}\n.ff-tabs-container .ff-tab-row--no-border {\n border: none;\n}\n.ff-tabs-container .ff-tab-content {\n width: inherit;\n}";
9574
+ var css_248z$L = ":root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-tabs-container {\n box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row--default {\n display: flex;\n gap: 8px;\n border-radius: 8px 8px 0 0;\n padding: 6px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n border: none;\n background: none;\n padding: 0 4px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count {\n background-color: var(--input-default-label-color);\n color: var(--tab-bg-color);\n height: 12px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n font-weight: 600;\n padding: 0 2px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count--active {\n background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar {\n width: 100%;\n border-radius: 2px 2px 0 0;\n border-color: var(--input-default-label-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar--active {\n border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar {\n border-top: 2px solid var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar--active {\n border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count {\n background-color: var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count--active {\n background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.ff-tabs-container .ff-tab-row--capsule {\n display: flex;\n gap: 8px;\n border: 1px solid var(--tabs-border-color);\n border-radius: 8px;\n padding: 3px 4px;\n background-color: var(--tabs-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule {\n background: transparent;\n border: none;\n padding: 3px 4px;\n border-radius: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule.active {\n background-color: var(--tab-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule .ff-tab-bar {\n display: none;\n}\n.ff-tabs-container .ff-tab-row--no-border {\n border: none;\n}\n.ff-tabs-container .ff-tab-content {\n width: inherit;\n}";
9419
9575
  styleInject(css_248z$L);
9420
9576
 
9421
9577
  const Tabs = ({
@@ -9438,17 +9594,23 @@ const Tabs = ({
9438
9594
  disabled: tab.disabled,
9439
9595
  active: activeTabId === tab.id
9440
9596
  }),
9441
- children: [jsxRuntime.jsx(Typography, {
9442
- children: tab.label,
9443
- lineHeight: "18px",
9444
- fontWeight: activeTabId === tab.id ? 'semi-bold' : 'regular',
9445
- color: activeTabId === tab.id ? 'var(--tabs-label-active-color)' : 'var(--tabs-label-default-color)',
9446
- className: classNames('ff-tab-label', {
9447
- 'ff-tab-label--active': activeTabId === tab.id
9448
- })
9449
- }), jsxRuntime.jsx(Typography, {
9450
- children: "",
9451
- color: "",
9597
+ children: [jsxRuntime.jsxs("div", {
9598
+ className: "label-count-section",
9599
+ children: [jsxRuntime.jsx(Typography, {
9600
+ children: tab.label,
9601
+ lineHeight: "18px",
9602
+ fontWeight: activeTabId === tab.id ? 'semi-bold' : 'regular',
9603
+ color: activeTabId === tab.id ? 'var(--tabs-label-active-color)' : 'var(--tabs-label-default-color)',
9604
+ className: classNames('ff-tab-label', {
9605
+ 'ff-tab-label--active': activeTabId === tab.id
9606
+ })
9607
+ }), variant === 'default' && tab.count && jsxRuntime.jsx("span", {
9608
+ className: classNames('tab-count', {
9609
+ 'tab-count--active': activeTabId === tab.id
9610
+ }),
9611
+ children: tab.count
9612
+ })]
9613
+ }), jsxRuntime.jsx("div", {
9452
9614
  className: classNames('ff-tab-bar', {
9453
9615
  'ff-tab-bar--active': activeTabId === tab.id
9454
9616
  })
@@ -9492,16 +9654,23 @@ const Search = ({
9492
9654
  placeholder = 'Search',
9493
9655
  onSearch,
9494
9656
  disabled = false,
9495
- width = 150
9657
+ width = 150,
9658
+ value = '',
9659
+ isExpand = false,
9660
+ onClose,
9661
+ onExpand
9496
9662
  }) => {
9497
- const [isExpanded, setIsExpanded] = React.useState(false);
9498
- const [searchValue, setSearchValue] = React.useState('');
9663
+ const [searchValue, setSearchValue] = React.useState(value);
9499
9664
  const inputRef = React.useRef(null);
9500
9665
  React.useEffect(() => {
9501
- if (isExpanded && inputRef.current) {
9666
+ if (isExpand && inputRef.current) {
9502
9667
  inputRef.current.focus();
9503
9668
  }
9504
- }, [isExpanded]);
9669
+ setSearchValue('');
9670
+ }, [isExpand]);
9671
+ React.useEffect(() => {
9672
+ setSearchValue(value);
9673
+ }, [value]);
9505
9674
  const handleKeyDown = event => {
9506
9675
  if (event.key === 'Enter' && !checkEmpty(searchValue)) {
9507
9676
  onSearch(searchValue.trim());
@@ -9509,68 +9678,61 @@ const Search = ({
9509
9678
  handleSearchClearAndClose('Close');
9510
9679
  }
9511
9680
  };
9512
- const onChange = value => {
9513
- setSearchValue(value);
9514
- if (value === '') {
9515
- onSearch('');
9516
- }
9517
- };
9518
- const handleIconClick = () => {
9519
- setIsExpanded(!disabled);
9520
- };
9521
9681
  const handleSearchClearAndClose = label => {
9522
9682
  setSearchValue('');
9523
9683
  onSearch('');
9524
9684
  if (label === 'Close') {
9525
- setIsExpanded(false);
9685
+ onClose?.();
9526
9686
  }
9527
- if (label === 'Clear' && isExpanded && inputRef.current) {
9687
+ if (label === 'Clear' && isExpand && inputRef.current) {
9528
9688
  inputRef.current.focus();
9529
9689
  }
9530
9690
  };
9691
+ const handleIconClick = () => {
9692
+ if (!disabled) {
9693
+ onExpand?.(!isExpand);
9694
+ }
9695
+ };
9531
9696
  return jsxRuntime.jsxs("div", {
9532
9697
  className: classNames('ff-search-container', {
9533
- expanded: isExpanded,
9698
+ expanded: isExpand,
9534
9699
  disabled: disabled
9535
9700
  }),
9536
9701
  children: [jsxRuntime.jsx("div", {
9537
9702
  className: classNames('ff-search-icon', {
9538
- expanded: isExpanded
9703
+ expanded: isExpand
9539
9704
  }),
9540
9705
  onClick: handleIconClick,
9541
9706
  children: jsxRuntime.jsx(Tooltip, {
9542
9707
  title: "Search",
9543
9708
  children: jsxRuntime.jsx(Icon, {
9544
9709
  name: "search",
9545
- height: isExpanded ? 14 : 16,
9546
- width: isExpanded ? 14 : 16
9710
+ height: isExpand ? 14 : 16,
9711
+ width: isExpand ? 14 : 16
9547
9712
  })
9548
9713
  })
9549
9714
  }), jsxRuntime.jsx("div", {
9550
9715
  className: classNames('ff-vertical-line', {
9551
- expanded: isExpanded
9716
+ expanded: isExpand
9552
9717
  })
9553
9718
  }), jsxRuntime.jsx("input", {
9554
9719
  className: "ff-search-input",
9555
9720
  name: "input",
9556
9721
  style: {
9557
- width: isExpanded ? `${width}px` : '0px'
9722
+ width: isExpand ? `${width}px` : '0px'
9558
9723
  },
9559
9724
  placeholder: placeholder,
9560
9725
  type: "text",
9561
9726
  value: searchValue,
9562
9727
  disabled: disabled,
9563
9728
  ref: inputRef,
9564
- onChange: e => {
9565
- onChange(e.target.value);
9566
- },
9729
+ autoComplete: "off",
9730
+ onChange: e => setSearchValue(e.target.value),
9567
9731
  onKeyDown: handleKeyDown
9568
- }), isExpanded && jsxRuntime.jsxs(jsxRuntime.Fragment, {
9732
+ }), isExpand && jsxRuntime.jsxs(jsxRuntime.Fragment, {
9569
9733
  children: [jsxRuntime.jsx("div", {
9570
9734
  className: "ff-search-clear-button",
9571
- onClick: () => {
9572
- handleSearchClearAndClose('Clear');
9573
- },
9735
+ onClick: () => handleSearchClearAndClose('Clear'),
9574
9736
  children: searchValue !== '' && jsxRuntime.jsx(Typography, {
9575
9737
  children: 'Clear',
9576
9738
  fontSize: 8,
@@ -17507,7 +17669,7 @@ const TimePicker = ({
17507
17669
  });
17508
17670
  };
17509
17671
 
17510
- var css_248z$I = "@import 'react-day-picker/style.css';\n.fontXs, .ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n/* Custom date picker styling */\n.ff-date-picker {\n position: relative;\n}\n.ff-date-picker .rdp-root {\n --rdp-accent-color: var(--brand-color);\n --rdp-day-height: 24px;\n --rdp-day-width: 36px;\n font-family: \"Poppins\";\n font-size: 12px;\n --rdp-font-family: \"Poppins\", sans-serif;\n}\n.ff-date-picker .ff-cursor-pointer {\n cursor: pointer;\n}\n.ff-date-picker .ff-datepicker-input-container {\n display: flex;\n gap: 10px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n padding: 4px 8px;\n padding-left: 2rem;\n height: 32px;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n color: var(--status-skipped-text-color);\n line-height: 15px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input:focus,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input:focus {\n outline: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-calendar-icon,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-clock-icon {\n position: absolute;\n top: 50%;\n transform: translate(25%, -50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field {\n flex: 1;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input {\n width: 100%;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 12px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field {\n flex: 0 0 120px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field .ff-time-input {\n width: 100%;\n}\n.ff-date-picker .ff-date-picker-container {\n display: flex;\n flex-direction: column;\n position: absolute;\n border-radius: 8px;\n padding: 4px;\n box-sizing: border-box;\n background-color: var(--tab-bg-color);\n box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);\n gap: 8px;\n z-index: 10;\n}\n.ff-date-picker .ff-date-picker-container .ff-calendar-container {\n display: flex;\n align-items: flex-start;\n gap: 4px;\n height: 240px;\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls {\n padding: 4px;\n display: flex;\n justify-content: end;\n gap: 8px;\n border-top: 1px solid var(--border-color);\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls .ff-date-picker-button {\n font-weight: 600;\n line-height: 15px;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button {\n margin: 0 5px;\n border: 1px solid var(--border-color);\n background-color: var(--toggle-button-bg-color);\n box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);\n padding: 0px;\n border-radius: 30%;\n cursor: pointer;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button:disabled {\n cursor: auto;\n opacity: 0.5;\n}\n.ff-date-picker .ff-calendar .ff-calendar-haeder {\n display: flex;\n align-items: center;\n gap: 5px;\n color: var(--text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid,\n.ff-date-picker .ff-calendar .ff-custom-month_grid {\n width: calc((var(--rdp-day-width) + 4px) * 7);\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n padding: 5px;\n max-width: 100%;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month {\n padding: 10px 0;\n text-align: center;\n cursor: pointer;\n border-radius: 8px;\n background-color: #f9f9f9;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--selected {\n background-color: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-date-picker .ff-calendar .rdp-weekdays th {\n color: #6f7c8e;\n font-weight: 400;\n}\n.ff-date-picker .ff-calendar .rdp-day {\n padding: 2px;\n font-weight: 500;\n}\n.ff-date-picker .ff-calendar .rdp-day_button {\n border-radius: 4px;\n padding: 3px 9px;\n}\n.ff-date-picker .ff-calendar .rdp-day_button:hover {\n background-color: var(--hover-color);\n}\n.ff-date-picker .ff-calendar .rdp-selected {\n font: inherit;\n}\n.ff-date-picker .ff-calendar .rdp-selected .rdp-day_button {\n background: var(--rdp-accent-color);\n color: var(--drawer-footer-bg);\n border: none;\n}\n.ff-date-picker .ff-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n border: 2px solid var(--rdp-accent-color);\n}\n.ff-date-picker .ff-time-picker-container {\n position: relative;\n width: 150px;\n height: 100%;\n overflow-y: hidden;\n border-left: 1px solid #ccc;\n padding: 10px 5px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container::-webkit-scrollbar {\n display: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields {\n display: flex;\n height: 14%;\n width: 100%;\n margin-bottom: 5px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container {\n display: flex;\n border: 1px solid var(--border-color);\n border-right: 0;\n border-radius: 4px 0 0 4px;\n width: 55%;\n position: relative;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n border: none;\n padding: 5px;\n width: 100%;\n text-align: center;\n border-radius: 4px 0 0 4px;\n font-weight: 400;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input::placeholder {\n opacity: 0;\n line-height: 18px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input-label {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n transition: 0.2s ease all;\n color: var(--input-default-label-color);\n pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n border-color: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n border-color: var(--input-error-text-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n outline: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container {\n position: relative;\n width: 45%;\n display: flex;\n border: 1px solid var(--border-color);\n border-radius: 0 4px 4px 0;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-select {\n display: flex;\n align-items: center;\n padding: 0 5px;\n width: 100%;\n border-radius: 4px;\n background-color: white;\n cursor: pointer;\n border: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n border-color: var(--brand-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon {\n margin-left: auto;\n pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon svg path {\n fill: var(--default-icon-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover svg path {\n fill: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n position: fixed;\n z-index: 100;\n min-width: 60px;\n margin: 4px 0 0;\n padding: 0;\n list-style: none;\n border: 1px solid var(--ff-select-background-color);\n border-radius: 4px;\n background-color: var(--primary-button-text-color);\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item {\n padding: 8px;\n color: var(--text-color);\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item:hover {\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options {\n height: 86%;\n overflow-y: auto;\n padding-right: 5px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n background-color: var(--hover-color);\n border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options .ff-time-option {\n padding: 10px 12px;\n cursor: pointer;\n text-align: center;\n border-radius: 8px;\n background-color: rgb(249, 249, 249);\n margin: 10px 0;\n}";
17672
+ var css_248z$I = "@import 'react-day-picker/style.css';\n.fontXs, .ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n/* Custom date picker styling */\n.ff-date-picker {\n position: relative;\n}\n.ff-date-picker .rdp-root {\n --rdp-accent-color: var(--brand-color);\n --rdp-day-height: 24px;\n --rdp-day-width: 36px;\n --rdp-day_button-height: 24px;\n --rdp-day_button-width: 36px;\n font-family: \"Poppins\";\n font-size: 12px;\n --rdp-font-family: \"Poppins\", sans-serif;\n}\n.ff-date-picker .ff-cursor-pointer {\n cursor: pointer;\n}\n.ff-date-picker .ff-datepicker-input-container {\n display: flex;\n gap: 10px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n padding: 4px 8px;\n padding-left: 2rem;\n height: 32px;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n color: var(--status-skipped-text-color);\n line-height: 15px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input:focus,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input:focus {\n outline: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-calendar-icon,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-clock-icon {\n position: absolute;\n top: 50%;\n transform: translate(25%, -50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field {\n flex: 1;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input {\n width: 100%;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 12px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field {\n flex: 0 0 120px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field .ff-time-input {\n width: 100%;\n}\n.ff-date-picker .ff-date-picker-container {\n display: flex;\n flex-direction: column;\n position: absolute;\n border-radius: 8px;\n padding: 4px;\n box-sizing: border-box;\n background-color: var(--tab-bg-color);\n box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);\n gap: 8px;\n z-index: 10;\n}\n.ff-date-picker .ff-date-picker-container .ff-calendar-container {\n display: flex;\n align-items: flex-start;\n gap: 4px;\n height: 240px;\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls {\n padding: 4px;\n display: flex;\n justify-content: end;\n gap: 8px;\n border-top: 1px solid var(--border-color);\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls .ff-date-picker-button {\n font-weight: 600;\n line-height: 15px;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button {\n margin: 0 5px;\n border: 1px solid var(--border-color);\n background-color: var(--toggle-button-bg-color);\n box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);\n padding: 0px;\n border-radius: 30%;\n cursor: pointer;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button:disabled {\n cursor: auto;\n opacity: 0.5;\n}\n.ff-date-picker .ff-calendar .ff-calendar-haeder {\n display: flex;\n align-items: center;\n gap: 5px;\n color: var(--text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid,\n.ff-date-picker .ff-calendar .ff-custom-month_grid {\n width: calc((var(--rdp-day-width) + 4px) * 7);\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n padding: 5px;\n max-width: 100%;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month {\n padding: 10px 0;\n text-align: center;\n cursor: pointer;\n border-radius: 8px;\n background-color: #f9f9f9;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--selected {\n background-color: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--disabled,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--disabled,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--disabled {\n color: var(--text-color-light);\n cursor: default;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-month--selected, .ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-year--selected {\n background-color: var(--disable-color);\n}\n.ff-date-picker .ff-calendar .rdp-weekdays th {\n color: #6f7c8e;\n font-weight: 400;\n}\n.ff-date-picker .ff-calendar .rdp-day {\n padding: 2px;\n font-weight: 500;\n}\n.ff-date-picker .ff-calendar .rdp-day_button {\n border-radius: 4px;\n padding: 3px 9px;\n}\n.ff-date-picker .ff-calendar .rdp-day_button:hover {\n background-color: var(--hover-color);\n}\n.ff-date-picker .ff-calendar .rdp-selected {\n font: inherit;\n}\n.ff-date-picker .ff-calendar .rdp-selected .rdp-day_button {\n background: var(--rdp-accent-color);\n color: var(--drawer-footer-bg);\n border: none;\n}\n.ff-date-picker .ff-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n border: 2px solid var(--rdp-accent-color);\n}\n.ff-date-picker .ff-time-picker-container {\n position: relative;\n width: 150px;\n height: 100%;\n overflow-y: hidden;\n border-left: 1px solid #ccc;\n padding: 10px 5px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container::-webkit-scrollbar {\n display: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields {\n display: flex;\n height: 14%;\n width: 100%;\n margin-bottom: 5px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container {\n display: flex;\n border: 1px solid var(--border-color);\n border-right: 0;\n border-radius: 4px 0 0 4px;\n width: 55%;\n position: relative;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n border: none;\n padding: 5px;\n width: 100%;\n text-align: center;\n border-radius: 4px 0 0 4px;\n font-weight: 400;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input::placeholder {\n opacity: 0;\n line-height: 18px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input-label {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n transition: 0.2s ease all;\n color: var(--input-default-label-color);\n pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n border-color: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n border-color: var(--input-error-text-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n outline: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container {\n position: relative;\n width: 45%;\n display: flex;\n border: 1px solid var(--border-color);\n border-radius: 0 4px 4px 0;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-select {\n display: flex;\n align-items: center;\n padding: 0 5px;\n width: 100%;\n border-radius: 4px;\n background-color: white;\n cursor: pointer;\n border: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n border-color: var(--brand-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon {\n margin-left: auto;\n pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon svg path {\n fill: var(--default-icon-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover svg path {\n fill: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n position: fixed;\n z-index: 100;\n min-width: 60px;\n margin: 4px 0 0;\n padding: 0;\n list-style: none;\n border: 1px solid var(--ff-select-background-color);\n border-radius: 4px;\n background-color: var(--primary-button-text-color);\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item {\n padding: 8px;\n color: var(--text-color);\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item:hover {\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options {\n height: 86%;\n overflow-y: auto;\n padding-right: 5px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n background-color: var(--hover-color);\n border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options .ff-time-option {\n padding: 10px 12px;\n cursor: pointer;\n text-align: center;\n border-radius: 8px;\n background-color: rgb(249, 249, 249);\n margin: 10px 0;\n}";
17511
17673
  styleInject(css_248z$I);
17512
17674
 
17513
17675
  const CustomDatePicker = ({
@@ -17669,6 +17831,19 @@ const CustomDatePicker = ({
17669
17831
  setStartYear(prev => prev - 12);
17670
17832
  }
17671
17833
  };
17834
+ const isDisabledDate = (year, month, minDate, maxDate) => {
17835
+ const isMinDateValid = minDate instanceof Date && !isNaN(minDate.getTime());
17836
+ const isMaxDateValid = maxDate instanceof Date && !isNaN(maxDate.getTime());
17837
+ if (isMinDateValid) {
17838
+ if (year !== null && year < minDate.getFullYear()) return true;
17839
+ if (year !== null && month !== null && year === minDate.getFullYear() && month < minDate.getMonth()) return true;
17840
+ }
17841
+ if (isMaxDateValid) {
17842
+ if (year !== null && year > maxDate.getFullYear()) return true;
17843
+ if (year !== null && month !== null && year === maxDate.getFullYear() && month > maxDate.getMonth()) return true;
17844
+ }
17845
+ return false;
17846
+ };
17672
17847
  React.useEffect(() => {
17673
17848
  if (isPickerOpen && view === 'years') {
17674
17849
  const currentYear = selectedMonth?.getFullYear() ?? new Date().getFullYear();
@@ -17706,15 +17881,19 @@ const CustomDatePicker = ({
17706
17881
  const CustomMonthGrid = () => {
17707
17882
  return jsxRuntime.jsx("div", {
17708
17883
  className: "ff-custom-month_grid",
17709
- children: months.map((month, index) => jsxRuntime.jsx("div", {
17710
- onClick: () => handleMonthSelect(index),
17711
- className: classNames('ff-custom-month', {
17712
- 'ff-custom-month--selected': index === selectedMonth?.getMonth()
17713
- }),
17714
- children: jsxRuntime.jsx(Typography, {
17715
- children: month
17716
- })
17717
- }, index))
17884
+ children: months.map((month, index) => {
17885
+ const isDisabled = isDisabledDate(selectedMonth?.getFullYear() || null, index, minDate, maxDate);
17886
+ return jsxRuntime.jsx("div", {
17887
+ onClick: () => !isDisabled && handleMonthSelect(index),
17888
+ className: classNames('ff-custom-month', {
17889
+ 'ff-custom-month--selected': index === selectedMonth?.getMonth(),
17890
+ 'ff-custom-month--disabled': isDisabled
17891
+ }),
17892
+ children: jsxRuntime.jsx(Typography, {
17893
+ children: month
17894
+ })
17895
+ }, index);
17896
+ })
17718
17897
  });
17719
17898
  };
17720
17899
  const CustomPrevButton = ({
@@ -17751,15 +17930,19 @@ const CustomDatePicker = ({
17751
17930
  const CustomYearGrid = () => {
17752
17931
  return jsxRuntime.jsx("div", {
17753
17932
  className: "ff-custom-year_grid",
17754
- children: years.map(year => jsxRuntime.jsx("div", {
17755
- onClick: () => handleYearSelect(year),
17756
- className: classNames('ff-custom-year', {
17757
- 'ff-custom-year--selected': year === selectedMonth?.getFullYear()
17758
- }),
17759
- children: jsxRuntime.jsx(Typography, {
17760
- children: year
17761
- })
17762
- }, year))
17933
+ children: years.map(year => {
17934
+ const isDisabled = isDisabledDate(year, null, minDate, maxDate);
17935
+ return jsxRuntime.jsx("div", {
17936
+ onClick: () => !isDisabled && handleYearSelect(year),
17937
+ className: classNames('ff-custom-year', {
17938
+ 'ff-custom-year--selected': year === selectedMonth?.getFullYear(),
17939
+ 'ff-custom-year--disabled': isDisabled
17940
+ }),
17941
+ children: jsxRuntime.jsx(Typography, {
17942
+ children: year
17943
+ })
17944
+ }, year);
17945
+ })
17763
17946
  });
17764
17947
  };
17765
17948
  return jsxRuntime.jsxs("div", {
@@ -23359,15 +23542,17 @@ const PieChart = ({
23359
23542
  });
23360
23543
  };
23361
23544
 
23362
- var css_248z$C = ".ff-app-header-main {\n display: flex;\n}\n.ff-app-header-main .ff-app-header {\n display: flex;\n flex-basis: 100%;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding: 5px;\n z-index: 1000;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n display: flex;\n align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n margin-left: 8px;\n padding: 7px;\n color: var(--ff-header-text-color);\n cursor: pointer;\n display: flex;\n position: relative;\n flex: 1 1 auto;\n overflow: hidden;\n transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n max-width: 100px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n background: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n white-space: nowrap;\n align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n padding: 3px;\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n flex-grow: 12; /* Increase size on hover */\n max-width: 550px;\n opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n color: var(--ff-header-submenu-text-color);\n align-content: center;\n position: relative;\n white-space: nowrap;\n padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 20%;\n width: 70%;\n height: 2px;\n border-radius: 4px;\n box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n display: flex;\n align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n margin-right: 6px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n background: var(--brand-color);\n border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n width: 40px;\n display: flex;\n justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n height: 24px;\n padding: 8px;\n align-content: center;\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}";
23545
+ var css_248z$C = ".ff-app-header-main {\n display: flex;\n}\n.ff-app-header-main .ff-app-header {\n display: flex;\n flex-basis: 100%;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding: 5px;\n z-index: 1000;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n display: flex;\n align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n margin-left: 8px;\n padding: 7px;\n color: var(--ff-header-text-color);\n cursor: pointer;\n display: flex;\n position: relative;\n flex: 1 1 auto;\n overflow: hidden;\n transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n max-width: 100px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n background: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n white-space: nowrap;\n align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n padding: 3px;\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n flex-grow: 12; /* Increase size on hover */\n max-width: 550px;\n opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n color: var(--ff-header-submenu-text-color);\n align-content: center;\n position: relative;\n white-space: nowrap;\n padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 20%;\n width: 70%;\n height: 2px;\n border-radius: 4px;\n box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n display: flex;\n align-items: center;\n overflow: hidden;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n margin-right: 6px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n background: var(--brand-color);\n border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n width: 40px;\n display: flex;\n justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n height: 24px;\n padding: 8px;\n align-content: center;\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}\n@keyframes quickmenu-expand {\n from {\n max-height: 0;\n opacity: 0;\n }\n to {\n max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n opacity: 1;\n }\n}\n@keyframes quickmenu-collapse {\n from {\n max-height: 500px;\n opacity: 1;\n }\n to {\n max-height: 0;\n opacity: 0;\n }\n}";
23363
23546
  styleInject(css_248z$C);
23364
23547
 
23365
23548
  const AppHeader = ({
23366
23549
  logoIconName = 'fireflink_icon',
23550
+ width,
23367
23551
  leftContent,
23368
23552
  rightContent,
23369
23553
  projectsList,
23370
23554
  appHeaderMenuItems,
23555
+ appHeaderHiddenMenuItems,
23371
23556
  selectedMenu,
23372
23557
  selectedSubMenu,
23373
23558
  selectedQuickMenu,
@@ -23383,11 +23568,6 @@ const AppHeader = ({
23383
23568
  onProjectDropdownLabelClick = () => {},
23384
23569
  onMoreMenuOptionClick = () => {}
23385
23570
  }) => {
23386
- const [appHeaderHiddenMenuItems, setAppHeaderHiddenMenuItems] = React.useState([]);
23387
- const onSubMenuClickHandler = subMenu => {
23388
- setAppHeaderHiddenMenuItems(subMenu.hiddenMenuItems ? subMenu.hiddenMenuItems : []);
23389
- onSubMenuClick(subMenu);
23390
- };
23391
23571
  return jsxRuntime.jsx("div", {
23392
23572
  className: "ff-app-header-main",
23393
23573
  children: jsxRuntime.jsxs("div", {
@@ -23408,6 +23588,9 @@ const AppHeader = ({
23408
23588
  })]
23409
23589
  }), !checkEmpty(appHeaderMenuItems) && jsxRuntime.jsxs("div", {
23410
23590
  className: "ff-app-header-nav-bar",
23591
+ style: {
23592
+ width: width
23593
+ },
23411
23594
  children: [projectsList && !checkEmpty(projectsList) && jsxRuntime.jsx("div", {
23412
23595
  children: jsxRuntime.jsx(AllProjectsDropdown, {
23413
23596
  onClick: onProjectMenuClick,
@@ -23419,7 +23602,7 @@ const AppHeader = ({
23419
23602
  }), jsxRuntime.jsx("div", {
23420
23603
  className: "ff-app-header-nav-bar-items fontSm",
23421
23604
  children: appHeaderMenuItems.map(menuItem => {
23422
- return jsxRuntime.jsxs("div", {
23605
+ return !appHeaderHiddenMenuItems?.find(menu => menu.label === menuItem.label) && jsxRuntime.jsxs("div", {
23423
23606
  className: classNames('ff-app-header-nav-bar-item', {
23424
23607
  ['ff-app-header-nav-bar-item--selected']: menuItem.label === selectedMenu
23425
23608
  }),
@@ -23439,7 +23622,7 @@ const AppHeader = ({
23439
23622
  ['ff-app-header-nav-bar-submenu-item--selected']: subMenuItem.label === selectedSubMenu
23440
23623
  }),
23441
23624
  lineHeight: "18px",
23442
- onClick: () => onSubMenuClickHandler(subMenuItem),
23625
+ onClick: () => onSubMenuClick(subMenuItem),
23443
23626
  children: subMenuItem.label
23444
23627
  })
23445
23628
  }, subMenuItem.label);
@@ -23447,7 +23630,8 @@ const AppHeader = ({
23447
23630
  return jsxRuntime.jsx("div", {
23448
23631
  className: "ff-app-header-submenu-container",
23449
23632
  children: subMenuItem.label === selectedSubMenu && subMenuItem?.quickMenuItems && jsxRuntime.jsxs("div", {
23450
- className: "ff-app-header-quickmenu-container",
23633
+ // className="ff-app-header-quickmenu-container"
23634
+ className: classNames('ff-app-header-quickmenu-container', subMenuItem.quickMenuItems?.length ? 'visible' : ''),
23451
23635
  children: [jsxRuntime.jsx("div", {
23452
23636
  children: jsxRuntime.jsx(Icon, {
23453
23637
  name: "vertical_separator"
@@ -23515,7 +23699,7 @@ const Paper = ({
23515
23699
  });
23516
23700
  };
23517
23701
 
23518
- var css_248z$A = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n display: flex;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n flex-direction: row-reverse;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n position: absolute;\n padding: 5px;\n border-radius: 4px;\n pointer-events: none;\n background-color: var(--tooltip-bg-color);\n color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n display: grid;\n gap: 10px;\n grid-auto-rows: 1fr;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend {\n grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend.ff-side-legend {\n grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend .ff-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n grid-template-columns: repeat(2, 130px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n display: flex;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--tooltip-text-color);\n border-radius: 15px;\n min-width: 25px;\n height: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend {\n grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend.ff-side-legend {\n grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend .ff-legend-item {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n overflow: hidden;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n margin-left: 1rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table {\n width: 100%;\n min-width: 300px;\n border-collapse: collapse;\n text-align: left;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header {\n font-weight: bold;\n background-color: var(--tabs-bg-color);\n color: var(--input-hover-border-color);\n padding: 0.5rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n text-align: right;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--tooltip-text-color);\n border-radius: 1rem;\n min-width: 22px;\n height: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n padding: 0.5rem;\n color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n display: flex;\n align-items: baseline;\n gap: 5px;\n color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n text-align: right;\n}";
23702
+ var css_248z$A = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n display: flex;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n flex-direction: row-reverse;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg {\n display: block;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n position: absolute;\n padding: 5px;\n border-radius: 4px;\n pointer-events: none;\n background-color: var(--tooltip-bg-color);\n color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n display: grid;\n grid-auto-rows: 1fr;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend {\n grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend.ff-side-legend {\n grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend .ff-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n grid-template-columns: repeat(2, 130px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n display: flex;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--tooltip-text-color);\n border-radius: 15px;\n min-width: 25px;\n height: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend {\n grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend.ff-side-legend {\n grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend .ff-legend-item {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n overflow: hidden;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n margin-left: 1rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table {\n width: 100%;\n min-width: 300px;\n border-collapse: collapse;\n text-align: left;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header {\n font-weight: bold;\n background-color: var(--tabs-bg-color);\n color: var(--input-hover-border-color);\n padding: 0.5rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n text-align: right;\n padding-right: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:nth-last-child(2) {\n width: 58px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--tooltip-text-color);\n border-radius: 1rem;\n min-width: 22px;\n height: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n padding: 0.5rem;\n color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count:last-child {\n padding-right: 22px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n display: flex;\n align-items: baseline;\n gap: 5px;\n color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n text-align: right;\n}";
23519
23703
  styleInject(css_248z$A);
23520
23704
 
23521
23705
  const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
@@ -23529,6 +23713,7 @@ const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
23529
23713
  const colorMapping = ['var(--status-success-text-color)', 'var(--status-rejected-text-color)', 'var(--status-warning-text-color)', 'var(--status-button-text-skipped)', 'var(--brand-color)'];
23530
23714
  const DashboardDonutChart = ({
23531
23715
  radius = 60,
23716
+ tableWidth,
23532
23717
  lineWidth = 15,
23533
23718
  statusValues = [],
23534
23719
  gapAngle = 0,
@@ -23541,7 +23726,12 @@ const DashboardDonutChart = ({
23541
23726
  labelFontSize = 24,
23542
23727
  subLabelFontSize = 14,
23543
23728
  legendPosition = 'bottom',
23544
- legendGap = 0
23729
+ chartGap = 0,
23730
+ legendGap = 5,
23731
+ legendValueFontSize = 22,
23732
+ legendKeyFontSize = 12,
23733
+ labelYoffSet = -5,
23734
+ subLabelYoffSet = 20
23545
23735
  }) => {
23546
23736
  const [hoveredItemIndex, setHoveredItemIndex] = React.useState(null);
23547
23737
  const [tooltipPosition, setTooltipPosition] = React.useState({
@@ -23636,7 +23826,7 @@ const DashboardDonutChart = ({
23636
23826
  };
23637
23827
  const SVG_PADDING = 3;
23638
23828
  const DONUT_SVG_SIZE = radius * 2 + lineWidth + SVG_PADDING * 2;
23639
- const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING;
23829
+ const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING * 2;
23640
23830
  const renderArc = (chartItem, endAngle, i) => {
23641
23831
  const isFullCircle = nonZeroValues.length === 1;
23642
23832
  // Full circle handling
@@ -23664,7 +23854,7 @@ const DashboardDonutChart = ({
23664
23854
  },
23665
23855
  children: [jsxRuntime.jsx(Typography, {
23666
23856
  fontSize: 12,
23667
- children: hoveredItemIndex !== null && `${nonZeroValues[hoveredItemIndex]?.key} : `
23857
+ children: hoveredItemIndex !== null && `${nonZeroValues[hoveredItemIndex]?.key}:`
23668
23858
  }), jsxRuntime.jsx(Typography, {
23669
23859
  fontSize: 12,
23670
23860
  children: hoveredItemIndex !== null && (legendType === 'memoryLegend' ? `${nonZeroValues[hoveredItemIndex]?.labelValue} ${nonZeroValues[hoveredItemIndex]?.unit}` : nonZeroValues[hoveredItemIndex]?.value)
@@ -23678,16 +23868,19 @@ const DashboardDonutChart = ({
23678
23868
  className: classNames('ff-legend-container ff-number-legend', {
23679
23869
  'ff-side-legend': legendPosition === 'left' || legendPosition === 'right'
23680
23870
  }),
23871
+ style: {
23872
+ gap: `${legendGap}px`
23873
+ },
23681
23874
  children: legendData.map((item, index) => jsxRuntime.jsxs("div", {
23682
23875
  className: "ff-legend-item",
23683
23876
  children: [jsxRuntime.jsxs(Typography, {
23684
- fontSize: 22,
23877
+ fontSize: legendValueFontSize,
23685
23878
  fontWeight: "semi-bold",
23686
23879
  className: "ff-legend-value",
23687
23880
  color: item.color ? item.color : colorMapping[index % colorMapping.length],
23688
23881
  children: [item.value, " ", showUnit && unit?.toUpperCase()]
23689
23882
  }), jsxRuntime.jsx(Typography, {
23690
- fontSize: 12,
23883
+ fontSize: legendKeyFontSize,
23691
23884
  className: "ff-legend-key",
23692
23885
  textAlign: "center",
23693
23886
  children: item.key
@@ -23696,7 +23889,10 @@ const DashboardDonutChart = ({
23696
23889
  });
23697
23890
  case 'pillLegend':
23698
23891
  return jsxRuntime.jsx("div", {
23699
- className: "ff-legend-container ff-pill-legend ",
23892
+ className: "ff-legend-container ff-pill-legend",
23893
+ style: {
23894
+ gap: `${legendGap}px`
23895
+ },
23700
23896
  children: legendData.map((item, index) => jsxRuntime.jsxs("div", {
23701
23897
  className: "ff-legend-item",
23702
23898
  children: [jsxRuntime.jsx("span", {
@@ -23709,6 +23905,7 @@ const DashboardDonutChart = ({
23709
23905
  children: item.value
23710
23906
  })
23711
23907
  }), jsxRuntime.jsx(Typography, {
23908
+ fontSize: legendKeyFontSize,
23712
23909
  className: "ff-legend-key",
23713
23910
  children: item.key
23714
23911
  })]
@@ -23719,16 +23916,20 @@ const DashboardDonutChart = ({
23719
23916
  className: classNames('ff-legend-container ff-memory-legend', {
23720
23917
  'ff-side-legend': legendPosition === 'left' || legendPosition === 'right'
23721
23918
  }),
23919
+ style: {
23920
+ gap: `${legendGap}px`
23921
+ },
23722
23922
  children: legendData.map((item, index) => jsxRuntime.jsx(React.Fragment, {
23723
23923
  children: jsxRuntime.jsxs("div", {
23724
23924
  className: "ff-legend-item",
23725
23925
  children: [jsxRuntime.jsxs(Typography, {
23726
- fontSize: 22,
23727
- fontWeight: "medium",
23926
+ fontSize: legendValueFontSize,
23927
+ fontWeight: "semi-bold",
23728
23928
  className: "ff-legend-value",
23729
23929
  color: item.color ? item.color : colorMapping[index % colorMapping.length],
23730
- children: [item.labelValue, " ", item.unit]
23930
+ children: [Number.isInteger(item.labelValue) ? item.labelValue : item.labelValue?.toFixed(2), ' ', item.unit]
23731
23931
  }), jsxRuntime.jsx(Typography, {
23932
+ fontSize: legendKeyFontSize,
23732
23933
  className: "ff-legend-key",
23733
23934
  textAlign: "center",
23734
23935
  children: item.key
@@ -23745,9 +23946,12 @@ const DashboardDonutChart = ({
23745
23946
  children: jsxRuntime.jsxs("tr", {
23746
23947
  children: [jsxRuntime.jsx("th", {
23747
23948
  className: "ff-table-header",
23949
+ style: {
23950
+ width: tableWidth
23951
+ },
23748
23952
  children: "Name"
23749
23953
  }), jsxRuntime.jsx("th", {
23750
- className: "ff-table-header",
23954
+ className: "ff-table-header ",
23751
23955
  children: "%"
23752
23956
  }), jsxRuntime.jsx("th", {
23753
23957
  className: "ff-table-header",
@@ -23825,7 +24029,7 @@ const DashboardDonutChart = ({
23825
24029
  'legend-position-left': legendPosition === 'left'
23826
24030
  }),
23827
24031
  style: {
23828
- gap: `${legendGap}px`
24032
+ gap: `${chartGap}px`
23829
24033
  },
23830
24034
  children: [jsxRuntime.jsxs("div", {
23831
24035
  className: "ff-dashboard-donut-chart-svg-container",
@@ -23855,10 +24059,10 @@ const DashboardDonutChart = ({
23855
24059
  dy: index === 0 ? lines.length > 1 ? -8 : 0 : 24,
23856
24060
  children: line
23857
24061
  }, index))
23858
- }) : (legendType !== 'tableLegend' || hoveredItemIndex !== null) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
24062
+ }) : (legendType !== 'tableLegend' || hoveredItemIndex !== null || hoveredItemIndex == null) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
23859
24063
  children: [jsxRuntime.jsx("text", {
23860
24064
  x: "0",
23861
- y: "5",
24065
+ y: labelYoffSet,
23862
24066
  textAnchor: "middle",
23863
24067
  fill: colorMapping[3],
23864
24068
  style: {
@@ -23866,12 +24070,12 @@ const DashboardDonutChart = ({
23866
24070
  },
23867
24071
  children: wrapText(legendType === 'tableLegend' && hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex] ? `${(nonZeroValues[hoveredItemIndex].value / total * 100).toFixed(1)}%` : legendType === 'memoryLegend' ? `${totalMemory}` : `${total} ${showUnit && unit ? `${unit.toUpperCase()}` : ''}`, LABEL_MAX_WIDTH, labelFontSize).map((line, index) => jsxRuntime.jsx("tspan", {
23868
24072
  x: "0",
23869
- dy: index === 0 ? 0 : 16,
24073
+ dy: index === 0 ? 0 : labelFontSize,
23870
24074
  children: line
23871
24075
  }, index))
23872
24076
  }), jsxRuntime.jsx("text", {
23873
24077
  x: "0",
23874
- y: "26",
24078
+ y: subLabelYoffSet,
23875
24079
  textAnchor: "middle",
23876
24080
  fill: "var(--text-color)",
23877
24081
  style: {
@@ -23879,19 +24083,12 @@ const DashboardDonutChart = ({
23879
24083
  },
23880
24084
  children: wrapText(legendType === 'tableLegend' && hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex] ? nonZeroValues[hoveredItemIndex].key : legendDetailsType, LABEL_MAX_WIDTH, subLabelFontSize).map((line, index) => jsxRuntime.jsx("tspan", {
23881
24085
  x: "0",
23882
- dy: index === 0 ? 0 : 16,
24086
+ dy: index === 0 ? 0 : subLabelFontSize,
23883
24087
  children: line
23884
24088
  }, index))
23885
24089
  })]
23886
24090
  })]
23887
24091
  })
23888
- }), legendType === 'tableLegend' && jsxRuntime.jsxs("div", {
23889
- children: [jsxRuntime.jsxs(Typography, {
23890
- fontWeight: "semi-bold",
23891
- children: [legendDetailsType, " "]
23892
- }), jsxRuntime.jsxs(Typography, {
23893
- children: [" ", `Total ${legendDetailsType} - ${total}`, " "]
23894
- })]
23895
24092
  }), showTooltip && renderTooltip()]
23896
24093
  }), isLegendDetails && renderLegend(chartValues, legendType, legendPosition)]
23897
24094
  });
@@ -32567,7 +32764,7 @@ const ExcelFile = ({
32567
32764
  });
32568
32765
  };
32569
32766
 
32570
- var css_248z$h = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-Module-chip {\n width: 75px;\n height: 32px;\n border: 0.5px solid;\n border-radius: 16px;\n color: var(--brand-color);\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-Module-chip .ff-Module-label-chip--active {\n color: var(--ff-header-text-color);\n}\n.ff-Module-chip--active {\n background: var(--brand-color);\n}";
32767
+ var css_248z$h = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-Module-chip {\n width: 68px;\n height: 30px;\n color: var(--table-column-text-color);\n border: 1px solid var(--ff-editor-line-bg);\n border-radius: 16px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-Module-chip .module-typography {\n color: var(--table-column-text-color);\n}\n.ff-Module-chip--active {\n border: 0.5px solid var(--brand-color);\n background: var(--brand-color);\n}\n.ff-Module-chip--active .module-typography {\n color: var(--base-bg-color);\n font-weight: 600;\n}\n.ff-Module-chip--hover:hover {\n border: 0.5px solid var(--brand-color);\n background-color: var(--hover-color);\n}\n.ff-Module-chip--hover:hover .module-typography {\n color: var(--table-column-text-color);\n font-weight: 600;\n}";
32571
32768
  styleInject(css_248z$h);
32572
32769
 
32573
32770
  const ModuleChip = ({
@@ -32577,19 +32774,14 @@ const ModuleChip = ({
32577
32774
  }) => {
32578
32775
  return jsxRuntime.jsx("div", {
32579
32776
  className: classNames('ff-Module-chip', {
32580
- 'ff-Module-chip--active': isActive
32777
+ 'ff-Module-chip--active': isActive,
32778
+ 'ff-Module-chip--hover': !isActive
32581
32779
  }),
32582
32780
  onClick: onClick,
32583
- children: jsxRuntime.jsx("div", {
32584
- className: classNames(`ff-Module-label-chip `, {
32585
- 'ff-Module-label-chip--active': isActive
32586
- }),
32587
- children: jsxRuntime.jsx(Typography, {
32588
- fontSize: '14px',
32589
- fontWeight: "regular",
32590
- lineHeight: "21px",
32591
- children: label
32592
- })
32781
+ children: jsxRuntime.jsx(Typography, {
32782
+ lineHeight: "18px",
32783
+ className: "module-typography",
32784
+ children: label
32593
32785
  })
32594
32786
  });
32595
32787
  };
@@ -32906,7 +33098,7 @@ const VariableDropdown = ({
32906
33098
  });
32907
33099
  };
32908
33100
 
32909
- var css_248z$c = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-line-chart-inner-tooltip, .ff--line-chart-x-line-data, .ff-line-chart-y-axis-text, .ff-line-chart-date {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-line-chart-x-axis-label {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-line-chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.ff-line-chart-text {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n}\n.ff-line-chart-text .smooth-dot {\n transition: cx 0.2s ease, cy 0.2s ease;\n}\n\n.ff-line-chart-yAxisLabel {\n display: flex;\n white-space: nowrap;\n transform: rotate(270deg) translateX(60px);\n transform-origin: right center;\n}\n\n.ff-line-chart-svg {\n width: inherit;\n}\n\n.ff-line-chart-text1 {\n transform-origin: center;\n transform: rotate(-90deg);\n transition: transform 1s ease-in-out;\n position: relative;\n left: 163px;\n min-width: 10px;\n color: var(--drawer-title-color);\n}\n\n.ff-line-chart-tooltip {\n position: absolute;\n background-color: var(--tooltip-bg-color);\n border-radius: 4px;\n pointer-events: none;\n display: flex;\n flex-direction: column;\n min-width: 30px;\n min-height: 30px;\n justify-content: center;\n align-items: flex-start;\n row-gap: 10px;\n padding: 8px !important;\n}\n\n.ff-line-chart-status-dot {\n width: 16px;\n height: 16px;\n border-radius: 100%;\n}\n\n.ff-line-chart-inner-tooltip {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 5px;\n color: var(--arrow-button-bg-color);\n}\n\n.ff-line-chart-date {\n height: 100%;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n border-bottom: 1px solid var(--arrow-button-bg-color);\n color: var(--arrow-button-bg-color);\n}\n\n.ff-line-chart-x-axis-label {\n font-weight: 600;\n}";
33101
+ var css_248z$c = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-line-chart-inner-tooltip, .ff--line-chart-x-line-data, .ff-line-chart-y-axis-text, .ff-line-chart-date {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-line-chart-x-axis-label {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-line-chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.ff-line-chart-text {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n}\n.ff-line-chart-text .smooth-dot {\n transition: cx 0.2s ease, cy 0.2s ease;\n}\n\n.ff-line-chart-yAxisLabel-warpper {\n position: relative;\n min-width: 20px;\n height: 100%;\n}\n.ff-line-chart-yAxisLabel-warpper .ff-line-chart-yAxisLabel {\n position: absolute;\n right: 0;\n top: 50%;\n display: flex;\n white-space: nowrap;\n transform: rotate(270deg) translateX(60%);\n transform-origin: right center;\n}\n\n.ff-line-chart-text1 {\n transform-origin: center;\n transform: rotate(-90deg);\n transition: transform 1s ease-in-out;\n position: relative;\n left: 163px;\n min-width: 10px;\n color: var(--drawer-title-color);\n}\n\n.ff-line-chart-tooltip {\n position: absolute;\n background-color: var(--tooltip-bg-color);\n border-radius: 4px;\n pointer-events: none;\n display: flex;\n flex-direction: column;\n min-width: 30px;\n min-height: 30px;\n justify-content: center;\n align-items: flex-start;\n row-gap: 10px;\n padding: 8px !important;\n}\n\n.ff-line-chart-status-dot {\n width: 16px;\n height: 16px;\n border-radius: 100%;\n}\n\n.ff-line-chart-inner-tooltip {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 5px;\n color: var(--arrow-button-bg-color);\n}\n\n.ff-line-chart-date {\n height: 100%;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n border-bottom: 1px solid var(--arrow-button-bg-color);\n color: var(--arrow-button-bg-color);\n}\n\n.ff-line-chart-x-axis-label {\n font-weight: 600;\n}";
32910
33102
  styleInject(css_248z$c);
32911
33103
 
32912
33104
  const LineChart = ({
@@ -33019,9 +33211,13 @@ const LineChart = ({
33019
33211
  return jsxRuntime.jsxs("div", {
33020
33212
  className: "ff-line-chart-text",
33021
33213
  style: {
33022
- width: width
33214
+ width: width + 20
33023
33215
  },
33024
33216
  children: [jsxRuntime.jsxs("div", {
33217
+ className: "ff-line-chart-yAxisLabel-warpper",
33218
+ style: {
33219
+ height: height
33220
+ },
33025
33221
  children: [' ', jsxRuntime.jsx(Typography, {
33026
33222
  className: "ff-line-chart-yAxisLabel",
33027
33223
  fontSize: textSize,
@@ -33032,6 +33228,7 @@ const LineChart = ({
33032
33228
  className: "ff-line-chart-svg",
33033
33229
  children: [' ', jsxRuntime.jsx("svg", {
33034
33230
  height: height,
33231
+ width: width,
33035
33232
  onMouseMove: handleMouseMove,
33036
33233
  onMouseLeave: handleMouseLeave,
33037
33234
  className: "ff-line-chart-svg",
@@ -33328,7 +33525,7 @@ const CreateVariableSlider = ({
33328
33525
  required: true,
33329
33526
  type: "text",
33330
33527
  name: "variable name",
33331
- value: variableName,
33528
+ value: variableName || '',
33332
33529
  onChange: event => onNameChange(event.target.value)
33333
33530
  }), jsxRuntime.jsx(Select$1, {
33334
33531
  label: "Variable Type",
@@ -33342,7 +33539,7 @@ const CreateVariableSlider = ({
33342
33539
  required: true,
33343
33540
  type: "text",
33344
33541
  name: "value",
33345
- value: value,
33542
+ value: value || '',
33346
33543
  onChange: event => onValueChange(event.target.value)
33347
33544
  }), jsxRuntime.jsxs("div", {
33348
33545
  className: "ff-hide-value-content",
@@ -38854,7 +39051,7 @@ const throttle = (func, limit) => {
38854
39051
  return throttled;
38855
39052
  };
38856
39053
 
38857
- var css_248z$7 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-bar-chart-container .ff-bar-chart-labels, .ff-bar-chart-container .ff-bar-chart-tooltip {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-bar-chart-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-bar-chart-container .ff-legend-container {\n width: 100%;\n display: flex;\n justify-content: flex-end;\n padding-right: 10px;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend {\n width: 290px;\n margin-top: 10px;\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item {\n display: flex;\n align-items: center;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item .ff-bar-chart-legend-item-circle {\n display: inline-block;\n width: 12px;\n height: 12px;\n margin-right: 5px;\n border-radius: 50%;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-legend-label {\n margin-left: 5px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon {\n position: absolute;\n pointer-events: none;\n width: 24px;\n height: 24px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon-wrapper {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-bar-chart-container .ff-bar-chart-labels {\n font-weight: 400;\n color: var(--text-color);\n}\n.ff-bar-chart-container .ff-bar-chart-tooltip {\n position: absolute;\n padding: 5px 10px;\n background-color: var(--tooltip-bg-color);\n color: var(--primary-icon-color);\n border-radius: 4px;\n pointer-events: none;\n font-weight: 600;\n}";
39054
+ var css_248z$7 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-bar-chart-container .ff-bar-chart-labels, .ff-bar-chart-container .ff-bar-chart-tooltip {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-bar-chart-container {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-bar-chart-container svg {\n display: block;\n}\n.ff-bar-chart-container .ff-legend-container {\n width: 100%;\n display: flex;\n justify-content: flex-end;\n padding-right: 10px;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend {\n width: 290px;\n margin-top: 10px;\n display: flex;\n justify-content: flex-end;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item {\n display: flex;\n align-items: center;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item .ff-bar-chart-legend-item-circle {\n display: inline-block;\n width: 12px;\n height: 12px;\n margin-right: 5px;\n border-radius: 50%;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-legend-label {\n margin-left: 5px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon {\n position: absolute;\n pointer-events: none;\n width: 24px;\n height: 24px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon-wrapper {\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-bar-chart-container .ff-bar-chart-labels {\n font-weight: 400;\n color: var(--text-color);\n}\n.ff-bar-chart-container .ff-bar-chart-tooltip {\n position: absolute;\n padding: 5px 10px;\n background-color: var(--tooltip-bg-color);\n color: var(--primary-icon-color);\n border-radius: 4px;\n pointer-events: none;\n font-weight: 600;\n}";
38858
39055
  styleInject(css_248z$7);
38859
39056
 
38860
39057
  const BarChart = ({
@@ -38872,7 +39069,8 @@ const BarChart = ({
38872
39069
  showXAxisLabels = true,
38873
39070
  icons = [],
38874
39071
  iconSize,
38875
- legendPosition = 'bottom'
39072
+ legendPosition = 'bottom',
39073
+ legendGap = 5
38876
39074
  }) => {
38877
39075
  const [tooltip, setTooltip] = React.useState({
38878
39076
  visible: false,
@@ -38885,7 +39083,7 @@ const BarChart = ({
38885
39083
  const topPadding = 40;
38886
39084
  const leftPadding = 40;
38887
39085
  const totalBarWidth = data.length * barWidth + (data.length - 1) * barGap;
38888
- const chartWidth = totalBarWidth + leftPadding * 2;
39086
+ const chartWidth = totalBarWidth + leftPadding * 2 + 10;
38889
39087
  const renderGradients = gradients => {
38890
39088
  return gradients.map((gradient, index) => jsxRuntime.jsx("defs", {
38891
39089
  children: jsxRuntime.jsx("linearGradient", {
@@ -38933,13 +39131,15 @@ const BarChart = ({
38933
39131
  return jsxRuntime.jsxs("div", {
38934
39132
  className: "ff-bar-chart-container",
38935
39133
  style: {
38936
- width: chartWidth,
38937
- height
39134
+ width: chartWidth
38938
39135
  },
38939
39136
  children: [legend && legendPosition === 'top' && jsxRuntime.jsx("div", {
38940
39137
  className: "ff-legend-container",
38941
39138
  children: jsxRuntime.jsx("div", {
38942
39139
  className: "ff-bar-chart-legend",
39140
+ style: {
39141
+ gap: `${legendGap}px`
39142
+ },
38943
39143
  children: data.map((item, index) => jsxRuntime.jsxs("div", {
38944
39144
  className: "ff-bar-chart-legend-item",
38945
39145
  children: [icons[index] && typeof icons[index] === 'string' ? jsxRuntime.jsx(Icon, {
@@ -38963,7 +39163,7 @@ const BarChart = ({
38963
39163
  }), jsxRuntime.jsx("div", {
38964
39164
  children: jsxRuntime.jsxs("svg", {
38965
39165
  width: chartWidth,
38966
- height: height + topPadding + 40,
39166
+ height: height + topPadding + 5 + (showXAxisLabels ? 20 : 0) + (xAxisLabel ? 20 : 0),
38967
39167
  children: [Array.isArray(colors) && colors.length > 0 && renderGradients(colors), Array.from({
38968
39168
  length: yAxisDivisions + 1
38969
39169
  }).map((_, i) => {
@@ -39021,7 +39221,7 @@ const BarChart = ({
39021
39221
  strokeWidth: "1"
39022
39222
  }), xAxisLabel && jsxRuntime.jsx("text", {
39023
39223
  x: chartWidth / 2,
39024
- y: height + topPadding + 40,
39224
+ y: height + topPadding + (showXAxisLabels ? 40 : 20),
39025
39225
  fontSize: "12",
39026
39226
  fill: "black",
39027
39227
  textAnchor: "middle",
@@ -39042,6 +39242,9 @@ const BarChart = ({
39042
39242
  className: "ff-legend-container",
39043
39243
  children: jsxRuntime.jsx("div", {
39044
39244
  className: "ff-bar-chart-legend",
39245
+ style: {
39246
+ gap: `${legendGap}px`
39247
+ },
39045
39248
  children: data.map((item, index) => jsxRuntime.jsxs("div", {
39046
39249
  className: "ff-bar-chart-legend-item",
39047
39250
  children: [icons[index] && typeof icons[index] === 'string' ? jsxRuntime.jsx(Icon, {
@@ -46767,12 +46970,13 @@ const PopUpModal = ({
46767
46970
  subTitleMessage = 'Unsaved Changes.',
46768
46971
  iconName,
46769
46972
  modalMessage = 'Your web service data will be lost. Are you sure you want to exit?',
46770
- footerMessage = 'How do you want to proceed?',
46771
46973
  firstButtonLabel = 'Cancel',
46772
46974
  secondButtonLabel = 'Continue',
46773
46975
  buttonVariant = 'warning',
46774
46976
  border = '1px solid var(--warning-modal-border-color)',
46775
- colorForTitleMessage = 'var(--status-button-bg-warning)'
46977
+ popupWidth = '420',
46978
+ colorForTitleMessage = 'var(--status-button-bg-warning)',
46979
+ footerContent
46776
46980
  }) => {
46777
46981
  return jsxRuntime.jsx(Modal, {
46778
46982
  overlayClassName: "custom-overlay",
@@ -46806,8 +47010,8 @@ const PopUpModal = ({
46806
47010
  fontSize: 16,
46807
47011
  children: modalMessage
46808
47012
  }), jsxRuntime.jsx(Typography, {
46809
- fontSize: 16,
46810
- children: footerMessage
47013
+ as: 'div',
47014
+ children: footerContent
46811
47015
  })]
46812
47016
  })]
46813
47017
  })]
@@ -46826,13 +47030,36 @@ const PopUpModal = ({
46826
47030
  }),
46827
47031
  ariaHideApp: true,
46828
47032
  isFooterDisplayed: false,
46829
- customWidth: "420px",
47033
+ customWidth: `${popupWidth}px`,
46830
47034
  customHeight: "226px",
46831
47035
  boxShadow: "0px 1px 4px 0px var(--toaster-boxshadow)",
46832
47036
  border: border
46833
47037
  });
46834
47038
  };
46835
47039
 
47040
+ function formatCamelCaseString(input, removeSections = []) {
47041
+ // Removed specified sections from the string
47042
+ const processedString = removeSections.reduce((str, section) => str.replace(new RegExp(section + '$', 'i'), ''), input);
47043
+ // Add spaces before capital letters and capitalized the first letter
47044
+ const formatted = processedString.replace(/([A-Z])/g, ' $1').trim().replace(/^./, str => str.toUpperCase());
47045
+ return formatted;
47046
+ }
47047
+ function formatSnakeOrUppercaseString(input) {
47048
+ return input.toLowerCase().replace(/_/g, ' ').replace(/^./, str => str.toUpperCase());
47049
+ }
47050
+ function formatString(input, removeSections = []) {
47051
+ if (input.toUpperCase() === input) {
47052
+ // Handled completely uppercase strings
47053
+ input = input.toLowerCase();
47054
+ }
47055
+ if (input.includes('_')) {
47056
+ // Handled snake case or uppercase strings
47057
+ return formatSnakeOrUppercaseString(input);
47058
+ }
47059
+ // Handled camel case strings
47060
+ return formatCamelCaseString(input, removeSections);
47061
+ }
47062
+
46836
47063
  var css_248z$1 = ".ff-add-variable-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 8px;\n position: relative;\n}\n.ff-add-variable-container .ff-add-variable-input {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n}";
46837
47064
  styleInject(css_248z$1);
46838
47065
 
@@ -46843,8 +47070,10 @@ const AddVariables = ({
46843
47070
  onChange,
46844
47071
  onCreateVariableClick,
46845
47072
  value = '',
46846
- dropdownWidth = 'inherit'
47073
+ dropdownWidth = 'inherit',
47074
+ ...props
46847
47075
  }) => {
47076
+ const [inputValue, setInputValue] = React.useState('');
46848
47077
  const [showDropdown, setShowDropdown] = React.useState(false);
46849
47078
  const [cursorPosition, setCursorPosition] = React.useState(null);
46850
47079
  const [showCreateVariableIcon, setShowCreateVariableIcon] = React.useState(false);
@@ -46855,18 +47084,29 @@ const AddVariables = ({
46855
47084
  inputRef.current.focus();
46856
47085
  }
46857
47086
  }, [cursorPosition]);
47087
+ React.useEffect(() => {
47088
+ const newPayload = replaceVariablesWithIds(inputValue);
47089
+ onChange(newPayload);
47090
+ }, [inputValue]);
47091
+ const replaceVariablesWithIds = input => {
47092
+ return input.replace(/\${.*?_(.*?)}/g, (_, variableName) => {
47093
+ // Find the matching variable in the list by name
47094
+ const foundVariable = variableList.find(varaible => varaible.name === variableName.trim());
47095
+ return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`; // Replace if found, otherwise keep as is
47096
+ });
47097
+ };
46858
47098
  const handleChange = event => {
46859
- const value = event.target.value;
46860
- onChange?.(value);
47099
+ const fieldValue = event.target.value;
47100
+ setInputValue(fieldValue);
46861
47101
  // Show dropdown only if the last character typed is `$`
46862
47102
  const cursorPos = inputRef.current?.selectionStart || 0;
46863
- const isDollarTyped = value[cursorPos - 1] === '$';
47103
+ const isDollarTyped = fieldValue[cursorPos - 1] === '$';
46864
47104
  if (isDollarTyped) {
46865
47105
  setShowDropdown(true);
46866
47106
  } else {
46867
47107
  setShowDropdown(false); // Close if it's a space or other characters
46868
47108
  }
46869
- if (value?.includes('$')) {
47109
+ if (fieldValue?.includes('$')) {
46870
47110
  setShowCreateVariableIcon(false);
46871
47111
  } else {
46872
47112
  setShowCreateVariableIcon(true);
@@ -46879,12 +47119,11 @@ const AddVariables = ({
46879
47119
  selectionEnd
46880
47120
  } = inputRef.current;
46881
47121
  const dollarSyntax = `{${item.type === 'LOCAL' ? 'LV' : item.type === 'GLOBAL' ? 'GV' : item.type === 'GROUP' ? 'SG' : 'PEV'}_${item.name}}`;
46882
- const newValue = value.slice(0, selectionStart || 0) + dollarSyntax + value.slice(selectionEnd || 0);
46883
- onChange(newValue);
47122
+ const newValue = inputValue.slice(0, selectionStart || 0) + dollarSyntax + inputValue.slice(selectionEnd || 0);
47123
+ setInputValue(newValue);
46884
47124
  setCursorPosition((selectionStart || 0) + dollarSyntax.length);
46885
47125
  // Close the dropdown after inserting the variable
46886
47126
  setShowDropdown(false);
46887
- onChange?.(newValue);
46888
47127
  }
46889
47128
  };
46890
47129
  return jsxRuntime.jsxs("div", {
@@ -46892,10 +47131,11 @@ const AddVariables = ({
46892
47131
  children: [jsxRuntime.jsxs("div", {
46893
47132
  className: "ff-add-variable-input",
46894
47133
  children: [jsxRuntime.jsx(Input, {
47134
+ ...props,
46895
47135
  name: "add_variable",
46896
47136
  ref: inputRef,
46897
47137
  type: "text",
46898
- value: value,
47138
+ value: inputValue,
46899
47139
  onChange: handleChange,
46900
47140
  variant: "primary",
46901
47141
  label: label,
@@ -48908,6 +49148,7 @@ exports.FieldSet = FieldSet;
48908
49148
  exports.FileDropzone = FileDropzone;
48909
49149
  exports.FilePreview = FilePreview;
48910
49150
  exports.Form = ForwardedForms;
49151
+ exports.FormatString = formatString;
48911
49152
  exports.HighlightText = HighlightText;
48912
49153
  exports.Icon = Icon;
48913
49154
  exports.IconButton = IconButton;
@@ -48955,6 +49196,7 @@ exports.Tooltip = Tooltip;
48955
49196
  exports.Typography = Typography;
48956
49197
  exports.VariableDropdown = VariableDropdown;
48957
49198
  exports.VariableInput = VariableInput;
49199
+ exports.capitalize = capitalize;
48958
49200
  exports.checkEmpty = checkEmpty;
48959
49201
  exports.compareArrays = compareArrays;
48960
49202
  exports.compareObjects = compareObjects;