pixel-react 1.6.3 → 1.6.6

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 (841) 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/AddVariables.d.ts +5 -0
  9. package/lib/components/AddVariables/index.d.ts +1 -0
  10. package/lib/components/AddVariables/types.d.ts +35 -0
  11. package/lib/components/AttachImage/AttachImage.d.ts +1 -6
  12. package/lib/components/AttachImage/types.d.ts +8 -0
  13. package/lib/components/Checkbox/types.d.ts +4 -0
  14. package/lib/components/CreateVariable/CreateVariableSlider.d.ts +5 -0
  15. package/lib/components/CreateVariable/index.d.ts +1 -0
  16. package/lib/components/CreateVariable/types.d.ts +56 -0
  17. package/lib/components/Drawer/Types.d.ts +13 -0
  18. package/lib/components/Editor/constants.d.ts +1 -1
  19. package/lib/components/Editor/types.d.ts +10 -2
  20. package/lib/components/Input/Input.d.ts +1 -1
  21. package/lib/components/MiniModal/types.d.ts +7 -0
  22. package/lib/components/Select/components/types.d.ts +1 -0
  23. package/lib/components/Select/types.d.ts +2 -0
  24. package/lib/components/TableTree/types.d.ts +1 -1
  25. package/lib/index.d.ts +158 -5
  26. package/lib/index.esm.js +643 -377
  27. package/lib/index.esm.js.map +1 -1
  28. package/lib/index.js +645 -376
  29. package/lib/index.js.map +1 -1
  30. package/lib/tsconfig.tsbuildinfo +1 -1
  31. package/lib/utils/checkDuplicates/checkDuplicates.d.ts +1 -0
  32. package/package.json +80 -80
  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 +279 -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 +270 -270
  46. package/src/assets/Themes/DarkTheme.scss +264 -264
  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_file.svg +16 -16
  54. package/src/assets/icons/add_label_icon.svg +3 -3
  55. package/src/assets/icons/add_locator.svg +4 -4
  56. package/src/assets/icons/add_testcase.svg +3 -3
  57. package/src/assets/icons/add_user.svg +9 -9
  58. package/src/assets/icons/add_variable.svg +11 -0
  59. package/src/assets/icons/add_variable_icon.svg +4 -4
  60. package/src/assets/icons/alert.svg +17 -17
  61. package/src/assets/icons/all_borders.svg +3 -3
  62. package/src/assets/icons/all_projects.svg +3 -3
  63. package/src/assets/icons/android.svg +9 -9
  64. package/src/assets/icons/android_icon.svg +6 -6
  65. package/src/assets/icons/apk_file_type.svg +4 -4
  66. package/src/assets/icons/app_switch.svg +11 -11
  67. package/src/assets/icons/approval_pending.svg +8 -8
  68. package/src/assets/icons/arrow_down.svg +3 -3
  69. package/src/assets/icons/arrow_right.svg +4 -4
  70. package/src/assets/icons/arrow_up.svg +3 -3
  71. package/src/assets/icons/arrows_down_icon.svg +3 -3
  72. package/src/assets/icons/arrows_right_icon.svg +10 -10
  73. package/src/assets/icons/arrows_top_icon.svg +3 -3
  74. package/src/assets/icons/attachment_icon.svg +3 -3
  75. package/src/assets/icons/authorization_icon.svg +4 -4
  76. package/src/assets/icons/automation_testcase.svg +4 -4
  77. package/src/assets/icons/back_icon.svg +3 -3
  78. package/src/assets/icons/backward.svg +10 -10
  79. package/src/assets/icons/backward_icon.svg +3 -3
  80. package/src/assets/icons/beautify_icon.svg +3 -3
  81. package/src/assets/icons/bold.svg +3 -3
  82. package/src/assets/icons/border_bottom.svg +3 -3
  83. package/src/assets/icons/border_left.svg +3 -3
  84. package/src/assets/icons/border_right.svg +3 -3
  85. package/src/assets/icons/border_top.svg +3 -3
  86. package/src/assets/icons/browser_stack.svg +9 -9
  87. package/src/assets/icons/browserstack_icon.svg +24 -24
  88. package/src/assets/icons/calendar_icon.svg +9 -9
  89. package/src/assets/icons/capture_icon.svg +3 -6
  90. package/src/assets/icons/check_mark.svg +3 -3
  91. package/src/assets/icons/chrome.svg +12 -12
  92. package/src/assets/icons/client_profile.svg +4 -4
  93. package/src/assets/icons/clock_icon.svg +11 -11
  94. package/src/assets/icons/clone_icon.svg +3 -3
  95. package/src/assets/icons/close_pill.svg +3 -3
  96. package/src/assets/icons/cloud_server_host_icon.svg +3 -3
  97. package/src/assets/icons/collapse-icon.svg +6 -6
  98. package/src/assets/icons/compressed_file_type.svg +4 -4
  99. package/src/assets/icons/configuration.svg +3 -3
  100. package/src/assets/icons/continue_without_sign.svg +3 -3
  101. package/src/assets/icons/copy-icon.svg +3 -3
  102. package/src/assets/icons/csv_file_type.svg +4 -4
  103. package/src/assets/icons/dashboard_icon.svg +31 -31
  104. package/src/assets/icons/dashboard_mobile_icon.svg +47 -47
  105. package/src/assets/icons/dashboard_web_icon.svg +9 -9
  106. package/src/assets/icons/data_provider.svg +8 -8
  107. package/src/assets/icons/dataset_list.svg +3 -3
  108. package/src/assets/icons/defects.svg +8 -8
  109. package/src/assets/icons/delete.svg +3 -3
  110. package/src/assets/icons/delete_info.svg +17 -17
  111. package/src/assets/icons/details.svg +3 -3
  112. package/src/assets/icons/double_underline.svg +5 -5
  113. package/src/assets/icons/download-icon.svg +3 -3
  114. package/src/assets/icons/download_file_icon.svg +3 -10
  115. package/src/assets/icons/download_icon.svg +4 -4
  116. package/src/assets/icons/drag_icon.svg +4 -4
  117. package/src/assets/icons/drawer_maximize.svg +6 -6
  118. package/src/assets/icons/dropzone_icon.svg +18 -18
  119. package/src/assets/icons/edge.svg +30 -30
  120. package/src/assets/icons/edit_icon.svg +5 -5
  121. package/src/assets/icons/element.svg +4 -4
  122. package/src/assets/icons/error.svg +17 -17
  123. package/src/assets/icons/excel_corner_menu.svg +3 -3
  124. package/src/assets/icons/expand-icon.svg +6 -6
  125. package/src/assets/icons/export.svg +4 -4
  126. package/src/assets/icons/export_collection_icon.svg +13 -13
  127. package/src/assets/icons/eye_closed.svg +3 -3
  128. package/src/assets/icons/eye_open_icon.svg +3 -3
  129. package/src/assets/icons/failed_status_icon.svg +12 -12
  130. package/src/assets/icons/file.svg +11 -11
  131. package/src/assets/icons/fill_color.svg +7 -7
  132. package/src/assets/icons/filter.svg +4 -4
  133. package/src/assets/icons/fire_fox.svg +106 -106
  134. package/src/assets/icons/fireflink_finder_logo.svg +7 -7
  135. package/src/assets/icons/fireflink_icon.svg +4 -4
  136. package/src/assets/icons/fireflink_logo.svg +13 -13
  137. package/src/assets/icons/fireflink_platform.svg +4 -4
  138. package/src/assets/icons/firefox.svg +84 -84
  139. package/src/assets/icons/flaky_status_icon.svg +12 -12
  140. package/src/assets/icons/formate_painter.svg +5 -5
  141. package/src/assets/icons/formula_icon.svg +3 -3
  142. package/src/assets/icons/forward.svg +3 -3
  143. package/src/assets/icons/forward_icon.svg +3 -3
  144. package/src/assets/icons/full_access_icon.svg +4 -4
  145. package/src/assets/icons/gif_file_type.svg +4 -4
  146. package/src/assets/icons/global_variable_icon.svg +4 -4
  147. package/src/assets/icons/hamburger_menu.svg +3 -3
  148. package/src/assets/icons/hide_access_icon.svg +3 -3
  149. package/src/assets/icons/hide_icon.svg +9 -9
  150. package/src/assets/icons/history_icon.svg +19 -19
  151. package/src/assets/icons/html_file_type.svg +4 -4
  152. package/src/assets/icons/impactList.svg +6 -6
  153. package/src/assets/icons/import.svg +4 -4
  154. package/src/assets/icons/info.svg +17 -17
  155. package/src/assets/icons/info_icon.svg +5 -5
  156. package/src/assets/icons/info_user.svg +5 -5
  157. package/src/assets/icons/internet_explorer.svg +3 -3
  158. package/src/assets/icons/ipk_file_type.svg +4 -4
  159. package/src/assets/icons/italic.svg +3 -3
  160. package/src/assets/icons/jira.svg +3 -3
  161. package/src/assets/icons/jpg_file_type.svg +4 -4
  162. package/src/assets/icons/json_file_type.svg +4 -4
  163. package/src/assets/icons/label_icon.svg +8 -8
  164. package/src/assets/icons/label_plus.svg +3 -3
  165. package/src/assets/icons/lambda_icon.svg +3 -3
  166. package/src/assets/icons/left_arrow_icon.svg +3 -3
  167. package/src/assets/icons/license_expired.svg +20 -20
  168. package/src/assets/icons/license_info.svg +28 -28
  169. package/src/assets/icons/license_warning.svg +10 -10
  170. package/src/assets/icons/link_expired.svg +186 -186
  171. package/src/assets/icons/linked_defects.svg +11 -11
  172. package/src/assets/icons/linux.svg +42 -42
  173. package/src/assets/icons/local.svg +3 -3
  174. package/src/assets/icons/local_variable_icon.svg +4 -4
  175. package/src/assets/icons/logo.svg +17 -17
  176. package/src/assets/icons/mac.svg +9 -9
  177. package/src/assets/icons/manage_apps.svg +3 -3
  178. package/src/assets/icons/manual_locator.svg +7 -7
  179. package/src/assets/icons/manual_testcase.svg +3 -3
  180. package/src/assets/icons/maximize_icon.svg +5 -5
  181. package/src/assets/icons/maximize_script.svg +12 -12
  182. package/src/assets/icons/maximize_tree.svg +3 -3
  183. package/src/assets/icons/minimize_script.svg +5 -5
  184. package/src/assets/icons/mobile_icon.svg +3 -3
  185. package/src/assets/icons/moon_stars.svg +10 -10
  186. package/src/assets/icons/more.svg +10 -10
  187. package/src/assets/icons/move_icon.svg +5 -5
  188. package/src/assets/icons/ms_dynamic.svg +4 -4
  189. package/src/assets/icons/ms_dynamic_icon.svg +15 -15
  190. package/src/assets/icons/nlp_help_icon.svg +3 -3
  191. package/src/assets/icons/no_access_icon.svg +4 -4
  192. package/src/assets/icons/no_border.svg +3 -3
  193. package/src/assets/icons/no_data.svg +13 -13
  194. package/src/assets/icons/no_license_found.svg +22 -22
  195. package/src/assets/icons/notification_icon.svg +3 -3
  196. package/src/assets/icons/opera.svg +9 -9
  197. package/src/assets/icons/passed_status_icon.svg +12 -12
  198. package/src/assets/icons/pdf_file_type.svg +4 -4
  199. package/src/assets/icons/plus_icon.svg +11 -11
  200. package/src/assets/icons/plus_user_icon.svg +3 -3
  201. package/src/assets/icons/png_file_type.svg +4 -4
  202. package/src/assets/icons/project_element.svg +4 -4
  203. package/src/assets/icons/project_env_variable_icon.svg +4 -4
  204. package/src/assets/icons/project_status_icon.svg +10 -10
  205. package/src/assets/icons/quick_run_setting_icon.svg +5 -5
  206. package/src/assets/icons/refresh-icon.svg +4 -4
  207. package/src/assets/icons/refresh_icon.svg +4 -4
  208. package/src/assets/icons/reload.svg +3 -3
  209. package/src/assets/icons/remove.svg +11 -11
  210. package/src/assets/icons/remove_user.svg +3 -3
  211. package/src/assets/icons/replace.svg +11 -11
  212. package/src/assets/icons/replace_file.svg +13 -13
  213. package/src/assets/icons/replace_icon.svg +6 -6
  214. package/src/assets/icons/reset-link.svg +52 -52
  215. package/src/assets/icons/right_arrow_icon.svg +4 -4
  216. package/src/assets/icons/rotate_icon.svg +10 -10
  217. package/src/assets/icons/run_automation_scripts_icon.svg +33 -33
  218. package/src/assets/icons/run_icon.svg +26 -26
  219. package/src/assets/icons/run_manual_testcase_icon.svg +4 -4
  220. package/src/assets/icons/safari.svg +93 -93
  221. package/src/assets/icons/safari_icon.svg +12 -12
  222. package/src/assets/icons/sales_force.svg +7 -7
  223. package/src/assets/icons/salesforce_icon.svg +14 -14
  224. package/src/assets/icons/sample_template_first.svg +29 -29
  225. package/src/assets/icons/sample_template_second.svg +47 -47
  226. package/src/assets/icons/sause_lab.svg +3 -3
  227. package/src/assets/icons/save_as_step.svg +3 -3
  228. package/src/assets/icons/search.svg +3 -3
  229. package/src/assets/icons/send_step.svg +4 -4
  230. package/src/assets/icons/skipped_status_icon.svg +12 -12
  231. package/src/assets/icons/standard_template.svg +30 -30
  232. package/src/assets/icons/step_group.svg +10 -10
  233. package/src/assets/icons/strike_through.svg +3 -3
  234. package/src/assets/icons/success.svg +17 -17
  235. package/src/assets/icons/sun_icon.svg +10 -10
  236. package/src/assets/icons/swipe_icon.svg +9 -9
  237. package/src/assets/icons/switch_license_icon.svg +123 -123
  238. package/src/assets/icons/system_warning.svg +61 -61
  239. package/src/assets/icons/tap_icon.svg +4 -4
  240. package/src/assets/icons/text_align_center.svg +3 -3
  241. package/src/assets/icons/text_align_left.svg +3 -3
  242. package/src/assets/icons/text_align_right.svg +3 -3
  243. package/src/assets/icons/text_color.svg +3 -3
  244. package/src/assets/icons/tick_icon.svg +4 -4
  245. package/src/assets/icons/toast_close.svg +3 -3
  246. package/src/assets/icons/txt_file_type.svg +4 -4
  247. package/src/assets/icons/underline.svg +4 -4
  248. package/src/assets/icons/update_icon.svg +3 -3
  249. package/src/assets/icons/user_password_lock.svg +220 -220
  250. package/src/assets/icons/user_profile.svg +3 -3
  251. package/src/assets/icons/user_warning.svg +235 -235
  252. package/src/assets/icons/user_with_system.svg +637 -637
  253. package/src/assets/icons/variable.svg +3 -3
  254. package/src/assets/icons/variable_icon.svg +4 -4
  255. package/src/assets/icons/vertical_separator.svg +3 -3
  256. package/src/assets/icons/view_access_icon.svg +4 -4
  257. package/src/assets/icons/view_icon.svg +3 -3
  258. package/src/assets/icons/warning.svg +17 -17
  259. package/src/assets/icons/warning_status_icon.svg +12 -12
  260. package/src/assets/icons/web&mobile_icon.svg +3 -3
  261. package/src/assets/icons/web_icon.svg +3 -3
  262. package/src/assets/icons/web_mobile_icon.svg +29 -29
  263. package/src/assets/icons/web_service_icon.svg +3 -3
  264. package/src/assets/icons/web_services_icon.svg +30 -30
  265. package/src/assets/icons/window_maximize.svg +4 -4
  266. package/src/assets/icons/window_minimize.svg +3 -3
  267. package/src/assets/icons/windows.svg +10 -10
  268. package/src/assets/icons/wrong_mark.svg +3 -3
  269. package/src/assets/icons/wswb_delete_icon.svg +3 -3
  270. package/src/assets/icons/wswb_plus_icon.svg +4 -4
  271. package/src/assets/icons/xls_file_type.svg +4 -4
  272. package/src/assets/icons/xlsx_file_type.svg +4 -4
  273. package/src/assets/icons/xml_file_type.svg +4 -4
  274. package/src/assets/styles/_colors.scss +151 -151
  275. package/src/assets/styles/_fonts.scss +45 -45
  276. package/src/assets/styles/_mixins.scss +21 -21
  277. package/src/assets/utils/functionUtils.ts +96 -96
  278. package/src/components/Accordion/Accordion.scss +46 -46
  279. package/src/components/Accordion/Accordion.stories.tsx +31 -31
  280. package/src/components/Accordion/Accordion.tsx +62 -62
  281. package/src/components/Accordion/index.ts +1 -1
  282. package/src/components/Accordion/types.ts +28 -28
  283. package/src/components/AddResourceButton/AddButton.scss +36 -36
  284. package/src/components/AddResourceButton/AddButton.stories.tsx +126 -126
  285. package/src/components/AddResourceButton/AddButton.tsx +121 -121
  286. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss +161 -161
  287. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +38 -38
  288. package/src/components/AddResourceButton/index.ts +1 -1
  289. package/src/components/AddResourceButton/type.ts +92 -92
  290. package/src/components/AddVariables/AddVariables.scss +14 -0
  291. package/src/components/AddVariables/AddVariables.stories.tsx +44 -0
  292. package/src/components/AddVariables/AddVariables.tsx +113 -0
  293. package/src/components/AddVariables/index.ts +1 -0
  294. package/src/components/AddVariables/types.ts +36 -0
  295. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +189 -189
  296. package/src/components/AllProjectsDropdown/AllProjectsDropdown.stories.tsx +117 -117
  297. package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx +152 -152
  298. package/src/components/AllProjectsDropdown/types.ts +12 -12
  299. package/src/components/AppHeader/AppHeader.scss +182 -176
  300. package/src/components/AppHeader/AppHeader.stories.tsx +425 -425
  301. package/src/components/AppHeader/AppHeader.tsx +198 -198
  302. package/src/components/AppHeader/index.ts +1 -1
  303. package/src/components/AppHeader/types.ts +52 -53
  304. package/src/components/AttachImage/AttachImage.scss +76 -76
  305. package/src/components/AttachImage/AttachImage.stories.tsx +24 -22
  306. package/src/components/AttachImage/AttachImage.tsx +60 -64
  307. package/src/components/AttachImage/index.ts +2 -2
  308. package/src/components/AttachImage/types.ts +26 -19
  309. package/src/components/AttachmentButton/AttachmentButton.scss +9 -9
  310. package/src/components/AttachmentButton/AttachmentButton.stories.tsx +81 -81
  311. package/src/components/AttachmentButton/AttachmentButton.tsx +129 -129
  312. package/src/components/AttachmentButton/types.ts +13 -13
  313. package/src/components/Avatar/Avatar.scss +27 -27
  314. package/src/components/Avatar/Avatar.stories.tsx +76 -76
  315. package/src/components/Avatar/Avatar.tsx +41 -41
  316. package/src/components/Avatar/types.ts +35 -35
  317. package/src/components/Button/Button.scss +155 -155
  318. package/src/components/Button/Button.stories.tsx +81 -81
  319. package/src/components/Button/Button.tsx +73 -73
  320. package/src/components/Button/index.ts +1 -1
  321. package/src/components/Button/types.ts +69 -69
  322. package/src/components/Charts/BarChart/BarChart.scss +66 -66
  323. package/src/components/Charts/BarChart/BarChart.stories.tsx +67 -67
  324. package/src/components/Charts/BarChart/BarChart.tsx +328 -328
  325. package/src/components/Charts/BarChart/types.ts +12 -12
  326. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +157 -157
  327. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +54 -54
  328. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +502 -502
  329. package/src/components/Charts/DashboardDonutChart/types.ts +52 -52
  330. package/src/components/Charts/DonutChart/DonutChart.scss +76 -76
  331. package/src/components/Charts/DonutChart/DonutChart.stories.tsx +30 -30
  332. package/src/components/Charts/DonutChart/DonutChart.tsx +246 -241
  333. package/src/components/Charts/DonutChart/index.ts +1 -1
  334. package/src/components/Charts/DonutChart/type.ts +23 -23
  335. package/src/components/Charts/IconRadialChart/IconRadialChart.scss +25 -25
  336. package/src/components/Charts/IconRadialChart/IconRadialChart.stories.tsx +51 -51
  337. package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +173 -173
  338. package/src/components/Charts/IconRadialChart/types.ts +28 -28
  339. package/src/components/Charts/LineChart/LineChart.scss +88 -88
  340. package/src/components/Charts/LineChart/LineChart.stories.tsx +255 -255
  341. package/src/components/Charts/LineChart/LineChart.tsx +282 -282
  342. package/src/components/Charts/LineChart/index.ts +1 -1
  343. package/src/components/Charts/LineChart/types.ts +29 -29
  344. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +86 -86
  345. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +116 -116
  346. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +292 -292
  347. package/src/components/Charts/MultiRadialChart/index.ts +1 -1
  348. package/src/components/Charts/MultiRadialChart/types.ts +25 -25
  349. package/src/components/Charts/PieChart/PieChart.scss +41 -41
  350. package/src/components/Charts/PieChart/PieChart.stories.tsx +46 -46
  351. package/src/components/Charts/PieChart/PieChart.tsx +192 -192
  352. package/src/components/Charts/PieChart/index.ts +1 -1
  353. package/src/components/Charts/PieChart/types.ts +28 -28
  354. package/src/components/Charts/RadialChart/RadialChart.scss +16 -12
  355. package/src/components/Charts/RadialChart/RadialChart.stories.tsx +36 -36
  356. package/src/components/Charts/RadialChart/RadialChart.tsx +180 -174
  357. package/src/components/Charts/RadialChart/index.ts +1 -1
  358. package/src/components/Charts/RadialChart/types.ts +32 -32
  359. package/src/components/Checkbox/Checkbox.scss +146 -89
  360. package/src/components/Checkbox/Checkbox.stories.tsx +123 -47
  361. package/src/components/Checkbox/Checkbox.tsx +58 -55
  362. package/src/components/Checkbox/types.ts +34 -30
  363. package/src/components/Chip/Chip.scss +85 -85
  364. package/src/components/Chip/Chip.stories.tsx +116 -116
  365. package/src/components/Chip/Chip.tsx +35 -35
  366. package/src/components/Chip/index.ts +1 -1
  367. package/src/components/Chip/types.ts +19 -19
  368. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +128 -128
  369. package/src/components/ConnectingBranch/ConnectingBranch.scss +233 -233
  370. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +21 -21
  371. package/src/components/ConnectingBranch/ConnectingBranch.tsx +182 -182
  372. package/src/components/ConnectingBranch/data.ts +137 -137
  373. package/src/components/ConnectingBranch/index.ts +1 -1
  374. package/src/components/ConnectingBranch/types.ts +21 -21
  375. package/src/components/CreateVariable/CreateVariableSlider.scss +18 -0
  376. package/src/components/CreateVariable/CreateVariableSlider.stories.tsx +66 -0
  377. package/src/components/CreateVariable/CreateVariableSlider.tsx +95 -0
  378. package/src/components/CreateVariable/index.ts +1 -0
  379. package/src/components/CreateVariable/types.ts +58 -0
  380. package/src/components/DatePicker/DatePicker.scss +402 -402
  381. package/src/components/DatePicker/DatePicker.stories.tsx +174 -174
  382. package/src/components/DatePicker/DatePicker.tsx +451 -451
  383. package/src/components/DatePicker/Timepicker.tsx +372 -372
  384. package/src/components/DatePicker/types.ts +105 -105
  385. package/src/components/DownloadClient/DownloadClient.scss +80 -80
  386. package/src/components/DownloadClient/DownloadClient.stories.tsx +26 -26
  387. package/src/components/DownloadClient/DownloadClient.tsx +81 -81
  388. package/src/components/DownloadClient/type.ts +40 -40
  389. package/src/components/DragAndDrop/DragAndDrop.d.ts +5 -5
  390. package/src/components/DragAndDrop/DragAndDrop.stories.tsx +25 -25
  391. package/src/components/DragAndDrop/DragAndDrop.ts +7 -7
  392. package/src/components/DragAndDrop/DragAndDropList.scss +69 -69
  393. package/src/components/DragAndDrop/DragAndDropList.tsx +151 -151
  394. package/src/components/Drawer/Drawer.scss +138 -138
  395. package/src/components/Drawer/Drawer.stories.tsx +155 -156
  396. package/src/components/Drawer/Drawer.tsx +232 -229
  397. package/src/components/Drawer/Types.ts +157 -144
  398. package/src/components/EditTextField/EditTextField.scss +97 -97
  399. package/src/components/EditTextField/EditTextField.stories.tsx +127 -127
  400. package/src/components/EditTextField/EditTextField.tsx +181 -181
  401. package/src/components/EditTextField/index.ts +1 -1
  402. package/src/components/EditTextField/types.ts +55 -55
  403. package/src/components/Editor/Editor.scss +56 -56
  404. package/src/components/Editor/Editor.stories.tsx +54 -54
  405. package/src/components/Editor/Editor.tsx +250 -248
  406. package/src/components/Editor/VariableDropdown.scss +27 -21
  407. package/src/components/Editor/VariableDropdown.tsx +57 -49
  408. package/src/components/Editor/constants.ts +180 -180
  409. package/src/components/Editor/types.ts +89 -79
  410. package/src/components/Excel/ColorBarSelector/ColorBarSelector.scss +15 -15
  411. package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +43 -43
  412. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +27 -27
  413. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +42 -42
  414. package/src/components/Excel/ExcelFile/ExcelFile.scss +68 -68
  415. package/src/components/Excel/ExcelFile/ExcelFile.tsx +491 -491
  416. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +131 -131
  417. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +238 -238
  418. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +168 -168
  419. package/src/components/Excel/ExcelFile/ExcelFileComponents/Copied.tsx +25 -25
  420. package/src/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.tsx +56 -56
  421. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx +37 -37
  422. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +85 -85
  423. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +31 -31
  424. package/src/components/Excel/ExcelFile/ExcelFileComponents/HeaderRow.tsx +5 -5
  425. package/src/components/Excel/ExcelFile/ExcelFileComponents/Row.tsx +5 -5
  426. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +154 -154
  427. package/src/components/Excel/ExcelFile/ExcelFileComponents/Selected.tsx +32 -32
  428. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +146 -146
  429. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +479 -479
  430. package/src/components/Excel/ExcelFile/ExcelFileComponents/Table.tsx +19 -19
  431. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +548 -548
  432. package/src/components/Excel/ExcelFile/ExcelFileComponents/areModelsEqual.ts +18 -18
  433. package/src/components/Excel/ExcelFile/ExcelFileComponents/context.ts +12 -12
  434. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/engine.ts +153 -153
  435. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/formula.ts +31 -31
  436. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/index.ts +2 -2
  437. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/point-graph.ts +152 -152
  438. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/point-hash.ts +10 -10
  439. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/point-set.ts +69 -69
  440. package/src/components/Excel/ExcelFile/ExcelFileComponents/index.ts +49 -49
  441. package/src/components/Excel/ExcelFile/ExcelFileComponents/matrix.ts +382 -382
  442. package/src/components/Excel/ExcelFile/ExcelFileComponents/point-range.ts +82 -82
  443. package/src/components/Excel/ExcelFile/ExcelFileComponents/point.ts +15 -15
  444. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +673 -673
  445. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +819 -819
  446. package/src/components/Excel/ExcelFile/ExcelFileComponents/selection.ts +257 -257
  447. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +255 -255
  448. package/src/components/Excel/ExcelFile/ExcelFileComponents/typings/fast-formula-parser.d.ts +58 -58
  449. package/src/components/Excel/ExcelFile/ExcelFileComponents/use-dispatch.ts +8 -8
  450. package/src/components/Excel/ExcelFile/ExcelFileComponents/use-selector.ts +9 -9
  451. package/src/components/Excel/ExcelFile/ExcelFileComponents/util.ts +172 -172
  452. package/src/components/Excel/ExcelFile.stories.tsx +167 -167
  453. package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +96 -96
  454. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +397 -397
  455. package/src/components/Excel/Types.ts +196 -196
  456. package/src/components/Excel/dataConversion.ts +173 -173
  457. package/src/components/Excel/index.ts +1 -1
  458. package/src/components/ExpandableMenu/ExpandableMenu.scss +110 -110
  459. package/src/components/ExpandableMenu/ExpandableMenu.stories.tsx +67 -67
  460. package/src/components/ExpandableMenu/ExpandableMenu.tsx +101 -101
  461. package/src/components/ExpandableMenu/index.ts +1 -1
  462. package/src/components/ExpandableMenu/types.ts +34 -34
  463. package/src/components/FF_Captcha/Recaptcha.scss +10 -10
  464. package/src/components/FF_Captcha/Recaptcha.tsx +40 -40
  465. package/src/components/FF_Captcha/captcha.stories.tsx +40 -40
  466. package/src/components/FF_Captcha/types.ts +22 -22
  467. package/src/components/FieldSet/FieldSet.scss +9 -9
  468. package/src/components/FieldSet/FieldSet.stories.tsx +103 -103
  469. package/src/components/FieldSet/FieldSet.tsx +29 -29
  470. package/src/components/FieldSet/index.ts +1 -1
  471. package/src/components/FieldSet/types.ts +8 -8
  472. package/src/components/FileDropzone/Dropzone.tsx +57 -57
  473. package/src/components/FileDropzone/FileDropzone.scss +135 -135
  474. package/src/components/FileDropzone/FileDropzone.stories.tsx +98 -98
  475. package/src/components/FileDropzone/FileDropzone.tsx +111 -111
  476. package/src/components/FileDropzone/FilePreview.tsx +77 -77
  477. package/src/components/FileDropzone/index.ts +1 -1
  478. package/src/components/FileDropzone/types.ts +126 -126
  479. package/src/components/Form/Form.d.ts +2 -2
  480. package/src/components/Form/Form.scss +158 -158
  481. package/src/components/Form/Form.stories.tsx +508 -508
  482. package/src/components/Form/Form.ts +2 -2
  483. package/src/components/Form/Forms.tsx +41 -41
  484. package/src/components/Form/validation.json +29 -29
  485. package/src/components/GridLayout/GridLayout.scss +69 -69
  486. package/src/components/GridLayout/GridLayout.stories.tsx +90 -90
  487. package/src/components/GridLayout/GridLayout.tsx +39 -39
  488. package/src/components/GridLayout/GridLayoutStory.scss +25 -25
  489. package/src/components/GridLayout/types.ts +84 -84
  490. package/src/components/HighlightText/HighlightText.scss +3 -3
  491. package/src/components/HighlightText/HighlightText.stories.tsx +22 -22
  492. package/src/components/HighlightText/HighlightText.tsx +33 -33
  493. package/src/components/HighlightText/index.ts +1 -1
  494. package/src/components/HighlightText/types.ts +4 -4
  495. package/src/components/Icon/Icon.stories.tsx +65 -65
  496. package/src/components/Icon/Icon.tsx +88 -88
  497. package/src/components/Icon/Icons.scss +50 -50
  498. package/src/components/Icon/iconList.ts +464 -462
  499. package/src/components/Icon/index.ts +1 -1
  500. package/src/components/Icon/types.ts +14 -14
  501. package/src/components/IconButton/IconButton.scss +54 -54
  502. package/src/components/IconButton/IconButton.stories.tsx +33 -33
  503. package/src/components/IconButton/IconButton.tsx +36 -36
  504. package/src/components/IconButton/index.ts +1 -1
  505. package/src/components/IconButton/types.ts +6 -6
  506. package/src/components/IconRadioGroup/IconRadioGroup.scss +63 -63
  507. package/src/components/IconRadioGroup/IconRadioGroup.stories.tsx +108 -108
  508. package/src/components/IconRadioGroup/IconRadioGroup.tsx +73 -73
  509. package/src/components/IconRadioGroup/index.ts +1 -1
  510. package/src/components/IconRadioGroup/type.ts +49 -49
  511. package/src/components/Input/Input.scss +159 -159
  512. package/src/components/Input/Input.stories.tsx +141 -141
  513. package/src/components/Input/Input.tsx +114 -103
  514. package/src/components/Input/types.ts +85 -85
  515. package/src/components/InputWithDropdown/InputWithDropdown.scss +213 -213
  516. package/src/components/InputWithDropdown/InputWithDropdown.stories.tsx +169 -169
  517. package/src/components/InputWithDropdown/InputWithDropdown.tsx +122 -122
  518. package/src/components/InputWithDropdown/index.ts +1 -1
  519. package/src/components/InputWithDropdown/types.ts +113 -113
  520. package/src/components/LabelEditTextField/LabelEditTextField.scss +86 -86
  521. package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +192 -192
  522. package/src/components/LabelEditTextField/LabelEditTextField.tsx +246 -246
  523. package/src/components/LabelEditTextField/index.ts +1 -1
  524. package/src/components/LabelEditTextField/types.ts +46 -46
  525. package/src/components/LazyLoad/LazyLoad.d.ts +3 -3
  526. package/src/components/LazyLoad/LazyLoad.stories.tsx +33 -33
  527. package/src/components/LazyLoad/LazyLoad.ts +2 -2
  528. package/src/components/LazyLoad/LazyLoading.tsx +19 -19
  529. package/src/components/LazyLoad/index.ts +1 -1
  530. package/src/components/MachineInputField/MachineInputField.scss +59 -59
  531. package/src/components/MachineInputField/MachineInputField.stories.tsx +32 -32
  532. package/src/components/MachineInputField/MachineInputField.tsx +87 -87
  533. package/src/components/MachineInputField/index.ts +1 -1
  534. package/src/components/MachineInputField/types.ts +13 -13
  535. package/src/components/MenuOption/MenuOption.scss +97 -97
  536. package/src/components/MenuOption/MenuOption.stories.tsx +157 -157
  537. package/src/components/MenuOption/MenuOption.tsx +219 -219
  538. package/src/components/MenuOption/types.ts +228 -228
  539. package/src/components/MiniModal/MiniModal.scss +170 -174
  540. package/src/components/MiniModal/MiniModal.stories.tsx +735 -734
  541. package/src/components/MiniModal/MiniModal.tsx +344 -326
  542. package/src/components/MiniModal/index.ts +1 -1
  543. package/src/components/MiniModal/types.ts +123 -116
  544. package/src/components/Modal/Modal.stories.tsx +70 -69
  545. package/src/components/Modal/Modal.tsx +100 -100
  546. package/src/components/Modal/index.tsx +1 -1
  547. package/src/components/Modal/modal.scss +51 -51
  548. package/src/components/Modal/types.ts +43 -43
  549. package/src/components/ModulesChip/ModuleChip.scss +20 -20
  550. package/src/components/ModulesChip/ModuleChip.stories.tsx +41 -41
  551. package/src/components/ModulesChip/ModuleChip.tsx +31 -31
  552. package/src/components/ModulesChip/types.ts +14 -14
  553. package/src/components/MultiSelect/Dropdown.scss +78 -78
  554. package/src/components/MultiSelect/Dropdown.tsx +135 -135
  555. package/src/components/MultiSelect/MultiSelect.scss +217 -217
  556. package/src/components/MultiSelect/MultiSelect.stories.tsx +273 -273
  557. package/src/components/MultiSelect/MultiSelect.tsx +472 -472
  558. package/src/components/MultiSelect/MultiSelectTypes.ts +47 -47
  559. package/src/components/MultiSelect/dropdownTypes.ts +19 -19
  560. package/src/components/MultiSelect/index.ts +1 -1
  561. package/src/components/NLPInput/NLPInput.scss +246 -246
  562. package/src/components/NLPInput/NlpInput.stories.tsx +136 -136
  563. package/src/components/NLPInput/NlpInput.tsx +374 -374
  564. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +60 -60
  565. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +83 -83
  566. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +180 -180
  567. package/src/components/NLPInput/index.ts +1 -1
  568. package/src/components/NLPInput/type.tsx +124 -124
  569. package/src/components/Paper/Paper.scss +13 -13
  570. package/src/components/Paper/Paper.stories.tsx +77 -77
  571. package/src/components/Paper/Paper.tsx +14 -14
  572. package/src/components/Paper/types.ts +19 -19
  573. package/src/components/PopUpModal/PopUpModal.scss +36 -36
  574. package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -61
  575. package/src/components/PopUpModal/PopUpModal.tsx +85 -85
  576. package/src/components/PopUpModal/types.ts +13 -13
  577. package/src/components/RadioButton/RadioButton.scss +106 -106
  578. package/src/components/RadioButton/RadioButton.stories.tsx +43 -43
  579. package/src/components/RadioButton/RadioButton.tsx +41 -41
  580. package/src/components/RadioButton/index.ts +1 -1
  581. package/src/components/RadioButton/radioButtonTypes.tsx +62 -62
  582. package/src/components/RadioGroup/RadioGroup.scss +11 -11
  583. package/src/components/RadioGroup/RadioGroup.stories.tsx +150 -150
  584. package/src/components/RadioGroup/RadioGroup.tsx +49 -49
  585. package/src/components/RadioGroup/index.ts +1 -1
  586. package/src/components/RadioGroup/radioGroupTypes.tsx +96 -96
  587. package/src/components/Search/Search.scss +103 -103
  588. package/src/components/Search/Search.stories.tsx +26 -26
  589. package/src/components/Search/Search.tsx +127 -127
  590. package/src/components/Search/index.ts +1 -1
  591. package/src/components/Search/types.ts +15 -15
  592. package/src/components/Select/Select.scss +213 -197
  593. package/src/components/Select/Select.stories.tsx +355 -306
  594. package/src/components/Select/Select.tsx +278 -252
  595. package/src/components/Select/components/Dropdown.scss +61 -52
  596. package/src/components/Select/components/Dropdown.tsx +140 -126
  597. package/src/components/Select/components/types.ts +24 -23
  598. package/src/components/Select/index.ts +1 -1
  599. package/src/components/Select/types.ts +134 -124
  600. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +128 -128
  601. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +56 -56
  602. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +167 -167
  603. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss +51 -51
  604. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx +107 -107
  605. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts +5 -5
  606. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +190 -190
  607. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +236 -236
  608. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +25 -25
  609. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.scss +3 -3
  610. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +68 -68
  611. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +17 -17
  612. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss +31 -31
  613. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx +85 -85
  614. package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts +4 -4
  615. package/src/components/SequentialConnectingBranch/index.ts +1 -1
  616. package/src/components/SequentialConnectingBranch/types.ts +60 -60
  617. package/src/components/StateDropdown/StateDropdown.stories.tsx +104 -104
  618. package/src/components/StateDropdown/StateDropdown.tsx +245 -245
  619. package/src/components/StateDropdown/StateDropdownTypes.tsx +27 -27
  620. package/src/components/StatusButton/StatusButton.scss +90 -90
  621. package/src/components/StatusButton/StatusButton.stories.tsx +91 -91
  622. package/src/components/StatusButton/StatusButton.tsx +46 -46
  623. package/src/components/StatusButton/index.ts +1 -1
  624. package/src/components/StatusButton/types.ts +45 -45
  625. package/src/components/StatusCard/StatusCard.scss +94 -94
  626. package/src/components/StatusCard/StatusCard.stories.tsx +58 -58
  627. package/src/components/StatusCard/StatusCard.tsx +49 -49
  628. package/src/components/StatusCard/index.ts +1 -1
  629. package/src/components/StatusCard/types.ts +10 -10
  630. package/src/components/Table/Table.scss +116 -116
  631. package/src/components/Table/Table.stories.tsx +373 -373
  632. package/src/components/Table/Table.tsx +178 -178
  633. package/src/components/Table/Types.ts +124 -124
  634. package/src/components/Table/index.ts +1 -1
  635. package/src/components/TableTree/Components/TableBody.tsx +35 -35
  636. package/src/components/TableTree/Components/TableCell.tsx +59 -59
  637. package/src/components/TableTree/Components/TableHead.tsx +39 -39
  638. package/src/components/TableTree/Components/TableRow.tsx +37 -37
  639. package/src/components/TableTree/TableTree.scss +205 -205
  640. package/src/components/TableTree/TableTree.stories.tsx +179 -179
  641. package/src/components/TableTree/TableTree.tsx +245 -239
  642. package/src/components/TableTree/TableTreeStories.scss +22 -22
  643. package/src/components/TableTree/Utils/getAllChildIds.ts +12 -12
  644. package/src/components/TableTree/data.ts +322 -322
  645. package/src/components/TableTree/index.ts +1 -1
  646. package/src/components/TableTree/types.ts +68 -68
  647. package/src/components/Tabs/Tabs.scss +79 -79
  648. package/src/components/Tabs/Tabs.stories.tsx +133 -133
  649. package/src/components/Tabs/Tabs.tsx +61 -61
  650. package/src/components/Tabs/index.ts +1 -1
  651. package/src/components/Tabs/types.ts +48 -48
  652. package/src/components/TextArea/Textarea.scss +144 -144
  653. package/src/components/TextArea/Textarea.stories.tsx +92 -92
  654. package/src/components/TextArea/Textarea.tsx +84 -84
  655. package/src/components/TextArea/Types.ts +82 -82
  656. package/src/components/TextArea/index.tsx +1 -1
  657. package/src/components/ThemeProvider/ThemeProvider.tsx +27 -27
  658. package/src/components/ThemeProvider/index.ts +1 -1
  659. package/src/components/ThemeProvider/types.ts +14 -14
  660. package/src/components/Toast/Toast.scss +121 -121
  661. package/src/components/Toast/Toast.stories.tsx +144 -144
  662. package/src/components/Toast/Toast.tsx +117 -117
  663. package/src/components/Toast/index.ts +1 -1
  664. package/src/components/Toast/types.ts +27 -27
  665. package/src/components/Toastify/Toastify.stories.tsx +71 -71
  666. package/src/components/Toastify/Toastify.tsx +94 -94
  667. package/src/components/Toastify/index.ts +1 -1
  668. package/src/components/Toastify/types.ts +9 -9
  669. package/src/components/Toggle/Toggle.scss +133 -133
  670. package/src/components/Toggle/Toggle.stories.tsx +132 -132
  671. package/src/components/Toggle/Toggle.tsx +96 -96
  672. package/src/components/Toggle/index.ts +1 -1
  673. package/src/components/Toggle/types.ts +43 -43
  674. package/src/components/ToggleSwitch/ToggleSwitch.scss +58 -58
  675. package/src/components/ToggleSwitch/ToggleSwitch.stories.tsx +52 -52
  676. package/src/components/ToggleSwitch/ToggleSwitch.tsx +30 -30
  677. package/src/components/ToggleSwitch/index.ts +1 -1
  678. package/src/components/Tooltip/Tooltip.scss +27 -27
  679. package/src/components/Tooltip/Tooltip.stories.tsx +98 -98
  680. package/src/components/Tooltip/Tooltip.tsx +194 -194
  681. package/src/components/Tooltip/index.ts +1 -1
  682. package/src/components/Tooltip/types.ts +66 -66
  683. package/src/components/Typography/Typography.scss +25 -25
  684. package/src/components/Typography/Typography.stories.tsx +59 -59
  685. package/src/components/Typography/Typography.tsx +41 -41
  686. package/src/components/Typography/index.ts +1 -1
  687. package/src/components/Typography/types.ts +57 -57
  688. package/src/components/VariableInput/VariableInput.scss +127 -127
  689. package/src/components/VariableInput/VariableInput.stories.tsx +32 -32
  690. package/src/components/VariableInput/VariableInput.tsx +352 -352
  691. package/src/components/VariableInput/types.ts +56 -56
  692. package/src/hooks/keyboardevents/useEscKeyEvent.tsx +30 -30
  693. package/src/hooks/useClickOutside.tsx +30 -30
  694. package/src/hooks/useFileDropzone.tsx +274 -274
  695. package/src/hooks/usePortalPosition.tsx +53 -53
  696. package/src/hooks/useTheme.tsx +13 -13
  697. package/src/index.ts +193 -187
  698. package/src/utils/TableCell/TableCell.ts +16 -16
  699. package/src/utils/capitalize/capitalize.stories.tsx +44 -44
  700. package/src/utils/capitalize/capitalize.tsx +4 -4
  701. package/src/utils/checkDuplicates/CheckDuplicates.stories.tsx +40 -0
  702. package/src/utils/checkDuplicates/checkDuplicates.ts +13 -0
  703. package/src/utils/checkEmpty/checkEmpty.stories.tsx +34 -34
  704. package/src/utils/checkEmpty/checkEmpty.ts +24 -24
  705. package/src/utils/compareArrays/compareArrays.stories.tsx +62 -62
  706. package/src/utils/compareArrays/compareArrays.ts +31 -31
  707. package/src/utils/compareObjects/compareObjects.stories.tsx +51 -51
  708. package/src/utils/compareObjects/compareObjects.ts +53 -53
  709. package/src/utils/debounce/debounce.stories.tsx +81 -81
  710. package/src/utils/debounce/debounce.ts +28 -28
  711. package/src/utils/downloadFile/saveFileFromBlob.stories.tsx +62 -62
  712. package/src/utils/downloadFile/saveFileFromBlob.ts +40 -40
  713. package/src/utils/ffID/ffID.stories.tsx +35 -35
  714. package/src/utils/ffID/ffid.ts +7 -7
  715. package/src/utils/findAndInsert/findAndInsert.stories.tsx +119 -119
  716. package/src/utils/findAndInsert/findAndInsert.ts +49 -49
  717. package/src/utils/getEncryptedData/getEncryptedData.stories.tsx +55 -55
  718. package/src/utils/getEncryptedData/getEncryptedData.ts +8 -8
  719. package/src/utils/getExtension/getExtension.stories.tsx +23 -23
  720. package/src/utils/getExtension/getExtension.ts +28 -28
  721. package/src/utils/getSelectOptionValue/getSelectOptionValue.ts +31 -31
  722. package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx +72 -72
  723. package/src/utils/getSequentialPayload/getSequentialPayload.ts +16 -16
  724. package/src/utils/getSequentialPayload/types.ts +32 -32
  725. package/src/utils/throttle/throttle.stories.tsx +100 -100
  726. package/src/utils/throttle/throttle.ts +33 -33
  727. package/src/utils/truncateText/truncateText.stories.tsx +37 -37
  728. package/src/utils/truncateText/truncateText.ts +4 -4
  729. package/tsconfig.json +55 -55
  730. package/vite.config.js +14 -14
  731. package/lib/StyleGuide/ColorPalette/ColorPalette.stories.d.ts +0 -6
  732. package/lib/StyleGuide/Typography/Typography.stories.d.ts +0 -6
  733. package/lib/components/Accordion/Accordion.stories.d.ts +0 -6
  734. package/lib/components/AddResourceButton/AddButton.stories.d.ts +0 -8
  735. package/lib/components/AllProjectsDropdown/AllProjectsDropdown.stories.d.ts +0 -7
  736. package/lib/components/AppHeader/AppHeader.stories.d.ts +0 -7
  737. package/lib/components/AttachmentButton/AttachmentButton.stories.d.ts +0 -9
  738. package/lib/components/Avatar/Avatar.stories.d.ts +0 -10
  739. package/lib/components/Button/Button.stories.d.ts +0 -13
  740. package/lib/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.d.ts +0 -7
  741. package/lib/components/Charts/DonutChart/DonutChart.stories.d.ts +0 -6
  742. package/lib/components/Charts/PieChart/PieChart.stories.d.ts +0 -7
  743. package/lib/components/Charts/RadialChart/RadialChart.stories.d.ts +0 -6
  744. package/lib/components/Checkbox/Checkbox.stories.d.ts +0 -8
  745. package/lib/components/Chip/Chip.stories.d.ts +0 -14
  746. package/lib/components/DatePicker/DatePicker.stories.d.ts +0 -9
  747. package/lib/components/DragAndDrop/DragAndDrop.stories.d.ts +0 -6
  748. package/lib/components/Drawer/Drawer.stories.d.ts +0 -12
  749. package/lib/components/ExcelFile/ColorBarselector/ColorBarSelector.d.ts +0 -8
  750. package/lib/components/ExcelFile/ContextMenu/ContextMenu.d.ts +0 -4
  751. package/lib/components/ExcelFile/ExcelFile/Excel/ActiveCell.d.ts +0 -7
  752. package/lib/components/ExcelFile/ExcelFile/Excel/Cell.d.ts +0 -4
  753. package/lib/components/ExcelFile/ExcelFile/Excel/ColumnIndicator.d.ts +0 -5
  754. package/lib/components/ExcelFile/ExcelFile/Excel/Copied.d.ts +0 -3
  755. package/lib/components/ExcelFile/ExcelFile/Excel/CornerIndicator.d.ts +0 -5
  756. package/lib/components/ExcelFile/ExcelFile/Excel/DataEditor.d.ts +0 -5
  757. package/lib/components/ExcelFile/ExcelFile/Excel/DataViewer.d.ts +0 -8
  758. package/lib/components/ExcelFile/ExcelFile/Excel/FloatingRect.d.ts +0 -10
  759. package/lib/components/ExcelFile/ExcelFile/Excel/HeaderRow.d.ts +0 -3
  760. package/lib/components/ExcelFile/ExcelFile/Excel/Row.d.ts +0 -3
  761. package/lib/components/ExcelFile/ExcelFile/Excel/RowIndicator.d.ts +0 -5
  762. package/lib/components/ExcelFile/ExcelFile/Excel/Selected.d.ts +0 -3
  763. package/lib/components/ExcelFile/ExcelFile/Excel/Spreadsheet.d.ts +0 -80
  764. package/lib/components/ExcelFile/ExcelFile/Excel/Table.d.ts +0 -3
  765. package/lib/components/ExcelFile/ExcelFile/Excel/actions.d.ts +0 -174
  766. package/lib/components/ExcelFile/ExcelFile/Excel/areModelsEqual.d.ts +0 -1
  767. package/lib/components/ExcelFile/ExcelFile/Excel/context.d.ts +0 -8
  768. package/lib/components/ExcelFile/ExcelFile/Excel/engine/engine.d.ts +0 -22
  769. package/lib/components/ExcelFile/ExcelFile/Excel/engine/formula.d.ts +0 -17
  770. package/lib/components/ExcelFile/ExcelFile/Excel/engine/index.d.ts +0 -2
  771. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-graph.d.ts +0 -21
  772. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-hash.d.ts +0 -3
  773. package/lib/components/ExcelFile/ExcelFile/Excel/engine/point-set.d.ts +0 -24
  774. package/lib/components/ExcelFile/ExcelFile/Excel/index.d.ts +0 -13
  775. package/lib/components/ExcelFile/ExcelFile/Excel/matrix.d.ts +0 -67
  776. package/lib/components/ExcelFile/ExcelFile/Excel/point-range.d.ts +0 -22
  777. package/lib/components/ExcelFile/ExcelFile/Excel/point.d.ts +0 -11
  778. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
  779. package/lib/components/ExcelFile/ExcelFile/Excel/selection.d.ts +0 -95
  780. package/lib/components/ExcelFile/ExcelFile/Excel/types.d.ts +0 -178
  781. package/lib/components/ExcelFile/ExcelFile/Excel/use-dispatch.d.ts +0 -3
  782. package/lib/components/ExcelFile/ExcelFile/Excel/use-selector.d.ts +0 -3
  783. package/lib/components/ExcelFile/ExcelFile/Excel/util.d.ts +0 -44
  784. package/lib/components/ExcelFile/ExcelFile/ExcelFile.d.ts +0 -19
  785. package/lib/components/ExcelFile/ExcelFile.stories.d.ts +0 -6
  786. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
  787. package/lib/components/ExcelFile/ExcelToolBar/ExcelToolBar.d.ts +0 -15
  788. package/lib/components/ExcelFile/Types.d.ts +0 -129
  789. package/lib/components/ExcelFile/index.d.ts +0 -1
  790. package/lib/components/ExpandableMenu/ExpandableMenu.stories.d.ts +0 -7
  791. package/lib/components/FF_Captcha/captcha.stories.d.ts +0 -8
  792. package/lib/components/FileDropzone/FileDropzone.stories.d.ts +0 -8
  793. package/lib/components/Form/Form.stories.d.ts +0 -7
  794. package/lib/components/GridLayout/GridLayout.stories.d.ts +0 -8
  795. package/lib/components/HighlightText/HighlightText.stories.d.ts +0 -6
  796. package/lib/components/Icon/Icon.stories.d.ts +0 -8
  797. package/lib/components/IconButton/IconButton.stories.d.ts +0 -7
  798. package/lib/components/IconRadioGroup/IconRadioGroup.stories.d.ts +0 -7
  799. package/lib/components/Input/Input.stories.d.ts +0 -9
  800. package/lib/components/InputWithDropdown/InputWithDropdown.stories.d.ts +0 -9
  801. package/lib/components/LabelEditTextField/LabelEditTextField.stories.d.ts +0 -11
  802. package/lib/components/LazyLoad/LazyLoad.stories.d.ts +0 -6
  803. package/lib/components/MachineInputField/MachineInputField.stories.d.ts +0 -6
  804. package/lib/components/MenuOption/MenuOption.stories.d.ts +0 -16
  805. package/lib/components/MiniModal/MiniModal.stories.d.ts +0 -10
  806. package/lib/components/Modal/Modal.stories.d.ts +0 -7
  807. package/lib/components/ModulesChip/ModuleChip.stories.d.ts +0 -6
  808. package/lib/components/MultiSelect/MultiSelect.stories.d.ts +0 -10
  809. package/lib/components/NLPInput/NlpInput.stories.d.ts +0 -7
  810. package/lib/components/Paper/Paper.stories.d.ts +0 -11
  811. package/lib/components/RadioButton/RadioButton.stories.d.ts +0 -10
  812. package/lib/components/RadioGroup/RadioGroup.stories.d.ts +0 -9
  813. package/lib/components/Search/Search.stories.d.ts +0 -6
  814. package/lib/components/Select/Select.stories.d.ts +0 -13
  815. package/lib/components/Select/components/Dropdown/Dropdown.d.ts +0 -4
  816. package/lib/components/Select/components/Dropdown/dropdownTypes.d.ts +0 -17
  817. package/lib/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.d.ts +0 -6
  818. package/lib/components/StateDropdown/StateDropdown.stories.d.ts +0 -10
  819. package/lib/components/StatusButton/StatusButton.stories.d.ts +0 -14
  820. package/lib/components/Table/Table.stories.d.ts +0 -13
  821. package/lib/components/TableTree/TableTree.stories.d.ts +0 -7
  822. package/lib/components/Tabs/Tabs.stories.d.ts +0 -9
  823. package/lib/components/TextArea/Textarea.stories.d.ts +0 -9
  824. package/lib/components/Toast/Toast.stories.d.ts +0 -6
  825. package/lib/components/Toastify/Toastify.stories.d.ts +0 -6
  826. package/lib/components/Toggle/Toggle.stories.d.ts +0 -12
  827. package/lib/components/Tooltip/Tooltip.stories.d.ts +0 -15
  828. package/lib/components/Typography/Typography.stories.d.ts +0 -10
  829. package/lib/components/VariableInput/VariableInput.stories.d.ts +0 -6
  830. package/lib/utils/checkEmpty/checkEmpty.stories.d.ts +0 -6
  831. package/lib/utils/compareArrays/compareArrays.stories.d.ts +0 -6
  832. package/lib/utils/compareObjects/compareObjects.stories.d.ts +0 -6
  833. package/lib/utils/debounce/debounce.stories.d.ts +0 -6
  834. package/lib/utils/ffID/ffID.stories.d.ts +0 -6
  835. package/lib/utils/find/findAndInsert.d.ts +0 -7
  836. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  837. package/lib/utils/findAndInsert/findAndInsert.stories.d.ts +0 -7
  838. package/lib/utils/getEncryptedData/getEncryptedData.stories.d.ts +0 -6
  839. package/lib/utils/getExtension/getExtension.stories.d.ts +0 -6
  840. package/lib/utils/throttle/throttle.stories.d.ts +0 -6
  841. package/lib/utils/truncateText/truncateText.stories.d.ts +0 -6
package/lib/index.js CHANGED
@@ -48,11 +48,11 @@ function styleInject(css, ref) {
48
48
  }
49
49
  }
50
50
 
51
- var css_248z$1c = ":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, .ff-button, .ff-button--small, .ff-button--medium {\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-button--large {\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-button {\n width: auto;\n background-color: var(--primary-button-text-color);\n border-radius: 4px;\n padding: 4px 8px;\n text-align: center;\n text-decoration: none;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n gap: 4px;\n justify-content: center;\n align-items: center;\n border: 2px solid transparent;\n}\n.ff-button--transparent {\n background-color: transparent;\n}\n.ff-button--primary, .ff-button--delete, .ff-button--secondary {\n position: relative;\n cursor: pointer;\n border-radius: 4px;\n z-index: 1;\n border: none;\n overflow: hidden;\n}\n.ff-button--primary:before, .ff-button--delete:before, .ff-button--secondary:before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 4px;\n padding: 0.6px;\n background: var(--primary-button-border);\n mask: linear-gradient(var(--primary-button-text-color) 0 0) content-box, linear-gradient(var(--primary-button-text-color) 0 0);\n mask-composite: exclude;\n -webkit-mask: linear-gradient(var(--primary-button-text-color) 0 0) content-box, linear-gradient(var(--primary-button-text-color) 0 0);\n -webkit-mask-composite: destination-out;\n z-index: -1;\n}\n.ff-button--primary:hover, .ff-button--delete:hover, .ff-button--secondary:hover {\n background: var(--primary-button-hover);\n}\n.ff-button--primary:disabled, .ff-button--delete:disabled, .ff-button--secondary:disabled {\n opacity: 50%;\n cursor: no-drop;\n}\n.ff-button--primary:disabled:before, .ff-button--delete:disabled:before, .ff-button--secondary:disabled:before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 4px;\n padding: 0.6px;\n -webkit-mask-composite: destination-out;\n mask-composite: exclude;\n z-index: -1;\n}\n.ff-button--primary {\n background: var(--primary-button-color);\n}\n.ff-button--primary:before {\n background: var(--primary-button-border);\n}\n.ff-button--primary:hover {\n background: var(--primary-button-hover);\n}\n.ff-button--delete {\n background: var(--delete-button-color);\n color: var(--primary-button-text-color);\n}\n.ff-button--delete:before {\n background: var(--delete-button-border);\n}\n.ff-button--delete:hover {\n background: var(--delete-button-hover);\n}\n.ff-button--warning {\n background: var(--warning-button-color);\n border: var(--warning-button-border);\n}\n.ff-button--secondary:before {\n background: var(--primary-button-border);\n}\n.ff-button--secondary:hover {\n background: var(--secondary-button-hover);\n}\n.ff-button--tertiary {\n border: none;\n background: var(--tertiary-button-color);\n}\n.ff-button--tertiary:hover {\n background: var(--tertiary-button-hover);\n}\n.ff-button--tertiary:disabled {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-button--small {\n font-weight: 500;\n padding: 4.5px 8px;\n line-height: 15px;\n}\n.ff-button--medium {\n font-weight: 500;\n padding: 6px 12px;\n}\n.ff-button--large {\n padding: 8px 16px;\n}\n.ff-button-primary--text {\n color: var(--primary-button-text-color);\n}\n.ff-button-secondary--text, .ff-button-tertiary--text {\n background: var(--secondary-button-color-text);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}";
52
- styleInject(css_248z$1c);
51
+ var css_248z$1e = ":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, .ff-button, .ff-button--small, .ff-button--medium {\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-button--large {\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-button {\n width: auto;\n background-color: var(--primary-button-text-color);\n border-radius: 4px;\n padding: 4px 8px;\n text-align: center;\n text-decoration: none;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n gap: 4px;\n justify-content: center;\n align-items: center;\n border: 2px solid transparent;\n}\n.ff-button--transparent {\n background-color: transparent;\n}\n.ff-button--primary, .ff-button--delete, .ff-button--secondary {\n position: relative;\n cursor: pointer;\n border-radius: 4px;\n z-index: 1;\n border: none;\n overflow: hidden;\n}\n.ff-button--primary:before, .ff-button--delete:before, .ff-button--secondary:before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 4px;\n padding: 0.6px;\n background: var(--primary-button-border);\n mask: linear-gradient(var(--primary-button-text-color) 0 0) content-box, linear-gradient(var(--primary-button-text-color) 0 0);\n mask-composite: exclude;\n -webkit-mask: linear-gradient(var(--primary-button-text-color) 0 0) content-box, linear-gradient(var(--primary-button-text-color) 0 0);\n -webkit-mask-composite: destination-out;\n z-index: -1;\n}\n.ff-button--primary:hover, .ff-button--delete:hover, .ff-button--secondary:hover {\n background: var(--primary-button-hover);\n}\n.ff-button--primary:disabled, .ff-button--delete:disabled, .ff-button--secondary:disabled {\n opacity: 50%;\n cursor: no-drop;\n}\n.ff-button--primary:disabled:before, .ff-button--delete:disabled:before, .ff-button--secondary:disabled:before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 4px;\n padding: 0.6px;\n -webkit-mask-composite: destination-out;\n mask-composite: exclude;\n z-index: -1;\n}\n.ff-button--primary {\n background: var(--primary-button-color);\n}\n.ff-button--primary:before {\n background: var(--primary-button-border);\n}\n.ff-button--primary:hover {\n background: var(--primary-button-hover);\n}\n.ff-button--delete {\n background: var(--delete-button-color);\n color: var(--primary-button-text-color);\n}\n.ff-button--delete:before {\n background: var(--delete-button-border);\n}\n.ff-button--delete:hover {\n background: var(--delete-button-hover);\n}\n.ff-button--warning {\n background: var(--warning-button-color);\n border: var(--warning-button-border);\n}\n.ff-button--secondary:before {\n background: var(--primary-button-border);\n}\n.ff-button--secondary:hover {\n background: var(--secondary-button-hover);\n}\n.ff-button--tertiary {\n border: none;\n background: var(--tertiary-button-color);\n}\n.ff-button--tertiary:hover {\n background: var(--tertiary-button-hover);\n}\n.ff-button--tertiary:disabled {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-button--small {\n font-weight: 500;\n padding: 4.5px 8px;\n line-height: 15px;\n}\n.ff-button--medium {\n font-weight: 500;\n padding: 6px 12px;\n}\n.ff-button--large {\n padding: 8px 16px;\n}\n.ff-button-primary--text {\n color: var(--primary-button-text-color);\n}\n.ff-button-secondary--text, .ff-button-tertiary--text {\n background: var(--secondary-button-color-text);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}";
52
+ styleInject(css_248z$1e);
53
53
 
54
- var css_248z$1b = ":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}";
55
- styleInject(css_248z$1b);
54
+ var css_248z$1d = ":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}";
55
+ styleInject(css_248z$1d);
56
56
 
57
57
  function getDefaultExportFromCjs (x) {
58
58
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -127,7 +127,7 @@ function requireClassnames() {
127
127
  }
128
128
 
129
129
  var classnamesExports = requireClassnames();
130
- var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
130
+ var cx = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
131
131
 
132
132
  const SvgManageApps = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M4.68101 0.17616H1.84874C1.35861 0.176782 0.888742 0.37176 0.542171 0.718331C0.1956 1.0649 0.000622608 1.53477 0 2.0249V4.85751C0.000622608 5.34763 0.1956 5.8175 0.542171 6.16407C0.888742 6.51064 1.35861 6.70562 1.84874 6.70624H4.68101C5.17113 6.70562 5.64101 6.51064 5.98758 6.16407C6.33415 5.8175 6.52913 5.34763 6.52975 4.85751V2.0249C6.52913 1.53477 6.33415 1.0649 5.98758 0.718331C5.64101 0.37176 5.17113 0.176782 4.68101 0.17616ZM5.52135 4.85683C5.52135 5.0797 5.43281 5.29345 5.27522 5.45104C5.11762 5.60863 4.90388 5.69717 4.68101 5.69717H1.84874C1.62587 5.69717 1.41213 5.60863 1.25453 5.45104C1.09694 5.29345 1.0084 5.0797 1.0084 4.85683V2.0249C1.0084 1.80203 1.09694 1.58829 1.25453 1.43069C1.41213 1.2731 1.62587 1.18456 1.84874 1.18456H4.68101C4.90388 1.18456 5.11762 1.2731 5.27522 1.43069C5.43281 1.58829 5.52135 1.80203 5.52135 2.0249V4.85683ZM4.68101 7.6054H1.84874C1.35861 7.60603 0.888742 7.801 0.542171 8.14758C0.1956 8.49415 0.000622608 8.96402 0 9.45414V12.2861C0.000622608 12.7762 0.1956 13.2461 0.542171 13.5926C0.888742 13.9392 1.35861 14.1342 1.84874 14.1348H4.68101C5.17113 14.1342 5.64101 13.9392 5.98758 13.5926C6.33415 13.2461 6.52913 12.7762 6.52975 12.2861V9.45414C6.52913 8.96402 6.33415 8.49415 5.98758 8.14758C5.64101 7.801 5.17113 7.60603 4.68101 7.6054ZM5.52135 12.2861C5.52135 12.3964 5.49961 12.5057 5.45738 12.6077C5.41515 12.7096 5.35325 12.8023 5.27522 12.8803C5.19718 12.9583 5.10455 13.0202 5.00259 13.0624C4.90064 13.1047 4.79136 13.1264 4.68101 13.1264H1.84874C1.73839 13.1264 1.62911 13.1047 1.52716 13.0624C1.4252 13.0202 1.33256 12.9583 1.25453 12.8803C1.1765 12.8023 1.1146 12.7096 1.07237 12.6077C1.03014 12.5057 1.0084 12.3964 1.0084 12.2861V9.45414C1.0084 9.23127 1.09694 9.01753 1.25453 8.85994C1.41213 8.70234 1.62587 8.61381 1.84874 8.61381H4.68101C4.90388 8.61381 5.11762 8.70234 5.27522 8.85994C5.43281 9.01753 5.52135 9.23127 5.52135 9.45414V12.2861ZM12.1096 7.6054H9.27798C8.78786 7.60603 8.31799 7.801 7.97142 8.14758C7.62485 8.49415 7.42987 8.96402 7.42924 9.45414V12.2861C7.42987 12.7762 7.62485 13.2461 7.97142 13.5926C8.31799 13.9392 8.78786 14.1342 9.27798 14.1348H12.1099C12.6 14.1342 13.0699 13.9392 13.4165 13.5926C13.7631 13.2461 13.958 12.7762 13.9587 12.2861V9.45414C13.958 8.96402 13.7631 8.49415 13.4165 8.14758C13.0699 7.801 12.5997 7.60603 12.1096 7.6054ZM12.9499 12.2861C12.9499 12.3964 12.9282 12.5057 12.886 12.6077C12.8437 12.7096 12.7818 12.8023 12.7038 12.8803C12.6258 12.9583 12.5331 13.0202 12.4312 13.0624C12.3292 13.1047 12.2199 13.1264 12.1096 13.1264H9.27798C9.16763 13.1264 9.05836 13.1047 8.9564 13.0624C8.85445 13.0202 8.76181 12.9583 8.68378 12.8803C8.60574 12.8023 8.54385 12.7096 8.50162 12.6077C8.45938 12.5057 8.43765 12.3964 8.43765 12.2861V9.45414C8.43765 9.23127 8.52618 9.01753 8.68378 8.85994C8.84137 8.70234 9.05511 8.61381 9.27798 8.61381H12.1099C12.3328 8.61381 12.5465 8.70234 12.7041 8.85994C12.8617 9.01753 12.9503 9.23127 12.9503 9.45414L12.9499 12.2861ZM10.0333 4.64843C10.2352 4.75904 10.4618 4.81685 10.6921 4.8165C10.8236 4.81641 10.9545 4.79762 11.0807 4.7607C11.3415 4.68363 11.5737 4.5311 11.7481 4.32232C11.9224 4.11354 12.031 3.85785 12.0603 3.58744C12.0896 3.31703 12.0382 3.044 11.9127 2.80273C11.7871 2.56147 11.5929 2.36276 11.3546 2.23162C11.1156 2.10126 10.8434 2.0446 10.5722 2.06879C10.3011 2.09299 10.0431 2.19695 9.83099 2.36756C9.61885 2.53817 9.46199 2.7678 9.3802 3.02746C9.29841 3.28712 9.29536 3.56519 9.37143 3.82658C9.42167 4.00064 9.50608 4.16296 9.61971 4.30406C9.73334 4.44516 9.87393 4.56223 10.0333 4.64843ZM10.3694 3.26423C10.4043 3.19977 10.4575 3.14712 10.5223 3.11295C10.5871 3.07878 10.6606 3.06465 10.7335 3.07233C10.8063 3.08001 10.8753 3.10917 10.9315 3.15611C10.9878 3.20304 11.0289 3.26563 11.0495 3.33594C11.0701 3.40625 11.0694 3.4811 11.0474 3.55099C11.0254 3.62088 10.9832 3.68267 10.926 3.72851C10.8688 3.77434 10.7993 3.80216 10.7263 3.80843C10.6533 3.8147 10.5801 3.79914 10.516 3.76372C10.4306 3.7166 10.3673 3.63768 10.3399 3.54414C10.3125 3.45059 10.3231 3.34999 10.3694 3.26423ZM7.8484 3.6649C7.66681 3.87999 7.53258 4.13093 7.45445 4.40137C7.4348 4.46861 7.42937 4.5392 7.43852 4.60865C7.44766 4.67809 7.47118 4.74488 7.50756 4.80473L8.01714 5.64171C8.05372 5.70158 8.10233 5.7532 8.15991 5.7933C8.21748 5.8334 8.28276 5.8611 8.3516 5.87465C8.62766 5.92932 8.91214 5.92531 9.18656 5.86288L9.46454 6.01482C9.55983 6.27991 9.71013 6.52184 9.90555 6.72473C9.95263 6.77404 10.0092 6.81328 10.0719 6.84009C10.1346 6.86689 10.2021 6.88071 10.2703 6.8807H10.283L11.2625 6.85784C11.3328 6.8564 11.402 6.84029 11.4657 6.81054C11.5293 6.78078 11.5861 6.73805 11.6323 6.68507C11.8184 6.47337 11.9576 6.22467 12.0407 5.95532L12.3096 5.79095C12.587 5.8413 12.872 5.8319 13.1455 5.76339C13.2136 5.74685 13.2774 5.71626 13.3329 5.6736C13.3884 5.63094 13.4344 5.57714 13.4679 5.51566L13.9385 4.65616C13.9721 4.59445 13.9925 4.52639 13.9983 4.45635C14.0041 4.38631 13.9952 4.31583 13.9721 4.24944C13.8813 3.98328 13.7356 3.73914 13.5445 3.5328L13.5375 3.21582C13.719 3.0008 13.8532 2.74999 13.9314 2.47969C13.951 2.41243 13.9564 2.34183 13.9472 2.27238C13.938 2.20293 13.9144 2.13616 13.878 2.07633L13.3687 1.23902C13.3321 1.1788 13.2833 1.12693 13.2254 1.08675C13.1675 1.04657 13.1018 1.01897 13.0326 1.00574C12.7567 0.951465 12.4726 0.955472 12.1983 1.0175L11.92 0.865236C11.8249 0.600338 11.6747 0.358612 11.4793 0.155992C11.4303 0.105986 11.3717 0.0663956 11.307 0.0395949C11.2423 0.0127941 11.1729 -0.000664814 11.1029 2.52534e-05L10.123 0.0225464C10.053 0.024258 9.98413 0.0405346 9.92076 0.0703391C9.85739 0.100144 9.80093 0.142822 9.75496 0.195656C9.56895 0.407298 9.42977 0.655868 9.34656 0.925068L9.07765 1.08944C8.80064 1.03965 8.51625 1.04881 8.24303 1.11633C8.1748 1.13293 8.1108 1.16361 8.05511 1.20638C7.99943 1.24916 7.9533 1.30309 7.91966 1.36473L7.44908 2.22423C7.41537 2.28585 7.39496 2.35386 7.38916 2.42386C7.38338 2.49386 7.39233 2.56429 7.41546 2.63061C7.50607 2.897 7.65162 3.14138 7.84269 3.34792L7.8484 3.6649ZM8.68471 2.06759C8.7334 2.0645 8.78224 2.0645 8.83093 2.06759C8.91103 2.12395 9.00588 2.15563 9.10377 2.15874C9.20167 2.16184 9.29833 2.13623 9.38185 2.08507L10.0928 1.65246C10.1764 1.60164 10.2435 1.52757 10.2857 1.43929C10.328 1.35101 10.3436 1.25234 10.3308 1.15532C10.3496 1.1102 10.3721 1.06669 10.398 1.02524L10.8787 1.01414C10.9064 1.05432 10.9308 1.0967 10.9516 1.14087C10.9432 1.23837 10.9633 1.33622 11.0096 1.42247C11.0559 1.50872 11.1262 1.57964 11.2121 1.62658L11.9425 2.02591C12.0284 2.07291 12.1261 2.0939 12.2237 2.08632C12.3213 2.07874 12.4145 2.04291 12.4921 1.98322C12.5404 1.97678 12.5893 1.97453 12.638 1.9765L12.8877 2.38725C12.8667 2.43137 12.8422 2.47374 12.8145 2.51398C12.7259 2.55541 12.6513 2.6217 12.5997 2.70477C12.5482 2.78785 12.5219 2.88412 12.524 2.98187L12.5432 3.81414C12.5455 3.912 12.5762 4.00707 12.6316 4.08777C12.687 4.16847 12.7646 4.2313 12.8551 4.2686C12.8846 4.30753 12.911 4.34866 12.9341 4.39162L12.7032 4.81381C12.6547 4.81807 12.6058 4.81807 12.5573 4.81381C12.4771 4.75779 12.3822 4.72633 12.2844 4.72329C12.1866 4.72025 12.09 4.74574 12.0064 4.79666L11.2955 5.22927C11.2116 5.27992 11.1443 5.35391 11.1018 5.4422C11.0593 5.53049 11.0434 5.62925 11.0561 5.72641C11.0372 5.7715 11.0148 5.815 10.9889 5.8565L10.5082 5.86759C10.4805 5.82736 10.456 5.78499 10.435 5.74087C10.4435 5.64334 10.4234 5.54544 10.3772 5.45913C10.331 5.37282 10.2607 5.30183 10.1748 5.25482L9.44437 4.85515C9.35848 4.8082 9.26077 4.78727 9.16318 4.79491C9.06559 4.80255 8.97233 4.83843 8.89479 4.89818C8.8464 4.9041 8.79764 4.90646 8.74891 4.90524L8.50151 4.49448C8.52271 4.45027 8.54732 4.40779 8.57513 4.36742C8.66369 4.32599 8.7383 4.2597 8.78986 4.17662C8.84142 4.09355 8.86772 3.99727 8.86555 3.89952L8.84639 3.06759C8.84418 2.96968 8.81351 2.87453 8.75811 2.79377C8.70272 2.713 8.625 2.65012 8.53446 2.6128C8.50488 2.57385 8.47847 2.5326 8.45546 2.48944L8.68471 2.06759Z", fill: "currentColor" }));
133
133
 
@@ -453,7 +453,7 @@ const SvgSafariIcon = (props) => /* @__PURE__ */ React__namespace.createElement(
453
453
 
454
454
  const SvgMaximizeScript = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_2947_11413)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M5.5 4H18.5C19.3271 4 20 4.67285 20 5.5V11.6748C20 11.9512 19.7761 12.1748 19.5 12.1748C19.2239 12.1748 19 11.9512 19 11.6748V5.5C19 5.22412 18.7756 5 18.5 5H5.5C5.22437 5 5 5.22412 5 5.5V18.5C5 18.7759 5.22437 19 5.5 19H11.675C11.9512 19 12.175 19.2236 12.175 19.5C12.175 19.7764 11.9512 20 11.675 20H5.5C4.67285 20 4 19.3272 4 18.5V5.5C4 4.67285 4.67285 4 5.5 4Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.5 13H18.5C19.3271 13 20 13.6729 20 14.5V18.5C20 19.3271 19.3271 20 18.5 20H14.5C13.6729 20 13 19.3271 13 18.5V14.5C13 13.6729 13.6729 13 14.5 13Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.6465 12.3535L8.5 9.20703V10C8.5 10.2764 8.27612 10.5 8 10.5C7.72388 10.5 7.5 10.2764 7.5 10V8C7.5 7.73216 7.72802 7.5 8 7.5H10C10.2761 7.5 10.5 7.72363 10.5 8C10.5 8.27637 10.2761 8.5 10 8.5H9.20703L12.3535 11.6465C12.5488 11.8418 12.5488 12.1582 12.3535 12.3535C12.1647 12.5423 11.8414 12.5484 11.6465 12.3535Z", fill: "currentColor" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_2947_11413" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z", fill: "currentColor" }))));
455
455
 
456
- const SvgDownloadFileIcon = (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("g", { clipPath: "url(#clip0_1306_9986)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.1796 5.30667L9.786 3.85417C9.2568 3.30333 8.5536 3 7.806 3H6C4.8972 3 4 3.93458 4 5.08333V10.9167C4 12.0654 4.8972 13 6 13H10C11.1028 13 12 12.0654 12 10.9167V7.36875C12 6.58917 11.7084 5.8575 11.1796 5.30667ZM10.614 5.89625C10.7412 6.02833 10.8488 6.17542 10.936 6.33375H9.1996C8.9788 6.33375 8.7996 6.14667 8.7996 5.91708V4.10792C8.9516 4.19875 9.0928 4.31083 9.22 4.44333L10.6136 5.89583L10.614 5.89625ZM11.2 10.9171C11.2 11.6062 10.6616 12.1671 10 12.1671H6C5.3384 12.1671 4.8 11.6062 4.8 10.9171V5.08333C4.8 4.39417 5.3384 3.83333 6 3.83333H7.806C7.8712 3.83333 7.936 3.83667 8 3.84292V5.91667C8 6.60583 8.5384 7.16667 9.2 7.16667H11.1908C11.1968 7.23333 11.2 7.30083 11.2 7.36875V10.9171ZM9.4828 9.71083C9.6392 9.87333 9.6392 10.1371 9.4828 10.3L8.8376 10.9725C8.6068 11.2129 8.3032 11.3333 8 11.3333C7.6968 11.3333 7.3932 11.2129 7.1624 10.9725L6.5172 10.3C6.3608 10.1371 6.3608 9.87333 6.5172 9.71083C6.6736 9.54792 6.9264 9.54792 7.0828 9.71083L7.6 10.2496V8.41708C7.6 8.18708 7.7788 8.00042 8 8.00042C8.2212 8.00042 8.4 8.18708 8.4 8.41708V10.2496L8.9172 9.71083C9.0736 9.54792 9.3264 9.54792 9.4828 9.71083Z", fill: "currentColor" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_1306_9986" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z", fill: "white" }))));
456
+ const SvgDownloadFileIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 14 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.0873 3.69067L9.85758 1.36667C9.01086 0.485333 7.88574 0 6.68958 0H3.79998C2.0355 0 0.599976 1.49533 0.599976 3.33333V12.6667C0.599976 14.5047 2.0355 16 3.79998 16H10.2C11.9645 16 13.4 14.5047 13.4 12.6667V6.99C13.4 5.74267 12.9334 4.572 12.0873 3.69067ZM11.1824 4.634C11.3859 4.84533 11.5581 5.08067 11.6976 5.334H8.91934C8.56606 5.334 8.27934 5.03467 8.27934 4.66733V1.77267C8.52254 1.918 8.74846 2.09733 8.95198 2.30933L11.1817 4.63333L11.1824 4.634ZM12.12 12.6673C12.12 13.77 11.2585 14.6673 10.2 14.6673H3.79998C2.74142 14.6673 1.87998 13.77 1.87998 12.6673V3.33333C1.87998 2.23067 2.74142 1.33333 3.79998 1.33333H6.68958C6.7939 1.33333 6.89758 1.33867 6.99998 1.34867V4.66667C6.99998 5.76933 7.86142 6.66667 8.91998 6.66667H12.1053C12.1149 6.77333 12.12 6.88133 12.12 6.99V12.6673ZM9.37246 10.7373C9.62269 10.9973 9.62269 11.4193 9.37246 11.68L8.34014 12.756C7.97086 13.1407 7.4851 13.3333 6.99998 13.3333C6.51486 13.3333 6.0291 13.1407 5.65982 12.756L4.6275 11.68C4.37726 11.4193 4.37726 10.9973 4.6275 10.7373C4.87774 10.4767 5.28222 10.4767 5.53246 10.7373L6.35998 11.5993V8.66733C6.35998 8.29933 6.64606 8.00067 6.99998 8.00067C7.3539 8.00067 7.63998 8.29933 7.63998 8.66733V11.5993L8.4675 10.7373C8.71774 10.4767 9.12222 10.4767 9.37246 10.7373Z", fill: "#71347B" }));
457
457
 
458
458
  const SvgMaximizeIcon = (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: "M1.5 0H14.5C15.3271 0 16 0.67285 16 1.5V7.67481C16 7.95117 15.7761 8.1748 15.5 8.1748C15.2239 8.1748 15 7.95117 15 7.67481V1.5C15 1.22412 14.7756 1 14.5 1H1.5C1.22437 1 1 1.22412 1 1.5V14.5C1 14.7759 1.22437 15 1.5 15H7.67505C7.95117 15 8.17505 15.2236 8.17505 15.5C8.17505 15.7764 7.95117 16 7.67505 16H1.5C0.67285 16 0 15.3272 0 14.5V1.5C0 0.67285 0.67285 0 1.5 0Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.5 9H14.5C15.3271 9 16 9.67285 16 10.5V14.5C16 15.3271 15.3271 16 14.5 16H10.5C9.67285 16 9 15.3271 9 14.5V10.5C9 9.67285 9.67285 9 10.5 9Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.64649 8.35351L4.5 5.20703V6C4.5 6.27637 4.27612 6.5 4 6.5C3.72388 6.5 3.5 6.27637 3.5 6V4C3.5 3.73216 3.72802 3.5 4 3.5H6C6.27612 3.5 6.5 3.72363 6.5 4C6.5 4.27637 6.27612 4.5 6 4.5H5.20703L8.35352 7.64648C8.54883 7.84179 8.54883 8.1582 8.35352 8.35351C8.16474 8.54229 7.84137 8.54839 7.64649 8.35351Z", fill: "currentColor" }));
459
459
 
@@ -577,6 +577,8 @@ const SvgRemoveUser = (props) => /* @__PURE__ */ React__namespace.createElement(
577
577
 
578
578
  const SvgAddArchive = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.63602 0.975634L7.63602 0.975628C7.39589 0.735534 7.07618 0.603125 6.73666 0.603125H2.17188C1.47046 0.603125 0.9 1.17358 0.9 1.875V14.125C0.9 14.8264 1.47046 15.3969 2.17188 15.3969H15.8281C16.5295 15.3969 17.1 14.8264 17.1 14.125V3.75C17.1 3.04858 16.5295 2.47812 15.8281 2.47812H9.13848L7.63602 0.975634ZM9.23643 6.79895L9.23646 6.79893L10.8368 5.19853C10.9509 5.08447 11.1021 5.02187 11.2633 5.02187H15.8281C16.1606 5.02187 16.4312 5.29251 16.4312 5.625V14.125C16.4312 14.4575 16.1606 14.7281 15.8281 14.7281H2.17188C1.83941 14.7281 1.56875 14.4575 1.56875 14.125V7.5C1.56875 7.16751 1.83941 6.89687 2.17188 6.89687H9C9.08869 6.89687 9.1737 6.86164 9.23643 6.79895ZM2.17188 1.27188H6.73666C6.89795 1.27188 7.04908 1.33447 7.16313 1.44852L8.76354 3.04893C8.82626 3.11165 8.91129 3.14687 9 3.14687H15.8281C16.1606 3.14687 16.4312 3.41751 16.4312 3.75V4.5055C16.3469 4.4599 16.2569 4.42353 16.1625 4.39778V3.75C16.1625 3.56534 16.0128 3.41563 15.8281 3.41563H2.17188C1.98717 3.41563 1.8375 3.56534 1.8375 3.75V6.27278C1.74309 6.29853 1.65306 6.3349 1.56875 6.3805V1.875C1.56875 1.54251 1.83941 1.27188 2.17188 1.27188ZM4.04688 4.35313C3.86217 4.35313 3.7125 4.50284 3.7125 4.6875C3.7125 4.87216 3.86217 5.02187 4.04688 5.02187H10.0677L8.86152 6.22813H2.50625V5.02187H3.10938C3.29408 5.02187 3.44375 4.87216 3.44375 4.6875C3.44375 4.50284 3.29408 4.35313 3.10938 4.35313H2.50625V4.08437H15.4937V4.35313H4.04688Z", fill: "currentColor", stroke: "currentColor", strokeWidth: 0.2 }), /* @__PURE__ */ React__namespace.createElement("mask", { id: "path-2-outside-1_6891_65", maskUnits: "userSpaceOnUse", x: 9.35828, y: 7.65503, width: 6, height: 6, fill: "black" }, /* @__PURE__ */ React__namespace.createElement("rect", { fill: "white", x: 9.35828, y: 7.65503, width: 6, height: 6 }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.0806 10.5744V9.05659C13.0806 8.83483 12.9008 8.65503 12.6791 8.65503C12.4573 8.65503 12.2775 8.83483 12.2775 9.05659V10.5744H10.7598C10.5381 10.5744 10.3583 10.7542 10.3583 10.976C10.3583 11.1978 10.5381 11.3776 10.7598 11.3776H12.2775V12.8953C12.2775 13.1171 12.4573 13.2969 12.6791 13.2969C12.9008 13.2969 13.0806 13.1171 13.0806 12.8953V11.3776H14.5986C14.8203 11.3776 15.0001 11.1978 15.0001 10.976C15.0001 10.7542 14.8203 10.5744 14.5986 10.5744H13.0806Z" })), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.0806 10.5744V9.05659C13.0806 8.83483 12.9008 8.65503 12.6791 8.65503C12.4573 8.65503 12.2775 8.83483 12.2775 9.05659V10.5744H10.7598C10.5381 10.5744 10.3583 10.7542 10.3583 10.976C10.3583 11.1978 10.5381 11.3776 10.7598 11.3776H12.2775V12.8953C12.2775 13.1171 12.4573 13.2969 12.6791 13.2969C12.9008 13.2969 13.0806 13.1171 13.0806 12.8953V11.3776H14.5986C14.8203 11.3776 15.0001 11.1978 15.0001 10.976C15.0001 10.7542 14.8203 10.5744 14.5986 10.5744H13.0806Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M13.0806 10.5744H12.8806V10.7744H13.0806V10.5744ZM12.6791 8.65503V8.45503V8.65503ZM12.2775 10.5744V10.7744H12.4775V10.5744H12.2775ZM12.2775 11.3776H12.4775V11.1776H12.2775V11.3776ZM13.0806 11.3776V11.1776H12.8806V11.3776H13.0806ZM12.8806 9.05659V10.5744H13.2806V9.05659H12.8806ZM12.6791 8.85503C12.7904 8.85503 12.8806 8.94528 12.8806 9.05659H13.2806C13.2806 8.72437 13.0113 8.45503 12.6791 8.45503V8.85503ZM12.4775 9.05659C12.4775 8.94528 12.5678 8.85503 12.6791 8.85503V8.45503C12.3468 8.45503 12.0775 8.72437 12.0775 9.05659H12.4775ZM12.4775 10.5744V9.05659H12.0775V10.5744H12.4775ZM10.7598 10.7744H12.2775V10.3744H10.7598V10.7744ZM10.5583 10.976C10.5583 10.8647 10.6485 10.7744 10.7598 10.7744V10.3744C10.4276 10.3744 10.1583 10.6438 10.1583 10.976H10.5583ZM10.7598 11.1776C10.6485 11.1776 10.5583 11.0873 10.5583 10.976H10.1583C10.1583 11.3082 10.4276 11.5776 10.7598 11.5776V11.1776ZM12.2775 11.1776H10.7598V11.5776H12.2775V11.1776ZM12.4775 12.8953V11.3776H12.0775V12.8953H12.4775ZM12.6791 13.0969C12.5678 13.0969 12.4775 13.0066 12.4775 12.8953H12.0775C12.0775 13.2275 12.3468 13.4969 12.6791 13.4969V13.0969ZM12.8806 12.8953C12.8806 13.0066 12.7904 13.0969 12.6791 13.0969V13.4969C13.0113 13.4969 13.2806 13.2275 13.2806 12.8953H12.8806ZM12.8806 11.3776V12.8953H13.2806V11.3776H12.8806ZM14.5986 11.1776H13.0806V11.5776H14.5986V11.1776ZM14.8001 10.976C14.8001 11.0873 14.7099 11.1776 14.5986 11.1776V11.5776C14.9308 11.5776 15.2001 11.3082 15.2001 10.976H14.8001ZM14.5986 10.7744C14.7099 10.7744 14.8001 10.8647 14.8001 10.976H15.2001C15.2001 10.6438 14.9308 10.3744 14.5986 10.3744V10.7744ZM13.0806 10.7744H14.5986V10.3744H13.0806V10.7744Z", fill: "currentColor", mask: "url(#path-2-outside-1_6891_65)" }));
579
579
 
580
+ const SvgAddVariable = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_2947_12355)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M18.9799 6.39074L18.98 6.39066C18.7152 6.10024 18.2958 5.91202 17.667 5.90136L17.6603 5.90125L17.6603 5.9012C16.7479 5.87338 15.9951 6.10031 15.384 6.55729C14.8289 6.97239 14.3593 7.60115 14.001 8.47483C14.1534 8.44887 14.311 8.43399 14.4753 8.43399C14.7848 8.43399 15.4004 8.4707 15.7695 8.94829L15.7739 8.95398L15.7738 8.95401C16.0596 9.33506 16.0442 9.83443 15.9167 10.2879L15.9148 10.2946L15.9148 10.2946C15.8487 10.5177 15.679 10.8655 15.4767 11.2396C15.2662 11.629 14.996 12.0907 14.702 12.5597L14.6993 12.5642L14.6992 12.5641C14.3347 13.1325 14.0495 13.5548 13.8362 13.8381C13.7308 13.9781 13.633 14.0977 13.5448 14.1867C13.5013 14.2305 13.4477 14.2797 13.3864 14.3213C13.3393 14.3532 13.2162 14.4313 13.0475 14.4313H13.0397L13.0319 14.431C12.8602 14.4257 12.7414 14.342 12.6857 14.295C12.6251 14.244 12.5814 14.1877 12.5526 14.1463C12.4942 14.0624 12.4444 13.9627 12.4024 13.8684C12.3162 13.6746 12.2242 13.4139 12.1312 13.1216C11.9437 12.5321 11.7335 11.7536 11.5367 10.9805C11.3395 10.2054 11.1536 9.42727 11.015 8.8353C10.9456 8.53916 10.888 8.28929 10.8466 8.10947L10.7974 7.89575C10.79 7.86356 10.7853 7.8436 10.7827 7.83267C10.7809 7.82467 10.7801 7.82151 10.7803 7.82195C10.5797 7.09733 10.4571 6.68312 10.2663 6.42424C10.1851 6.31391 10.0959 6.24128 9.9786 6.19094C9.85381 6.13739 9.67159 6.09837 9.39186 6.09837C9.26627 6.09837 9.03076 6.1623 8.67253 6.3451C8.32974 6.52003 7.92898 6.77495 7.49123 7.08709C6.6167 7.71068 5.63791 8.53124 4.74865 9.31012L4.74603 9.31241L4.74602 9.3124L4.52935 9.49953L4.77034 9.803C5.04584 9.59868 5.33341 9.39361 5.60844 9.23668C5.8837 9.07963 6.21683 8.9283 6.55433 8.92635C7.08046 8.91574 7.42074 9.32093 7.64468 9.72599C7.88424 10.1593 8.10594 10.7953 8.33533 11.6321C8.78297 13.251 9.33179 14.9994 9.93252 16.3357C10.2341 17.0064 10.537 17.5465 10.8305 17.9111C11.1399 18.2955 11.3524 18.3793 11.4597 18.3793C12.0402 18.3793 12.7242 18.1366 13.5576 17.509C14.3917 16.8809 15.3418 15.8921 16.4423 14.4632L18.9799 6.39074ZM18.9799 6.39074L18.9874 6.39862M18.9799 6.39074L18.9874 6.39862M18.9874 6.39862C19.338 6.76673 19.549 7.45607 19.4903 8.5376L19.4902 8.5376M18.9874 6.39862L19.4902 8.5376M19.4902 8.5376L19.4899 8.54442M19.4902 8.5376L19.4899 8.54442M19.4899 8.54442C19.4633 9.19952 19.2114 10.0239 18.6981 11.0281M19.4899 8.54442L18.6981 11.0281M18.6981 11.0281C18.1875 12.0271 17.4345 13.1728 16.4424 14.4631L18.6981 11.0281Z", fill: "none", stroke: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M17.4708 14.7507H19.8999V16.1833H17.4708H17.3708V16.2833V18.7793H15.8044V16.2833V16.1833H15.7044H13.2753V14.7507H15.7044H15.8044V14.6507V12.1547H17.3708V14.6507V14.7507H17.4708Z", fill: "currentColor", stroke: "white", strokeWidth: 0.2 })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_2947_12355" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z", fill: "none" }))));
581
+
580
582
  const SvgDashboardIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.5453 15.652C10.2568 15.3525 9.8837 15.1313 9.4568 15.029L7.91394 14.6593V13.7174H6.02987V14.6623L4.49101 15.0299C3.48478 15.2703 2.7749 16.1697 2.7749 17.2042V19.725H6.18598L10.5453 15.652Z", fill: "#78D2FA" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.95401 13.7174V14.6847L6.97624 17.0268L5.99951 14.6881V13.7174H7.95401Z", fill: "#FFB487" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M9.0732 10.4723V11.7769C9.0732 12.9367 8.13296 13.8769 6.97312 13.8769C5.81328 13.8769 4.87305 12.9367 4.87305 11.7769V10.4723H9.0732Z", fill: "#FFCDAC" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M9.0732 10.885V10.3794C9.0732 9.21962 8.13296 8.27942 6.97312 8.27942C5.81328 8.27942 4.87305 9.21962 4.87305 10.3794V10.885H6.32066C7.22718 10.885 8.11672 10.6388 8.89432 10.1729", fill: "#878791" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M13.4541 15.652C13.7426 15.3525 14.1157 15.1313 14.5426 15.029L16.0854 14.6593V13.7174H17.9695V14.6623L19.5084 15.0299C20.5146 15.2703 21.2245 16.1697 21.2245 17.2042V19.725H17.8134L13.4541 15.652Z", fill: "#A5DC69" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.6856 15.6151L8.53663 16.1301C7.13608 16.4657 6.14844 17.7179 6.14844 19.1581V21.225H17.8436V19.1599C17.8436 17.7189 16.8548 16.4662 15.4532 16.1313L13.3099 15.6193L10.6856 15.6151Z", fill: "#FF5A5A" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M17.9999 13.7174V14.6881L17.0232 17.0268L16.0454 14.6847V13.7174H17.9999Z", fill: "#FFB487" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.0002 18.6277L13.3993 15.4511C13.2955 15.2767 13.2363 15.0738 13.2363 14.8589V14.5536H10.7626V14.859C10.7626 15.0735 10.7036 15.2761 10.6001 15.4503L12.0002 18.6277Z", fill: "#FFB487" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.9247 9.58215V11.6004C14.9247 13.2158 13.6151 14.5254 11.9997 14.5254C10.3843 14.5254 9.07471 13.2158 9.07471 11.6004V9.58215H14.9247Z", fill: "#FFCDAC" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.9997 6.72888C10.3843 6.72888 9.07471 8.03846 9.07471 9.65388V10.358H10.5048C11.4555 10.358 12.3574 9.93708 12.968 9.20842L14.9247 10.358V9.65388C14.9248 8.03846 13.6152 6.72888 11.9997 6.72888Z", fill: "#F5B955" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.9263 10.4723V11.7769C14.9263 12.9367 15.8665 13.8769 17.0263 13.8769C18.1862 13.8769 19.1264 12.9367 19.1264 11.7769V10.4723H14.9263Z", fill: "#FFCDAC" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.9263 10.885V10.3794C14.9263 9.21962 15.8665 8.27942 17.0263 8.27942C18.1862 8.27942 19.1264 9.21962 19.1264 10.3794V10.885H17.6788C16.7723 10.885 15.8827 10.6388 15.1051 10.1729", fill: "#878791" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.9906 20.85C11.8917 20.85 11.7947 20.8901 11.7249 20.9599C11.655 21.0296 11.6147 21.1264 11.6147 21.225C11.6147 21.3236 11.6549 21.4204 11.7249 21.4901C11.7947 21.5599 11.8917 21.6 11.9906 21.6C12.0895 21.6 12.1864 21.5599 12.2563 21.4901C12.3262 21.4204 12.3665 21.3236 12.3665 21.225C12.3665 21.1264 12.3263 21.0296 12.2563 20.9599C12.1864 20.8901 12.0895 20.85 11.9906 20.85Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M19.5959 14.6652L18.345 14.3663V13.8701C19.0393 13.4313 19.5018 12.6573 19.5018 11.7769V10.3794C19.5018 9.01469 18.3915 7.90443 17.0267 7.90443C16.2905 7.90443 15.6287 8.22791 15.175 8.73974C14.7775 7.36338 13.5064 6.35388 12.0038 6.35388H12.0038C10.4987 6.35388 9.22588 7.36657 8.83067 8.74631C8.37677 8.23068 7.71256 7.90443 6.97322 7.90443C5.60844 7.90443 4.49814 9.01473 4.49814 10.3794V11.7769C4.49814 12.6573 4.96059 13.4313 5.65494 13.8701V14.3663L4.40402 14.6652C3.224 14.947 2.3999 15.9911 2.3999 17.2042V19.725C2.3999 19.9321 2.56783 20.1 2.7749 20.1H5.77351V21.225C5.77351 21.4321 5.94144 21.6 6.14851 21.6H10.2624C10.4695 21.6 10.6374 21.4321 10.6374 21.225C10.6374 21.0179 10.4695 20.85 10.2624 20.85H8.5883V19.1995C8.5883 18.9924 8.42038 18.8245 8.2133 18.8245C8.00623 18.8245 7.8383 18.9924 7.8383 19.1995V20.85H6.52348V19.1581C6.52348 17.8863 7.38725 16.7911 8.62404 16.4947L10.4684 16.0528L11.6551 18.7526C11.715 18.8888 11.8496 18.9767 11.9984 18.9767H11.9984C12.1471 18.9767 12.2818 18.8888 12.3417 18.7527L13.5272 16.0567L15.3662 16.4961C16.6041 16.7917 17.4686 17.8872 17.4686 19.1598V19.5783C17.4495 19.6234 17.4388 19.6729 17.4388 19.725C17.4388 19.777 17.4495 19.8266 17.4686 19.8716V20.85H16.1615V19.1995C16.1615 18.9924 15.9936 18.8245 15.7865 18.8245C15.5794 18.8245 15.4115 18.9924 15.4115 19.1995V20.85H13.5749C13.3679 20.85 13.1999 21.0179 13.1999 21.225C13.1999 21.4321 13.3679 21.6 13.5749 21.6H17.8436C18.0507 21.6 18.2186 21.4321 18.2186 21.225V20.1H21.2249C21.432 20.1 21.5999 19.9321 21.5999 19.725V17.2042C21.5999 15.9911 20.7758 14.947 19.5959 14.6652ZM17.5958 14.6826L17.0233 16.0535L16.4584 14.7006C16.4599 14.687 16.461 14.6733 16.461 14.6596C16.461 14.6561 16.461 14.6526 16.4609 14.6491V14.1859C16.6427 14.2287 16.832 14.2519 17.0267 14.2519C17.2222 14.2519 17.4124 14.2284 17.5949 14.1853V14.6623C17.5949 14.6691 17.5954 14.6758 17.5958 14.6826ZM10.3106 14.9838C10.0752 14.8378 9.81692 14.7297 9.54422 14.6643L8.28894 14.3635V13.8717C8.60113 13.675 8.86629 13.4105 9.06395 13.099C9.34666 13.6513 9.78058 14.1138 10.3106 14.432V14.9838ZM9.45365 11.6004V10.7331H10.5088C11.466 10.7331 12.3731 10.3548 13.0433 9.68527L14.5516 10.5714V11.6884C14.505 13.0539 13.3804 14.1505 12.0038 14.1505C10.5976 14.1504 9.45365 13.0065 9.45365 11.6004ZM13.6849 14.439C14.2183 14.122 14.6552 13.6591 14.9401 13.1056C15.1373 13.4142 15.4009 13.6763 15.7109 13.8717V14.3635L14.4556 14.6643C14.1812 14.7301 13.9215 14.8392 13.6849 14.9865L13.6849 14.439ZM17.0267 13.5019C16.0755 13.5019 15.3016 12.7281 15.3016 11.7769V11.7157C15.3029 11.6775 15.3038 10.7074 15.3038 10.7074C16.0411 11.07 16.8538 11.26 17.6792 11.26H18.7518V11.777C18.7517 12.7281 17.9779 13.5019 17.0267 13.5019ZM17.0267 8.65443C17.9779 8.65443 18.7517 9.42828 18.7517 10.3794V10.4723V10.51H17.6791C16.8689 10.51 16.0727 10.2972 15.3711 9.89399C15.5813 9.17842 16.2439 8.65443 17.0267 8.65443ZM9.45365 9.65392C9.45365 8.24782 10.5976 7.10392 12.0038 7.10392C13.4099 7.10392 14.5538 8.24786 14.5538 9.65392V9.70282L13.162 8.88513C13.0041 8.79232 12.8023 8.82723 12.6847 8.96759C12.1439 9.61289 11.3509 9.98302 10.5089 9.98302H9.45365V9.65392ZM5.24806 10.3794C5.24806 9.42824 6.02195 8.65443 6.97314 8.65443C7.75588 8.65443 8.4185 9.17842 8.62869 9.89403C7.92703 10.2972 7.1309 10.51 6.32064 10.51H5.24806V10.4723V10.3794ZM5.24806 11.26H6.32068C7.14688 11.26 7.96044 11.0696 8.69822 10.7064V11.7769C8.69822 12.7281 7.92433 13.5019 6.97314 13.5019C6.02195 13.5019 5.24806 12.7281 5.24806 11.7769V11.26ZM6.97314 14.2519C7.16784 14.2519 7.35707 14.2286 7.53894 14.1859V14.6386C7.53853 14.6456 7.53834 14.6527 7.53834 14.6597C7.53834 14.6715 7.53947 14.6833 7.54059 14.695L6.97322 16.0535L6.4037 14.6893C6.40434 14.6803 6.40487 14.6714 6.40487 14.6623V14.1854C6.58745 14.2284 6.77758 14.2519 6.97314 14.2519ZM5.77351 19.1581V19.35H4.6499V17.6839C4.6499 17.4768 4.48198 17.3089 4.2749 17.3089C4.06783 17.3089 3.8999 17.4768 3.8999 17.6839V19.35H3.1499V17.2042C3.1499 16.3396 3.73723 15.5955 4.57817 15.3946L5.76684 15.1107L6.54264 16.969C6.05743 17.5717 5.77351 18.3358 5.77351 19.1581ZM8.44929 15.7654C8.22785 15.8185 8.01624 15.8923 7.81531 15.9834L8.18056 15.1088L9.36943 15.3937C9.46164 15.4158 9.55149 15.445 9.63845 15.4804L8.44929 15.7654ZM11.9985 17.67L11.0606 15.5363V14.7629C11.3596 14.8522 11.6761 14.9004 12.0037 14.9004C12.327 14.9004 12.6395 14.8535 12.9349 14.7664V15.5405L11.9985 17.67ZM14.3545 15.4833C14.4436 15.4465 14.5357 15.4164 14.6304 15.3937L15.8164 15.1095L16.1831 15.988C15.9796 15.8953 15.7651 15.8203 15.5404 15.7666L14.3545 15.4833ZM20.8499 19.35H20.0999V17.6839C20.0999 17.4768 19.932 17.3089 19.7249 17.3089C19.5178 17.3089 19.3499 17.4768 19.3499 17.6839V19.35H18.2186V19.1599C18.2186 18.3387 17.9357 17.5757 17.4518 16.9734L18.2301 15.11L19.4216 15.3946C20.2626 15.5955 20.8499 16.3396 20.8499 17.2042V19.35Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.7426 11.0719C10.6437 11.0719 10.5467 11.112 10.4768 11.1818C10.4069 11.2515 10.3667 11.3483 10.3667 11.4469C10.3667 11.5455 10.4069 11.6423 10.4768 11.712C10.5468 11.7818 10.6437 11.8219 10.7426 11.8219C10.8418 11.8219 10.9384 11.7818 11.0083 11.712C11.0786 11.6423 11.1184 11.5455 11.1184 11.4469C11.1184 11.3483 11.0786 11.2515 11.0083 11.1818C10.9384 11.112 10.8414 11.0719 10.7426 11.0719Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M13.2504 11.8219C13.3492 11.8219 13.4462 11.7818 13.5161 11.712C13.5864 11.6423 13.6262 11.5455 13.6262 11.4469C13.6262 11.3483 13.5864 11.2515 13.5161 11.1818C13.4462 11.112 13.3492 11.0719 13.2504 11.0719C13.1515 11.0719 13.0546 11.112 12.9846 11.1818C12.9147 11.2515 12.8745 11.3483 12.8745 11.4469C12.8745 11.5455 12.9147 11.6423 12.9846 11.712C13.0546 11.7818 13.1515 11.8219 13.2504 11.8219Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.7217 12.4441C12.5752 12.2976 12.3378 12.2976 12.1913 12.4441C12.0804 12.5549 11.9 12.5549 11.7891 12.4441C11.6426 12.2976 11.4053 12.2976 11.2588 12.4441C11.1123 12.5905 11.1123 12.8279 11.2588 12.9744C11.4604 13.1761 11.7253 13.2769 11.9902 13.2769C12.2551 13.2769 12.52 13.1761 12.7216 12.9744C12.8681 12.8279 12.8681 12.5905 12.7217 12.4441Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M17.6479 5.17505H17.9052C18.1122 5.17505 18.2802 5.00716 18.2802 4.80005C18.2802 4.59294 18.1122 4.42505 17.9052 4.42505H17.6479C17.4409 4.42505 17.2729 4.59294 17.2729 4.80005C17.2729 5.00716 17.4409 5.17505 17.6479 5.17505Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M19.4673 5.17505H19.7245C19.9316 5.17505 20.0995 5.00716 20.0995 4.80005C20.0995 4.59294 19.9316 4.42505 19.7245 4.42505H19.4673C19.2602 4.42505 19.0923 4.59294 19.0923 4.80005C19.0923 5.00716 19.2602 5.17505 19.4673 5.17505Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M18.6874 6.21339C18.8949 6.21339 19.0633 6.0455 19.0633 5.83839V5.58118C19.0633 5.37406 18.8949 5.20618 18.6874 5.20618C18.4798 5.20618 18.3115 5.37406 18.3115 5.58118V5.83839C18.3115 6.0455 18.4798 6.21339 18.6874 6.21339Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M18.6874 4.39381C18.8949 4.39381 19.0633 4.22592 19.0633 4.01881V3.7616C19.0633 3.55448 18.8949 3.3866 18.6874 3.3866C18.4798 3.3866 18.3115 3.55448 18.3115 3.7616V4.01881C18.3115 4.22592 18.4798 4.39381 18.6874 4.39381Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M4.25391 5.17505H4.51108C4.71816 5.17505 4.88608 5.00716 4.88608 4.80005C4.88608 4.59294 4.71816 4.42505 4.51108 4.42505H4.25391C4.04683 4.42505 3.87891 4.59294 3.87891 4.80005C3.87891 5.00716 4.04683 5.17505 4.25391 5.17505Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M6.07324 5.17505H6.33042C6.53749 5.17505 6.70542 5.00716 6.70542 4.80005C6.70542 4.59294 6.53749 4.42505 6.33042 4.42505H6.07324C5.86617 4.42505 5.69824 4.59294 5.69824 4.80005C5.69824 5.00716 5.86613 5.17505 6.07324 5.17505Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M5.29286 6.21339C5.50041 6.21339 5.66873 6.0455 5.66873 5.83839V5.58118C5.66873 5.37406 5.50041 5.20618 5.29286 5.20618C5.08531 5.20618 4.91699 5.37406 4.91699 5.58118V5.83839C4.91699 6.0455 5.08527 6.21339 5.29286 6.21339Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M5.29286 4.39381C5.50041 4.39381 5.66873 4.22592 5.66873 4.01881V3.7616C5.66873 3.55448 5.50041 3.3866 5.29286 3.3866C5.08531 3.3866 4.91699 3.55448 4.91699 3.7616V4.01881C4.91699 4.22592 5.08527 4.39381 5.29286 4.39381Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.0004 5.56487C12.2079 5.56487 12.3762 5.39698 12.3762 5.18987V4.20325C12.3762 3.99613 12.2079 3.82825 12.0004 3.82825C11.7928 3.82825 11.6245 3.99613 11.6245 4.20325V5.18987C11.6245 5.39698 11.7928 5.56487 12.0004 5.56487Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.0004 3.15002C12.0992 3.15002 12.1962 3.1099 12.2661 3.04015C12.336 2.9704 12.3762 2.87365 12.3762 2.77502C12.3762 2.6764 12.336 2.57965 12.2661 2.5099C12.1962 2.44015 12.0992 2.40002 12.0004 2.40002C11.9015 2.40002 11.8046 2.44015 11.7346 2.5099C11.6647 2.57965 11.6245 2.6764 11.6245 2.77502C11.6245 2.87365 11.6647 2.9704 11.7346 3.04015C11.8046 3.1099 11.9015 3.15002 12.0004 3.15002Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.1552 4.43482C10.2285 4.50805 10.3244 4.54465 10.4204 4.54465C10.5163 4.54465 10.6123 4.50805 10.6855 4.43482C10.832 4.28838 10.832 4.05093 10.6855 3.90445L10.1368 3.35568C9.9903 3.20924 9.75292 3.20924 9.60641 3.35568C9.45997 3.50212 9.45997 3.73957 9.60641 3.88604L10.1552 4.43482Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M13.5606 4.54236C13.6566 4.54236 13.7525 4.50576 13.8257 4.43252L14.3929 3.86541C14.5393 3.71897 14.5393 3.48152 14.3929 3.33505C14.2464 3.18861 14.009 3.18861 13.8625 3.33505L13.2954 3.90216C13.1489 4.0486 13.1489 4.28605 13.2954 4.43252C13.3687 4.50576 13.4646 4.54236 13.5606 4.54236Z", fill: "black" }));
581
583
 
582
584
  const SvgInfoUser = (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: "M8 0C3.57895 0 0 3.57895 0 8C0 12.4211 3.57895 16 8 16C12.4211 16 16 12.4211 16 8C16 3.57895 12.4211 0 8 0ZM8 14.4211C4.47368 14.4211 1.57895 11.5263 1.57895 8C1.57895 4.47368 4.47368 1.57895 8 1.57895C11.5263 1.57895 14.4211 4.47368 14.4211 8C14.4211 11.5263 11.5263 14.4211 8 14.4211Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M8.42106 6.73685H7.57895C7.42106 6.73685 7.3158 6.84211 7.3158 7V11.7895C7.3158 11.9474 7.42106 12.0526 7.57895 12.0526H8.42106C8.57895 12.0526 8.68422 11.9474 8.68422 11.7895V7C8.68422 6.84211 8.57895 6.73685 8.42106 6.73685Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.31577 4.21053C7.10524 4.42105 7.05261 4.63158 7.05261 4.89474C7.05261 5.15789 7.15788 5.42105 7.31577 5.57895C7.47366 5.78947 7.73682 5.89474 7.99998 5.89474C8.26314 5.89474 8.5263 5.78947 8.68419 5.63158C8.84209 5.47368 8.94735 5.21053 8.94735 4.94737C8.94735 4.68421 8.84209 4.42105 8.68419 4.26316C8.31577 3.84211 7.68419 3.84211 7.31577 4.21053Z", fill: "currentColor" }));
@@ -585,11 +587,11 @@ const SvgWebServiceIcon = (props) => /* @__PURE__ */ React__namespace.createElem
585
587
 
586
588
  const SvgProjectStatusIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 18 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M17.522 3.29551V9.46075C17.522 10.9867 16.8226 12.7579 15.5531 14.4481C14.0737 16.4173 11.8945 18.1555 9.25101 19.4748L8.99975 19.6L8.74849 19.4748C6.10501 18.1555 3.9258 16.4173 2.44637 14.4481C1.17694 12.7579 0.477539 10.9867 0.477539 9.46075V3.29551L4.6237 0.400024H13.3758L17.522 3.29551Z", fill: "#00358F" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M17.5222 3.29551V9.46075C17.5222 10.9867 16.8228 12.7579 15.5534 14.4481C14.0739 16.4173 11.8947 18.1555 9.25126 19.4748L9 19.6V0.400024H13.376L17.5222 3.29551Z", fill: "#012453" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.6677 2.65015H5.33164L2.72754 4.46859V9.46079C2.72754 11.1765 4.41548 14.5291 8.99966 17.0653C13.5838 14.5291 15.2718 11.1765 15.2718 9.46079V4.46859L12.6677 2.65015Z", fill: "#00B3FE" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M15.2721 4.46859V9.46079C15.2721 11.1765 13.5842 14.5291 9 17.0653V2.65015H12.668L15.2721 4.46859Z", fill: "#0274F9" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.8447 2.08765H5.15466L2.16504 4.17535V9.46081C2.16504 10.5581 2.72081 11.9524 3.68947 13.286C4.86889 14.9098 6.61084 16.387 8.72742 17.5578L8.99968 17.7085L9.27194 17.5578C11.3885 16.387 13.1305 14.9098 14.3099 13.286C15.2786 11.9524 15.8343 10.5581 15.8343 9.46081V4.17535L12.8447 2.08765ZM14.7093 9.46081C14.7093 10.9575 13.1826 14.0135 8.99968 16.4196C4.81677 14.0135 3.29008 10.9575 3.29008 9.46081V4.76188L5.50867 3.21269H12.4907L14.7093 4.76188V9.46081Z", fill: "#EFF5FA" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M15.8346 4.17535V9.46081C15.8346 10.5581 15.2789 11.9524 14.3102 13.286C13.1308 14.9098 11.3888 16.387 9.27226 17.5578L9 17.7085V16.4196C13.1829 14.0135 14.7096 10.9575 14.7096 9.46081V4.76188L12.491 3.21269H9V2.08765H12.845L15.8346 4.17535Z", fill: "#C6E1EC" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.591 6.93419L8.99983 10.6251L8.99233 10.633L8.07917 11.5712L5.40869 9.07365L6.1771 8.25199L8.04167 9.99618L8.99233 9.01965L8.99983 9.01177L11.7847 6.14966L12.591 6.93419Z", fill: "#EFF5FA" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.5911 6.93419L9 10.6251V9.01177L11.7849 6.14966L12.5911 6.93419Z", fill: "#C6E1EC" }));
587
589
 
588
- const SvgCaptureIcon = (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: "M3.83333 14V13.5H3C2.72386 13.5 2.5 13.2761 2.5 13V12.1667H2V10.5H2.5V8.83333H2V7.16667H2.5V5.5H2V3.83333H2.5V3C2.5 2.72386 2.72386 2.5 3 2.5H3.83333V2H5.5V2.5H7.16667V2H8.83333V2.5H10.5V2H12.1667V2.5H13C13.2761 2.5 13.5 2.72386 13.5 3V3.83333H14V5.5H13.5V7.16667H14V8.83333H13.5V10.5H14V12.1667H13.5V13C13.5 13.2761 13.2761 13.5 13 13.5H12.1667V14H10.5V13.5H8.83333V14H7.16667V13.5H5.5V14H3.83333Z", stroke: "currentcolor", strokeDasharray: "2 2" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11 11H14V12H12V14H11V11Z", fill: "currentcolor" }), /* @__PURE__ */ React__namespace.createElement("rect", { x: 12, y: 12, width: 2, height: 2, fill: "" }), /* @__PURE__ */ React__namespace.createElement("rect", { x: 11.4622, y: 12.2595, width: 1, height: 2.5193, transform: "rotate(-49.0426 11.4622 12.2595)", fill: "currentcolor" }));
590
+ const SvgCaptureIcon = (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", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.1549 0.000732422H13.7586C14.9937 0.000732422 15.9985 1.00484 15.9985 2.23906V4.84434H14.5308V2.23906C14.5308 1.81416 14.1844 1.46849 13.7586 1.46849H11.1549V0.000732422ZM14.5323 6.31234H16V9.68819H14.5323V6.31234ZM2.23832 0.00245581C1.0041 0.00245581 0 1.0073 0 2.24236V4.84606H1.46775V2.24236C1.46775 1.81658 1.81342 1.47021 2.23832 1.47021H4.8436V0.00245581H2.23832ZM6.31136 0.000732422H9.68721V1.46849H6.31136V0.000732422ZM9.68721 14.5317H6.31136V15.9995H9.68721V14.5317ZM1.46933 13.7609C1.46933 14.1858 1.81574 14.5315 2.24152 14.5315H4.84518V15.9992H2.24148C1.00642 15.9992 0.00157977 14.9951 0.00157977 13.7609V11.1556H1.46933V13.7609ZM1.46775 6.31234H0V9.68819H1.46775V6.31234ZM10.2911 9.09126L15.7113 14.5114L14.5217 15.7094L9.10151 10.2893L9.47274 11.0908V13.394L7.90351 13.3856V7.89326H13.4127L13.3958 9.46249H11.1348L10.2911 9.09126Z", fill: "currentcolor" }));
589
591
 
590
592
  const SvgRotateIcon = (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("g", { clipPath: "url(#clip0_4584_14070)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.6519 2.47368C11.6114 2.92652 12.437 3.61884 13.0482 4.48336C13.6595 5.34787 14.0358 6.35517 14.1404 7.40732H15.0183C14.8676 5.65951 14.0639 4.03158 12.7661 2.84524C11.4683 1.65889 9.77087 1.00044 8.00915 1H7.62308L9.85681 3.24256L10.6519 2.47368ZM6.34994 3.02288L13.019 9.66362L9.66837 13L2.99933 6.35469L6.34994 3.02288ZM6.34994 1.7643C6.11717 1.76444 5.89398 1.85663 5.72945 2.02059L1.99737 5.73684C1.91524 5.81809 1.85006 5.91471 1.80558 6.02113C1.7611 6.12756 1.73821 6.2417 1.73821 6.35698C1.73821 6.47226 1.7611 6.58639 1.80558 6.69282C1.85006 6.79925 1.91524 6.89587 1.99737 6.97712L9.04789 13.9977C9.21599 14.1591 9.43948 14.2507 9.67297 14.254C9.90574 14.2539 10.1289 14.1617 10.2934 13.9977L14.0209 10.2815C14.1036 10.2005 14.1693 10.104 14.2141 9.99754C14.259 9.89107 14.282 9.77678 14.282 9.66133C14.282 9.54588 14.259 9.43158 14.2141 9.32511C14.1693 9.21864 14.1036 9.12212 14.0209 9.04119L6.97502 2.02059C6.81049 1.85663 6.5873 1.76444 6.35453 1.7643H6.34994ZM5.38015 13.5492C4.4155 13.0955 3.58564 12.4002 2.97174 11.5314C2.35784 10.6626 1.98093 9.65002 1.87787 8.59268H1C1.15074 10.3405 1.95441 11.9684 3.25218 13.1548C4.54996 14.3411 6.24743 14.9996 8.00915 15H8.39523L6.16149 12.7757L5.38015 13.5492Z", fill: "currentcolor" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_4584_14070" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 16, height: 16, fill: "white", transform: "matrix(-1 -8.74228e-08 -8.74228e-08 1 16 0)" }))));
591
593
 
592
- const SvgTapIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 12 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("rect", { x: 2.4209, width: 4.26667, height: 4.26667, rx: 2.13333, fill: "currentcolor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.3333 8.57942V13.2691C11.3333 14.7772 10.1749 16 8.7475 16H5.95043C5.13922 16 4.35611 15.6506 3.81234 15.0143C3.56558 14.7258 3.32621 14.378 3.15038 13.9725L0.769979 9.19234C0.538043 8.7247 0.710535 8.15301 1.14677 7.91036C1.791 7.55321 2.58742 7.81366 2.92579 8.49521L3.67937 10.008V3.18639C3.67937 2.61402 4.12264 2.11808 4.66492 2.13366C5.1755 2.14942 5.59284 2.58985 5.59284 3.1427V7.28182C5.59284 6.7235 6.02133 6.27277 6.55032 6.27277C7.07624 6.27277 7.50631 6.72116 7.50631 7.28182V7.83392C7.50631 7.27558 7.9348 6.82486 8.46379 6.82486C8.99072 6.82486 9.4198 7.27445 9.4198 7.83392V8.5794C9.4198 8.02106 9.8483 7.57036 10.3773 7.57036C10.9042 7.57036 11.3333 8.01995 11.3333 8.57942Z", fill: "white", stroke: "currentcolor", strokeLinejoin: "round" }));
594
+ const SvgTapIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 12 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("rect", { x: 2.63159, width: 4.01569, height: 4.01569, rx: 2.00784, fill: "currentcolor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.0197 9.0159V13.4297C11.0197 14.8491 9.92939 15.9999 8.58599 15.9999H5.95346C5.18997 15.9999 4.45292 15.6711 3.94115 15.0723C3.7089 14.8007 3.48361 14.4734 3.31812 14.0917L1.07774 9.59277C0.859449 9.15263 1.0218 8.61456 1.43236 8.38619C2.0387 8.05005 2.78828 8.29518 3.10674 8.93664L3.81599 10.3605V4.88128C3.81599 4.34258 4.23319 3.87581 4.74357 3.89047C5.22412 3.90531 5.6169 4.31983 5.6169 4.84016V7.79462C5.6169 7.26915 6.02019 6.84493 6.51806 6.84493C7.01305 6.84493 7.41782 7.26694 7.41782 7.79462V8.31425C7.41782 7.78876 7.82111 7.36454 8.31897 7.36454C8.81491 7.36454 9.21875 7.78769 9.21875 8.31425V9.01588C9.21875 8.49038 9.62204 8.06619 10.1199 8.06619C10.6159 8.06619 11.0197 8.48933 11.0197 9.0159Z", stroke: "currentcolor", strokeLinejoin: "round" }));
593
595
 
594
596
  const SvgRefreshIcon = (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: "M14 14C13.8232 14 13.6537 13.9298 13.5286 13.8047C13.4036 13.6797 13.3334 13.5101 13.3334 13.3333V10.6667H10.6667C10.4899 10.6667 10.3203 10.5964 10.1953 10.4714C10.0703 10.3464 10 10.1768 10 10C10 9.82319 10.0703 9.65362 10.1953 9.5286C10.3203 9.40357 10.4899 9.33333 10.6667 9.33333H14C14.1769 9.33333 14.3464 9.40357 14.4714 9.5286C14.5965 9.65362 14.6667 9.82319 14.6667 10V13.3333C14.6667 13.5101 14.5965 13.6797 14.4714 13.8047C14.3464 13.9298 14.1769 14 14 14ZM5.33337 6.66667H2.00004C1.82323 6.66667 1.65366 6.59643 1.52864 6.4714C1.40361 6.34638 1.33337 6.17681 1.33337 6V2.66667C1.33337 2.48986 1.40361 2.32029 1.52864 2.19526C1.65366 2.07024 1.82323 2 2.00004 2C2.17685 2 2.34642 2.07024 2.47145 2.19526C2.59647 2.32029 2.66671 2.48986 2.66671 2.66667V5.33333H5.33337C5.51018 5.33333 5.67975 5.40357 5.80478 5.5286C5.9298 5.65362 6.00004 5.82319 6.00004 6C6.00004 6.17681 5.9298 6.34638 5.80478 6.4714C5.67975 6.59643 5.51018 6.66667 5.33337 6.66667Z", fill: "currentcolor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.99995 14.6666C6.35977 14.6669 4.77704 14.0626 3.55448 12.9692C2.33192 11.8757 1.55534 10.37 1.37328 8.73997C1.36365 8.65242 1.37136 8.56384 1.39597 8.47927C1.42057 8.3947 1.4616 8.3158 1.51669 8.24709C1.62796 8.10831 1.78981 8.01942 1.96662 7.99997C2.14343 7.98052 2.32072 8.03211 2.4595 8.14338C2.59828 8.25465 2.68717 8.41649 2.70662 8.59331C2.83839 9.79511 3.37458 10.9165 4.22728 11.7736C5.07999 12.6306 6.19859 13.1726 7.3997 13.3105C8.60081 13.4485 9.81315 13.1742 10.8379 12.5327C11.8627 11.8912 12.6392 10.9206 13.0399 9.77997C13.0649 9.69229 13.1077 9.61066 13.1655 9.54014C13.2232 9.46963 13.2949 9.41171 13.376 9.36998C13.457 9.32825 13.5458 9.3036 13.6368 9.29754C13.7277 9.29148 13.819 9.30414 13.9049 9.33475C13.9908 9.36536 14.0695 9.41326 14.1361 9.47549C14.2027 9.53772 14.2559 9.61296 14.2923 9.69655C14.3287 9.78014 14.3476 9.87032 14.3477 9.96149C14.3479 10.0527 14.3294 10.1429 14.2933 10.2266C13.8325 11.5269 12.9798 12.6522 11.8527 13.4474C10.7255 14.2426 9.3794 14.6686 7.99995 14.6666ZM13.96 7.99997C13.7951 8.00097 13.6358 7.94089 13.5127 7.83132C13.3896 7.72174 13.3114 7.57045 13.2933 7.40664C13.1556 6.21059 12.6173 5.09631 11.766 4.24504C10.9146 3.39377 9.80024 2.8556 8.60418 2.71807C7.40812 2.58054 6.20071 2.85174 5.17835 3.48755C4.15599 4.12337 3.37883 5.08639 2.97328 6.21997C2.94829 6.30766 2.90557 6.38928 2.84778 6.4598C2.78999 6.53032 2.71834 6.58823 2.63727 6.62996C2.55621 6.67169 2.46744 6.69635 2.37647 6.70241C2.28549 6.70847 2.19424 6.6958 2.10836 6.66519C2.02247 6.63459 1.94378 6.58669 1.87714 6.52446C1.8105 6.46223 1.75734 6.38699 1.72093 6.30339C1.68453 6.2198 1.66566 6.12963 1.66549 6.03845C1.66532 5.94728 1.68386 5.85703 1.71995 5.7733C2.2219 4.34935 3.19234 3.13796 4.47245 2.33738C5.75255 1.5368 7.2665 1.19445 8.76651 1.36637C10.2665 1.53828 11.6638 2.21428 12.7295 3.28372C13.7953 4.35317 14.4665 5.75271 14.6333 7.2533C14.652 7.42821 14.6009 7.60344 14.491 7.7408C14.3811 7.87817 14.2214 7.96653 14.0466 7.98664L13.96 7.99997Z", fill: "currentcolor" }));
595
597
 
@@ -644,7 +646,7 @@ Components['delete'] = SvgDelete;
644
646
  Components['details'] = SvgDetails;
645
647
  Components['impactList'] = SvgImpactList;
646
648
  Components['beautify_icon'] = SvgBeautifyIcon;
647
- Components['add_variable'] = SvgAddVariableIcon;
649
+ Components['add_variable_icon'] = SvgAddVariableIcon;
648
650
  Components['replace_file'] = SvgReplaceFile;
649
651
  Components['formate_painter'] = SvgFormatePainter;
650
652
  Components['bold'] = SvgBold;
@@ -814,6 +816,7 @@ Components['no_data'] = SvgNoData;
814
816
  Components['add_user'] = SvgAddUser;
815
817
  Components['add_to_archive'] = SvgAddArchive;
816
818
  Components['remove_user'] = SvgRemoveUser;
819
+ Components['add_variable'] = SvgAddVariable;
817
820
  Components['dashboard_icon'] = SvgDashboardIcon; //TODO:this is temporary icon
818
821
  Components['info_user'] = SvgInfoUser;
819
822
  Components['web_service_icon'] = SvgWebServiceIcon;
@@ -826,8 +829,8 @@ Components['rotate_icon'] = SvgRotateIcon;
826
829
  Components['tap_icon'] = SvgTapIcon;
827
830
  Components['swipe_icon'] = SvgSwipeIcon;
828
831
 
829
- var css_248z$1a = ".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}";
830
- styleInject(css_248z$1a);
832
+ var css_248z$1c = ".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}";
833
+ styleInject(css_248z$1c);
831
834
 
832
835
  const Icon = /*#__PURE__*/React.forwardRef(({
833
836
  name,
@@ -870,7 +873,7 @@ const Icon = /*#__PURE__*/React.forwardRef(({
870
873
  height: `${iconHeight}px`,
871
874
  width: `${iconWidth}px`
872
875
  },
873
- className: classNames('ff-icon-container', {
876
+ className: cx('ff-icon-container', {
874
877
  'ff-icon-click': hoverEffect,
875
878
  'ff-icon-disabled': disabled,
876
879
  'ff-icon-dark': variant === 'dark',
@@ -903,8 +906,8 @@ const Icon = /*#__PURE__*/React.forwardRef(({
903
906
  });
904
907
  });
905
908
 
906
- var css_248z$19 = ".ff-text {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n.ff-text--regular {\n font-weight: 400;\n}\n.ff-text--medium {\n font-weight: 500;\n}\n.ff-text--semi-bold {\n font-weight: 600;\n}\n.ff-text--bold {\n font-weight: 700;\n}\n.ff-text .required-asterisk {\n color: var(--input-error-text-color);\n padding-right: 4px;\n}";
907
- styleInject(css_248z$19);
909
+ var css_248z$1b = ".ff-text {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n.ff-text--regular {\n font-weight: 400;\n}\n.ff-text--medium {\n font-weight: 500;\n}\n.ff-text--semi-bold {\n font-weight: 600;\n}\n.ff-text--bold {\n font-weight: 700;\n}\n.ff-text .required-asterisk {\n color: var(--input-error-text-color);\n padding-right: 4px;\n}";
910
+ styleInject(css_248z$1b);
908
911
 
909
912
  const Typography = ({
910
913
  fontWeight = 'regular',
@@ -967,7 +970,7 @@ const Button$1 = /*#__PURE__*/React.forwardRef(({
967
970
  return jsxRuntime.jsxs("button", {
968
971
  type: type,
969
972
  ref: ref,
970
- className: classNames('ff-button', `ff-button--${size}`, `ff-button--${variant}`, `${className}`, 'button'),
973
+ className: cx('ff-button', `ff-button--${size}`, `ff-button--${variant}`, `${className}`, 'button'),
971
974
  style: {
972
975
  backgroundColor,
973
976
  ...style
@@ -978,14 +981,14 @@ const Button$1 = /*#__PURE__*/React.forwardRef(({
978
981
  children: [iconPosition === 'left' && renderIcon(), jsxRuntime.jsx(Typography, {
979
982
  fontSize: 10,
980
983
  fontWeight: "semi-bold",
981
- className: classNames(`ff-button-${variant}--text`),
984
+ className: cx(`ff-button-${variant}--text`),
982
985
  children: label
983
986
  }), iconPosition === 'right' && renderIcon(), children]
984
987
  });
985
988
  });
986
989
 
987
- var css_248z$18 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\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-drawer-container .ff-overlay {\n position: fixed;\n inset: 0;\n background-color: var(--drawer-title-color);\n opacity: 0.5;\n z-index: 999;\n}\n.ff-drawer-container .child-drawer-overlay {\n z-index: 999;\n}\n.ff-drawer-container .ff-drawer {\n margin-bottom: 4px;\n position: fixed;\n right: 0;\n bottom: 0;\n top: 87px;\n min-width: 450px;\n background-color: var(--primary-button-text-color);\n z-index: 999;\n transform: translateX(100%);\n opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n transform: translateX(0);\n opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n transition: all 0.4s ease-in-out;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n padding: 4px 8px 4px 8px;\n display: flex;\n gap: 10px;\n border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-weight: 600;\n color: var(--drawer-title-color);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n height: 16px;\n width: 16px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n cursor: pointer;\n background-color: var(--button-bg-color);\n outline: none;\n border: none;\n margin: 0;\n border: 1px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-custom-header {\n background-color: var(--drawer-footer-bg);\n padding: 4px 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-body {\n background-color: var(--drawer-footer-bg);\n overflow-y: auto;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 4px 8px 4px 8px;\n display: flex;\n justify-content: space-between;\n border-top: 1px solid var(--drawer-footer-border);\n z-index: 1000;\n background-color: var(--base-bg-color);\n transform: translateY(3px);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .button-container {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .ff-custom-footer {\n background-color: var(--drawer-footer-bg);\n padding: 4px 8px;\n}";
988
- styleInject(css_248z$18);
990
+ var css_248z$1a = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\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-drawer-container .ff-overlay {\n position: fixed;\n inset: 0;\n background-color: var(--drawer-title-color);\n opacity: 0.5;\n z-index: 999;\n}\n.ff-drawer-container .child-drawer-overlay {\n z-index: 999;\n}\n.ff-drawer-container .ff-drawer {\n margin-bottom: 4px;\n position: fixed;\n right: 0;\n bottom: 0;\n top: 87px;\n background-color: var(--primary-button-text-color);\n z-index: 999;\n transform: translateX(100%);\n opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n transform: translateX(0);\n opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n transition: all 0.4s ease-in-out;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n padding: 4px 8px 4px 8px;\n display: flex;\n gap: 10px;\n border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-weight: 600;\n color: var(--drawer-title-color);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n height: 16px;\n width: 16px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n cursor: pointer;\n background-color: var(--button-bg-color);\n outline: none;\n border: none;\n margin: 0;\n border: 1px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-custom-header {\n background-color: var(--drawer-footer-bg);\n padding: 4px 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-body {\n background-color: var(--drawer-footer-bg);\n overflow-y: auto;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 4px 8px 4px 8px;\n display: flex;\n justify-content: space-between;\n border-top: 1px solid var(--drawer-footer-border);\n z-index: 1000;\n background-color: var(--base-bg-color);\n transform: translateY(3px);\n border-radius: 0 0 4px 4px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .button-container {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .ff-custom-footer {\n background-color: var(--drawer-footer-bg);\n padding: 4px 8px;\n}";
991
+ styleInject(css_248z$1a);
989
992
 
990
993
  function useEscapeKey(key) {
991
994
  return callBack => {
@@ -1003,8 +1006,8 @@ function useEscapeKey(key) {
1003
1006
  };
1004
1007
  }
1005
1008
 
1006
- var css_248z$17 = ":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-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}\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-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-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}\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-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}\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-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-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}";
1007
- styleInject(css_248z$17);
1009
+ var css_248z$19 = ":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-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}\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-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-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}\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-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}\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-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-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}";
1010
+ styleInject(css_248z$19);
1008
1011
 
1009
1012
  const ThemeContext = /*#__PURE__*/React.createContext(undefined);
1010
1013
  const ThemeProvider = ({
@@ -1056,7 +1059,10 @@ const Drawer = ({
1056
1059
  rightTertiaryButtonProps = {},
1057
1060
  zIndex = 999,
1058
1061
  secondLayerZIndex = false,
1059
- top
1062
+ top,
1063
+ height,
1064
+ width,
1065
+ right = 0
1060
1066
  }) => {
1061
1067
  const [isExpanded, setIsExpanded] = React.useState(false);
1062
1068
  const handleEsc = useEscapeKey('Escape');
@@ -1085,19 +1091,22 @@ const Drawer = ({
1085
1091
  const themeContext = React.useContext(ThemeContext);
1086
1092
  const currentTheme = themeContext?.currentTheme;
1087
1093
  return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsxs("div", {
1088
- className: classNames('ff-drawer-container', currentTheme),
1094
+ className: cx('ff-drawer-container', currentTheme),
1089
1095
  children: [overlay && jsxRuntime.jsx("div", {
1090
- className: classNames(secondLayerZIndex && 'child-drawer-overlay', 'ff-overlay')
1096
+ className: cx(secondLayerZIndex && 'child-drawer-overlay', 'ff-overlay')
1091
1097
  }), jsxRuntime.jsxs("div", {
1092
- className: classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
1098
+ className: cx('ff-drawer', `ff-drawer--${drawerSize}`, {
1093
1099
  'ff-drawer--open': isOpen
1094
1100
  }),
1095
1101
  style: {
1096
1102
  zIndex,
1097
- top
1103
+ top,
1104
+ height,
1105
+ width,
1106
+ right
1098
1107
  },
1099
1108
  children: [showHeader && jsxRuntime.jsx("div", {
1100
- className: classNames('ff-drawer-header', {
1109
+ className: cx('ff-drawer-header', {
1101
1110
  'ff-custom-header': customHeader
1102
1111
  }),
1103
1112
  children: customHeader ? jsxRuntime.jsx("div", {
@@ -1146,12 +1155,12 @@ const Drawer = ({
1146
1155
  })]
1147
1156
  })
1148
1157
  }), jsxRuntime.jsx("div", {
1149
- className: classNames('ff-drawer-body', {
1158
+ className: cx('ff-drawer-body', {
1150
1159
  'no-footer': !isFooterRequired
1151
1160
  }),
1152
1161
  children: children
1153
1162
  }), isFooterRequired && jsxRuntime.jsx("div", {
1154
- className: classNames('ff-drawer-footer', {
1163
+ className: cx('ff-drawer-footer', {
1155
1164
  'ff-custom-footer': customFooter
1156
1165
  }),
1157
1166
  children: customFooter || footerContent || jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -1198,14 +1207,14 @@ const Drawer = ({
1198
1207
  }), document.body);
1199
1208
  };
1200
1209
 
1201
- var css_248z$16 = ".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-accordion {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n min-width: fit-content;\n}\n.ff-accordion .accordion-header {\n display: flex;\n justify-content: space-between;\n min-height: 32px;\n align-items: center;\n cursor: pointer;\n}\n.ff-accordion .accordion-header .header-title {\n padding: 8px;\n}\n.ff-accordion .accordion-header .accordion-arrow {\n display: flex;\n padding: 8px;\n align-items: center;\n transition: transform 0.3s ease;\n}\n.ff-accordion .accordion-header .accordion-arrow.expanded {\n transform: rotate(180deg);\n}\n.ff-accordion .accordion-header .accordion-arrow:hover {\n color: var(--tooltip-bg-color);\n}\n.ff-accordion .accordion-header.expanded {\n background-color: var(--hover-color);\n border-bottom: 1px solid var(--hover-color);\n}\n.ff-accordion .accordion-header:hover {\n background-color: var(--hover-color);\n}\n.ff-accordion .accordion-content {\n padding: 8px;\n}";
1202
- styleInject(css_248z$16);
1210
+ var css_248z$18 = ".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-accordion {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n min-width: fit-content;\n}\n.ff-accordion .accordion-header {\n display: flex;\n justify-content: space-between;\n min-height: 32px;\n align-items: center;\n cursor: pointer;\n}\n.ff-accordion .accordion-header .header-title {\n padding: 8px;\n}\n.ff-accordion .accordion-header .accordion-arrow {\n display: flex;\n padding: 8px;\n align-items: center;\n transition: transform 0.3s ease;\n}\n.ff-accordion .accordion-header .accordion-arrow.expanded {\n transform: rotate(180deg);\n}\n.ff-accordion .accordion-header .accordion-arrow:hover {\n color: var(--tooltip-bg-color);\n}\n.ff-accordion .accordion-header.expanded {\n background-color: var(--hover-color);\n border-bottom: 1px solid var(--hover-color);\n}\n.ff-accordion .accordion-header:hover {\n background-color: var(--hover-color);\n}\n.ff-accordion .accordion-content {\n padding: 8px;\n}";
1211
+ styleInject(css_248z$18);
1203
1212
 
1204
- var css_248z$15 = "/* global.css or component CSS */\nbody {\n font-family: \"Poppins\", sans-serif;\n}";
1205
- styleInject(css_248z$15);
1213
+ var css_248z$17 = "/* global.css or component CSS */\nbody {\n font-family: \"Poppins\", sans-serif;\n}";
1214
+ styleInject(css_248z$17);
1206
1215
 
1207
- var css_248z$14 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-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-tooltip-container {\n cursor: pointer;\n display: inline-block;\n}\n\n.ff-tooltip {\n position: fixed;\n width: max-content;\n max-width: 60vw;\n word-wrap: break-word;\n background-color: var(--tooltip-bg-color);\n line-height: 18px;\n color: var(--tooltip-text-color);\n text-align: center;\n border-radius: 5px;\n padding: 4px 8px;\n opacity: 0;\n z-index: 10000;\n}\n.ff-tooltip--visible {\n opacity: 1;\n transition: opacity 0.3s;\n}";
1208
- styleInject(css_248z$14);
1216
+ var css_248z$16 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-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-tooltip-container {\n cursor: pointer;\n display: inline-block;\n}\n\n.ff-tooltip {\n position: fixed;\n width: max-content;\n max-width: 60vw;\n word-wrap: break-word;\n background-color: var(--tooltip-bg-color);\n line-height: 18px;\n color: var(--tooltip-text-color);\n text-align: center;\n border-radius: 5px;\n padding: 4px 8px;\n opacity: 0;\n z-index: 10000;\n}\n.ff-tooltip--visible {\n opacity: 1;\n transition: opacity 0.3s;\n}";
1217
+ styleInject(css_248z$16);
1209
1218
 
1210
1219
  const checkEmpty = value => {
1211
1220
  // Check for null or undefined
@@ -1360,7 +1369,7 @@ const Tooltip = ({
1360
1369
  }, [isVisible]);
1361
1370
  return jsxRuntime.jsxs("div", {
1362
1371
  ref: tooltipContainerRef,
1363
- className: classNames('ff-tooltip-container', currentTheme),
1372
+ className: cx('ff-tooltip-container', currentTheme),
1364
1373
  onMouseEnter: () => setIsVisible(true),
1365
1374
  onMouseLeave: () => setIsVisible(false),
1366
1375
  children: [children, isVisible && !disabled && !isTitleEmpty(title) && /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsx("div", {
@@ -1368,7 +1377,7 @@ const Tooltip = ({
1368
1377
  style: {
1369
1378
  ...styles[placement]
1370
1379
  },
1371
- className: classNames('ff-tooltip', currentTheme, {
1380
+ className: cx('ff-tooltip', currentTheme, {
1372
1381
  'ff-tooltip--visible': isVisible
1373
1382
  }),
1374
1383
  children: title
@@ -1428,8 +1437,8 @@ const Accordion = ({
1428
1437
  });
1429
1438
  };
1430
1439
 
1431
- var css_248z$13 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .default-label {\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-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .active-default-label, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .error-text {\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-multiselect-container-with-icon {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n width: 100%;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper {\n flex-grow: 1;\n box-sizing: border-box;\n transition: all 0.3s ease;\n cursor: pointer;\n position: relative;\n border: 1px solid var(--default-icon-color);\n border-radius: 4px;\n background: var(--drawer-footer-bg);\n min-width: 150px;\n height: 32px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect {\n position: relative;\n padding: 6px 3px;\n border: none;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main {\n display: flex;\n flex: 1;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .default-label {\n font-family: Poppins;\n font-weight: 400;\n letter-spacing: 0.5px;\n transition: all 0.3s ease;\n color: var(--default-icon-color);\n line-height: 18px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .active-default-label {\n font-size: 8px !important;\n height: 8px;\n font-family: Poppins;\n font-weight: 400;\n letter-spacing: 0.5px;\n transition: all 0.3s ease;\n background-color: var(--multi-select-label-bg);\n line-height: 12px;\n color: var(--default-icon-color);\n padding: 0 4px;\n position: absolute;\n left: 8px;\n top: -6px;\n pointer-events: none;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 5px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip {\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n border: 0.5px solid var(--tabs-border-color);\n padding-left: 4px;\n gap: 4px;\n height: 16px;\n border-radius: 15px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n line-height: 14px;\n color: var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label.label-padding {\n padding-right: 3px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-close-icon {\n color: var(--brand-color);\n cursor: pointer;\n padding: 0px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container {\n flex: 1;\n min-width: 20px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input {\n width: 100%;\n min-width: 30px;\n max-width: calc(100% - 0px);\n padding: 2px;\n box-sizing: border-box;\n border: none;\n font-size: 12px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input:focus {\n outline: none;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect .ff-multiselect-more-chip {\n display: flex;\n align-items: center;\n width: 16px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow {\n transition: transform 0.3s ease;\n transform: rotate(360deg);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow svg path {\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow--opened-dropdown {\n transform: rotate(180deg);\n transition: transform 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover {\n border: 1px solid var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-select-arrow svg path {\n fill: var(--tooltip-bg-color);\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--with-options {\n height: fit-content;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown {\n border: 1px solid var(--brand-color);\n height: fit-content;\n cursor: default;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover {\n border: 1px solid var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error {\n border: 1px solid var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover {\n border: 1px solid var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled {\n pointer-events: none;\n border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover {\n border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-select-arrow svg path {\n fill: var(--multi-select-border);\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-select-arrow svg path {\n fill: var(--multi-select-border);\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n color: var(--text-color-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .error-text {\n position: absolute;\n margin-top: 4px;\n left: 12px;\n color: var(--error-light);\n letter-spacing: 0.5px;\n}\n.ff-multiselect-container-with-icon .ff-manage-labels-text {\n position: absolute;\n right: 0;\n margin-top: 4px;\n}\n.ff-multiselect-container-with-icon .ff-label-plus-icon {\n cursor: pointer;\n}";
1432
- styleInject(css_248z$13);
1440
+ var css_248z$15 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .default-label {\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-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .active-default-label, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .error-text {\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-multiselect-container-with-icon {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n width: 100%;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper {\n flex-grow: 1;\n box-sizing: border-box;\n transition: all 0.3s ease;\n cursor: pointer;\n position: relative;\n border: 1px solid var(--default-icon-color);\n border-radius: 4px;\n background: var(--drawer-footer-bg);\n min-width: 150px;\n height: 32px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect {\n position: relative;\n padding: 6px 3px;\n border: none;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main {\n display: flex;\n flex: 1;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .default-label {\n font-family: Poppins;\n font-weight: 400;\n letter-spacing: 0.5px;\n transition: all 0.3s ease;\n color: var(--default-icon-color);\n line-height: 18px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .active-default-label {\n font-size: 8px !important;\n height: 8px;\n font-family: Poppins;\n font-weight: 400;\n letter-spacing: 0.5px;\n transition: all 0.3s ease;\n background-color: var(--multi-select-label-bg);\n line-height: 12px;\n color: var(--default-icon-color);\n padding: 0 4px;\n position: absolute;\n left: 8px;\n top: -6px;\n pointer-events: none;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 5px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip {\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n border: 0.5px solid var(--tabs-border-color);\n padding-left: 4px;\n gap: 4px;\n height: 16px;\n border-radius: 15px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n line-height: 14px;\n color: var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label.label-padding {\n padding-right: 3px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-close-icon {\n color: var(--brand-color);\n cursor: pointer;\n padding: 0px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container {\n flex: 1;\n min-width: 20px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input {\n width: 100%;\n min-width: 30px;\n max-width: calc(100% - 0px);\n padding: 2px;\n box-sizing: border-box;\n border: none;\n font-size: 12px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input:focus {\n outline: none;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect .ff-multiselect-more-chip {\n display: flex;\n align-items: center;\n width: 16px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow {\n transition: transform 0.3s ease;\n transform: rotate(360deg);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow svg path {\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow--opened-dropdown {\n transform: rotate(180deg);\n transition: transform 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover {\n border: 1px solid var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-select-arrow svg path {\n fill: var(--tooltip-bg-color);\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--with-options {\n height: fit-content;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown {\n border: 1px solid var(--brand-color);\n height: fit-content;\n cursor: default;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover {\n border: 1px solid var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error {\n border: 1px solid var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover {\n border: 1px solid var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled {\n pointer-events: none;\n border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover {\n border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-select-arrow svg path {\n fill: var(--multi-select-border);\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-select-arrow svg path {\n fill: var(--multi-select-border);\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n color: var(--text-color-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .error-text {\n position: absolute;\n margin-top: 4px;\n left: 12px;\n color: var(--error-light);\n letter-spacing: 0.5px;\n}\n.ff-multiselect-container-with-icon .ff-manage-labels-text {\n position: absolute;\n right: 0;\n margin-top: 4px;\n}\n.ff-multiselect-container-with-icon .ff-label-plus-icon {\n cursor: pointer;\n}";
1441
+ styleInject(css_248z$15);
1433
1442
 
1434
1443
  const dropdownDefaultCSSData$1 = {
1435
1444
  verticalMargin: 4,
@@ -1437,11 +1446,11 @@ const dropdownDefaultCSSData$1 = {
1437
1446
  maxDropdownHeight: 160
1438
1447
  };
1439
1448
 
1440
- var css_248z$12 = ".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, .ff-multiselect-dropdown-container .no-options, .ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\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-multiselect-dropdown-container {\n position: absolute;\n background: var(--drawer-footer-bg);\n z-index: 1000;\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n border: 0.5px solid var(--ff-select-option-border-color);\n border-radius: 4px;\n box-sizing: border-box;\n margin-block: 4px;\n max-height: 160px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper {\n max-height: 128px;\n overflow-y: auto;\n border-radius: 2px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 40px;\n border-radius: 12px 0px 0px 0px;\n background: var(--description-text);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-track {\n background: var(--ff-select-scroll-track-bg);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb {\n background: var(--ff-select-scroll-thumb-color);\n border-radius: 10px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb:hover {\n background: var(--ff-select-scroll-thumb-hover);\n}\n.ff-multiselect-dropdown-container .no-options {\n color: var(--pop-up-background-blur);\n text-align: center;\n margin: 0;\n padding: 10px;\n line-height: 12px;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n height: 32px;\n padding: 4px 8px;\n gap: 4px;\n border-radius: 4px 0px 0px 0px;\n background-color: white;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n color: var(--ff-select-text-color);\n}\n.ff-multiselect-dropdown-container .dropdown-option-container:hover {\n background-color: var(--hover-color);\n}\n.ff-multiselect-dropdown-container:focus {\n outline: none;\n}\n.ff-multiselect-dropdown-container .select-button-container {\n box-sizing: border-box;\n width: 100%;\n border-top: 1px solid var(--slider-table-color);\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n}";
1441
- styleInject(css_248z$12);
1449
+ var css_248z$14 = ".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, .ff-multiselect-dropdown-container .no-options, .ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\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-multiselect-dropdown-container {\n position: absolute;\n background: var(--drawer-footer-bg);\n z-index: 1000;\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n border: 0.5px solid var(--ff-select-option-border-color);\n border-radius: 4px;\n box-sizing: border-box;\n margin-block: 4px;\n max-height: 160px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper {\n max-height: 128px;\n overflow-y: auto;\n border-radius: 2px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 40px;\n border-radius: 12px 0px 0px 0px;\n background: var(--description-text);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-track {\n background: var(--ff-select-scroll-track-bg);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb {\n background: var(--ff-select-scroll-thumb-color);\n border-radius: 10px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb:hover {\n background: var(--ff-select-scroll-thumb-hover);\n}\n.ff-multiselect-dropdown-container .no-options {\n color: var(--pop-up-background-blur);\n text-align: center;\n margin: 0;\n padding: 10px;\n line-height: 12px;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n height: 32px;\n padding: 4px 8px;\n gap: 4px;\n border-radius: 4px 0px 0px 0px;\n background-color: white;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n color: var(--ff-select-text-color);\n}\n.ff-multiselect-dropdown-container .dropdown-option-container:hover {\n background-color: var(--hover-color);\n}\n.ff-multiselect-dropdown-container:focus {\n outline: none;\n}\n.ff-multiselect-dropdown-container .select-button-container {\n box-sizing: border-box;\n width: 100%;\n border-top: 1px solid var(--slider-table-color);\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n}";
1450
+ styleInject(css_248z$14);
1442
1451
 
1443
- var css_248z$11 = ".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-checkbox--overlay {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n cursor: pointer;\n position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n width: 16px;\n height: 16px;\n border: 1px solid var(--checkbox-border-color);\n box-sizing: border-box;\n border-radius: 2px;\n margin-right: 4px;\n background-color: var(--checkbox-bg-color);\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::before {\n content: \"\";\n width: 9px;\n height: 2px;\n background-color: var(--checkbox-partial-color);\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(180deg);\n opacity: 0;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::after {\n content: \"\";\n width: 16px;\n height: 16px;\n border: 4px solid var(--checkbox-hover-color);\n border-radius: 4px;\n position: absolute;\n opacity: 0;\n background-color: var(--checkbox-hover-color);\n z-index: -1;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover {\n border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom {\n background: var(--brand-color);\n border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom {\n background: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom {\n opacity: 0.5;\n cursor: not-allowed;\n border: 1px solid var(--checkbox-border-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom::after {\n opacity: 0;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial {\n background-color: var(--brand-color);\n border: none;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial::before {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover {\n background-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover::after {\n opacity: 1;\n}";
1444
- styleInject(css_248z$11);
1452
+ var css_248z$13 = ".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-checkbox--overlay {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n cursor: pointer;\n position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n width: 16px;\n height: 16px;\n border: 1px solid var(--checkbox-border-color);\n box-sizing: border-box;\n border-radius: 2px;\n margin-right: 4px;\n background-color: var(--checkbox-bg-color);\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::before {\n content: \"\";\n width: 9px;\n height: 2px;\n background-color: var(--checkbox-partial-color);\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(180deg);\n opacity: 0;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::after {\n content: \"\";\n width: 16px;\n height: 16px;\n border: 4px solid var(--checkbox-hover-color);\n border-radius: 4px;\n position: absolute;\n opacity: 0;\n background-color: var(--checkbox-hover-color);\n z-index: -1;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover {\n border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom {\n background: var(--brand-color);\n border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--passed {\n background-color: var(--ff-card-passed-status-bg-color);\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--failed {\n background-color: var(--ff-card-failed-status-bg-color);\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--warning {\n background-color: var(--ff-card-warning-status-bg-color);\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--skipped {\n background-color: var(--ff-card-skipped-status-bg-color);\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--flaky {\n background-color: var(-- ff-card-flaky-status-bg-color);\n border-color: var(-- ff-card-flaky-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom {\n background: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--passed {\n background: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--failed {\n background: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--warning {\n background: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--skipped {\n background: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--flaky {\n background: var(-- ff-card-flaky-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom {\n opacity: 0.5;\n cursor: not-allowed;\n border: 1px solid var(--checkbox-border-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom::after {\n opacity: 0;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial {\n background-color: var(--brand-color);\n border: none;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial::before {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover {\n background-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox--passed {\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--failed {\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--warning {\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--skipped {\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--flaky {\n border-color: var(-- ff-card-flaky-status-bg-color);\n}";
1453
+ styleInject(css_248z$13);
1445
1454
 
1446
1455
  const Checkbox = ({
1447
1456
  id,
@@ -1450,7 +1459,8 @@ const Checkbox = ({
1450
1459
  disabled = false,
1451
1460
  checked: initialChecked = false,
1452
1461
  partial = false,
1453
- onChange
1462
+ onChange,
1463
+ variant
1454
1464
  }) => {
1455
1465
  const [checked, setChecked] = React.useState(initialChecked);
1456
1466
  React.useEffect(() => {
@@ -1468,9 +1478,11 @@ const Checkbox = ({
1468
1478
  onChange: onChange,
1469
1479
  disabled: disabled
1470
1480
  }), jsxRuntime.jsx("span", {
1471
- className: classNames('ff-checkbox-custom', {
1481
+ className: cx('ff-checkbox-custom', {
1472
1482
  'ff-checkbox-checked': checked,
1473
- 'ff-storybook-checkbox--partial': partial && !checked
1483
+ 'ff-storybook-checkbox--partial': partial && !checked,
1484
+ [`ff-checkbox--${variant}`]: variant,
1485
+ [`ff-checkbox-checked--${variant}`]: checked && variant
1474
1486
  }),
1475
1487
  children: checked && jsxRuntime.jsx(Icon, {
1476
1488
  name: "tick",
@@ -1540,7 +1552,7 @@ const Dropdown$2 = /*#__PURE__*/React.forwardRef(({
1540
1552
  return jsxRuntime.jsxs("div", {
1541
1553
  role: "listbox",
1542
1554
  ref: ref,
1543
- className: classNames('ff-multiselect-dropdown-container', {
1555
+ className: cx('ff-multiselect-dropdown-container', {
1544
1556
  [currentTheme || '']: true
1545
1557
  }),
1546
1558
  style: {
@@ -1836,7 +1848,7 @@ const MultiSelect = ({
1836
1848
  className: `ff-multiselect-container-with-icon ${className}`,
1837
1849
  children: [jsxRuntime.jsxs("div", {
1838
1850
  ref: selectWrapper,
1839
- className: classNames('ff-multiselect-wrapper', {
1851
+ className: cx('ff-multiselect-wrapper', {
1840
1852
  'ff-multiselect-wrapper--with-options': selectedOptions?.length,
1841
1853
  'ff-multiselect-wrapper--opened-dropdown': isOpen,
1842
1854
  'ff-multiselect-wrapper--error': isFieldSkipped && required || inputError,
@@ -1849,7 +1861,7 @@ const MultiSelect = ({
1849
1861
  className: "ff-multiselect__main",
1850
1862
  children: [checkEmpty(highlightedMachine) ? jsxRuntime.jsx(Typography, {
1851
1863
  as: "span",
1852
- className: classNames({
1864
+ className: cx({
1853
1865
  'active-default-label': isOpen || checkEmpty(highlightedMachine) && !withSelectButton && selectedOptions?.length || isFieldSkipped && required,
1854
1866
  'default-label': !isOpen && !selectedOptions?.length
1855
1867
  }),
@@ -1911,7 +1923,7 @@ const MultiSelect = ({
1911
1923
  className: "ff-multiselect__toggle",
1912
1924
  children: jsxRuntime.jsx(Icon, {
1913
1925
  name: "arrow_down",
1914
- className: classNames({
1926
+ className: cx({
1915
1927
  'ff-select-arrow--opened-dropdown': isOpen,
1916
1928
  'ff-select-arrow': !isOpen
1917
1929
  }),
@@ -1952,8 +1964,8 @@ const MultiSelect = ({
1952
1964
  });
1953
1965
  };
1954
1966
 
1955
- var css_248z$10 = ".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-toaster-overlay {\n position: fixed;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100%;\n display: flex;\n pointer-events: none;\n justify-content: flex-end;\n align-items: flex-end;\n}\n.ff-toaster-overlay .ff-toaster {\n background-color: var(--drawer-footer-bg);\n display: flex;\n border-radius: 10px;\n margin: 16px;\n pointer-events: auto;\n min-width: 320px;\n max-width: 600px;\n gap: 8px;\n box-shadow: 0px 1px 4px 0px var(--toaster-boxshadow);\n animation: slideInToasterBottomRight 0.5s forwards;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container {\n padding: 8px;\n display: flex;\n border-radius: 10px;\n gap: 8px;\n width: 100%;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 8px;\n padding: 1px;\n -webkit-mask: linear-gradient(var(--drawer-footer-bg) 0 0) content-box, linear-gradient(var(--drawer-footer-bg) 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n z-index: -1;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n gap: 4px;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__title {\n max-width: 500px;\n word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__message {\n max-width: 500px;\n word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__prompt {\n margin-top: 4px;\n display: flex;\n gap: 10px;\n}\n.ff-toaster-overlay .ff-toaster--success::before {\n background: var(--toaster-success-border);\n}\n.ff-toaster-overlay .ff-toaster--warning::before {\n background: var(--toaster-warning-border);\n}\n.ff-toaster-overlay .ff-toaster--info::before {\n background: var(--toaster-info-border);\n}\n.ff-toaster-overlay .ff-toaster--danger::before, .ff-toaster-overlay .ff-toaster--confirm::before {\n background: var(--toaster-danger_confirm-border);\n}\n.ff-toaster-overlay .ff-toaster .ff-close-icon-wrapper {\n box-sizing: border-box;\n cursor: pointer;\n height: fit-content;\n width: fit-content;\n border-radius: 8px;\n padding: 8px;\n background: var(--toast-close-icon-wrapper-bg);\n margin-left: auto;\n}\n.ff-toaster-overlay.exiting {\n animation: slideOutToasterBottomRight 0.5s forwards;\n}\n\n@keyframes slideOutToasterBottomRight {\n from {\n transform: translateX(0%);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes slideInToasterBottomRight {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0%);\n }\n}\n.fireflink-stories-toaster-container .fireflink-stories-toaster-container-row {\n display: flex;\n gap: 5px;\n margin: 15px;\n}";
1956
- styleInject(css_248z$10);
1967
+ var css_248z$12 = ".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-toaster-overlay {\n position: fixed;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100%;\n display: flex;\n pointer-events: none;\n justify-content: flex-end;\n align-items: flex-end;\n}\n.ff-toaster-overlay .ff-toaster {\n background-color: var(--drawer-footer-bg);\n display: flex;\n border-radius: 10px;\n margin: 16px;\n pointer-events: auto;\n min-width: 320px;\n max-width: 600px;\n gap: 8px;\n box-shadow: 0px 1px 4px 0px var(--toaster-boxshadow);\n animation: slideInToasterBottomRight 0.5s forwards;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container {\n padding: 8px;\n display: flex;\n border-radius: 10px;\n gap: 8px;\n width: 100%;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 8px;\n padding: 1px;\n -webkit-mask: linear-gradient(var(--drawer-footer-bg) 0 0) content-box, linear-gradient(var(--drawer-footer-bg) 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n z-index: -1;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n gap: 4px;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__title {\n max-width: 500px;\n word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__message {\n max-width: 500px;\n word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__prompt {\n margin-top: 4px;\n display: flex;\n gap: 10px;\n}\n.ff-toaster-overlay .ff-toaster--success::before {\n background: var(--toaster-success-border);\n}\n.ff-toaster-overlay .ff-toaster--warning::before {\n background: var(--toaster-warning-border);\n}\n.ff-toaster-overlay .ff-toaster--info::before {\n background: var(--toaster-info-border);\n}\n.ff-toaster-overlay .ff-toaster--danger::before, .ff-toaster-overlay .ff-toaster--confirm::before {\n background: var(--toaster-danger_confirm-border);\n}\n.ff-toaster-overlay .ff-toaster .ff-close-icon-wrapper {\n box-sizing: border-box;\n cursor: pointer;\n height: fit-content;\n width: fit-content;\n border-radius: 8px;\n padding: 8px;\n background: var(--toast-close-icon-wrapper-bg);\n margin-left: auto;\n}\n.ff-toaster-overlay.exiting {\n animation: slideOutToasterBottomRight 0.5s forwards;\n}\n\n@keyframes slideOutToasterBottomRight {\n from {\n transform: translateX(0%);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes slideInToasterBottomRight {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0%);\n }\n}\n.fireflink-stories-toaster-container .fireflink-stories-toaster-container-row {\n display: flex;\n gap: 5px;\n margin: 15px;\n}";
1968
+ styleInject(css_248z$12);
1957
1969
 
1958
1970
  const Toaster = ({
1959
1971
  isOpen = false,
@@ -2009,7 +2021,7 @@ const Toaster = ({
2009
2021
  return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsx("div", {
2010
2022
  role: "alert",
2011
2023
  "aria-live": "assertive",
2012
- className: classNames('ff-toaster-overlay', {
2024
+ className: cx('ff-toaster-overlay', {
2013
2025
  exiting: isExiting,
2014
2026
  [currentTheme || '']: true
2015
2027
  }),
@@ -2017,7 +2029,7 @@ const Toaster = ({
2017
2029
  zIndex
2018
2030
  },
2019
2031
  children: jsxRuntime.jsx("div", {
2020
- className: classNames('ff-toaster', {
2032
+ className: cx('ff-toaster', {
2021
2033
  exiting: isExiting
2022
2034
  }),
2023
2035
  children: jsxRuntime.jsxs("div", {
@@ -2062,8 +2074,8 @@ const Toaster = ({
2062
2074
  }), document.body);
2063
2075
  };
2064
2076
 
2065
- var css_248z$$ = "/* Container */\n.ff-container {\n margin-right: auto;\n margin-left: auto;\n width: 90%;\n display: grid;\n}\n\n.ff-container-fluid {\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n display: grid;\n}\n\n/* Row */\n.ff-row {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n}\n\n/* Column sizes based on a 12-column layout */\n.ff-col {\n grid-column: span 12;\n}\n\n.ff-col-1 {\n grid-column: span 1;\n}\n\n.ff-col-2 {\n grid-column: span 2;\n}\n\n.ff-col-3 {\n grid-column: span 3;\n}\n\n.ff-col-4 {\n grid-column: span 4;\n}\n\n.ff-col-5 {\n grid-column: span 5;\n}\n\n.ff-col-6 {\n grid-column: span 6;\n}\n\n.ff-col-7 {\n grid-column: span 7;\n}\n\n.ff-col-8 {\n grid-column: span 8;\n}\n\n.ff-col-9 {\n grid-column: span 9;\n}\n\n.ff-col-10 {\n grid-column: span 10;\n}\n\n.ff-col-11 {\n grid-column: span 11;\n}\n\n.ff-col-12 {\n grid-column: span 12;\n}\n\n@media (max-width: 768px) {\n /* Stacking columns on small screens */\n .ff-col {\n grid-column: span 12;\n }\n}";
2066
- styleInject(css_248z$$);
2077
+ var css_248z$11 = "/* Container */\n.ff-container {\n margin-right: auto;\n margin-left: auto;\n width: 90%;\n display: grid;\n}\n\n.ff-container-fluid {\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n display: grid;\n}\n\n/* Row */\n.ff-row {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n}\n\n/* Column sizes based on a 12-column layout */\n.ff-col {\n grid-column: span 12;\n}\n\n.ff-col-1 {\n grid-column: span 1;\n}\n\n.ff-col-2 {\n grid-column: span 2;\n}\n\n.ff-col-3 {\n grid-column: span 3;\n}\n\n.ff-col-4 {\n grid-column: span 4;\n}\n\n.ff-col-5 {\n grid-column: span 5;\n}\n\n.ff-col-6 {\n grid-column: span 6;\n}\n\n.ff-col-7 {\n grid-column: span 7;\n}\n\n.ff-col-8 {\n grid-column: span 8;\n}\n\n.ff-col-9 {\n grid-column: span 9;\n}\n\n.ff-col-10 {\n grid-column: span 10;\n}\n\n.ff-col-11 {\n grid-column: span 11;\n}\n\n.ff-col-12 {\n grid-column: span 12;\n}\n\n@media (max-width: 768px) {\n /* Stacking columns on small screens */\n .ff-col {\n grid-column: span 12;\n }\n}";
2078
+ styleInject(css_248z$11);
2067
2079
 
2068
2080
  const Container = ({
2069
2081
  children,
@@ -2073,7 +2085,7 @@ const Container = ({
2073
2085
  }) => {
2074
2086
  const containerClassName = fluid ? 'ff-container-fluid' : 'ff-container';
2075
2087
  return jsxRuntime.jsx("div", {
2076
- className: classNames(containerClassName, className),
2088
+ className: cx(containerClassName, className),
2077
2089
  style: {
2078
2090
  gap
2079
2091
  },
@@ -2086,7 +2098,7 @@ const Row$1 = ({
2086
2098
  className = ''
2087
2099
  }) => {
2088
2100
  return jsxRuntime.jsx("div", {
2089
- className: classNames('ff-row', className),
2101
+ className: cx('ff-row', className),
2090
2102
  style: {
2091
2103
  gap
2092
2104
  },
@@ -2100,13 +2112,13 @@ const Col = ({
2100
2112
  }) => {
2101
2113
  const colClassName = `ff-col-${size}`;
2102
2114
  return jsxRuntime.jsx("div", {
2103
- className: classNames(colClassName, className),
2115
+ className: cx(colClassName, className),
2104
2116
  children: children
2105
2117
  });
2106
2118
  };
2107
2119
 
2108
- var css_248z$_ = ".ff--switch-container {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff--switch-container .ff--switch-checkbox {\n height: 0;\n width: 0;\n display: none;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button {\n right: -1px;\n border: 1px solid var(--brand-color);\n background: var(--toggle-button-bg-color);\n transition: all 0.3s;\n box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button .ff-checked-icon--primary svg path {\n fill: var(--brand-color);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label--primary {\n background: var(--brand-color);\n transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label:disabled {\n cursor: default;\n color: var(--disable-color);\n background: var(--disable-color);\n}\n.ff--switch-container .ff--switch-checkbox:disabled {\n cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n border-radius: 8px;\n position: relative;\n background: var(--toggle-strip-color);\n transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-label--disabled {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button {\n position: absolute;\n left: 0;\n border: 1px solid var(--toggle-strip-color);\n display: flex;\n background: var(--toggle-button-bg-color);\n border-radius: 50%;\n box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n transition: all 0.3s;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button .ff-unchecked-icon--primary svg path {\n fill: var(--toggle-disable-icon-color);\n}\n.ff--switch-container .default--small {\n width: 24px;\n height: 10px;\n}\n.ff--switch-container .default--small .ff--switch-button {\n width: 16px;\n height: 16px;\n transform: translateX(0);\n}\n.ff--switch-container .default--small .ff--switch-button.checked {\n transform: translateX(10px);\n}\n.ff--switch-container .default--medium {\n width: 32px;\n height: 14px;\n}\n.ff--switch-container .default--medium .ff--switch-button {\n width: 20px;\n height: 20px;\n transform: translateX(0);\n}\n.ff--switch-container .default--medium .ff--switch-button.checked {\n transform: translateX(14px);\n}\n.ff--switch-container .default--large {\n width: 40px;\n height: 16px;\n}\n.ff--switch-container .default--large .ff--switch-button {\n width: 24px;\n height: 24px;\n transform: translateX(0);\n}\n.ff--switch-container .default--large .ff--switch-button.checked {\n transform: translateX(16px);\n}";
2109
- styleInject(css_248z$_);
2120
+ var css_248z$10 = ".ff--switch-container {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff--switch-container .ff--switch-checkbox {\n height: 0;\n width: 0;\n display: none;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button {\n right: -1px;\n border: 1px solid var(--brand-color);\n background: var(--toggle-button-bg-color);\n transition: all 0.3s;\n box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button .ff-checked-icon--primary svg path {\n fill: var(--brand-color);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label--primary {\n background: var(--brand-color);\n transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label:disabled {\n cursor: default;\n color: var(--disable-color);\n background: var(--disable-color);\n}\n.ff--switch-container .ff--switch-checkbox:disabled {\n cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n border-radius: 8px;\n position: relative;\n background: var(--toggle-strip-color);\n transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-label--disabled {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button {\n position: absolute;\n left: 0;\n border: 1px solid var(--toggle-strip-color);\n display: flex;\n background: var(--toggle-button-bg-color);\n border-radius: 50%;\n box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n transition: all 0.3s;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button .ff-unchecked-icon--primary svg path {\n fill: var(--toggle-disable-icon-color);\n}\n.ff--switch-container .default--small {\n width: 24px;\n height: 10px;\n}\n.ff--switch-container .default--small .ff--switch-button {\n width: 16px;\n height: 16px;\n transform: translateX(0);\n}\n.ff--switch-container .default--small .ff--switch-button.checked {\n transform: translateX(10px);\n}\n.ff--switch-container .default--medium {\n width: 32px;\n height: 14px;\n}\n.ff--switch-container .default--medium .ff--switch-button {\n width: 20px;\n height: 20px;\n transform: translateX(0);\n}\n.ff--switch-container .default--medium .ff--switch-button.checked {\n transform: translateX(14px);\n}\n.ff--switch-container .default--large {\n width: 40px;\n height: 16px;\n}\n.ff--switch-container .default--large .ff--switch-button {\n width: 24px;\n height: 24px;\n transform: translateX(0);\n}\n.ff--switch-container .default--large .ff--switch-button.checked {\n transform: translateX(16px);\n}";
2121
+ styleInject(css_248z$10);
2110
2122
 
2111
2123
  const Toggle = ({
2112
2124
  onChange,
@@ -2160,12 +2172,12 @@ const Toggle = ({
2160
2172
  onChange: handleChange,
2161
2173
  checked: checked
2162
2174
  }), jsxRuntime.jsx("label", {
2163
- className: classNames(`ff--switch-label default--${size} ff--switch-label--${variant}`, {
2175
+ className: cx(`ff--switch-label default--${size} ff--switch-label--${variant}`, {
2164
2176
  'ff--switch-label--disabled': disabled
2165
2177
  }),
2166
2178
  htmlFor: `ff-toggle-${id}`,
2167
2179
  children: jsxRuntime.jsx("span", {
2168
- className: classNames(`ff--switch-button ff--switch-button--${size}`, {
2180
+ className: cx(`ff--switch-button ff--switch-button--${size}`, {
2169
2181
  checked: checked
2170
2182
  }),
2171
2183
  children: checked ? jsxRuntime.jsx(Icon, {
@@ -2184,8 +2196,8 @@ const Toggle = ({
2184
2196
  });
2185
2197
  };
2186
2198
 
2187
- var css_248z$Z = ".fontXs, .ff-chip-wrapper .ff-default-chip-style {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-chip-wrapper .ff-default-chip-style--custom {\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-chip-wrapper {\n display: inline-flex;\n margin: 5px;\n justify-content: center;\n align-items: center;\n}\n.ff-chip-wrapper .ff-default-chip-style {\n display: flex;\n align-items: center;\n justify-content: space-around;\n width: fit-content;\n gap: 5px;\n height: 17px;\n border-radius: 25px;\n padding: 1px 6px;\n line-height: 15px;\n border: none;\n transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;\n box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--fullText:hover {\n box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n padding-right: 12px;\n}\n.ff-chip-wrapper .ff-default-chip-style--primary {\n background-color: var(--ff-chips-fill-color);\n color: var(--ff-chip-bg);\n color: var(--ff-chip-text-color);\n}\n.ff-chip-wrapper .ff-default-chip-style--success {\n background-color: var(--ff-success);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--error {\n background-color: var(--ff-error-light);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--warning {\n background-color: var(--ff-warning);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--custom {\n background: rgba(97, 11, 134, 0.1019607843);\n color: #610b86;\n padding: 2px 8px;\n border-radius: 12px;\n cursor: pointer;\n white-space: nowrap;\n box-shadow: none;\n transition: background-color 0.3s ease, color 0.3s ease;\n}\n.ff-chip-wrapper .ff-default-chip-style--custom:hover {\n background-color: #610b86;\n color: #fdfaff;\n}\n.ff-chip-wrapper .ff-default-chip-style--public {\n background-color: var(--public-chip-bg-color);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--partial-public {\n background-color: var(--partial-public-chip-bg-color);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--private {\n background-color: var(--private-chip-bg-color);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--disabled {\n background-color: var(--disabled-chip-bg-color);\n color: var(--ff-chip-bg);\n}";
2188
- styleInject(css_248z$Z);
2199
+ var css_248z$$ = ".fontXs, .ff-chip-wrapper .ff-default-chip-style {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-chip-wrapper .ff-default-chip-style--custom {\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-chip-wrapper {\n display: inline-flex;\n margin: 5px;\n justify-content: center;\n align-items: center;\n}\n.ff-chip-wrapper .ff-default-chip-style {\n display: flex;\n align-items: center;\n justify-content: space-around;\n width: fit-content;\n gap: 5px;\n height: 17px;\n border-radius: 25px;\n padding: 1px 6px;\n line-height: 15px;\n border: none;\n transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;\n box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--fullText:hover {\n box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n padding-right: 12px;\n}\n.ff-chip-wrapper .ff-default-chip-style--primary {\n background-color: var(--ff-chips-fill-color);\n color: var(--ff-chip-bg);\n color: var(--ff-chip-text-color);\n}\n.ff-chip-wrapper .ff-default-chip-style--success {\n background-color: var(--ff-success);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--error {\n background-color: var(--ff-error-light);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--warning {\n background-color: var(--ff-warning);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--custom {\n background: rgba(97, 11, 134, 0.1019607843);\n color: #610b86;\n padding: 2px 8px;\n border-radius: 12px;\n cursor: pointer;\n white-space: nowrap;\n box-shadow: none;\n transition: background-color 0.3s ease, color 0.3s ease;\n}\n.ff-chip-wrapper .ff-default-chip-style--custom:hover {\n background-color: #610b86;\n color: #fdfaff;\n}\n.ff-chip-wrapper .ff-default-chip-style--public {\n background-color: var(--public-chip-bg-color);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--partial-public {\n background-color: var(--partial-public-chip-bg-color);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--private {\n background-color: var(--private-chip-bg-color);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--disabled {\n background-color: var(--disabled-chip-bg-color);\n color: var(--ff-chip-bg);\n}";
2200
+ styleInject(css_248z$$);
2189
2201
 
2190
2202
  const Chip = ({
2191
2203
  label = '',
@@ -2203,7 +2215,7 @@ const Chip = ({
2203
2215
  onMouseEnter: handleOnMouseEnter,
2204
2216
  onMouseLeave: handleOnMouseLeave,
2205
2217
  onClick: onClick,
2206
- className: classNames(`ff-default-chip-style ff-default-chip-style--${variant}`, {
2218
+ className: cx(`ff-default-chip-style ff-default-chip-style--${variant}`, {
2207
2219
  ['ff-default-chip-style--fullText']: !!fullText
2208
2220
  }),
2209
2221
  children: labelText && jsxRuntime.jsx(Typography, {
@@ -2214,10 +2226,10 @@ const Chip = ({
2214
2226
  });
2215
2227
  };
2216
2228
 
2217
- var css_248z$Y = ".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}";
2218
- styleInject(css_248z$Y);
2229
+ var css_248z$_ = ".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}";
2230
+ styleInject(css_248z$_);
2219
2231
 
2220
- const Input = ({
2232
+ const Input = /*#__PURE__*/React.forwardRef(({
2221
2233
  type = 'text',
2222
2234
  variant = 'primary',
2223
2235
  name = '',
@@ -2240,23 +2252,23 @@ const Input = ({
2240
2252
  size = 'small',
2241
2253
  isLabelRequired = true,
2242
2254
  ...props
2243
- }) => {
2255
+ }, ref) => {
2244
2256
  const isValueFilled = !checkEmpty(value);
2245
2257
  return jsxRuntime.jsxs("div", {
2246
- className: classNames('ff-input-container', {
2258
+ className: cx('ff-input-container', {
2247
2259
  'ff-input-container--float': isValueFilled,
2248
2260
  'ff-input-container--disabled': !!disabled
2249
2261
  }),
2250
2262
  children: [isLabelRequired && jsxRuntime.jsxs("label", {
2251
2263
  htmlFor: name,
2252
- className: classNames(`ff-input-label-container ff-input-label-container--${size}`, {
2264
+ className: cx(`ff-input-label-container ff-input-label-container--${size}`, {
2253
2265
  'ff-input-label-container--danger': !!error
2254
2266
  }),
2255
2267
  children: [required && jsxRuntime.jsx("span", {
2256
2268
  className: "required-asterisk",
2257
2269
  children: "*"
2258
2270
  }), jsxRuntime.jsx("span", {
2259
- className: classNames(`ff-input-label ff-input-label--${variant}`, {
2271
+ className: cx(`ff-input-label ff-input-label--${variant}`, {
2260
2272
  'ff-input-label--no-hover': !!value,
2261
2273
  'ff-input-label--disabled': !!disabled,
2262
2274
  'ff-input-label--danger': !!error
@@ -2264,12 +2276,13 @@ const Input = ({
2264
2276
  children: label
2265
2277
  })]
2266
2278
  }), jsxRuntime.jsx("input", {
2279
+ ref: ref,
2267
2280
  name: name,
2268
2281
  value: value,
2269
2282
  type: type,
2270
2283
  spellCheck: false,
2271
2284
  id: name,
2272
- className: classNames(`ff-input ff-input-${variant} default-input ff-input--${size}`, {
2285
+ className: cx(`ff-input ff-input-${variant} default-input ff-input--${size}`, {
2273
2286
  ['ff-input--transparentBackground']: !!transparentBackground,
2274
2287
  'ff-input--no-hover': !!value,
2275
2288
  'ff-input--disabled': !!disabled,
@@ -2287,16 +2300,16 @@ const Input = ({
2287
2300
  max: maxValue,
2288
2301
  ...props
2289
2302
  }), helperText && error && jsxRuntime.jsx("span", {
2290
- className: classNames('ff-input-message', {
2303
+ className: cx('ff-input-message', {
2291
2304
  'ff-input-message--danger': !!error
2292
2305
  }),
2293
2306
  children: helperText
2294
2307
  })]
2295
2308
  });
2296
- };
2309
+ });
2297
2310
 
2298
- var css_248z$X = ".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, .ff-radial-chart-container svg text {\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-radial-chart-container {\n cursor: pointer;\n}\n.ff-radial-chart-container svg text {\n font-size: var(--fontSize) !important;\n font-weight: 400;\n}";
2299
- styleInject(css_248z$X);
2311
+ var css_248z$Z = ".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, .ff-radial-chart-container svg text {\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-radial-chart-container {\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.ff-radial-chart-container svg {\n vertical-align: middle;\n}\n.ff-radial-chart-container svg text {\n font-size: var(--fontSize) !important;\n font-weight: 400;\n}";
2312
+ styleInject(css_248z$Z);
2300
2313
 
2301
2314
  const useColorMappings$1 = () => React.useMemo(() => {
2302
2315
  return {
@@ -2405,41 +2418,45 @@ const RadialChart = ({
2405
2418
  percentage
2406
2419
  } = calculateArcAngles$1(status.value, total, currentAngle, radius);
2407
2420
  currentAngle = endAngle;
2408
- return jsxRuntime.jsx("svg", {
2409
- width: svgSize,
2410
- height: svgSize,
2411
- viewBox: `0 0 ${svgSize} ${svgSize}`,
2412
- onClick: () => onClick(status),
2413
- role: "img",
2414
- "aria-label": `${status.status}: ${Math.round(percentage * 100)}%`,
2415
- children: jsxRuntime.jsxs("g", {
2416
- transform: `translate(${radius + lineWidth}, ${radius + lineWidth})`,
2417
- children: [jsxRuntime.jsx("path", {
2418
- d: backgroundArcPath,
2419
- fill: "none",
2420
- stroke: backgroundColorMapping[normalizedStatus],
2421
- strokeWidth: lineWidth
2422
- }), jsxRuntime.jsx("path", {
2423
- d: foregroundArcPath,
2424
- fill: "none",
2425
- stroke: colorMapping[normalizedStatus],
2426
- strokeWidth: lineWidth
2427
- }), jsxRuntime.jsx("text", {
2428
- x: "0",
2429
- y: "0",
2430
- fill: colorMapping[normalizedStatus],
2431
- textAnchor: "middle",
2432
- dominantBaseline: "central",
2433
- children: `${Math.round(percentage * 100)}%`
2434
- })]
2435
- })
2436
- }, status.status);
2421
+ return jsxRuntime.jsx(Tooltip, {
2422
+ title: `${status.status}: ${Math.round(percentage * 100)}%`,
2423
+ zIndex: 1000,
2424
+ children: jsxRuntime.jsx("svg", {
2425
+ width: svgSize,
2426
+ height: svgSize,
2427
+ viewBox: `0 0 ${svgSize} ${svgSize}`,
2428
+ onClick: () => onClick(status),
2429
+ role: "img",
2430
+ "aria-label": `${status.status}: ${Math.round(percentage * 100)}%`,
2431
+ children: jsxRuntime.jsxs("g", {
2432
+ transform: `translate(${radius + lineWidth}, ${radius + lineWidth})`,
2433
+ children: [jsxRuntime.jsx("path", {
2434
+ d: backgroundArcPath,
2435
+ fill: "none",
2436
+ stroke: backgroundColorMapping[normalizedStatus],
2437
+ strokeWidth: lineWidth
2438
+ }), jsxRuntime.jsx("path", {
2439
+ d: foregroundArcPath,
2440
+ fill: "none",
2441
+ stroke: colorMapping[normalizedStatus],
2442
+ strokeWidth: lineWidth
2443
+ }), jsxRuntime.jsx("text", {
2444
+ x: "0",
2445
+ y: "0",
2446
+ fill: colorMapping[normalizedStatus],
2447
+ textAnchor: "middle",
2448
+ dominantBaseline: "central",
2449
+ children: `${Math.round(percentage * 100)}%`
2450
+ })]
2451
+ })
2452
+ }, status.status)
2453
+ });
2437
2454
  })
2438
2455
  });
2439
2456
  };
2440
2457
 
2441
- var css_248z$W = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-expandable-chip-menu--medium, .ff-expandable-chip-menu .ff-sub-chip--medium {\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-expandable-chip-menu {\n display: inline-flex;\n gap: 16px;\n align-items: center;\n border-radius: 16px;\n cursor: pointer;\n overflow: hidden;\n width: auto;\n padding: 4px 8px;\n transition: all 0.3s ease;\n}\n.ff-expandable-chip-menu--primary {\n border: 0.5px solid var(--brand-color);\n background-color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-label-chip {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 4px;\n white-space: nowrap;\n padding: 2px 0;\n}\n.ff-expandable-chip-menu .ff-label-chip .arrow-icon {\n height: 14px;\n width: 14px;\n display: grid;\n place-items: center;\n}\n.ff-expandable-chip-menu .ff-label-chip--primary {\n color: var(--brand-color);\n}\n.ff-expandable-chip-menu--disabled {\n opacity: 0.5;\n}\n.ff-expandable-chip-menu--disabled:disabled {\n pointer-events: none;\n}\n.ff-expandable-chip-menu--medium {\n line-height: 18px;\n}\n.ff-expandable-chip-menu .ff-sub-chips {\n display: flex;\n gap: 8px;\n max-width: 500px;\n overflow-x: auto;\n -ms-overflow-style: none;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.3s ease, opacity 0.3s ease;\n opacity: 0;\n}\n.ff-expandable-chip-menu .ff-sub-chips::-webkit-scrollbar {\n display: none;\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chips {\n transform: scaleX(1);\n opacity: 1;\n}\n.ff-expandable-chip-menu .ff-sub-chip {\n padding: 2px 8px;\n border-radius: 12px;\n white-space: nowrap;\n transition: background-color 0.3s ease, color 0.3s ease;\n opacity: 0;\n transform: translateX(-10px);\n animation: fadeIn 0.5s ease forwards;\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary {\n background: var(--expandable-menu-option-bg);\n color: var(--brand-color);\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary:hover, .ff-expandable-chip-menu .ff-sub-chip--primary.selected {\n background-color: var(--brand-color);\n color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-sub-chip--medium {\n line-height: 18px;\n}\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n transform: translateX(-10px);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chip {\n animation: fadeIn 0.5s ease forwards;\n}";
2442
- styleInject(css_248z$W);
2458
+ var css_248z$Y = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-expandable-chip-menu--medium, .ff-expandable-chip-menu .ff-sub-chip--medium {\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-expandable-chip-menu {\n display: inline-flex;\n gap: 16px;\n align-items: center;\n border-radius: 16px;\n cursor: pointer;\n overflow: hidden;\n width: auto;\n padding: 4px 8px;\n transition: all 0.3s ease;\n}\n.ff-expandable-chip-menu--primary {\n border: 0.5px solid var(--brand-color);\n background-color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-label-chip {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 4px;\n white-space: nowrap;\n padding: 2px 0;\n}\n.ff-expandable-chip-menu .ff-label-chip .arrow-icon {\n height: 14px;\n width: 14px;\n display: grid;\n place-items: center;\n}\n.ff-expandable-chip-menu .ff-label-chip--primary {\n color: var(--brand-color);\n}\n.ff-expandable-chip-menu--disabled {\n opacity: 0.5;\n}\n.ff-expandable-chip-menu--disabled:disabled {\n pointer-events: none;\n}\n.ff-expandable-chip-menu--medium {\n line-height: 18px;\n}\n.ff-expandable-chip-menu .ff-sub-chips {\n display: flex;\n gap: 8px;\n max-width: 500px;\n overflow-x: auto;\n -ms-overflow-style: none;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.3s ease, opacity 0.3s ease;\n opacity: 0;\n}\n.ff-expandable-chip-menu .ff-sub-chips::-webkit-scrollbar {\n display: none;\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chips {\n transform: scaleX(1);\n opacity: 1;\n}\n.ff-expandable-chip-menu .ff-sub-chip {\n padding: 2px 8px;\n border-radius: 12px;\n white-space: nowrap;\n transition: background-color 0.3s ease, color 0.3s ease;\n opacity: 0;\n transform: translateX(-10px);\n animation: fadeIn 0.5s ease forwards;\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary {\n background: var(--expandable-menu-option-bg);\n color: var(--brand-color);\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary:hover, .ff-expandable-chip-menu .ff-sub-chip--primary.selected {\n background-color: var(--brand-color);\n color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-sub-chip--medium {\n line-height: 18px;\n}\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n transform: translateX(-10px);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chip {\n animation: fadeIn 0.5s ease forwards;\n}";
2459
+ styleInject(css_248z$Y);
2443
2460
 
2444
2461
  const ExpandableMenu = ({
2445
2462
  label = '',
@@ -2476,7 +2493,7 @@ const ExpandableMenu = ({
2476
2493
  };
2477
2494
  const hasExpanded = isExpanded || isHovered;
2478
2495
  return jsxRuntime.jsxs("div", {
2479
- className: classNames('ff-expandable-chip-menu', `ff-expandable-chip-menu--${variant}`, {
2496
+ className: cx('ff-expandable-chip-menu', `ff-expandable-chip-menu--${variant}`, {
2480
2497
  'ff-expandable-chip-menu--disabled': disable,
2481
2498
  expanded: hasExpanded
2482
2499
  }),
@@ -2492,11 +2509,11 @@ const ExpandableMenu = ({
2492
2509
  children: icon
2493
2510
  })]
2494
2511
  }), hasExpanded && !checkEmpty(subMenus) && jsxRuntime.jsx("div", {
2495
- className: classNames('ff-sub-chips', {
2512
+ className: cx('ff-sub-chips', {
2496
2513
  expanded: hasExpanded
2497
2514
  }),
2498
2515
  children: subMenus.map((chip, index) => jsxRuntime.jsx("div", {
2499
- className: classNames('ff-sub-chip', `ff-sub-chip--${variant}`, `ff-sub-chip--${size}`, {
2516
+ className: cx('ff-sub-chip', `ff-sub-chip--${variant}`, `ff-sub-chip--${size}`, {
2500
2517
  selected: selectedMenu === chip
2501
2518
  }),
2502
2519
  onClick: () => handleSelectedMenu(chip),
@@ -2506,8 +2523,8 @@ const ExpandableMenu = ({
2506
2523
  });
2507
2524
  };
2508
2525
 
2509
- var css_248z$V = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-select-wrapper .ff-select .ff-select-inputField, .ff-select-wrapper .ff-select .ff-select-labels {\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-select-wrapper .ff-select__focus .ff-select-labels, .ff-select-wrapper .ff-select__error .ff-select-labels {\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-select-wrapper {\n min-height: 24px;\n min-width: 50px;\n}\n.ff-select-wrapper .ff-select {\n height: 100%;\n border: 1px solid var(--ff-select-border-color);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n position: relative;\n box-sizing: border-box;\n}\n.ff-select-wrapper .ff-select:hover {\n border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-labels {\n color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-text-hover-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField {\n width: calc(100% - 8px);\n height: 100%;\n padding: 0 0 0 8px;\n border: none;\n outline: none;\n letter-spacing: 0.5px;\n z-index: 10;\n background: transparent;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__disabled {\n cursor: not-allowed;\n color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__readonly {\n cursor: pointer;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper {\n cursor: pointer;\n height: 100%;\n padding: 0 8px 0 0;\n display: flex;\n align-items: center;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-border-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper__disabled {\n cursor: not-allowed;\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-labels {\n position: absolute;\n left: 8px;\n color: var(--ff-select-border-color);\n letter-spacing: 0.5px;\n line-height: 18px;\n transition: 0.18s ease all;\n border-radius: 4px;\n}\n.ff-select-wrapper .ff-select .ff-select-labels__active {\n transform: translateY(-16px);\n transition: 0.18s ease all;\n background-color: var(--ff-select-background-color);\n padding: 0 2px;\n z-index: 100000;\n}\n.ff-select-wrapper .ff-select__focus {\n border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover {\n border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-labels {\n color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-brand-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-labels {\n transform: translateY(-16px);\n transition: 0.18s ease all;\n color: var(--ff-select-brand-color);\n background-color: var(--ff-select-background-color);\n padding: 0 2px;\n line-height: 18px;\n z-index: 100000;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows {\n transform: rotate(180deg);\n transition: 0.18s ease all;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-brand-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__disabled {\n cursor: not-allowed;\n}\n.ff-select-wrapper .ff-select__disabled:hover {\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-labels {\n color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-border-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error {\n border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover {\n border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-labels {\n color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-default-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error__focused:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-brand-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error .ff-select-labels {\n transform: translateY(-16px);\n transition: 0.3s ease all;\n color: var(--error_light);\n background-color: var(--ff-select-background-color);\n padding: 0 2px;\n line-height: 18px;\n}\n.ff-select-wrapper .ff-select__no_border {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select__no_border:hover {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-error-msg {\n padding-left: 8px;\n letter-spacing: 0.5px;\n}";
2510
- styleInject(css_248z$V);
2526
+ var css_248z$X = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-select-wrapper .ff-select .ff-select-inputField, .ff-select-wrapper .ff-select .ff-select-labels {\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-select-wrapper .ff-select__focus .ff-select-labels, .ff-select-wrapper .ff-select__error .ff-select-labels {\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-select-wrapper {\n min-height: 24px;\n min-width: 50px;\n}\n.ff-select-wrapper .ff-select {\n height: 100%;\n border: 1px solid var(--ff-select-border-color);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n position: relative;\n box-sizing: border-box;\n}\n.ff-select-wrapper .ff-select:hover {\n border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-labels {\n color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-text-hover-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-input-icon {\n margin-left: 6px;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField {\n width: calc(100% - 8px);\n height: 100%;\n padding: 0 0 0 8px;\n border: none;\n outline: none;\n letter-spacing: 0.5px;\n z-index: 10;\n background: transparent;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__disabled {\n cursor: not-allowed;\n color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__readonly {\n cursor: pointer;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__icon {\n width: calc(100% - 36px);\n padding: 4;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper {\n cursor: pointer;\n height: 100%;\n padding: 0 8px 0 0;\n display: flex;\n align-items: center;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-border-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper__disabled {\n cursor: not-allowed;\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-labels {\n position: absolute;\n left: 8px;\n color: var(--ff-select-border-color);\n letter-spacing: 0.5px;\n line-height: 18px;\n transition: 0.18s ease all;\n border-radius: 4px;\n}\n.ff-select-wrapper .ff-select .ff-select-labels__icon {\n left: 24px;\n}\n.ff-select-wrapper .ff-select .ff-select-labels__active {\n transform: translateY(-16px);\n transition: 0.18s ease all;\n background-color: var(--ff-select-background-color);\n padding: 0 2px;\n z-index: 100000;\n left: 8px;\n}\n.ff-select-wrapper .ff-select__focus {\n border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover {\n border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-labels {\n color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-brand-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-labels {\n transform: translateY(-16px);\n transition: 0.18s ease all;\n color: var(--ff-select-brand-color);\n background-color: var(--ff-select-background-color);\n padding: 0 2px;\n line-height: 18px;\n z-index: 100000;\n left: 8px;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows {\n transform: rotate(180deg);\n transition: 0.18s ease all;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-brand-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__disabled {\n cursor: not-allowed;\n}\n.ff-select-wrapper .ff-select__disabled:hover {\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-labels {\n color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-border-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error {\n border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover {\n border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-labels {\n color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-default-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error__focused:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-brand-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error .ff-select-labels {\n transform: translateY(-16px);\n transition: 0.3s ease all;\n color: var(--error_light);\n background-color: var(--ff-select-background-color);\n padding: 0 2px;\n line-height: 18px;\n left: 8px;\n}\n.ff-select-wrapper .ff-select__no_border {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select__no_border:hover {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-error-msg {\n padding-left: 8px;\n letter-spacing: 0.5px;\n}";
2527
+ styleInject(css_248z$X);
2511
2528
 
2512
2529
  const dropdownDefaultCSSData = {
2513
2530
  margin: 6,
@@ -2516,8 +2533,8 @@ const dropdownDefaultCSSData = {
2516
2533
  dropDownWrapperPadding: 0
2517
2534
  };
2518
2535
 
2519
- var css_248z$U = ".ff-select-dropdown-wrapper {\n max-height: 160px;\n z-index: 999999;\n position: absolute;\n min-width: 50px;\n border-radius: 4px;\n border: 1px solid var(--ff-select-option-border-color);\n margin-top: 4px;\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n background-color: var(--ff-select-background-color);\n overflow: hidden auto;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-track {\n background: var(--ff-select-scroll-track-bg);\n border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option {\n box-sizing: border-box;\n cursor: pointer;\n padding: 0px 8px;\n border-radius: 4px;\n min-height: 32px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option__selected, .ff-select-dropdown-wrapper .ff-select-dropdown-option:hover {\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-no-option {\n box-sizing: border-box;\n padding: 0px 8px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: not-allowed;\n}";
2520
- styleInject(css_248z$U);
2536
+ var css_248z$W = ".ff-select-dropdown-wrapper {\n max-height: 160px;\n z-index: 999999;\n position: absolute;\n min-width: 50px;\n border-radius: 4px;\n border: 1px solid var(--ff-select-option-border-color);\n margin-top: 4px;\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n background-color: var(--ff-select-background-color);\n overflow: hidden auto;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-track {\n background: var(--ff-select-scroll-track-bg);\n border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option {\n box-sizing: border-box;\n cursor: pointer;\n padding: 0px 8px;\n border-radius: 4px;\n min-height: 32px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container {\n display: flex;\n align-items: center;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container__icon {\n margin-right: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option__selected, .ff-select-dropdown-wrapper .ff-select-dropdown-option:hover {\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-no-option {\n box-sizing: border-box;\n padding: 0px 8px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: not-allowed;\n}";
2537
+ styleInject(css_248z$W);
2521
2538
 
2522
2539
  const ffid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => ((char === 'x' ? Math.random() * 16 : Math.random() * 16 & 0x3 | 0x8) | 0).toString(16));
2523
2540
 
@@ -2546,7 +2563,8 @@ const Dropdown$1 = ({
2546
2563
  selectArrowRef,
2547
2564
  heightFromTop,
2548
2565
  selectedOption,
2549
- valueAccessor
2566
+ valueAccessor,
2567
+ showIcon = false
2550
2568
  }) => {
2551
2569
  const themeContext = React.useContext(ThemeContext);
2552
2570
  const currentTheme = themeContext?.currentTheme;
@@ -2577,50 +2595,56 @@ const Dropdown$1 = ({
2577
2595
  return {
2578
2596
  left: positionX,
2579
2597
  top: positionY + heightFromTop,
2580
- width: width + 30,
2598
+ width: showIcon ? width + 56 : width + 30,
2581
2599
  zIndex: optionZIndex,
2582
- marginLeft: '-2px'
2600
+ marginLeft: showIcon ? '-29px' : '-2px'
2583
2601
  };
2584
2602
  }
2585
2603
  return {
2586
2604
  zIndex: optionZIndex,
2587
2605
  left: positionX,
2588
- width: width + 30,
2606
+ width: showIcon ? width + 56 : width + 30,
2589
2607
  top: positionY - selectInputHeight - dropdownContainerHeight + 4 * margin,
2590
- marginLeft: '-2px'
2608
+ marginLeft: showIcon ? '-29px' : '-2px'
2591
2609
  };
2592
2610
  };
2593
- const getOptionLabel = label => {
2611
+ const getOptionLabel = (label, icon) => {
2594
2612
  if (/*#__PURE__*/React.isValidElement(label)) {
2595
2613
  return label;
2596
2614
  }
2597
- return jsxRuntime.jsx(Typography, {
2615
+ return jsxRuntime.jsxs(Typography, {
2598
2616
  as: "div",
2599
2617
  lineHeight: "30px",
2600
2618
  color: "var(--ff-select-text-color)",
2601
- children: label
2619
+ className: cx({
2620
+ 'ff-select-dropdown-icon-container': showIcon
2621
+ }),
2622
+ children: [showIcon && jsxRuntime.jsx(Icon, {
2623
+ name: icon,
2624
+ className: "ff-select-dropdown-icon-container__icon"
2625
+ }), label]
2602
2626
  });
2603
2627
  };
2604
2628
  return jsxRuntime.jsx("div", {
2605
- className: classNames('ff-select-dropdown-wrapper', currentTheme),
2629
+ className: cx('ff-select-dropdown-wrapper', currentTheme),
2606
2630
  ref: optionsWrapperRef,
2607
2631
  style: updateDropdownPosition(),
2608
2632
  children: jsxRuntime.jsx("div", {
2609
2633
  children: !checkEmpty(options) ? options.map(option => jsxRuntime.jsx("div", {
2610
- className: classNames('ff-select-dropdown-option', {
2634
+ className: cx('ff-select-dropdown-option', {
2611
2635
  'ff-select-dropdown-option__selected': getValue$1(option, valueAccessor) === selectedOption
2612
2636
  }, currentTheme),
2613
2637
  onClick: () => {
2614
2638
  if ('disable' in option && option['disable']) return;
2615
2639
  onSelectOptionSelector(option);
2616
2640
  },
2617
- children: getOptionLabel(getLabel(option, labelAccessor))
2641
+ children: getOptionLabel(getLabel(option, labelAccessor), 'iconName' in option && option['iconName'])
2618
2642
  }, ffid())) : jsxRuntime.jsx(Typography, {
2619
2643
  textAlign: "center",
2620
2644
  as: "div",
2621
2645
  lineHeight: "32px",
2622
2646
  color: "var(--ff-select-text-color)",
2623
- className: classNames('ff-select-no-option', currentTheme),
2647
+ className: cx('ff-select-no-option', currentTheme),
2624
2648
  children: "No Results found"
2625
2649
  })
2626
2650
  })
@@ -2685,11 +2709,19 @@ const Select$1 = ({
2685
2709
  height = 32,
2686
2710
  width = '100%',
2687
2711
  onBlur = () => {},
2688
- disableInput = false
2712
+ disableInput = false,
2713
+ showIcon = false
2689
2714
  }) => {
2690
2715
  const selectWidth = typeof width === 'number' ? `${width}px` : width;
2691
2716
  const [showDropdownOptions, setShowDropdownOptions] = React.useState(false);
2692
- const [searchedOption, setSearchedOption] = React.useState('');
2717
+ const [searchedOption, setSearchedOption] = React.useState({
2718
+ searchedText: '',
2719
+ searchedIcon: ''
2720
+ });
2721
+ const {
2722
+ searchedText,
2723
+ searchedIcon
2724
+ } = searchedOption;
2693
2725
  const [selectOptionList, setSelectOptionList] = React.useState([]);
2694
2726
  const [dropdownPosition, setDropdownPosition] = React.useState({
2695
2727
  positionX: 0,
@@ -2704,7 +2736,10 @@ const Select$1 = ({
2704
2736
  const calculatePosition = usePortalPosition(inputRef, showDropdownOptions);
2705
2737
  const handleIconClick = () => {
2706
2738
  setShowDropdownOptions(!showDropdownOptions);
2707
- setSearchedOption(getValue$1(selectedOption, valueAccessor));
2739
+ setSearchedOption({
2740
+ ...searchedOption,
2741
+ searchedText: getValue$1(selectedOption, valueAccessor)
2742
+ });
2708
2743
  setSelectOptionList(optionsList);
2709
2744
  if (!showDropdownOptions && inputRef.current) {
2710
2745
  inputRef.current.focus();
@@ -2720,7 +2755,10 @@ const Select$1 = ({
2720
2755
  return typeof valueData === 'string' ? valueData.toLowerCase().includes(value.toLowerCase().trim()) : valueData === Number(value);
2721
2756
  });
2722
2757
  setSelectOptionList(filteredOptions);
2723
- setSearchedOption(value);
2758
+ setSearchedOption({
2759
+ ...searchedOption,
2760
+ searchedText: value
2761
+ });
2724
2762
  };
2725
2763
  const onSelectUpdatePosition = () => {
2726
2764
  if (!showDropdownOptions || !DropdownRef?.current || disabled) return;
@@ -2748,14 +2786,20 @@ const Select$1 = ({
2748
2786
  fromBottom: 0,
2749
2787
  width: 0
2750
2788
  });
2751
- setSearchedOption(getValue$1(selectedOption, valueAccessor));
2789
+ setSearchedOption({
2790
+ searchedText: getValue$1(selectedOption, valueAccessor),
2791
+ searchedIcon: selectedOption.iconName
2792
+ });
2752
2793
  setSelectOptionList(optionsList);
2753
2794
  onBlur();
2754
2795
  };
2755
2796
  const onSelectOptionSelector = option => {
2756
2797
  if (disabled) return;
2757
2798
  onSelectBlur();
2758
- setSearchedOption(getValue$1(option, valueAccessor));
2799
+ setSearchedOption({
2800
+ searchedText: getValue$1(selectedOption, valueAccessor),
2801
+ searchedIcon: selectedOption.iconName
2802
+ });
2759
2803
  if (onChange) {
2760
2804
  onChange(option);
2761
2805
  }
@@ -2779,7 +2823,10 @@ const Select$1 = ({
2779
2823
  };
2780
2824
  }, [showDropdownOptions]);
2781
2825
  React.useEffect(() => {
2782
- setSearchedOption(getValue$1(selectedOption, valueAccessor));
2826
+ setSearchedOption({
2827
+ searchedText: getValue$1(selectedOption, valueAccessor),
2828
+ searchedIcon: selectedOption.iconName
2829
+ });
2783
2830
  }, [selectedOption]);
2784
2831
  React.useEffect(() => {
2785
2832
  if (checkEmpty(optionsList)) return;
@@ -2793,23 +2840,27 @@ const Select$1 = ({
2793
2840
  width: `${selectWidth}`
2794
2841
  },
2795
2842
  children: [jsxRuntime.jsxs("div", {
2796
- className: classNames('ff-select', {
2843
+ className: cx('ff-select', {
2797
2844
  'ff-select__focus': showDropdownOptions,
2798
2845
  'ff-select__disabled': disabled,
2799
2846
  'ff-select__error': !!errorMsg,
2800
2847
  'ff-select__error__focused': !!errorMsg && showDropdownOptions,
2801
2848
  'ff-select__no_border': !showBorder
2802
2849
  }),
2803
- children: [jsxRuntime.jsx("input", {
2850
+ children: [showIcon && jsxRuntime.jsx(Icon, {
2851
+ name: searchedIcon,
2852
+ className: "ff-select-input-icon"
2853
+ }), jsxRuntime.jsx("input", {
2804
2854
  type: "text",
2805
2855
  ref: inputRef,
2806
2856
  id: "select-input-element",
2807
- className: classNames('ff-select-inputField', {
2857
+ className: cx('ff-select-inputField', {
2808
2858
  'ff-select-inputField__disabled': disabled,
2809
- 'ff-select-inputField__readonly': disableInput
2859
+ 'ff-select-inputField__readonly': disableInput,
2860
+ 'ff-select-inputField__icon': showIcon
2810
2861
  }),
2811
2862
  onFocus: handleFocus,
2812
- value: searchedOption,
2863
+ value: searchedText,
2813
2864
  autoCorrect: "off",
2814
2865
  autoComplete: "off",
2815
2866
  spellCheck: "false",
@@ -2822,7 +2873,7 @@ const Select$1 = ({
2822
2873
  readOnly: disableInput
2823
2874
  }), optionsRequired && jsxRuntime.jsx("div", {
2824
2875
  ref: selectArrowRef,
2825
- className: classNames('ff-select-arrows-wrapper', {
2876
+ className: cx('ff-select-arrows-wrapper', {
2826
2877
  'ff-select-arrows-wrapper__disabled': disabled
2827
2878
  }),
2828
2879
  onClick: handleIconClick,
@@ -2834,7 +2885,8 @@ const Select$1 = ({
2834
2885
  })
2835
2886
  }), showLabel && jsxRuntime.jsx(Typography, {
2836
2887
  as: "span",
2837
- className: classNames('ff-select-labels', {
2888
+ className: cx('ff-select-labels', {
2889
+ 'ff-select-labels__icon': showIcon,
2838
2890
  'ff-select-labels__active': searchedOption
2839
2891
  }),
2840
2892
  fontSize: searchedOption || showDropdownOptions ? 8 : 12,
@@ -2861,14 +2913,15 @@ const Select$1 = ({
2861
2913
  onSelectBlur: onSelectBlur,
2862
2914
  onSelectOptionSelector: onSelectOptionSelector,
2863
2915
  heightFromTop: height,
2864
- selectedOption: searchedOption
2916
+ selectedOption: searchedOption,
2917
+ showIcon: showIcon
2865
2918
  }), document.body)
2866
2919
  })]
2867
2920
  });
2868
2921
  };
2869
2922
 
2870
- var css_248z$T = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-textarea-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, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\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-textarea-container {\n display: flex;\n flex-direction: column;\n position: relative;\n gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n display: flex;\n color: var(--text-area-default-color);\n justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n padding: 8px;\n width: 100%;\n min-height: 80px;\n gap: 0px;\n border: 1px solid var(--default-icon-color);\n border-radius: 4px;\n outline: none;\n line-height: 18px;\n font-weight: 400;\n}\n.ff-textarea-container .ff-textarea--resize {\n resize: none;\n}\n.ff-textarea-container .ff-textarea:disabled, .ff-textarea-container .ff-textarea-label-container:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.ff-textarea-container .ff-textarea:disabled:hover, .ff-textarea-container .ff-textarea-label-container:disabled:hover {\n border-color: var(--default-icon-color);\n color: inherit;\n}\n.ff-textarea-container .ff-textarea::placeholder, .ff-textarea-container .ff-textarea-label-container::placeholder {\n opacity: 0;\n}\n.ff-textarea-container .ff-textarea--danger {\n border-color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea--transparentBackground {\n background: transparent;\n}\n.ff-textarea-container .ff-textarea-label-container {\n display: flex;\n position: absolute;\n border: none;\n outline: none;\n margin-top: 1px;\n transition: all 0.3s ease-in-out;\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label {\n padding: 1px;\n height: 10px;\n width: auto;\n background-color: var(--drawer-footer-bg);\n color: var(--text-area-default-color);\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label--danger {\n color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea-label-container .required-asterisk {\n color: var(--error_light);\n}\n.ff-textarea-container:hover .ff-textarea-label {\n color: var(--text-color);\n}\n.ff-textarea-container:hover .ff-textarea, .ff-textarea-container:hover .ff-textarea-label-container {\n border-color: var(--text-color);\n}\n.ff-textarea-container:focus-within .ff-textarea-label-container {\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.5px;\n text-align: left;\n top: -6px;\n background-color: transparent;\n padding: 0px 2px;\n margin-left: 7px;\n}\n.ff-textarea-container:focus-within .ff-textarea-label--primary {\n color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea--primary {\n border-color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-textarea-container .ff-textarea-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 12px;\n}\n.ff-textarea-container .ff-textarea-message--danger {\n color: var(--error_light);\n}\n.ff-textarea-container--float .ff-textarea-label-container {\n letter-spacing: 0.5px;\n top: -6px;\n background-color: transparent;\n line-height: 12px;\n padding: 0px 2px;\n margin-left: 7px;\n}\n.ff-textarea-container--disabled {\n cursor: not-allowed;\n}\n.ff-textarea-container--disabled:hover .ff-textarea-label {\n color: var(--text-area-default-color);\n}\n.ff-textarea-container--disabled:hover .ff-textarea, .ff-textarea-container--disabled:hover .ff-textarea-container .ff-textarea-label-container, .ff-textarea-container .ff-textarea-container--disabled:hover .ff-textarea-label-container {\n border-color: var(--default-icon-color);\n}\n.ff-textarea-container--disabled .ff-textarea-label-container {\n cursor: not-allowed;\n}";
2871
- styleInject(css_248z$T);
2923
+ var css_248z$V = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-textarea-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, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\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-textarea-container {\n display: flex;\n flex-direction: column;\n position: relative;\n gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n display: flex;\n color: var(--text-area-default-color);\n justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n padding: 8px;\n width: 100%;\n min-height: 80px;\n gap: 0px;\n border: 1px solid var(--default-icon-color);\n border-radius: 4px;\n outline: none;\n line-height: 18px;\n font-weight: 400;\n}\n.ff-textarea-container .ff-textarea--resize {\n resize: none;\n}\n.ff-textarea-container .ff-textarea:disabled, .ff-textarea-container .ff-textarea-label-container:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.ff-textarea-container .ff-textarea:disabled:hover, .ff-textarea-container .ff-textarea-label-container:disabled:hover {\n border-color: var(--default-icon-color);\n color: inherit;\n}\n.ff-textarea-container .ff-textarea::placeholder, .ff-textarea-container .ff-textarea-label-container::placeholder {\n opacity: 0;\n}\n.ff-textarea-container .ff-textarea--danger {\n border-color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea--transparentBackground {\n background: transparent;\n}\n.ff-textarea-container .ff-textarea-label-container {\n display: flex;\n position: absolute;\n border: none;\n outline: none;\n margin-top: 1px;\n transition: all 0.3s ease-in-out;\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label {\n padding: 1px;\n height: 10px;\n width: auto;\n background-color: var(--drawer-footer-bg);\n color: var(--text-area-default-color);\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label--danger {\n color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea-label-container .required-asterisk {\n color: var(--error_light);\n}\n.ff-textarea-container:hover .ff-textarea-label {\n color: var(--text-color);\n}\n.ff-textarea-container:hover .ff-textarea, .ff-textarea-container:hover .ff-textarea-label-container {\n border-color: var(--text-color);\n}\n.ff-textarea-container:focus-within .ff-textarea-label-container {\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.5px;\n text-align: left;\n top: -6px;\n background-color: transparent;\n padding: 0px 2px;\n margin-left: 7px;\n}\n.ff-textarea-container:focus-within .ff-textarea-label--primary {\n color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea--primary {\n border-color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-textarea-container .ff-textarea-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 12px;\n}\n.ff-textarea-container .ff-textarea-message--danger {\n color: var(--error_light);\n}\n.ff-textarea-container--float .ff-textarea-label-container {\n letter-spacing: 0.5px;\n top: -6px;\n background-color: transparent;\n line-height: 12px;\n padding: 0px 2px;\n margin-left: 7px;\n}\n.ff-textarea-container--disabled {\n cursor: not-allowed;\n}\n.ff-textarea-container--disabled:hover .ff-textarea-label {\n color: var(--text-area-default-color);\n}\n.ff-textarea-container--disabled:hover .ff-textarea, .ff-textarea-container--disabled:hover .ff-textarea-container .ff-textarea-label-container, .ff-textarea-container .ff-textarea-container--disabled:hover .ff-textarea-label-container {\n border-color: var(--default-icon-color);\n}\n.ff-textarea-container--disabled .ff-textarea-label-container {\n cursor: not-allowed;\n}";
2924
+ styleInject(css_248z$V);
2872
2925
 
2873
2926
  const Textarea = ({
2874
2927
  capacity = 200,
@@ -2891,17 +2944,17 @@ const Textarea = ({
2891
2944
  ...props
2892
2945
  }) => {
2893
2946
  return jsxRuntime.jsxs("div", {
2894
- className: classNames('ff-textarea-container', {
2947
+ className: cx('ff-textarea-container', {
2895
2948
  'ff-textarea-container--disabled': disabled,
2896
2949
  'ff-textarea-container--float': !!value
2897
2950
  }),
2898
2951
  children: [jsxRuntime.jsx("label", {
2899
2952
  htmlFor: name,
2900
- className: classNames('ff-textarea-label-container', {
2953
+ className: cx('ff-textarea-label-container', {
2901
2954
  'ff-textarea-label-container--danger': error
2902
2955
  }),
2903
2956
  children: jsxRuntime.jsxs("span", {
2904
- className: classNames(`ff-textarea-label ff-textarea-label--${variant}`, {
2957
+ className: cx(`ff-textarea-label ff-textarea-label--${variant}`, {
2905
2958
  'ff-textarea-label--danger': error
2906
2959
  }),
2907
2960
  children: [required && jsxRuntime.jsx("span", {
@@ -2914,7 +2967,7 @@ const Textarea = ({
2914
2967
  name: name,
2915
2968
  value: value,
2916
2969
  id: name,
2917
- className: classNames(`ff-textarea ff-textarea--${variant}`, className, {
2970
+ className: cx(`ff-textarea ff-textarea--${variant}`, className, {
2918
2971
  'ff-textarea--danger': error,
2919
2972
  'ff-textarea--resize': !resize
2920
2973
  }),
@@ -2938,8 +2991,8 @@ const Textarea = ({
2938
2991
  });
2939
2992
  };
2940
2993
 
2941
- var css_248z$S = ".ff-status-button {\n border: none;\n border-radius: 4px;\n padding: 0 4px;\n cursor: pointer;\n width: 80px;\n height: 16px;\n}\n.ff-status-button__text {\n color: inherit;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 76px;\n text-transform: capitalize;\n}\n.ff-status-button--passed {\n background-color: var(--status-button-bg-passed);\n color: var(--status-button-text-passed);\n}\n.ff-status-button--failed {\n background-color: var(--status-button-bg-failed);\n color: var(--status-button-text-failed);\n}\n.ff-status-button--running {\n background-color: var(--status-button-bg-running);\n color: var(--status-button-text-running);\n}\n.ff-status-button--skipped {\n background-color: var(--status-button-bg-skipped);\n color: var(--status-button-text-skipped);\n}\n.ff-status-button--warning {\n background-color: var(--status-button-bg-warning);\n color: var(--status-button-text-warning);\n}\n.ff-status-button--terminated {\n background-color: var(--status-button-bg-terminated);\n color: var(--status-button-text-terminated);\n}\n.ff-status-button--partially-executed {\n background-color: var(--status-button-bg-partiallyExecuted);\n color: var(--status-button-text-partiallyExecuted);\n}\n.ff-status-button--aborted {\n background-color: var(--status-button-bg-aborted);\n color: var(--status-button-text-aborted);\n}\n.ff-status-button--not-executed {\n background-color: var(--status-button-bg-notExecuted);\n color: var(--status-button-text-notExecuted);\n}\n.ff-status-button:disabled {\n opacity: 50%;\n cursor: not-allowed;\n}";
2942
- styleInject(css_248z$S);
2994
+ var css_248z$U = ".ff-status-button {\n border: none;\n border-radius: 4px;\n padding: 0 4px;\n cursor: pointer;\n width: 80px;\n height: 16px;\n}\n.ff-status-button__text {\n color: inherit;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 76px;\n text-transform: capitalize;\n}\n.ff-status-button--passed {\n background-color: var(--status-button-bg-passed);\n color: var(--status-button-text-passed);\n}\n.ff-status-button--failed {\n background-color: var(--status-button-bg-failed);\n color: var(--status-button-text-failed);\n}\n.ff-status-button--running {\n background-color: var(--status-button-bg-running);\n color: var(--status-button-text-running);\n}\n.ff-status-button--skipped {\n background-color: var(--status-button-bg-skipped);\n color: var(--status-button-text-skipped);\n}\n.ff-status-button--warning {\n background-color: var(--status-button-bg-warning);\n color: var(--status-button-text-warning);\n}\n.ff-status-button--terminated {\n background-color: var(--status-button-bg-terminated);\n color: var(--status-button-text-terminated);\n}\n.ff-status-button--partially-executed {\n background-color: var(--status-button-bg-partiallyExecuted);\n color: var(--status-button-text-partiallyExecuted);\n}\n.ff-status-button--aborted {\n background-color: var(--status-button-bg-aborted);\n color: var(--status-button-text-aborted);\n}\n.ff-status-button--not-executed {\n background-color: var(--status-button-bg-notExecuted);\n color: var(--status-button-text-notExecuted);\n}\n.ff-status-button:disabled {\n opacity: 50%;\n cursor: not-allowed;\n}";
2995
+ styleInject(css_248z$U);
2943
2996
 
2944
2997
  const StatusButton = ({
2945
2998
  status = 'passed',
@@ -2955,7 +3008,7 @@ const StatusButton = ({
2955
3008
  title: hasTooltip ? label : '',
2956
3009
  placement: "bottom",
2957
3010
  children: jsxRuntime.jsx("button", {
2958
- className: classNames('ff-status-button', `ff-status-button--${status}`, className),
3011
+ className: cx('ff-status-button', `ff-status-button--${status}`, className),
2959
3012
  style: style,
2960
3013
  onClick: onClick,
2961
3014
  disabled: disabled,
@@ -2972,14 +3025,14 @@ const StatusButton = ({
2972
3025
  });
2973
3026
  };
2974
3027
 
2975
- var css_248z$R = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-option-card .ff-options {\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-menu-option-container {\n cursor: pointer;\n position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--brand-color);\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n background-color: var(--menu-variant-dark-icon-color);\n}\n\n.ff-option-card {\n position: fixed;\n margin: 4px;\n border: 1px solid var(--option-card-border-color);\n background: var(--option-card-bg-color);\n overflow: hidden;\n min-height: 32px;\n min-width: 110px;\n width: max-content;\n border-radius: 4px;\n}\n.ff-option-card--primary {\n background: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-option-card--primary svg path {\n fill: var(--primary-icon-color);\n}\n.ff-option-card--primary :hover {\n color: var(--brand-color);\n}\n.ff-option-card--primary :hover svg path {\n fill: var(--brand-color);\n}\n.ff-option-card .ff-options {\n cursor: pointer;\n border-radius: 3px;\n display: flex;\n align-items: center;\n padding: 4px;\n gap: 8px;\n}\n.ff-option-card .ff-options:hover {\n background-color: var(--hover-color);\n}\n.ff-option-card .ff-options label {\n cursor: pointer;\n}\n.ff-option-card .ff-disable-option {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-option-card .ff-disable-option label {\n cursor: no-drop;\n}";
2976
- styleInject(css_248z$R);
3028
+ var css_248z$T = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-option-card .ff-options {\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-menu-option-container {\n cursor: pointer;\n position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--brand-color);\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n background-color: var(--menu-variant-dark-icon-color);\n}\n\n.ff-option-card {\n position: fixed;\n margin: 4px;\n border: 1px solid var(--option-card-border-color);\n background: var(--option-card-bg-color);\n overflow: hidden;\n min-height: 32px;\n min-width: 110px;\n width: max-content;\n border-radius: 4px;\n}\n.ff-option-card--primary {\n background: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-option-card--primary svg path {\n fill: var(--primary-icon-color);\n}\n.ff-option-card--primary :hover {\n color: var(--brand-color);\n}\n.ff-option-card--primary :hover svg path {\n fill: var(--brand-color);\n}\n.ff-option-card .ff-options {\n cursor: pointer;\n border-radius: 3px;\n display: flex;\n align-items: center;\n padding: 4px;\n gap: 8px;\n}\n.ff-option-card .ff-options:hover {\n background-color: var(--hover-color);\n}\n.ff-option-card .ff-options label {\n cursor: pointer;\n}\n.ff-option-card .ff-disable-option {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-option-card .ff-disable-option label {\n cursor: no-drop;\n}";
3029
+ styleInject(css_248z$T);
2977
3030
 
2978
3031
  const Option$1 = ({
2979
3032
  option,
2980
3033
  onClick
2981
3034
  }) => jsxRuntime.jsxs("div", {
2982
- className: classNames('ff-options', {
3035
+ className: cx('ff-options', {
2983
3036
  'ff-disable-option': option.disable
2984
3037
  }),
2985
3038
  onClick: () => !option.disable && onClick(option),
@@ -3048,7 +3101,7 @@ const OptionCard = ({
3048
3101
  }
3049
3102
  })();
3050
3103
  return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsx("div", {
3051
- className: classNames('ff-option-card', [{
3104
+ className: cx('ff-option-card', [{
3052
3105
  'ff-option-card--primary': variant === 'primary'
3053
3106
  }], currentTheme),
3054
3107
  style: {
@@ -3120,7 +3173,7 @@ const MenuOption = ({
3120
3173
  children: jsxRuntime.jsxs("div", {
3121
3174
  className: "ff-icon-label",
3122
3175
  children: [jsxRuntime.jsx("div", {
3123
- className: classNames('ff-menuicon-container', {
3176
+ className: cx('ff-menuicon-container', {
3124
3177
  'ff-menuicon-container-clicked': isClicked,
3125
3178
  dark: variant === 'dark'
3126
3179
  }),
@@ -3156,8 +3209,8 @@ const MenuOption = ({
3156
3209
  });
3157
3210
  };
3158
3211
 
3159
- var css_248z$Q = ".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}";
3160
- styleInject(css_248z$Q);
3212
+ var css_248z$S = ".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}";
3213
+ styleInject(css_248z$S);
3161
3214
 
3162
3215
  const isFunction$2 = functionToCheck => {
3163
3216
  return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
@@ -3289,7 +3342,7 @@ const Table$1 = ({
3289
3342
  height: height,
3290
3343
  position: 'relative'
3291
3344
  },
3292
- className: classNames(className, {
3345
+ className: cx(className, {
3293
3346
  'ff-fixed-header-table': withFixedHeader,
3294
3347
  'border-borderRadius': borderWithRadius
3295
3348
  }),
@@ -3302,15 +3355,15 @@ const Table$1 = ({
3302
3355
  onClick: headerIconOnClick
3303
3356
  })
3304
3357
  }), jsxRuntime.jsxs("table", {
3305
- className: classNames(`ff-table`),
3358
+ className: cx(`ff-table`),
3306
3359
  cellSpacing: 0,
3307
3360
  children: [jsxRuntime.jsx("thead", {
3308
- className: classNames({
3361
+ className: cx({
3309
3362
  'ff-fixed-header': withFixedHeader
3310
3363
  }, tableHeadClass),
3311
3364
  children: jsxRuntime.jsx("tr", {
3312
3365
  children: columns.map((column, index) => jsxRuntime.jsx("th", {
3313
- className: classNames(`${headerType && `${headerType}-bg`}`, `${headerTextColor && `${headerTextColor}-color`}`),
3366
+ className: cx(`${headerType && `${headerType}-bg`}`, `${headerTextColor && `${headerTextColor}-color`}`),
3314
3367
  style: {
3315
3368
  width: column?.width
3316
3369
  },
@@ -3337,13 +3390,13 @@ const Table$1 = ({
3337
3390
  })
3338
3391
  }), jsxRuntime.jsx("tbody", {
3339
3392
  children: data.length > 0 && data.map((row, index) => jsxRuntime.jsx("tr", {
3340
- className: classNames(tableBodyRowClass, {
3393
+ className: cx(tableBodyRowClass, {
3341
3394
  'disabled-row': row.disabled
3342
3395
  }),
3343
3396
  children: columns.map((column, i) => {
3344
3397
  return jsxRuntime.jsx("td", {
3345
3398
  onClick: () => hanleOnclick(column, row),
3346
- className: classNames(column.className, {
3399
+ className: cx(column.className, {
3347
3400
  'clickable-cell': column.onClick
3348
3401
  }),
3349
3402
  children: jsxRuntime.jsxs(Typography, {
@@ -3375,11 +3428,11 @@ const Table$1 = ({
3375
3428
  });
3376
3429
  };
3377
3430
 
3378
- var css_248z$P = ".ff-add-button-container {\n position: relative;\n border: none;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background-color: transparent;\n}\n.ff-add-button-container.ff-hovered-add-button--primary {\n background-color: var(--hover-color);\n}\n.ff-add-button-container .ff-hovered-add-icon--primary svg path {\n fill: var(--add-icon-hover-color);\n}\n.ff-add-button-container .ff-add-icon--primary svg path {\n fill: var(--brand-color);\n}\n.ff-add-button-container .ff-add-button {\n position: absolute;\n border: none;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n background: none;\n}";
3379
- styleInject(css_248z$P);
3431
+ var css_248z$R = ".ff-add-button-container {\n position: relative;\n border: none;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background-color: transparent;\n}\n.ff-add-button-container.ff-hovered-add-button--primary {\n background-color: var(--hover-color);\n}\n.ff-add-button-container .ff-hovered-add-icon--primary svg path {\n fill: var(--add-icon-hover-color);\n}\n.ff-add-button-container .ff-add-icon--primary svg path {\n fill: var(--brand-color);\n}\n.ff-add-button-container .ff-add-button {\n position: absolute;\n border: none;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n background: none;\n}";
3432
+ styleInject(css_248z$R);
3380
3433
 
3381
- var css_248z$O = ".ff-arrow-buttons-container {\n position: absolute;\n transition: opacity 0.3s ease;\n pointer-events: none;\n}\n.ff-arrow-buttons-container.ff-down-right-top, .ff-arrow-buttons-container.ff-down-top {\n height: 80px;\n width: 52px;\n transform: translateY(calc(-50% + 12px));\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--right, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--right {\n top: 28px;\n right: 2px;\n animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--top, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--top {\n top: 2px;\n animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--down, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--down {\n bottom: 2px;\n animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right-top {\n height: 52px;\n width: 52px;\n transform: translateY(-54%);\n}\n.ff-arrow-buttons-container.ff-right-top .ff-arrow-button--right {\n top: 28px;\n right: 2px;\n animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right-top .ff-arrow-button--top {\n top: 2px;\n animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right {\n height: 52px;\n width: 52px;\n}\n.ff-arrow-buttons-container.ff-down-right .ff-arrow-button--right {\n top: 0px;\n right: 2px;\n animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right .ff-arrow-button--down {\n bottom: 2px;\n animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-top {\n height: 52px;\n width: 24px;\n transform: translateY(-54%);\n}\n.ff-arrow-buttons-container.ff-top .ff-arrow-button--top {\n top: 2px;\n animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right {\n height: 24px;\n width: 52px;\n}\n.ff-arrow-buttons-container.ff-right .ff-arrow-button--right {\n right: 2px;\n animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down {\n height: 52px;\n width: 24px;\n}\n.ff-arrow-buttons-container.ff-down .ff-arrow-button--down {\n bottom: 2px;\n animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container .ff-arrow-button {\n background: var(--arrow-button-bg-color);\n border: 0.5px solid var(--arrows-button-border-color);\n padding: 0;\n cursor: pointer;\n width: 24px;\n height: 24px;\n display: flex;\n border-radius: 4px;\n justify-content: center;\n align-items: center;\n transition: all 0.3s ease;\n position: absolute;\n}\n.ff-arrow-buttons-container .ff-arrow-button--top {\n top: 0px;\n left: 0;\n}\n.ff-arrow-buttons-container .ff-arrow-button--down {\n bottom: 0px;\n left: 0;\n}\n@keyframes slideTop {\n from {\n transform: translateY(20px);\n opacity: 0;\n }\n 50% {\n transform: translateY(-10px);\n opacity: 0.5;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n@keyframes slideRight {\n from {\n transform: translateX(-20px);\n opacity: 0;\n }\n 50% {\n transform: translateX(10px);\n opacity: 0.5;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n@keyframes slideDown {\n from {\n transform: translateY(-20px);\n opacity: 0;\n }\n 50% {\n transform: translateY(10px);\n opacity: 0.5;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}";
3382
- styleInject(css_248z$O);
3434
+ var css_248z$Q = ".ff-arrow-buttons-container {\n position: absolute;\n transition: opacity 0.3s ease;\n pointer-events: none;\n}\n.ff-arrow-buttons-container.ff-down-right-top, .ff-arrow-buttons-container.ff-down-top {\n height: 80px;\n width: 52px;\n transform: translateY(calc(-50% + 12px));\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--right, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--right {\n top: 28px;\n right: 2px;\n animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--top, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--top {\n top: 2px;\n animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--down, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--down {\n bottom: 2px;\n animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right-top {\n height: 52px;\n width: 52px;\n transform: translateY(-54%);\n}\n.ff-arrow-buttons-container.ff-right-top .ff-arrow-button--right {\n top: 28px;\n right: 2px;\n animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right-top .ff-arrow-button--top {\n top: 2px;\n animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right {\n height: 52px;\n width: 52px;\n}\n.ff-arrow-buttons-container.ff-down-right .ff-arrow-button--right {\n top: 0px;\n right: 2px;\n animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right .ff-arrow-button--down {\n bottom: 2px;\n animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-top {\n height: 52px;\n width: 24px;\n transform: translateY(-54%);\n}\n.ff-arrow-buttons-container.ff-top .ff-arrow-button--top {\n top: 2px;\n animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right {\n height: 24px;\n width: 52px;\n}\n.ff-arrow-buttons-container.ff-right .ff-arrow-button--right {\n right: 2px;\n animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down {\n height: 52px;\n width: 24px;\n}\n.ff-arrow-buttons-container.ff-down .ff-arrow-button--down {\n bottom: 2px;\n animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container .ff-arrow-button {\n background: var(--arrow-button-bg-color);\n border: 0.5px solid var(--arrows-button-border-color);\n padding: 0;\n cursor: pointer;\n width: 24px;\n height: 24px;\n display: flex;\n border-radius: 4px;\n justify-content: center;\n align-items: center;\n transition: all 0.3s ease;\n position: absolute;\n}\n.ff-arrow-buttons-container .ff-arrow-button--top {\n top: 0px;\n left: 0;\n}\n.ff-arrow-buttons-container .ff-arrow-button--down {\n bottom: 0px;\n left: 0;\n}\n@keyframes slideTop {\n from {\n transform: translateY(20px);\n opacity: 0;\n }\n 50% {\n transform: translateY(-10px);\n opacity: 0.5;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n@keyframes slideRight {\n from {\n transform: translateX(-20px);\n opacity: 0;\n }\n 50% {\n transform: translateX(10px);\n opacity: 0.5;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n}\n@keyframes slideDown {\n from {\n transform: translateY(-20px);\n opacity: 0;\n }\n 50% {\n transform: translateY(10px);\n opacity: 0.5;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}";
3435
+ styleInject(css_248z$Q);
3383
3436
 
3384
3437
  const ArrowsButton = ({
3385
3438
  direction,
@@ -3391,7 +3444,7 @@ const ArrowsButton = ({
3391
3444
  };
3392
3445
  return jsxRuntime.jsx("div", {
3393
3446
  children: jsxRuntime.jsx("button", {
3394
- className: classNames('ff-arrow-button', `ff-arrow-button--${direction}`),
3447
+ className: cx('ff-arrow-button', `ff-arrow-button--${direction}`),
3395
3448
  onClick: onArrowClick,
3396
3449
  children: jsxRuntime.jsx(MenuOption, {
3397
3450
  iconName: getIconName(),
@@ -3516,8 +3569,8 @@ const AddButton = ({
3516
3569
  });
3517
3570
  };
3518
3571
 
3519
- var css_248z$N = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-donut-chart-svg-container svg text:nth-of-type(1), .ff-status-item {\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, .ff-donut-chart-svg-container svg text:nth-of-type(2) {\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-donut-chart-svg-container svg text:nth-of-type(3) {\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-donut-chart-section {\n display: flex;\n align-items: center;\n padding: 8px;\n}\n\n.ff-donut-chart-svg-container {\n display: flex;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(1) {\n font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(2) {\n font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(3) {\n font-weight: 500;\n}\n\n.ff-status-container {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.ff-status-item {\n display: flex;\n gap: 40px;\n justify-content: space-between;\n opacity: 1;\n}\n.ff-status-item.ff-highlighted {\n opacity: 1;\n}\n.ff-status-item.ff-fade {\n opacity: 10%;\n}\n.ff-status-item .ff-status-text {\n font-weight: 500;\n color: var(--status-skipped-text-color);\n}\n.ff-status-item .ff-status-details-script-count {\n display: flex;\n gap: 4px;\n font-weight: 600;\n}\n.ff-status-item .ff-status-details-script-percentage {\n font-weight: 400;\n color: var(--brand2-color);\n}\n\n.ff-status-label {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.ff-status-details {\n display: flex;\n gap: 4px;\n}\n\n.ff-status-color {\n width: 16px;\n height: 16px;\n border-radius: 4px;\n opacity: 80%;\n}";
3520
- styleInject(css_248z$N);
3572
+ var css_248z$P = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-donut-chart-svg-container svg text:nth-of-type(1), .ff-status-item {\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, .ff-donut-chart-svg-container svg text:nth-of-type(2) {\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-donut-chart-svg-container svg text:nth-of-type(3) {\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-donut-chart-section {\n display: flex;\n align-items: center;\n padding: 8px;\n}\n\n.ff-donut-chart-svg-container {\n display: flex;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(1) {\n font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(2) {\n font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(3) {\n font-weight: 500;\n}\n\n.ff-status-container {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.ff-status-item {\n display: flex;\n gap: 40px;\n justify-content: space-between;\n opacity: 1;\n}\n.ff-status-item.ff-highlighted {\n opacity: 1;\n}\n.ff-status-item.ff-fade {\n opacity: 10%;\n}\n.ff-status-item .ff-status-text {\n font-weight: 500;\n color: var(--status-skipped-text-color);\n}\n.ff-status-item .ff-status-details-script-count {\n display: flex;\n gap: 4px;\n font-weight: 600;\n}\n.ff-status-item .ff-status-details-script-percentage {\n font-weight: 400;\n color: var(--brand2-color);\n}\n\n.ff-status-label {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.ff-status-details {\n display: flex;\n gap: 4px;\n}\n\n.ff-status-color {\n width: 16px;\n height: 16px;\n border-radius: 4px;\n opacity: 80%;\n}";
3573
+ styleInject(css_248z$P);
3521
3574
 
3522
3575
  const calculateArc$4 = (x, y, radius, startAngle, endAngle) => {
3523
3576
  const startX = x + radius * Math.cos(startAngle);
@@ -3566,7 +3619,7 @@ const DonutChart = ({
3566
3619
  // Calculate angles and gaps
3567
3620
  const TOTAL_GAP_ANGLE = gapAngle * nonZeroValues.length;
3568
3621
  let remainingAngle = 2 * Math.PI - TOTAL_GAP_ANGLE;
3569
- let currentAngle = Math.PI / 2;
3622
+ let currentAngle = -Math.PI / 2;
3570
3623
  const MIN_PERCENTAGE = 1;
3571
3624
  const MIN_ANGLE = MIN_PERCENTAGE / 100 * (2 * Math.PI);
3572
3625
  // Adjust for small angles
@@ -3598,7 +3651,7 @@ const DonutChart = ({
3598
3651
  strokeWidth: lineWidth,
3599
3652
  onMouseEnter: () => handleMouseEnter(normalizedStatus),
3600
3653
  onMouseLeave: handleMouseLeave,
3601
- strokeOpacity: 0.8
3654
+ strokeOpacity: hoveredStatus === null || hoveredStatus === normalizedStatus ? 0.8 : 0.3
3602
3655
  }), hoveredStatus === normalizedStatus && jsxRuntime.jsx("path", {
3603
3656
  d: outerArcPath,
3604
3657
  fill: "none",
@@ -3614,6 +3667,8 @@ const DonutChart = ({
3614
3667
  const percentage = (statusData?.value || 0) / total * 100;
3615
3668
  return jsxRuntime.jsxs("div", {
3616
3669
  className: `ff-status-item ${hoveredStatus === null || hoveredStatus === statusKey ? 'ff-highlighted' : 'ff-fade'}`,
3670
+ onMouseEnter: () => handleMouseEnter(statusKey),
3671
+ onMouseLeave: handleMouseLeave,
3617
3672
  children: [jsxRuntime.jsxs("div", {
3618
3673
  className: "ff-status-label",
3619
3674
  children: [jsxRuntime.jsx("div", {
@@ -3870,8 +3925,8 @@ const useFileDropzone = options => {
3870
3925
  };
3871
3926
  };
3872
3927
 
3873
- var css_248z$M = ".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}";
3874
- styleInject(css_248z$M);
3928
+ var css_248z$O = ".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}";
3929
+ styleInject(css_248z$O);
3875
3930
 
3876
3931
  const Dropzone = ({
3877
3932
  icon,
@@ -3885,7 +3940,7 @@ const Dropzone = ({
3885
3940
  }) => {
3886
3941
  return jsxRuntime.jsxs("div", {
3887
3942
  ...getRootProps(),
3888
- className: classNames('ff-file-dropzone', {
3943
+ className: cx('ff-file-dropzone', {
3889
3944
  'ff-file-dropzone--active': isDragActive
3890
3945
  }),
3891
3946
  style: {
@@ -8678,8 +8733,8 @@ const Forms = ({
8678
8733
  };
8679
8734
  const ForwardedForms = /*#__PURE__*/React.forwardRef(Forms);
8680
8735
 
8681
- var css_248z$L = ".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}";
8682
- styleInject(css_248z$L);
8736
+ var css_248z$N = ".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}";
8737
+ styleInject(css_248z$N);
8683
8738
 
8684
8739
  const InputWithDropdown = ({
8685
8740
  name = '',
@@ -8702,11 +8757,11 @@ const InputWithDropdown = ({
8702
8757
  }) => {
8703
8758
  const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
8704
8759
  return jsxRuntime.jsxs("div", {
8705
- className: classNames('ff-input-with-dropdown-container', {
8760
+ className: cx('ff-input-with-dropdown-container', {
8706
8761
  'ff-input-with-dropdown-container--filled': isValueFilled
8707
8762
  }),
8708
8763
  children: [jsxRuntime.jsxs("fieldset", {
8709
- className: classNames('ff-input-with-dropdown', {
8764
+ className: cx('ff-input-with-dropdown', {
8710
8765
  'ff-input-with-dropdown--filled': isValueFilled,
8711
8766
  'ff-input-with-dropdown--no-hover': isValueFilled,
8712
8767
  'ff-input-with-dropdown--disabled': !!disabled,
@@ -8722,7 +8777,7 @@ const InputWithDropdown = ({
8722
8777
  onChange: onDropdownChangeHandler,
8723
8778
  disabled: disabled || !optionsRequired,
8724
8779
  optionsRequired: optionsRequired,
8725
- className: classNames('ff-floating-dropdown', {
8780
+ className: cx('ff-floating-dropdown', {
8726
8781
  'ff-floating-dropdown--disabled': !!disabled,
8727
8782
  'ff-floating-dropdown--error': !!error,
8728
8783
  'ff-floating-dropdown--left': dropdownPosition === 'left'
@@ -8733,11 +8788,11 @@ const InputWithDropdown = ({
8733
8788
  className: "seperatorline"
8734
8789
  })]
8735
8790
  }), jsxRuntime.jsxs("div", {
8736
- className: classNames('ff-floating-label-input-container'),
8791
+ className: cx('ff-floating-label-input-container'),
8737
8792
  children: [jsxRuntime.jsx(Typography, {
8738
8793
  as: "label",
8739
8794
  htmlFor: name,
8740
- className: classNames('ff-floating-label', {
8795
+ className: cx('ff-floating-label', {
8741
8796
  'ff-floating-label--filled': isValueFilled,
8742
8797
  'ff-floating-label--no-hover': isValueFilled,
8743
8798
  'ff-floating-label--error': !!error
@@ -8755,7 +8810,7 @@ const InputWithDropdown = ({
8755
8810
  autoComplete: autoComplete,
8756
8811
  required: required,
8757
8812
  disabled: disabled,
8758
- className: classNames('ff-floating-input', {
8813
+ className: cx('ff-floating-input', {
8759
8814
  'ff-floating-input--filled': isValueFilled,
8760
8815
  'ff-floating-input--disabled': !!disabled,
8761
8816
  'ff-floating-input--error': !!error,
@@ -8770,7 +8825,7 @@ const InputWithDropdown = ({
8770
8825
  onChange: onDropdownChangeHandler,
8771
8826
  disabled: disabled || !optionsRequired,
8772
8827
  optionsRequired: optionsRequired,
8773
- className: classNames('ff-floating-dropdown', {
8828
+ className: cx('ff-floating-dropdown', {
8774
8829
  'ff-floating-dropdown--disabled': !!disabled,
8775
8830
  'ff-floating-dropdown--error': !!error
8776
8831
  }),
@@ -8784,8 +8839,8 @@ const InputWithDropdown = ({
8784
8839
  });
8785
8840
  };
8786
8841
 
8787
- var css_248z$K = ".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}";
8788
- styleInject(css_248z$K);
8842
+ var css_248z$M = ".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}";
8843
+ styleInject(css_248z$M);
8789
8844
 
8790
8845
  const RadioButton = ({
8791
8846
  label,
@@ -8801,7 +8856,7 @@ const RadioButton = ({
8801
8856
  return jsxRuntime.jsxs("div", {
8802
8857
  className: "ff-radio-wrapper",
8803
8858
  children: [jsxRuntime.jsxs("label", {
8804
- className: classNames('ff-radio', {
8859
+ className: cx('ff-radio', {
8805
8860
  'ff-radio--disabled': disabled
8806
8861
  }),
8807
8862
  children: [jsxRuntime.jsx("input", {
@@ -8825,8 +8880,8 @@ const RadioButton = ({
8825
8880
  });
8826
8881
  };
8827
8882
 
8828
- var css_248z$J = ".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}";
8829
- styleInject(css_248z$J);
8883
+ var css_248z$L = ".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}";
8884
+ styleInject(css_248z$L);
8830
8885
 
8831
8886
  const RadioGroup = ({
8832
8887
  options,
@@ -8840,12 +8895,12 @@ const RadioGroup = ({
8840
8895
  classNameForLabel
8841
8896
  }) => {
8842
8897
  return jsxRuntime.jsxs("div", {
8843
- className: classNames('ff-radio-group', className),
8898
+ className: cx('ff-radio-group', className),
8844
8899
  children: [isLabel && jsxRuntime.jsxs(Typography, {
8845
8900
  fontWeight: 'semi-bold',
8846
- className: classNames(classNameForLabel),
8901
+ className: cx(classNameForLabel),
8847
8902
  children: [' ', isAsteriskRequired && jsxRuntime.jsxs(Typography, {
8848
- className: classNames('ff-required-asterisk'),
8903
+ className: cx('ff-required-asterisk'),
8849
8904
  children: ["*", ' ']
8850
8905
  }), label, ' ']
8851
8906
  }), options.map(option => jsxRuntime.jsx(RadioButton, {
@@ -8862,8 +8917,8 @@ const RadioGroup = ({
8862
8917
  });
8863
8918
  };
8864
8919
 
8865
- var css_248z$I = ".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 border-width: 0 10px 10px 10px;\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-width: 10px 10px 10px 0;\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-width: 10px 10px 0 10px;\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-width: 10px 0 10px 10px;\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}";
8866
- styleInject(css_248z$I);
8920
+ var css_248z$K = ".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}";
8921
+ styleInject(css_248z$K);
8867
8922
 
8868
8923
  const MiniModal = /*#__PURE__*/React.forwardRef(({
8869
8924
  anchorRef,
@@ -8886,6 +8941,7 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
8886
8941
  extraLeftSpace,
8887
8942
  isIconModel,
8888
8943
  wrapperProperties,
8944
+ arrowProperties,
8889
8945
  arrowZIndex,
8890
8946
  overlay,
8891
8947
  outSideClick
@@ -8896,6 +8952,20 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
8896
8952
  });
8897
8953
  const [isVisible, setIsVisible] = React.useState(false);
8898
8954
  const modalRef = React.useRef(null);
8955
+ const {
8956
+ width: modalWidth,
8957
+ height: modalHeight,
8958
+ borderRadius: modalBorderRadius = 4,
8959
+ zIndex: modalZIndex = 99,
8960
+ boxShadow: modalBoxShadow,
8961
+ left: modalLeft,
8962
+ top: modalTop
8963
+ } = modalProperties || {};
8964
+ const {
8965
+ left: popOverLeft,
8966
+ top: popOverTop,
8967
+ size: popOverSize = 10
8968
+ } = arrowProperties || {};
8899
8969
  // Function to calculate available space
8900
8970
  const getAvailableSpace = rect => {
8901
8971
  const {
@@ -9029,13 +9099,6 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
9029
9099
  window.removeEventListener('scroll', calculatePosition);
9030
9100
  };
9031
9101
  }, [calculatePosition]);
9032
- const {
9033
- width: modalWidth,
9034
- height: modalHeight,
9035
- borderRadius: modalBorderRadius = 4,
9036
- zIndex: modalZIndex = 99,
9037
- boxShadow: modalBoxShadow
9038
- } = modalProperties || {};
9039
9102
  const {
9040
9103
  width: wrapperWidth = 35,
9041
9104
  zIndex: wrapperZIndex = 101,
@@ -9051,7 +9114,7 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
9051
9114
  }
9052
9115
  return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, {
9053
9116
  children: [isOverlay && jsxRuntime.jsx("div", {
9054
- className: classNames('ff-mini-modal-overlay'),
9117
+ className: cx('ff-mini-modal-overlay'),
9055
9118
  style: {
9056
9119
  zIndex: zIndexOverlay ?? 98,
9057
9120
  backgroundColor: backgroundColorOverlay ?? 'transparent'
@@ -9059,18 +9122,21 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
9059
9122
  onClick: cancelButtonProps?.onClick
9060
9123
  }), jsxRuntime.jsxs("div", {
9061
9124
  ref: ref || modalRef,
9062
- className: classNames('ff-mini-edit-modal-container', {
9125
+ className: cx('ff-mini-edit-modal-container', {
9063
9126
  modalVisible: isVisible,
9064
9127
  animatedModal: isAnimated
9065
9128
  }),
9066
9129
  style: {
9067
- top: `${calculatedModalTop}px`,
9068
- left: `${calculatedModalLeft}px`
9130
+ top: `${modalTop ?? calculatedModalTop}px`,
9131
+ left: `${modalLeft ?? calculatedModalLeft}px`
9069
9132
  },
9070
9133
  children: [isPopOver && jsxRuntime.jsx("div", {
9071
9134
  className: `popover-arrow popover-arrow-${modalPosition === 'right' ? 'left' : modalPosition === 'top' ? 'bottom' : modalPosition === 'left' ? 'right' : 'top'} ${getArrowClassName()}`,
9072
9135
  style: {
9073
- zIndex: `${arrowZIndex}`
9136
+ zIndex: `${arrowZIndex}`,
9137
+ top: `${popOverTop && popOverTop}px`,
9138
+ left: `${popOverLeft && popOverLeft}px`,
9139
+ borderWidth: `${modalPosition === 'right' ? `${popOverSize}px ${popOverSize}px ${popOverSize}px 0` : modalPosition === 'top' ? `${popOverSize}px ${popOverSize}px 0 ${popOverSize}px` : modalPosition === 'left' ? `${popOverSize}px 0 ${popOverSize}px ${popOverSize}px` : `0 ${popOverSize}px ${popOverSize}px ${popOverSize}px`}`
9074
9140
  }
9075
9141
  }), isWrapped && jsxRuntime.jsx("div", {
9076
9142
  className: 'wrapped-div',
@@ -9081,7 +9147,7 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
9081
9147
  boxShadow: wrapperBoxShadow ?? `0px -3px 4px 0px var(--ff-mini-modal-box-shadow)`
9082
9148
  }
9083
9149
  }), jsxRuntime.jsxs("div", {
9084
- className: classNames('mini-edit-modal', {
9150
+ className: cx('mini-edit-modal', {
9085
9151
  'mini-edit-modal-wrapper-shadow': !!isWrapped && !modalBoxShadow,
9086
9152
  'mini-edit-modal-arrow-shadow': !!isPopOver && !modalBoxShadow
9087
9153
  }),
@@ -9126,8 +9192,8 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
9126
9192
  }), document.body);
9127
9193
  });
9128
9194
 
9129
- var css_248z$H = ".tree-table-space-block {\n display: inline-block;\n width: 20px;\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n display: table-row;\n}\n\n.btn-toggle.expand {\n cursor: pointer;\n}\n.btn-toggle.is-close {\n background: #f1f1f1;\n border: 1px solid transparent;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before {\n display: none;\n}\n.btn-toggle::after {\n display: none;\n}\n\n.tree-table-wrap {\n width: 100%;\n}\n\nthead {\n position: sticky;\n top: 12px;\n}\n\ntbody {\n overflow: scroll;\n}\n\n.tree-table {\n border: 1px solid #f1f1f1;\n table-layout: fixed;\n width: 100%;\n border-collapse: collapse;\n overflow: scroll;\n}\n.tree-table tr .table-tree-row-action {\n display: none;\n}\n.tree-table tr:hover {\n background-color: var(--hover-color);\n}\n.tree-table tr:hover .table-tree-row-action {\n display: inline-flex;\n align-items: center;\n}\n.tree-table th {\n color: var(--brand-color);\n text-align: center;\n padding: 10px 0;\n background: var(--slider-table-color);\n font-size: 13px;\n width: 400px;\n text-align: left;\n}\n.tree-table th:first-child {\n width: 400px;\n position: sticky;\n left: 0;\n}\n.tree-table td {\n font-size: 14px;\n color: var(--brand-color);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: left;\n height: 32px;\n}\n.tree-table td:first-child {\n overflow: initial;\n width: 400px;\n position: sticky;\n left: 0;\n background-color: white;\n}\n.tree-table td:first-child:hover {\n background-color: var(--hover-color);\n}\n.tree-table td .tree-table-space-block {\n border: 1px solid transparent;\n display: inline-block;\n width: 20px;\n height: 20px;\n line-height: 16px;\n text-align: center;\n vertical-align: top;\n font-size: 19px;\n position: relative;\n box-sizing: border-box;\n margin-top: 7px;\n border-radius: 50%;\n}\n.tree-table td .tree-table-space-block:first-child {\n margin-left: 7px;\n}\n.tree-table td .tree-table-space-block.btn-toggle {\n position: relative;\n cursor: pointer;\n width: 22px;\n height: 22px;\n z-index: 12;\n}\n.tree-table td .tree-table-space-block.btn-toggle::before {\n display: none;\n}\n.tree-table td .tree-table-space-block.last-block::before {\n display: none;\n}\n.tree-table td .tree-table-space-block.last-block::after {\n position: absolute;\n content: \"\";\n width: 12px;\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n left: -10px;\n}\n.tree-table td .tree-table-space-block.no-folder {\n width: 8px;\n}\n.tree-table td .tree-table-space-block.no-folder::after {\n position: absolute;\n content: \"\";\n width: 18px;\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n left: -10px;\n}\n.tree-table td .tree-table-space-block:not(.last-block)::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 40px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -12px;\n z-index: -1;\n}\n\n.tree-table-td-content {\n display: inline-flex;\n align-items: center;\n padding: 7px;\n font-size: 12px;\n font-family: \"Poppins\";\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n visibility: visible;\n}\n\n.tree-row-expanded svg,\n.tree-row-collapsed svg {\n height: 12px;\n width: 12px;\n}\n.tree-row-expanded svg path,\n.tree-row-collapsed svg path {\n fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n transform: rotate(-90deg);\n transition: all;\n}";
9130
- styleInject(css_248z$H);
9195
+ var css_248z$J = ".tree-table-space-block {\n display: inline-block;\n width: 20px;\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n display: table-row;\n}\n\n.btn-toggle.expand {\n cursor: pointer;\n}\n.btn-toggle.is-close {\n background: #f1f1f1;\n border: 1px solid transparent;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before {\n display: none;\n}\n.btn-toggle::after {\n display: none;\n}\n\n.tree-table-wrap {\n width: 100%;\n}\n\nthead {\n position: sticky;\n top: 12px;\n}\n\ntbody {\n overflow: scroll;\n}\n\n.tree-table {\n border: 1px solid #f1f1f1;\n table-layout: fixed;\n width: 100%;\n border-collapse: collapse;\n overflow: scroll;\n}\n.tree-table tr .table-tree-row-action {\n display: none;\n}\n.tree-table tr:hover {\n background-color: var(--hover-color);\n}\n.tree-table tr:hover .table-tree-row-action {\n display: inline-flex;\n align-items: center;\n}\n.tree-table th {\n color: var(--brand-color);\n text-align: center;\n padding: 10px 0;\n background: var(--slider-table-color);\n font-size: 13px;\n width: 400px;\n text-align: left;\n}\n.tree-table th:first-child {\n width: 400px;\n position: sticky;\n left: 0;\n}\n.tree-table td {\n font-size: 14px;\n color: var(--brand-color);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: left;\n height: 32px;\n}\n.tree-table td:first-child {\n overflow: initial;\n width: 400px;\n position: sticky;\n left: 0;\n background-color: white;\n}\n.tree-table td:first-child:hover {\n background-color: var(--hover-color);\n}\n.tree-table td .tree-table-space-block {\n border: 1px solid transparent;\n display: inline-block;\n width: 20px;\n height: 20px;\n line-height: 16px;\n text-align: center;\n vertical-align: top;\n font-size: 19px;\n position: relative;\n box-sizing: border-box;\n margin-top: 7px;\n border-radius: 50%;\n}\n.tree-table td .tree-table-space-block:first-child {\n margin-left: 7px;\n}\n.tree-table td .tree-table-space-block.btn-toggle {\n position: relative;\n cursor: pointer;\n width: 22px;\n height: 22px;\n z-index: 12;\n}\n.tree-table td .tree-table-space-block.btn-toggle::before {\n display: none;\n}\n.tree-table td .tree-table-space-block.last-block::before {\n display: none;\n}\n.tree-table td .tree-table-space-block.last-block::after {\n position: absolute;\n content: \"\";\n width: 12px;\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n left: -10px;\n}\n.tree-table td .tree-table-space-block.no-folder {\n width: 8px;\n}\n.tree-table td .tree-table-space-block.no-folder::after {\n position: absolute;\n content: \"\";\n width: 18px;\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n left: -10px;\n}\n.tree-table td .tree-table-space-block:not(.last-block)::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 40px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -12px;\n z-index: -1;\n}\n\n.tree-table-td-content {\n display: inline-flex;\n align-items: center;\n padding: 7px;\n font-size: 12px;\n font-family: \"Poppins\";\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n visibility: visible;\n}\n\n.tree-row-expanded svg,\n.tree-row-collapsed svg {\n height: 12px;\n width: 12px;\n}\n.tree-row-expanded svg path,\n.tree-row-collapsed svg path {\n fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n transform: rotate(-90deg);\n transition: all;\n}";
9196
+ styleInject(css_248z$J);
9131
9197
 
9132
9198
  // Helper to render spaces for levels
9133
9199
  const renderSpaces = level => Array.from({
@@ -9272,7 +9338,7 @@ const TreeTable = ({
9272
9338
  const handleCheckBoxChange = React.useCallback((type, node) => {
9273
9339
  const nodeId = node.id;
9274
9340
  if (type === 'radio') {
9275
- onChange?.([nodeId]);
9341
+ onChange?.('true', [nodeId]);
9276
9342
  } else {
9277
9343
  let updatedSelected = [...selected];
9278
9344
  if (!updatedSelected.includes(nodeId)) {
@@ -9282,7 +9348,7 @@ const TreeTable = ({
9282
9348
  const childIds = getAllChildIds(nodeId, treeData);
9283
9349
  updatedSelected = updatedSelected.filter(id => !childIds.includes(id));
9284
9350
  }
9285
- onChange?.(updatedSelected);
9351
+ onChange?.('true', updatedSelected);
9286
9352
  }
9287
9353
  }, [selected, treeData, onChange]);
9288
9354
  const handleRowClick = React.useCallback((e, node) => onClick?.(e, node), [onClick]);
@@ -9305,8 +9371,8 @@ const TreeTable = ({
9305
9371
  });
9306
9372
  };
9307
9373
 
9308
- var css_248z$G = ":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: 1px solid var(--tabs-border-color);\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}";
9309
- styleInject(css_248z$G);
9374
+ var css_248z$I = ":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: 1px solid var(--tabs-border-color);\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}";
9375
+ styleInject(css_248z$I);
9310
9376
 
9311
9377
  const Tabs = ({
9312
9378
  variant = 'default',
@@ -9318,13 +9384,13 @@ const Tabs = ({
9318
9384
  return jsxRuntime.jsxs("div", {
9319
9385
  className: `ff-tabs-container`,
9320
9386
  children: [jsxRuntime.jsx("div", {
9321
- className: classNames(`ff-tab-row--${variant}`, {
9387
+ className: cx(`ff-tab-row--${variant}`, {
9322
9388
  'ff-tab-row--no-border': noBorder
9323
9389
  }),
9324
9390
  children: tabsData.map(tab => jsxRuntime.jsxs("button", {
9325
9391
  onClick: () => !tab.disabled && onTabClick(tab.id),
9326
9392
  disabled: tab.disabled,
9327
- className: classNames(`ff-tab-button--${variant}`, {
9393
+ className: cx(`ff-tab-button--${variant}`, {
9328
9394
  disabled: tab.disabled,
9329
9395
  active: activeTabId === tab.id
9330
9396
  }),
@@ -9333,13 +9399,13 @@ const Tabs = ({
9333
9399
  lineHeight: "18px",
9334
9400
  fontWeight: activeTabId === tab.id ? 'semi-bold' : 'regular',
9335
9401
  color: activeTabId === tab.id ? 'var(--tabs-label-active-color)' : 'var(--tabs-label-default-color)',
9336
- className: classNames('ff-tab-label', {
9402
+ className: cx('ff-tab-label', {
9337
9403
  'ff-tab-label--active': activeTabId === tab.id
9338
9404
  })
9339
9405
  }), jsxRuntime.jsx(Typography, {
9340
9406
  children: "",
9341
9407
  color: "",
9342
- className: classNames('ff-tab-bar', {
9408
+ className: cx('ff-tab-bar', {
9343
9409
  'ff-tab-bar--active': activeTabId === tab.id
9344
9410
  })
9345
9411
  })]
@@ -9351,8 +9417,8 @@ const Tabs = ({
9351
9417
  });
9352
9418
  };
9353
9419
 
9354
- var css_248z$F = ".ff-highlight-bg {\n background-color: var(--text-bg-highlight);\n}";
9355
- styleInject(css_248z$F);
9420
+ var css_248z$H = ".ff-highlight-bg {\n background-color: var(--text-bg-highlight);\n}";
9421
+ styleInject(css_248z$H);
9356
9422
 
9357
9423
  // Function to escape special characters in the search term
9358
9424
  const escapeRegExp = text => {
@@ -9375,8 +9441,8 @@ const HighlightText = ({
9375
9441
  });
9376
9442
  };
9377
9443
 
9378
- var css_248z$E = ".fontXs, .ff-search-container .ff-search-input {\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-search-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-search-container .ff-search-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 4px;\n}\n.ff-search-container .ff-search-icon:hover {\n background-color: var(--ff-search-field-hover-color);\n}\n.ff-search-container .ff-search-icon .ff-icon-container svg path {\n fill: var(--brand-color);\n}\n.ff-search-container .ff-search-input {\n border: none;\n color: var(--tooltip-bg-color);\n line-height: 12px;\n visibility: hidden;\n transition: width 0.4s ease;\n}\n.ff-search-container .ff-search-input:focus {\n outline: none;\n border: none;\n}\n.ff-search-container .ff-search-input:hover {\n border: none;\n}\n.ff-search-container.disabled {\n opacity: 0.5;\n}\n.ff-search-container.expanded {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-search-icon:hover {\n background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-vertical-line {\n height: 8px;\n width: 1px;\n border-radius: 1px;\n background-color: var(--border-color);\n}\n.ff-search-container.expanded .ff-search-input {\n visibility: visible;\n margin-left: 4px;\n}\n.ff-search-container.expanded .ff-search-input::placeholder {\n color: var(--ff-search-filed-placeholder-text);\n}\n.ff-search-container.expanded .ff-search-icon {\n border: none;\n cursor: default;\n margin-right: 4px;\n}\n.ff-search-container.expanded .ff-search-clear-button {\n display: grid;\n place-items: center;\n cursor: pointer;\n width: 22px;\n padding-top: 1px;\n}\n.ff-search-container.expanded .ff-search-close-icon {\n margin: 4px;\n cursor: pointer;\n}\n.ff-search-container.expanded .ff-search-close-icon .ff-icon-container svg path {\n fill: var(--ff-search-filed-close-Icon);\n}";
9379
- styleInject(css_248z$E);
9444
+ var css_248z$G = ".fontXs, .ff-search-container .ff-search-input {\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-search-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-search-container .ff-search-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 4px;\n}\n.ff-search-container .ff-search-icon:hover {\n background-color: var(--ff-search-field-hover-color);\n}\n.ff-search-container .ff-search-icon .ff-icon-container svg path {\n fill: var(--brand-color);\n}\n.ff-search-container .ff-search-input {\n border: none;\n color: var(--tooltip-bg-color);\n line-height: 12px;\n visibility: hidden;\n transition: width 0.4s ease;\n}\n.ff-search-container .ff-search-input:focus {\n outline: none;\n border: none;\n}\n.ff-search-container .ff-search-input:hover {\n border: none;\n}\n.ff-search-container.disabled {\n opacity: 0.5;\n}\n.ff-search-container.expanded {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-search-icon:hover {\n background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-vertical-line {\n height: 8px;\n width: 1px;\n border-radius: 1px;\n background-color: var(--border-color);\n}\n.ff-search-container.expanded .ff-search-input {\n visibility: visible;\n margin-left: 4px;\n}\n.ff-search-container.expanded .ff-search-input::placeholder {\n color: var(--ff-search-filed-placeholder-text);\n}\n.ff-search-container.expanded .ff-search-icon {\n border: none;\n cursor: default;\n margin-right: 4px;\n}\n.ff-search-container.expanded .ff-search-clear-button {\n display: grid;\n place-items: center;\n cursor: pointer;\n width: 22px;\n padding-top: 1px;\n}\n.ff-search-container.expanded .ff-search-close-icon {\n margin: 4px;\n cursor: pointer;\n}\n.ff-search-container.expanded .ff-search-close-icon .ff-icon-container svg path {\n fill: var(--ff-search-filed-close-Icon);\n}";
9445
+ styleInject(css_248z$G);
9380
9446
 
9381
9447
  const Search = ({
9382
9448
  placeholder = 'Search',
@@ -9419,12 +9485,12 @@ const Search = ({
9419
9485
  }
9420
9486
  };
9421
9487
  return jsxRuntime.jsxs("div", {
9422
- className: classNames('ff-search-container', {
9488
+ className: cx('ff-search-container', {
9423
9489
  expanded: isExpanded,
9424
9490
  disabled: disabled
9425
9491
  }),
9426
9492
  children: [jsxRuntime.jsx("div", {
9427
- className: classNames('ff-search-icon', {
9493
+ className: cx('ff-search-icon', {
9428
9494
  expanded: isExpanded
9429
9495
  }),
9430
9496
  onClick: handleIconClick,
@@ -9437,7 +9503,7 @@ const Search = ({
9437
9503
  })
9438
9504
  })
9439
9505
  }), jsxRuntime.jsx("div", {
9440
- className: classNames('ff-vertical-line', {
9506
+ className: cx('ff-vertical-line', {
9441
9507
  expanded: isExpanded
9442
9508
  })
9443
9509
  }), jsxRuntime.jsx("input", {
@@ -17312,7 +17378,7 @@ const TimePicker = ({
17312
17378
  children: [jsxRuntime.jsxs("div", {
17313
17379
  className: "ff-time-picker-fields",
17314
17380
  children: [jsxRuntime.jsxs("div", {
17315
- className: classNames('ff-time-input-container', {
17381
+ className: cx('ff-time-input-container', {
17316
17382
  'ff-time-input-container--float': !!inputValue
17317
17383
  }, {
17318
17384
  'ff-time-input-container--danger': !!timeFieldError
@@ -17320,7 +17386,7 @@ const TimePicker = ({
17320
17386
  children: [jsxRuntime.jsx(Typography, {
17321
17387
  as: "label",
17322
17388
  htmlFor: "time",
17323
- className: classNames('ff-time-input-label', {
17389
+ className: cx('ff-time-input-label', {
17324
17390
  'ff-time-input-label--danger': !!timeFieldError
17325
17391
  }),
17326
17392
  children: "Time"
@@ -17338,12 +17404,12 @@ const TimePicker = ({
17338
17404
  onClick: handleClick,
17339
17405
  onBlur: handleBlur,
17340
17406
  maxLength: 5,
17341
- className: classNames('ff-time-input', {
17407
+ className: cx('ff-time-input', {
17342
17408
  'ff-time-input--danger': !!timeFieldError
17343
17409
  })
17344
17410
  })]
17345
17411
  }), jsxRuntime.jsxs("div", {
17346
- className: classNames('ff-time-period-container', {
17412
+ className: cx('ff-time-period-container', {
17347
17413
  'ff-time-period-container--active': !!isPeriodDropdownOpen
17348
17414
  }),
17349
17415
  ref: periodRef,
@@ -17397,8 +17463,8 @@ const TimePicker = ({
17397
17463
  });
17398
17464
  };
17399
17465
 
17400
- var css_248z$D = "@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}";
17401
- styleInject(css_248z$D);
17466
+ var css_248z$F = "@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}";
17467
+ styleInject(css_248z$F);
17402
17468
 
17403
17469
  const CustomDatePicker = ({
17404
17470
  minDate,
@@ -17598,7 +17664,7 @@ const CustomDatePicker = ({
17598
17664
  className: "ff-custom-month_grid",
17599
17665
  children: months.map((month, index) => jsxRuntime.jsx("div", {
17600
17666
  onClick: () => handleMonthSelect(index),
17601
- className: classNames('ff-custom-month', {
17667
+ className: cx('ff-custom-month', {
17602
17668
  'ff-custom-month--selected': index === selectedMonth?.getMonth()
17603
17669
  }),
17604
17670
  children: jsxRuntime.jsx(Typography, {
@@ -17643,7 +17709,7 @@ const CustomDatePicker = ({
17643
17709
  className: "ff-custom-year_grid",
17644
17710
  children: years.map(year => jsxRuntime.jsx("div", {
17645
17711
  onClick: () => handleYearSelect(year),
17646
- className: classNames('ff-custom-year', {
17712
+ className: cx('ff-custom-year', {
17647
17713
  'ff-custom-year--selected': year === selectedMonth?.getFullYear()
17648
17714
  }),
17649
17715
  children: jsxRuntime.jsx(Typography, {
@@ -17672,7 +17738,7 @@ const CustomDatePicker = ({
17672
17738
  disabled: disabled,
17673
17739
  onClick: handleDateInputClick
17674
17740
  }), helperText && error && jsxRuntime.jsx("span", {
17675
- className: classNames('ff-date-input-message', {
17741
+ className: cx('ff-date-input-message', {
17676
17742
  'ff-date-input-message--danger': !!error
17677
17743
  }),
17678
17744
  children: helperText
@@ -17952,8 +18018,8 @@ const StateDropdown = ({
17952
18018
  });
17953
18019
  };
17954
18020
 
17955
- var css_248z$C = ".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-plus-icon {\n border-radius: 16px;\n border-style: none;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 8px;\n background-color: var(--hover-color);\n padding: 2px 8px 2px 2px;\n border: 1px solid var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon {\n width: 20px;\n height: 20px;\n border: 1px solid var(--primary-icon-color);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon .ff-icon-color path {\n color: var(--primary-icon-color);\n}\n.ff-plus-icon .icon-name {\n color: var(--secondary-icon-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-plus-icon:hover {\n border: 1px solid transparent;\n background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon:hover .icon-name {\n font-weight: 600;\n color: var(--primary-icon-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-plus-icon:hover .button-icon {\n width: 20px;\n height: 20px;\n border: 1px solid transparent;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n background-color: var(--hover-color);\n}\n.ff-plus-icon:hover .button-icon .ff-icon-color path {\n color: var(--secondary-icon-color);\n}";
17956
- styleInject(css_248z$C);
18021
+ var css_248z$E = ".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-plus-icon {\n border-radius: 16px;\n border-style: none;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 8px;\n background-color: var(--hover-color);\n padding: 2px 8px 2px 2px;\n border: 1px solid var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon {\n width: 20px;\n height: 20px;\n border: 1px solid var(--primary-icon-color);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon .ff-icon-color path {\n color: var(--primary-icon-color);\n}\n.ff-plus-icon .icon-name {\n color: var(--secondary-icon-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-plus-icon:hover {\n border: 1px solid transparent;\n background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon:hover .icon-name {\n font-weight: 600;\n color: var(--primary-icon-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-plus-icon:hover .button-icon {\n width: 20px;\n height: 20px;\n border: 1px solid transparent;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n background-color: var(--hover-color);\n}\n.ff-plus-icon:hover .button-icon .ff-icon-color path {\n color: var(--secondary-icon-color);\n}";
18022
+ styleInject(css_248z$E);
17957
18023
 
17958
18024
  const IconButton = ({
17959
18025
  label,
@@ -17963,10 +18029,10 @@ const IconButton = ({
17963
18029
  }) => {
17964
18030
  return jsxRuntime.jsxs("button", {
17965
18031
  onClick: onClick,
17966
- className: classNames('ff-plus-icon'),
18032
+ className: cx('ff-plus-icon'),
17967
18033
  ref: ref,
17968
18034
  children: [jsxRuntime.jsx("div", {
17969
- className: classNames('button-icon'),
18035
+ className: cx('button-icon'),
17970
18036
  children: jsxRuntime.jsx(Icon, {
17971
18037
  height: 12,
17972
18038
  width: 12,
@@ -17983,8 +18049,8 @@ const IconButton = ({
17983
18049
  });
17984
18050
  };
17985
18051
 
17986
- var css_248z$B = ".ff-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--modal-background-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n flex-direction: column;\n}\n\n.ff-modal-container {\n border-radius: 8px;\n overflow: hidden;\n}\n\n.ff-modal-content {\n background: var(--ff-mini-modal-border);\n position: relative;\n max-width: 100%;\n padding: 16px;\n}\n.ff-modal-content .ff-modal-header {\n height: 32px;\n width: 100%;\n}\n\n.modal-bottom-border {\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n}\n\n.modal-top-border {\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n}\n\n.ff-modal-footer {\n background-color: var(--expandable-menu-option-bg);\n max-width: 100%;\n width: 100%;\n height: 32px;\n display: flex;\n flex-direction: row;\n justify-content: end;\n align-items: center;\n gap: 8px;\n padding: 4px 16px;\n}";
17987
- styleInject(css_248z$B);
18052
+ var css_248z$D = ".ff-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--modal-background-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n flex-direction: column;\n}\n\n.ff-modal-container {\n border-radius: 8px;\n overflow: hidden;\n}\n\n.ff-modal-content {\n background: var(--ff-mini-modal-border);\n position: relative;\n max-width: 100%;\n padding: 16px;\n}\n.ff-modal-content .ff-modal-header {\n height: 32px;\n width: 100%;\n}\n\n.modal-bottom-border {\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n}\n\n.modal-top-border {\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n}\n\n.ff-modal-footer {\n background-color: var(--expandable-menu-option-bg);\n max-width: 100%;\n width: 100%;\n height: 32px;\n display: flex;\n flex-direction: row;\n justify-content: end;\n align-items: center;\n gap: 8px;\n padding: 4px 16px;\n}";
18053
+ styleInject(css_248z$D);
17988
18054
 
17989
18055
  const Modal = ({
17990
18056
  isOpen,
@@ -18044,7 +18110,7 @@ const Modal = ({
18044
18110
  },
18045
18111
  className: "ff-modal-container",
18046
18112
  children: [jsxRuntime.jsxs("div", {
18047
- className: classNames(`ff-modal-content ${currentTheme} ${contentClassName}`, {
18113
+ className: cx(`ff-modal-content ${currentTheme} ${contentClassName}`, {
18048
18114
  'modal-bottom-border': !isFooterDisplayed,
18049
18115
  'modal-top-border': !isHeaderDisplayed
18050
18116
  }),
@@ -22680,8 +22746,8 @@ const DragAndDrop = {
22680
22746
  DNDUtilities
22681
22747
  };
22682
22748
 
22683
- var css_248z$A = ".ff_variable_input_container .ff_label_container {\n display: flex;\n align-items: center;\n margin-bottom: 4px;\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_input_label {\n color: var(--error);\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_required_asterisk {\n color: var(--error);\n}\n.ff_variable_input_container .ff_required_asterisk {\n color: var(--input-error-text-color);\n font-size: 1.1em;\n margin-right: 4px;\n}\n.ff_variable_input_container .ff_input_label {\n font-size: 14px;\n font-weight: 500;\n color: var(--text-color);\n}\n.ff_variable_input_container .ff_input_label.ff_no_hover {\n color: var(--toggle-disable-icon-color);\n}\n.ff_variable_input_container .ff_input_label.ff_disabled_label {\n color: var(--toggle-disable-icon-color);\n cursor: not-allowed;\n}\n.ff_variable_input_container .ff_input_label.ff_danger_label {\n color: var(--error);\n}\n.ff_variable_input_container .ff_content_editable {\n min-width: 8rem;\n border: 1px solid var(--input-default-border-color);\n padding: 8px;\n min-height: 30px;\n border-radius: 4px;\n font-size: 14px;\n line-height: 20px;\n transition: border-color 0.2s ease;\n position: relative;\n text-align: left;\n display: flex;\n align-items: center;\n overflow: auto;\n}\n.ff_variable_input_container .ff_content_editable .ff_var_red {\n color: var(--status-rejected-text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_def_color {\n color: var(--text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_green {\n color: var(--status-success-text-color);\n}\n.ff_variable_input_container .ff_content_editable::after {\n content: \"*\";\n color: var(--input-error-text-color);\n font-size: 1.2em;\n position: absolute;\n top: 2px;\n right: 2px;\n display: none;\n}\n.ff_variable_input_container .ff_content_editable.ff_required::after {\n display: inline;\n}\n.ff_variable_input_container .ff_content_editable.ff_required_empty:focus-within, .ff_variable_input_container .ff_content_editable.ff_required_empty:focus {\n border-color: var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_content_editable:empty::before {\n content: attr(data-placeholder);\n color: var(--ff-search-filed-placeholder-text);\n position: absolute;\n user-select: none;\n pointer-events: none;\n font-size: medium;\n}\n.ff_variable_input_container .ff_content_editable.ff_disabled {\n pointer-events: none;\n opacity: 0.5;\n background-color: var(--input-default-border-color);\n}\n.ff_variable_input_container .ff_content_editable.ff_invalid_input {\n border: 1px solid var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_suggestions {\n border: 1px solid var(--input-default-border-color);\n margin-top: 4px;\n padding: 4px;\n border-radius: 4px;\n list-style-type: none;\n background-color: var(--ff-select-background-color);\n max-height: 150px;\n overflow-y: auto;\n}\n.ff_variable_input_container .ff_suggestion_item {\n padding: 4px;\n cursor: pointer;\n}\n.ff_variable_input_container .ff_suggestion_item:hover {\n background-color: var(--ff-select-background-color);\n}";
22684
- styleInject(css_248z$A);
22749
+ var css_248z$C = ".ff_variable_input_container .ff_label_container {\n display: flex;\n align-items: center;\n margin-bottom: 4px;\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_input_label {\n color: var(--error);\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_required_asterisk {\n color: var(--error);\n}\n.ff_variable_input_container .ff_required_asterisk {\n color: var(--input-error-text-color);\n font-size: 1.1em;\n margin-right: 4px;\n}\n.ff_variable_input_container .ff_input_label {\n font-size: 14px;\n font-weight: 500;\n color: var(--text-color);\n}\n.ff_variable_input_container .ff_input_label.ff_no_hover {\n color: var(--toggle-disable-icon-color);\n}\n.ff_variable_input_container .ff_input_label.ff_disabled_label {\n color: var(--toggle-disable-icon-color);\n cursor: not-allowed;\n}\n.ff_variable_input_container .ff_input_label.ff_danger_label {\n color: var(--error);\n}\n.ff_variable_input_container .ff_content_editable {\n min-width: 8rem;\n border: 1px solid var(--input-default-border-color);\n padding: 8px;\n min-height: 30px;\n border-radius: 4px;\n font-size: 14px;\n line-height: 20px;\n transition: border-color 0.2s ease;\n position: relative;\n text-align: left;\n display: flex;\n align-items: center;\n overflow: auto;\n}\n.ff_variable_input_container .ff_content_editable .ff_var_red {\n color: var(--status-rejected-text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_def_color {\n color: var(--text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_green {\n color: var(--status-success-text-color);\n}\n.ff_variable_input_container .ff_content_editable::after {\n content: \"*\";\n color: var(--input-error-text-color);\n font-size: 1.2em;\n position: absolute;\n top: 2px;\n right: 2px;\n display: none;\n}\n.ff_variable_input_container .ff_content_editable.ff_required::after {\n display: inline;\n}\n.ff_variable_input_container .ff_content_editable.ff_required_empty:focus-within, .ff_variable_input_container .ff_content_editable.ff_required_empty:focus {\n border-color: var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_content_editable:empty::before {\n content: attr(data-placeholder);\n color: var(--ff-search-filed-placeholder-text);\n position: absolute;\n user-select: none;\n pointer-events: none;\n font-size: medium;\n}\n.ff_variable_input_container .ff_content_editable.ff_disabled {\n pointer-events: none;\n opacity: 0.5;\n background-color: var(--input-default-border-color);\n}\n.ff_variable_input_container .ff_content_editable.ff_invalid_input {\n border: 1px solid var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_suggestions {\n border: 1px solid var(--input-default-border-color);\n margin-top: 4px;\n padding: 4px;\n border-radius: 4px;\n list-style-type: none;\n background-color: var(--ff-select-background-color);\n max-height: 150px;\n overflow-y: auto;\n}\n.ff_variable_input_container .ff_suggestion_item {\n padding: 4px;\n cursor: pointer;\n}\n.ff_variable_input_container .ff_suggestion_item:hover {\n background-color: var(--ff-select-background-color);\n}";
22750
+ styleInject(css_248z$C);
22685
22751
 
22686
22752
  const VariableInput = ({
22687
22753
  type = 'url',
@@ -22746,7 +22812,7 @@ const VariableInput = ({
22746
22812
  const contentEditableElement = contentEditableRef.current;
22747
22813
  if (contentEditableElement) {
22748
22814
  contentEditableElement.innerHTML = parsedParts.map(part => {
22749
- const varClassName = classNames({
22815
+ const varClassName = cx({
22750
22816
  ['ff_var_red']: part.textType === 'nonVariable',
22751
22817
  ['ff_var_green']: part.textType === 'variable',
22752
22818
  ['ff_var_def_textType']: part.textType !== 'nonVariable' && part.textType !== 'variable'
@@ -22897,7 +22963,7 @@ const VariableInput = ({
22897
22963
  React.useEffect(() => {
22898
22964
  updateContentEditable();
22899
22965
  }, [inputValue]);
22900
- const inputClasses = classNames('ff_content_editable', {
22966
+ const inputClasses = cx('ff_content_editable', {
22901
22967
  ['ff_placeholder']: !inputValue,
22902
22968
  ['ff_disabled']: disabled,
22903
22969
  ['ff_required']: required,
@@ -22907,14 +22973,14 @@ const VariableInput = ({
22907
22973
  className: 'ff_variable_input_container',
22908
22974
  children: [label && jsxRuntime.jsxs("label", {
22909
22975
  htmlFor: name,
22910
- className: classNames('ff_label_container', {
22976
+ className: cx('ff_label_container', {
22911
22977
  ['ff_labelDanger']: error
22912
22978
  }),
22913
22979
  children: [required && jsxRuntime.jsx(Typography, {
22914
22980
  className: 'ff_required_asterisk',
22915
22981
  children: "*"
22916
22982
  }), jsxRuntime.jsx(Typography, {
22917
- className: classNames('ff_input_label', {
22983
+ className: cx('ff_input_label', {
22918
22984
  ['ff_no_hover']: value,
22919
22985
  ['ff_disabled_label']: disabled,
22920
22986
  ['ff_danger_label']: error
@@ -22959,8 +23025,8 @@ const VariableInput = ({
22959
23025
  });
22960
23026
  };
22961
23027
 
22962
- var css_248z$z = ".ff-all-project {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n}\n.ff-all-project .ff-all-project-dropdown {\n width: fit-content;\n border-radius: 16px;\n background-color: var(--ff-all-projects-default-color);\n color: var(--expandable-menu-default-bg);\n line-height: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n padding: 3px;\n cursor: pointer;\n}\n.ff-all-project .ff-all-project-dropdown--selected {\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n}\n.ff-all-project .ff-all-project-dropdown--selected .ff-all-project-container {\n border-radius: 20px;\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 text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label {\n position: relative;\n white-space: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label:hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label::after {\n content: \"\";\n position: absolute;\n top: 20px;\n left: 0%;\n width: 0%;\n height: 2px;\n background-color: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container {\n display: flex;\n padding: 4px;\n gap: 4px;\n justify-content: center;\n text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container .label-icon {\n height: 16px;\n width: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-all-project .ff-projects-dropdown {\n width: 202px;\n position: absolute;\n top: 50px;\n padding: 1px;\n border: 0.5px solid var(--expandable-menu-default-bg);\n border-radius: 4px;\n background-color: var(--secondary-icon-color);\n color: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search {\n width: 100%;\n margin-bottom: 1px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input {\n height: 30px;\n width: inherit;\n border-radius: 4px;\n border-style: none;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input::placeholder {\n padding-left: 28px;\n font-size: 8px;\n line-height: 12px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search span {\n position: absolute;\n top: 11px;\n left: 8px;\n}\n.ff-all-project .ff-projects-dropdown .scroll {\n max-height: 150px;\n overflow-x: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar {\n width: 2px;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar-thumb {\n background: var(--primary-icon-color);\n border-radius: 2px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n height: 24px;\n width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons svg path {\n fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover {\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover svg path {\n fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n height: 24px;\n width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons svg path {\n fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover {\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover svg path {\n fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n border-radius: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option .ff-projects-icons svg path {\n fill: var(--secondary-icon-color);\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}";
22963
- styleInject(css_248z$z);
23028
+ var css_248z$B = ".ff-all-project {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n}\n.ff-all-project .ff-all-project-dropdown {\n width: fit-content;\n border-radius: 16px;\n color: var(--expandable-menu-default-bg);\n line-height: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n padding: 3px;\n cursor: pointer;\n}\n.ff-all-project .ff-all-project-dropdown--selected {\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n}\n.ff-all-project .ff-all-project-dropdown--selected .ff-all-project-container {\n border-radius: 20px;\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 text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label {\n position: relative;\n white-space: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label:hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label::after {\n content: \"\";\n position: absolute;\n top: 20px;\n left: 0%;\n width: 0%;\n height: 2px;\n background-color: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container {\n display: flex;\n padding: 4px;\n gap: 4px;\n justify-content: center;\n text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container .label-icon {\n height: 16px;\n width: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-all-project .ff-projects-dropdown {\n width: 202px;\n position: absolute;\n top: 50px;\n padding: 1px;\n border: 0.5px solid var(--expandable-menu-default-bg);\n border-radius: 4px;\n background-color: var(--secondary-icon-color);\n color: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search {\n width: 100%;\n margin-bottom: 1px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input {\n height: 30px;\n width: inherit;\n border-radius: 4px;\n border-style: none;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input::placeholder {\n padding-left: 28px;\n font-size: 8px;\n line-height: 12px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search span {\n position: absolute;\n top: 11px;\n left: 8px;\n}\n.ff-all-project .ff-projects-dropdown .scroll {\n max-height: 150px;\n overflow-x: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar {\n width: 2px;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar-thumb {\n background: var(--primary-icon-color);\n border-radius: 2px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n height: 24px;\n width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons svg path {\n fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover {\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover svg path {\n fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n height: 24px;\n width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons svg path {\n fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover {\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover svg path {\n fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n border-radius: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option .ff-projects-icons svg path {\n fill: var(--secondary-icon-color);\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}";
23029
+ styleInject(css_248z$B);
22964
23030
 
22965
23031
  const AllProjectsDropdown = ({
22966
23032
  onClick = () => {},
@@ -22999,26 +23065,26 @@ const AllProjectsDropdown = ({
22999
23065
  };
23000
23066
  useClickOutside(optionsRef, closeOptions);
23001
23067
  return jsxRuntime.jsxs("div", {
23002
- className: classNames('ff-all-project'),
23068
+ className: cx('ff-all-project'),
23003
23069
  children: [jsxRuntime.jsx("div", {
23004
- className: classNames('ff-all-project-dropdown', {
23070
+ className: cx('ff-all-project-dropdown', {
23005
23071
  ['ff-all-project-dropdown--selected']: selected
23006
23072
  }),
23007
23073
  children: jsxRuntime.jsxs("div", {
23008
- className: classNames('ff-all-project-container'),
23074
+ className: cx('ff-all-project-container'),
23009
23075
  children: [jsxRuntime.jsx(Typography, {
23010
23076
  as: 'div',
23011
23077
  lineHeight: '18px',
23012
23078
  fontSize: 12,
23013
23079
  fontWeight: 'regular',
23014
- className: classNames('projects-label'),
23080
+ className: cx('projects-label'),
23015
23081
  onClick: onMenuClick,
23016
23082
  children: jsxRuntime.jsx(Tooltip, {
23017
23083
  title: selectedOptions?.label,
23018
23084
  children: selectedOptions.label.length <= 12 ? selectedOptions.label : truncateText(selectedOptions?.label, 8)
23019
23085
  })
23020
23086
  }), jsxRuntime.jsx("div", {
23021
- className: classNames('label-icon'),
23087
+ className: cx('label-icon'),
23022
23088
  onClick: handleShowOption,
23023
23089
  children: jsxRuntime.jsx(Icon, {
23024
23090
  name: "arrows_down_icon",
@@ -23030,10 +23096,10 @@ const AllProjectsDropdown = ({
23030
23096
  })]
23031
23097
  })
23032
23098
  }), showOptions && jsxRuntime.jsxs("div", {
23033
- className: classNames('ff-projects-dropdown'),
23099
+ className: cx('ff-projects-dropdown'),
23034
23100
  ref: optionsRef,
23035
23101
  children: [jsxRuntime.jsxs("div", {
23036
- className: classNames('ff-projects-search'),
23102
+ className: cx('ff-projects-search'),
23037
23103
  onMouseEnter: () => handleSearchEnter(),
23038
23104
  onMouseLeave: () => handleSearchLeave(),
23039
23105
  children: [search && jsxRuntime.jsx(Icon, {
@@ -23051,11 +23117,11 @@ const AllProjectsDropdown = ({
23051
23117
  value: 'All Projects',
23052
23118
  iconName: 'all_projects'
23053
23119
  }),
23054
- className: classNames('ff-all-projects-options', {
23120
+ className: cx('ff-all-projects-options', {
23055
23121
  ['ff-selected-option']: selectedOption.label === 'All Projects'
23056
23122
  }),
23057
23123
  children: [jsxRuntime.jsx("div", {
23058
- className: classNames('ff-projects-icons'),
23124
+ className: cx('ff-projects-icons'),
23059
23125
  children: jsxRuntime.jsx(Icon, {
23060
23126
  name: 'all_projects',
23061
23127
  height: 12,
@@ -23067,14 +23133,14 @@ const AllProjectsDropdown = ({
23067
23133
  children: 'All Projects'
23068
23134
  })]
23069
23135
  }), jsxRuntime.jsx("div", {
23070
- className: classNames('option-card', `${options.length > 4 ? 'scroll' : ''}`),
23136
+ className: cx('option-card', `${options.length > 4 ? 'scroll' : ''}`),
23071
23137
  children: options.map((option, index) => jsxRuntime.jsxs("div", {
23072
23138
  onClick: () => handleSelectOption(option),
23073
- className: classNames('ff-projects-options', {
23139
+ className: cx('ff-projects-options', {
23074
23140
  ['ff-selected-option']: selectedOption.label === option.label
23075
23141
  }),
23076
23142
  children: [jsxRuntime.jsx("div", {
23077
- className: classNames('ff-projects-icons'),
23143
+ className: cx('ff-projects-icons'),
23078
23144
  children: jsxRuntime.jsx(Icon, {
23079
23145
  name: option.iconName,
23080
23146
  height: 12,
@@ -23095,8 +23161,8 @@ const AllProjectsDropdown = ({
23095
23161
  });
23096
23162
  };
23097
23163
 
23098
- var css_248z$y = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-pie-chart-container .ff-pie-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-pie-chart-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n font-size: var(--fontSize);\n}\n.ff-pie-chart-container .ff-pie-chart-border {\n display: inline-block;\n border: 2px solid var(--pie-chart-border-color);\n border-radius: 50%;\n}\n.ff-pie-chart-container .ff-pie-chart-tooltip {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -100%);\n padding: 8px;\n border-radius: 4px;\n background-color: var(--tooltip-bg-color);\n color: var(--primary-icon-color);\n font-weight: 400;\n pointer-events: none;\n}\n.ff-pie-chart-container .ff-pie-chart-legend {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-value {\n color: var(--drawer-title-color);\n}";
23099
- styleInject(css_248z$y);
23164
+ var css_248z$A = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-pie-chart-container .ff-pie-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-pie-chart-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n font-size: var(--fontSize);\n}\n.ff-pie-chart-container .ff-pie-chart-border {\n display: inline-block;\n border: 2px solid var(--pie-chart-border-color);\n border-radius: 50%;\n}\n.ff-pie-chart-container .ff-pie-chart-tooltip {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -100%);\n padding: 8px;\n border-radius: 4px;\n background-color: var(--tooltip-bg-color);\n color: var(--primary-icon-color);\n font-weight: 400;\n pointer-events: none;\n}\n.ff-pie-chart-container .ff-pie-chart-legend {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-value {\n color: var(--drawer-title-color);\n}";
23165
+ styleInject(css_248z$A);
23100
23166
 
23101
23167
  const calculateArc$3 = ({
23102
23168
  x,
@@ -23250,8 +23316,8 @@ const PieChart = ({
23250
23316
  });
23251
23317
  };
23252
23318
 
23253
- var css_248z$x = ".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}\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 transition: width 3s 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--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}";
23254
- styleInject(css_248z$x);
23319
+ var css_248z$z = ".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}";
23320
+ styleInject(css_248z$z);
23255
23321
 
23256
23322
  const AppHeader = ({
23257
23323
  logoIconName = 'fireflink_icon',
@@ -23311,7 +23377,7 @@ const AppHeader = ({
23311
23377
  className: "ff-app-header-nav-bar-items fontSm",
23312
23378
  children: appHeaderMenuItems.map(menuItem => {
23313
23379
  return jsxRuntime.jsxs("div", {
23314
- className: classNames('ff-app-header-nav-bar-item', {
23380
+ className: cx('ff-app-header-nav-bar-item', {
23315
23381
  ['ff-app-header-nav-bar-item--selected']: menuItem.label === selectedMenu
23316
23382
  }),
23317
23383
  children: [jsxRuntime.jsx(Typography, {
@@ -23326,7 +23392,7 @@ const AppHeader = ({
23326
23392
  className: "ff-app-header-submenu-container",
23327
23393
  children: jsxRuntime.jsx(Typography, {
23328
23394
  as: "div",
23329
- className: classNames('ff-app-header-nav-bar-submenu-item', {
23395
+ className: cx('ff-app-header-nav-bar-submenu-item', {
23330
23396
  ['ff-app-header-nav-bar-submenu-item--selected']: subMenuItem.label === selectedSubMenu
23331
23397
  }),
23332
23398
  lineHeight: "18px",
@@ -23347,7 +23413,7 @@ const AppHeader = ({
23347
23413
  return jsxRuntime.jsx(jsxRuntime.Fragment, {
23348
23414
  children: jsxRuntime.jsx("div", {
23349
23415
  onClick: () => onQuickMenuClick(quickMenuItem),
23350
- className: classNames('ff-app-header-nav-bar-quickmenu-item', {
23416
+ className: cx('ff-app-header-nav-bar-quickmenu-item', {
23351
23417
  ['ff-app-header-nav-bar-quickmenu-item--selected']: quickMenuItem.iconName === selectedQuickMenu
23352
23418
  }),
23353
23419
  children: jsxRuntime.jsx(Tooltip, {
@@ -23389,15 +23455,15 @@ const AppHeader = ({
23389
23455
  });
23390
23456
  };
23391
23457
 
23392
- var css_248z$w = ".ff_rounded_lg {\n border-radius: 8px;\n}\n\n.ff_paper_basic_style {\n padding: 20px;\n background-color: var(--ff-paper-dark-background-color);\n}\n\n.ff_paper_default_style {\n padding: 20px;\n background-color: var(--ff-paper-background-color);\n}";
23393
- styleInject(css_248z$w);
23458
+ var css_248z$y = ".ff_rounded_lg {\n border-radius: 8px;\n}\n\n.ff_paper_basic_style {\n padding: 20px;\n background-color: var(--ff-paper-dark-background-color);\n}\n\n.ff_paper_default_style {\n padding: 20px;\n background-color: var(--ff-paper-background-color);\n}";
23459
+ styleInject(css_248z$y);
23394
23460
 
23395
23461
  const Paper = ({
23396
23462
  children,
23397
23463
  className = '',
23398
23464
  rounded = false
23399
23465
  }) => {
23400
- const dynamicClassName = classNames({
23466
+ const dynamicClassName = cx({
23401
23467
  ['ff_rounded_lg']: rounded
23402
23468
  }, className);
23403
23469
  return jsxRuntime.jsx("div", {
@@ -23406,8 +23472,8 @@ const Paper = ({
23406
23472
  });
23407
23473
  };
23408
23474
 
23409
- var css_248z$v = ".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}";
23410
- styleInject(css_248z$v);
23475
+ var css_248z$x = ".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}";
23476
+ styleInject(css_248z$x);
23411
23477
 
23412
23478
  const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
23413
23479
  const startX = x + radius * Math.cos(startAngle);
@@ -23566,7 +23632,7 @@ const DashboardDonutChart = ({
23566
23632
  switch (legendType) {
23567
23633
  case 'numberLegend':
23568
23634
  return jsxRuntime.jsx("div", {
23569
- className: classNames('ff-legend-container ff-number-legend', {
23635
+ className: cx('ff-legend-container ff-number-legend', {
23570
23636
  'ff-side-legend': legendPosition === 'left' || legendPosition === 'right'
23571
23637
  }),
23572
23638
  children: legendData.map((item, index) => jsxRuntime.jsxs("div", {
@@ -23607,7 +23673,7 @@ const DashboardDonutChart = ({
23607
23673
  });
23608
23674
  case 'memoryLegend':
23609
23675
  return jsxRuntime.jsx("div", {
23610
- className: classNames('ff-legend-container ff-memory-legend', {
23676
+ className: cx('ff-legend-container ff-memory-legend', {
23611
23677
  'ff-side-legend': legendPosition === 'left' || legendPosition === 'right'
23612
23678
  }),
23613
23679
  children: legendData.map((item, index) => jsxRuntime.jsx(React.Fragment, {
@@ -23710,7 +23776,7 @@ const DashboardDonutChart = ({
23710
23776
  return context.measureText(text).width;
23711
23777
  }
23712
23778
  return jsxRuntime.jsxs("div", {
23713
- className: classNames('ff-dashboard-donut-chart-section', {
23779
+ className: cx('ff-dashboard-donut-chart-section', {
23714
23780
  'ff-dashboard-donut-chart-section-table-legend': legendType === 'tableLegend',
23715
23781
  'legend-position-bottom': legendPosition === 'bottom',
23716
23782
  'legend-position-left': legendPosition === 'left'
@@ -25505,8 +25571,8 @@ var RecaptchaWrapper = makeAsyncScript(getURL, {
25505
25571
  } : {}
25506
25572
  })(ReCAPTCHA);
25507
25573
 
25508
- var css_248z$u = ".ff-recaptcha-wrapper {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.ff-recaptcha-wrapper .ff-recaptcha-error {\n color: var(--input-error-text-color);\n font-size: 12px;\n margin-top: 4px;\n}";
25509
- styleInject(css_248z$u);
25574
+ var css_248z$w = ".ff-recaptcha-wrapper {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.ff-recaptcha-wrapper .ff-recaptcha-error {\n color: var(--input-error-text-color);\n font-size: 12px;\n margin-top: 4px;\n}";
25575
+ styleInject(css_248z$w);
25510
25576
 
25511
25577
  const Recaptcha = /*#__PURE__*/React.forwardRef(({
25512
25578
  onVerify,
@@ -25526,7 +25592,7 @@ const Recaptcha = /*#__PURE__*/React.forwardRef(({
25526
25592
  };
25527
25593
  const error = externalError || internalError;
25528
25594
  return jsxRuntime.jsxs("div", {
25529
- className: classNames('ff-recaptcha-wrapper', className),
25595
+ className: cx('ff-recaptcha-wrapper', className),
25530
25596
  children: [jsxRuntime.jsx(RecaptchaWrapper, {
25531
25597
  ref: ref,
25532
25598
  sitekey: sitekey,
@@ -25549,8 +25615,8 @@ const nlpDropdownDefaultCSSData = {
25549
25615
  dropDownWrapperPadding: 0
25550
25616
  };
25551
25617
 
25552
- var css_248z$t = ".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-nlp-dropdown-wrapper .ff-nlp-options-wrapper {\n max-height: 160px;\n z-index: 100;\n position: absolute;\n min-width: 100px;\n border: 1px solid var(--ff-select-option-border-color);\n box-sizing: border-box;\n margin-top: 4px;\n border-radius: 4px;\n background-color: var(--ff-select-background-color);\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n overflow: hidden auto;\n display: flex;\n justify-content: space-between;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-wrapper1 {\n max-height: 160px;\n z-index: 100;\n min-width: auto;\n box-sizing: border-box;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-track {\n background-color: transparent;\n border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option {\n width: calc(100% - 18px);\n border: 1px solid transparent;\n border-radius: 4px;\n padding: 0px 8px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: pointer;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option:hover {\n border-color: var(--ff-select-background-color);\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-no-option {\n width: calc(100% - 16px);\n margin: 0;\n overflow: hidden;\n padding: 0px 8px;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: not-allowed;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data {\n width: 200px;\n height: 134px;\n border: 1px solid transparent;\n border-radius: 5px;\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n overflow: scroll;\n}";
25553
- styleInject(css_248z$t);
25618
+ var css_248z$v = ".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-nlp-dropdown-wrapper .ff-nlp-options-wrapper {\n max-height: 160px;\n z-index: 100;\n position: absolute;\n min-width: 100px;\n border: 1px solid var(--ff-select-option-border-color);\n box-sizing: border-box;\n margin-top: 4px;\n border-radius: 4px;\n background-color: var(--ff-select-background-color);\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n overflow: hidden auto;\n display: flex;\n justify-content: space-between;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-wrapper1 {\n max-height: 160px;\n z-index: 100;\n min-width: auto;\n box-sizing: border-box;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-track {\n background-color: transparent;\n border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option {\n width: calc(100% - 18px);\n border: 1px solid transparent;\n border-radius: 4px;\n padding: 0px 8px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: pointer;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option:hover {\n border-color: var(--ff-select-background-color);\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-no-option {\n width: calc(100% - 16px);\n margin: 0;\n overflow: hidden;\n padding: 0px 8px;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: not-allowed;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data {\n width: 200px;\n height: 134px;\n border: 1px solid transparent;\n border-radius: 5px;\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n overflow: scroll;\n}";
25619
+ styleInject(css_248z$v);
25554
25620
 
25555
25621
  const NlpDropdown = ({
25556
25622
  onSelectBlur,
@@ -25607,7 +25673,7 @@ const NlpDropdown = ({
25607
25673
  children: jsxRuntime.jsxs("div", {
25608
25674
  ref: optionsWrapperRef,
25609
25675
  style: updateDropdownPosition(),
25610
- className: classNames('ff-nlp-options-wrapper', currentTheme),
25676
+ className: cx('ff-nlp-options-wrapper', currentTheme),
25611
25677
  children: [jsxRuntime.jsxs("div", {
25612
25678
  className: "ff-nlp-options-wrapper1",
25613
25679
  children: [!checkEmpty(options) ? options.map(option =>
@@ -25616,7 +25682,7 @@ const NlpDropdown = ({
25616
25682
  children: jsxRuntime.jsxs(Typography, {
25617
25683
  as: "div",
25618
25684
  lineHeight: "30px",
25619
- className: classNames('ff-nlp-option', currentTheme),
25685
+ className: cx('ff-nlp-option', currentTheme),
25620
25686
  color: "var(--ff-nlp-text-color)",
25621
25687
  onClick: () => onSelectOptionSelector(option),
25622
25688
  children: [jsxRuntime.jsx("span", {
@@ -25714,8 +25780,8 @@ const NlpDropdown = ({
25714
25780
  });
25715
25781
  };
25716
25782
 
25717
- var css_248z$s = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-nlp-input-wrapper .ff-nlp-input, .ff-nlp-input-wrapper .ff-nlp-input-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-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend, .ff-nlp-input-wrapper .ff-nlp-input-label--active {\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-nlp-input-wrapper {\n position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n min-height: 32px;\n min-width: 489px;\n display: flex;\n align-items: end;\n position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset {\n margin: 0;\n padding: 25px 0px 0px 8px;\n border: 1px solid transparent;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n border-radius: 4px;\n display: block;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-label {\n padding: 30px 0px 0px 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--default {\n opacity: 0;\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--active {\n opacity: 1;\n border-color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--option {\n opacity: 1;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-border {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--error {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n padding: 0 2px;\n letter-spacing: 0.5px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--default {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 0;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--active {\n transition: opacity 0.25s ease-out, transform 0.25s ease-out, font-size 0.25s ease-out, padding 0.25s ease-out;\n opacity: 1;\n color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--option {\n opacity: 1;\n color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--error {\n color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--required {\n margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input {\n position: absolute;\n top: 6px;\n right: auto;\n bottom: auto;\n left: auto;\n width: calc(100% - 38px);\n min-height: calc(100% - 8px);\n padding: 0 28px 0 8px;\n border-radius: 4px;\n border: 1px solid transparent;\n z-index: 100;\n background: transparent;\n outline: none;\n color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input:hover ~ .ff-nlp-input-label {\n color: var(--ff-nlp-input-text-hover-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default {\n opacity: 1;\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover {\n border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option {\n border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option .ff-nlp-input-legend--option {\n color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-label {\n min-height: calc(100% - 2px);\n margin-top: 0px;\n top: 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active:hover {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border {\n border: none;\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover ~ .ff-nlp-input-fieldset--no-border {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable {\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover {\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover ~ .ff-nlp-input-label--default {\n color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error:hover {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n position: absolute;\n top: 13px;\n right: auto;\n bottom: auto;\n left: 8px;\n z-index: 1;\n font-size: 12px;\n top: 60%;\n padding-left: 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--default {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 1;\n color: var(--ff-nlp-input-default-color);\n transform: translateY(-50%);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--active {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 0;\n transform: translateY(-150%);\n padding: 0 6px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--required {\n margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow {\n position: absolute;\n top: 60%;\n height: 100%;\n right: 10px;\n transform: rotateX(180deg) translateY(50%);\n cursor: pointer;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--no-label {\n top: 50%;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--down {\n transform: rotateX(0deg) translateY(-50%);\n z-index: 101;\n}\n.ff-nlp-input-wrapper-error-text {\n position: absolute;\n top: auto;\n right: auto;\n bottom: -14px;\n left: 12px;\n white-space: nowrap;\n}";
25718
- styleInject(css_248z$s);
25783
+ var css_248z$u = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-nlp-input-wrapper .ff-nlp-input, .ff-nlp-input-wrapper .ff-nlp-input-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-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend, .ff-nlp-input-wrapper .ff-nlp-input-label--active {\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-nlp-input-wrapper {\n position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n min-height: 32px;\n min-width: 489px;\n display: flex;\n align-items: end;\n position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset {\n margin: 0;\n padding: 25px 0px 0px 8px;\n border: 1px solid transparent;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n border-radius: 4px;\n display: block;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-label {\n padding: 30px 0px 0px 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--default {\n opacity: 0;\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--active {\n opacity: 1;\n border-color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--option {\n opacity: 1;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-border {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--error {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n padding: 0 2px;\n letter-spacing: 0.5px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--default {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 0;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--active {\n transition: opacity 0.25s ease-out, transform 0.25s ease-out, font-size 0.25s ease-out, padding 0.25s ease-out;\n opacity: 1;\n color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--option {\n opacity: 1;\n color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--error {\n color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--required {\n margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input {\n position: absolute;\n top: 6px;\n right: auto;\n bottom: auto;\n left: auto;\n width: calc(100% - 38px);\n min-height: calc(100% - 8px);\n padding: 0 28px 0 8px;\n border-radius: 4px;\n border: 1px solid transparent;\n z-index: 100;\n background: transparent;\n outline: none;\n color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input:hover ~ .ff-nlp-input-label {\n color: var(--ff-nlp-input-text-hover-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default {\n opacity: 1;\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover {\n border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option {\n border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option .ff-nlp-input-legend--option {\n color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-label {\n min-height: calc(100% - 2px);\n margin-top: 0px;\n top: 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active:hover {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border {\n border: none;\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover ~ .ff-nlp-input-fieldset--no-border {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable {\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover {\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover ~ .ff-nlp-input-label--default {\n color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error:hover {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n position: absolute;\n top: 13px;\n right: auto;\n bottom: auto;\n left: 8px;\n z-index: 1;\n font-size: 12px;\n top: 60%;\n padding-left: 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--default {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 1;\n color: var(--ff-nlp-input-default-color);\n transform: translateY(-50%);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--active {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 0;\n transform: translateY(-150%);\n padding: 0 6px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--required {\n margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow {\n position: absolute;\n top: 60%;\n height: 100%;\n right: 10px;\n transform: rotateX(180deg) translateY(50%);\n cursor: pointer;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--no-label {\n top: 50%;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--down {\n transform: rotateX(0deg) translateY(-50%);\n z-index: 101;\n}\n.ff-nlp-input-wrapper-error-text {\n position: absolute;\n top: auto;\n right: auto;\n bottom: -14px;\n left: 12px;\n white-space: nowrap;\n}";
25784
+ styleInject(css_248z$u);
25719
25785
 
25720
25786
  const nlpInputReducer = (state, action) => {
25721
25787
  switch (action.type) {
@@ -25949,12 +26015,12 @@ const NlpInput = ({
25949
26015
  }, []);
25950
26016
  const applyActiveOptionClasses = !isInputFocused && Boolean(option);
25951
26017
  return jsxRuntime.jsxs("div", {
25952
- className: classNames(`ff-nlp-input-wrapper ${className}`),
26018
+ className: cx(`ff-nlp-input-wrapper ${className}`),
25953
26019
  children: [jsxRuntime.jsxs("div", {
25954
26020
  className: "ff-nlp-input",
25955
26021
  children: [jsxRuntime.jsx("input", {
25956
26022
  type: "text",
25957
- className: classNames('ff-nlp-input-input', {
26023
+ className: cx('ff-nlp-input-input', {
25958
26024
  'ff-nlp-input-input--default': !isInputFocused,
25959
26025
  'ff-nlp-input-input--active': applyActiveOptionClasses,
25960
26026
  'ff-nlp-input-input--no-label': !showLabel,
@@ -25977,7 +26043,7 @@ const NlpInput = ({
25977
26043
  spellCheck: "false",
25978
26044
  ref: InputRef
25979
26045
  }), showLabel && jsxRuntime.jsxs("div", {
25980
- className: classNames('ff-nlp-input-label', {
26046
+ className: cx('ff-nlp-input-label', {
25981
26047
  'ff-nlp-input-label--default': !isInputFocused,
25982
26048
  'ff-nlp-input-label--active': isInputFocused || Boolean(option),
25983
26049
  'ff-nlp-input-label--error': errorMsg
@@ -25991,13 +26057,13 @@ const NlpInput = ({
25991
26057
  name: "arrow_up",
25992
26058
  height: 7,
25993
26059
  width: 12,
25994
- className: classNames('ff-nlp-input-arrow', {
26060
+ className: cx('ff-nlp-input-arrow', {
25995
26061
  'ff-nlp-input-arrow--down': isIconClick,
25996
26062
  'ff-nlp-input-arrow--no-label': !showLabel
25997
26063
  }),
25998
26064
  color: iconColor
25999
26065
  }), jsxRuntime.jsx("fieldset", {
26000
- className: classNames('ff-nlp-input-fieldset', {
26066
+ className: cx('ff-nlp-input-fieldset', {
26001
26067
  'ff-nlp-input-fieldset--no-label': !showLabel,
26002
26068
  'ff-nlp-input-fieldset--default': !isInputFocused,
26003
26069
  'ff-nlp-input-fieldset--active': isInputFocused,
@@ -26026,8 +26092,8 @@ const NlpInput = ({
26026
26092
  });
26027
26093
  };
26028
26094
 
26029
- var css_248z$r = ".ff-icon-radio-group {\n width: 237px;\n height: 24px;\n display: flex;\n align-items: center;\n gap: 47px;\n position: relative;\n}\n\n.ff-icon-radio-button {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n position: relative;\n}\n.ff-icon-radio-button.selected {\n background-color: var(--brand-color);\n}\n.ff-icon-radio-button.disabled {\n opacity: 50%;\n cursor: not-allowed;\n}\n.ff-icon-radio-button .icon-container {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--border-color);\n background: var(--drawer-footer-bg);\n}\n.ff-icon-radio-button .icon-container:hover {\n background: var(--border-color);\n}\n.ff-icon-radio-button .icon-container.selected {\n background-color: var(--brand-color);\n}\n.ff-icon-radio-button .icon-container .icon {\n width: 14px;\n height: 14px;\n}\n\n.line-connector {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 1px;\n background-color: var(--border-color);\n z-index: -1;\n border-radius: 2px 0px 0px 0px;\n opacity: 0px;\n}";
26030
- styleInject(css_248z$r);
26095
+ var css_248z$t = ".ff-icon-radio-group {\n width: 237px;\n height: 24px;\n display: flex;\n align-items: center;\n gap: 47px;\n position: relative;\n}\n\n.ff-icon-radio-button {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n position: relative;\n}\n.ff-icon-radio-button.selected {\n background-color: var(--brand-color);\n}\n.ff-icon-radio-button.disabled {\n opacity: 50%;\n cursor: not-allowed;\n}\n.ff-icon-radio-button .icon-container {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--border-color);\n background: var(--drawer-footer-bg);\n}\n.ff-icon-radio-button .icon-container:hover {\n background: var(--border-color);\n}\n.ff-icon-radio-button .icon-container.selected {\n background-color: var(--brand-color);\n}\n.ff-icon-radio-button .icon-container .icon {\n width: 14px;\n height: 14px;\n}\n\n.line-connector {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 1px;\n background-color: var(--border-color);\n z-index: -1;\n border-radius: 2px 0px 0px 0px;\n opacity: 0px;\n}";
26096
+ styleInject(css_248z$t);
26031
26097
 
26032
26098
  const IconRadioGroup = ({
26033
26099
  items,
@@ -26052,9 +26118,9 @@ const IconRadioGroup = ({
26052
26118
  onButtonClick(item);
26053
26119
  };
26054
26120
  return jsxRuntime.jsxs("div", {
26055
- className: classNames('ff-icon-radio-group', className),
26121
+ className: cx('ff-icon-radio-group', className),
26056
26122
  children: [items.map(item => jsxRuntime.jsx("div", {
26057
- className: classNames('ff-icon-radio-button', {
26123
+ className: cx('ff-icon-radio-button', {
26058
26124
  selected: selectedValue === item.iconName,
26059
26125
  disabled: item.disabled
26060
26126
  }),
@@ -26062,7 +26128,7 @@ const IconRadioGroup = ({
26062
26128
  children: jsxRuntime.jsx(Tooltip, {
26063
26129
  title: item.iconLabel,
26064
26130
  children: jsxRuntime.jsx("div", {
26065
- className: classNames('icon-container', {
26131
+ className: cx('icon-container', {
26066
26132
  selected: selectedValue === item.iconName
26067
26133
  }),
26068
26134
  children: jsxRuntime.jsx(Icon, {
@@ -26078,8 +26144,8 @@ const IconRadioGroup = ({
26078
26144
  });
26079
26145
  };
26080
26146
 
26081
- var css_248z$q = ".ff-machine-input-field-wrapper {\n min-width: 100px;\n height: 32px;\n position: relative;\n cursor: pointer;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n height: 100%;\n width: 100%;\n border: 1px solid var(--ff-machine-input-field-border-color);\n padding: 0 8px 0 0;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n display: flex;\n align-items: center;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-icon {\n margin-left: 4px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n min-width: 30px;\n max-width: 70px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse {\n direction: ltr;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-label {\n position: absolute;\n top: -6px;\n left: 8px;\n background-color: var(--ff-machine-input-field-border-color);\n border-radius: 4px;\n padding: 1px 2px;\n height: 12px;\n}";
26082
- styleInject(css_248z$q);
26147
+ var css_248z$s = ".ff-machine-input-field-wrapper {\n min-width: 100px;\n height: 32px;\n position: relative;\n cursor: pointer;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n height: 100%;\n width: 100%;\n border: 1px solid var(--ff-machine-input-field-border-color);\n padding: 0 8px 0 0;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n display: flex;\n align-items: center;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-icon {\n margin-left: 4px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n min-width: 30px;\n max-width: 70px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse {\n direction: ltr;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-label {\n position: absolute;\n top: -6px;\n left: 8px;\n background-color: var(--ff-machine-input-field-border-color);\n border-radius: 4px;\n padding: 1px 2px;\n height: 12px;\n}";
26148
+ styleInject(css_248z$s);
26083
26149
 
26084
26150
  const MachineInputField = /*#__PURE__*/React.forwardRef(({
26085
26151
  width = '',
@@ -26109,7 +26175,7 @@ const MachineInputField = /*#__PURE__*/React.forwardRef(({
26109
26175
  style: {
26110
26176
  width: width
26111
26177
  },
26112
- className: classNames('ff-machine-input-field-wrapper', className),
26178
+ className: cx('ff-machine-input-field-wrapper', className),
26113
26179
  onClick: onClick,
26114
26180
  children: [jsxRuntime.jsxs(Typography, {
26115
26181
  as: "span",
@@ -26119,21 +26185,21 @@ const MachineInputField = /*#__PURE__*/React.forwardRef(({
26119
26185
  className: "ff-machine-input-label",
26120
26186
  children: ["Run ", runCount]
26121
26187
  }), jsxRuntime.jsx("div", {
26122
- className: classNames('ff-machine-input-field', {
26188
+ className: cx('ff-machine-input-field', {
26123
26189
  'ff-machine-input-field-reverse': contentReverse
26124
26190
  }),
26125
26191
  children: options.map(({
26126
26192
  label,
26127
26193
  type
26128
26194
  }) => jsxRuntime.jsxs("div", {
26129
- className: classNames('ff-machine-icon-text-wrapper', {
26195
+ className: cx('ff-machine-icon-text-wrapper', {
26130
26196
  'ff-machine-icon-text-wrapper-reverse': contentReverse
26131
26197
  }),
26132
26198
  children: [jsxRuntime.jsx(Icon, {
26133
26199
  name: getIcon[type] || 'local',
26134
26200
  className: "ff-machine-icon"
26135
26201
  }), jsxRuntime.jsx(Typography, {
26136
- className: classNames('ff-machine-text', {
26202
+ className: cx('ff-machine-text', {
26137
26203
  'ff-machine-text-reverse': contentReverse
26138
26204
  }),
26139
26205
  color: "var(--ff-machine-input-field-text-color)",
@@ -26145,11 +26211,11 @@ const MachineInputField = /*#__PURE__*/React.forwardRef(({
26145
26211
  });
26146
26212
  MachineInputField.displayName = 'MachineInputField';
26147
26213
 
26148
- var css_248z$p = ".ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper {\n height: 66px;\n box-sizing: border-box;\n width: fit-content;\n margin-bottom: 16px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper {\n position: relative;\n display: flex;\n box-sizing: border-box;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-sequential-select-branch {\n width: 240px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow {\n display: flex;\n align-items: center;\n position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper {\n margin: 0;\n width: 40px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper .ff-branch-arrow {\n width: 6px;\n height: 6px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(100% 50%, 0 100%, 0 0);\n position: absolute;\n right: -1px;\n top: -3px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-select-branch-point {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background-color: var(--ff-connecting-branch-color);\n position: absolute;\n left: -3px;\n z-index: 102;\n top: 50%;\n transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down {\n position: absolute;\n height: 38px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-point {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background-color: var(--ff-connecting-branch-color);\n position: absolute;\n left: -2px;\n z-index: 102;\n top: 50%;\n transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-arrow {\n width: 0;\n height: 62px;\n top: calc(50% + 1px);\n border-left: 1px solid var(--ff-connecting-branch-color);\n z-index: 102;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist {\n box-sizing: border-box;\n width: 240px;\n display: flex;\n justify-content: space-between;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper {\n display: flex;\n align-items: center;\n margin-right: 12px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper .ff-scope-text {\n text-transform: capitalize;\n margin: 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper {\n display: flex;\n align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper #ff-sequential-machine-datalist {\n display: flex;\n align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-dataset-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-run-delete-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n cursor: pointer;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n margin: 0 12px 0 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-sequential-branches-wrapper {\n box-sizing: border-box;\n width: fit-content;\n height: fit-content;\n}";
26149
- styleInject(css_248z$p);
26214
+ var css_248z$r = ".ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper {\n height: 66px;\n box-sizing: border-box;\n width: fit-content;\n margin-bottom: 16px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper {\n position: relative;\n display: flex;\n box-sizing: border-box;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-sequential-select-branch {\n width: 240px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow {\n display: flex;\n align-items: center;\n position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper {\n margin: 0;\n width: 40px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper .ff-branch-arrow {\n width: 6px;\n height: 6px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(100% 50%, 0 100%, 0 0);\n position: absolute;\n right: -1px;\n top: -3px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-select-branch-point {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background-color: var(--ff-connecting-branch-color);\n position: absolute;\n left: -3px;\n z-index: 102;\n top: 50%;\n transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down {\n position: absolute;\n height: 38px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-point {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background-color: var(--ff-connecting-branch-color);\n position: absolute;\n left: -2px;\n z-index: 102;\n top: 50%;\n transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-arrow {\n width: 0;\n height: 62px;\n top: calc(50% + 1px);\n border-left: 1px solid var(--ff-connecting-branch-color);\n z-index: 102;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist {\n box-sizing: border-box;\n width: 240px;\n display: flex;\n justify-content: space-between;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper {\n display: flex;\n align-items: center;\n margin-right: 12px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper .ff-scope-text {\n text-transform: capitalize;\n margin: 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper {\n display: flex;\n align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper #ff-sequential-machine-datalist {\n display: flex;\n align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-dataset-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-run-delete-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n cursor: pointer;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n margin: 0 12px 0 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-sequential-branches-wrapper {\n box-sizing: border-box;\n width: fit-content;\n height: fit-content;\n}";
26215
+ styleInject(css_248z$r);
26150
26216
 
26151
- var css_248z$o = ".ff-connecting-branch-grid,\n.ff-connecting-branch-grid-reverse {\n box-sizing: border-box;\n display: grid;\n grid-template-columns: 24px 180px 40px 180px 24px;\n height: 66px;\n margin-bottom: 16px;\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper {\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow {\n position: absolute;\n height: 6px;\n width: 6px;\n background-color: var(--ff-connecting-branch-color);\n z-index: 2;\n clip-path: polygon(0 0, 0% 100%, 100% 50%);\n top: calc(25% - 3px);\n right: -2px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse {\n position: absolute;\n height: 6px;\n width: 6px;\n background-color: var(--ff-connecting-branch-color);\n z-index: 2;\n left: -2px;\n top: calc(25% - 3px);\n clip-path: polygon(0 50%, 100% 100%, 100% 0);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container {\n width: 100%;\n height: 25%;\n border: 1px solid var(--ff-connecting-branch-color);\n border-top: none;\n border-right: none;\n border-bottom-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse {\n width: 100%;\n height: 25%;\n border: 1px solid var(--ff-connecting-branch-color);\n border-top: none;\n border-left: none;\n border-bottom-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist {\n display: flex;\n padding-top: 4px;\n height: 24px;\n justify-content: flex-end;\n width: 100%;\n align-items: center;\n flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-dataset-list-branch {\n display: flex;\n align-items: center;\n flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-icon {\n margin-right: 4px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-text {\n margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-delete-icon {\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse {\n display: flex;\n padding-top: 4px;\n height: 24px;\n justify-content: flex-end;\n width: 100%;\n align-items: center;\n flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-icon {\n margin-right: 4px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-text {\n margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon {\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper {\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n z-index: 2;\n right: -2px;\n top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n z-index: 2;\n left: -2px;\n top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow {\n height: 0;\n width: 100%;\n margin-top: calc(50% - 3px);\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(0 0, 0% 100%, 100% 50%);\n top: calc(25% - 3px);\n right: -2px;\n z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(0 50%, 100% 100%, 100% 0);\n top: calc(25% - 3px);\n left: -1px;\n z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow {\n width: 100%;\n height: 100%;\n margin-top: 17px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n border-right: 1px solid var(--ff-connecting-branch-color);\n border-top-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow-reverse {\n width: 100%;\n height: 100%;\n margin-top: 17px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n border-left: 1px solid var(--ff-connecting-branch-color);\n border-top-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-browser-button,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-browser-button {\n height: 32px;\n display: flex;\n align-items: center;\n}\n\n.ff-connecting-branch-grid-reverse {\n direction: rtl;\n margin: 0 0 16px 0;\n}";
26152
- styleInject(css_248z$o);
26217
+ var css_248z$q = ".ff-connecting-branch-grid,\n.ff-connecting-branch-grid-reverse {\n box-sizing: border-box;\n display: grid;\n grid-template-columns: 24px 180px 40px 180px 24px;\n height: 66px;\n margin-bottom: 16px;\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper {\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow {\n position: absolute;\n height: 6px;\n width: 6px;\n background-color: var(--ff-connecting-branch-color);\n z-index: 2;\n clip-path: polygon(0 0, 0% 100%, 100% 50%);\n top: calc(25% - 3px);\n right: -2px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse {\n position: absolute;\n height: 6px;\n width: 6px;\n background-color: var(--ff-connecting-branch-color);\n z-index: 2;\n left: -2px;\n top: calc(25% - 3px);\n clip-path: polygon(0 50%, 100% 100%, 100% 0);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container {\n width: 100%;\n height: 25%;\n border: 1px solid var(--ff-connecting-branch-color);\n border-top: none;\n border-right: none;\n border-bottom-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse {\n width: 100%;\n height: 25%;\n border: 1px solid var(--ff-connecting-branch-color);\n border-top: none;\n border-left: none;\n border-bottom-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist {\n display: flex;\n padding-top: 4px;\n height: 24px;\n justify-content: flex-end;\n width: 100%;\n align-items: center;\n flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-dataset-list-branch {\n display: flex;\n align-items: center;\n flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-icon {\n margin-right: 4px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-text {\n margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-delete-icon {\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse {\n display: flex;\n padding-top: 4px;\n height: 24px;\n justify-content: flex-end;\n width: 100%;\n align-items: center;\n flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-icon {\n margin-right: 4px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-text {\n margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon {\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper {\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n z-index: 2;\n right: -2px;\n top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n z-index: 2;\n left: -2px;\n top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow {\n height: 0;\n width: 100%;\n margin-top: calc(50% - 3px);\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(0 0, 0% 100%, 100% 50%);\n top: calc(25% - 3px);\n right: -2px;\n z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(0 50%, 100% 100%, 100% 0);\n top: calc(25% - 3px);\n left: -1px;\n z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow {\n width: 100%;\n height: 100%;\n margin-top: 17px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n border-right: 1px solid var(--ff-connecting-branch-color);\n border-top-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow-reverse {\n width: 100%;\n height: 100%;\n margin-top: 17px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n border-left: 1px solid var(--ff-connecting-branch-color);\n border-top-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-browser-button,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-browser-button {\n height: 32px;\n display: flex;\n align-items: center;\n}\n\n.ff-connecting-branch-grid-reverse {\n direction: rtl;\n margin: 0 0 16px 0;\n}";
26218
+ styleInject(css_248z$q);
26153
26219
 
26154
26220
  const Branches = ({
26155
26221
  machineInstances,
@@ -26179,7 +26245,7 @@ const Branches = ({
26179
26245
  return `24px ${machineColumnWidth}px repeat(${machineColumnCount - 1}, 40px ${machineColumnWidth}px) 24px`;
26180
26246
  };
26181
26247
  return jsxRuntime.jsxs("div", {
26182
- className: classNames({
26248
+ className: cx({
26183
26249
  'ff-connecting-branch-grid': evenRow,
26184
26250
  'ff-connecting-branch-grid-reverse': !evenRow
26185
26251
  }),
@@ -26189,12 +26255,12 @@ const Branches = ({
26189
26255
  children: [jsxRuntime.jsxs("div", {
26190
26256
  className: "ff-connecting-branch-start-wrapper",
26191
26257
  children: [jsxRuntime.jsx("div", {
26192
- className: classNames({
26258
+ className: cx({
26193
26259
  'ff-connecting-branch-arrow': evenRow,
26194
26260
  'ff-connecting-branch-arrow-reverse': !evenRow
26195
26261
  })
26196
26262
  }), jsxRuntime.jsx("div", {
26197
- className: classNames({
26263
+ className: cx({
26198
26264
  'ff-connecting-branch-container': evenRow,
26199
26265
  'ff-connecting-branch-container-reverse': !evenRow
26200
26266
  }),
@@ -26221,7 +26287,7 @@ const Branches = ({
26221
26287
  children: [jsxRuntime.jsxs("div", {
26222
26288
  className: "ff-connecting-branch-input-point-wrapper",
26223
26289
  children: [jsxRuntime.jsx("div", {
26224
- className: classNames({
26290
+ className: cx({
26225
26291
  'ff-connecting-branch-point': evenRow,
26226
26292
  'ff-connecting-branch-point-reverse': !evenRow
26227
26293
  })
@@ -26238,7 +26304,7 @@ const Branches = ({
26238
26304
  contentReverse: !evenRow
26239
26305
  }, ffid())]
26240
26306
  }), jsxRuntime.jsxs("div", {
26241
- className: classNames({
26307
+ className: cx({
26242
26308
  'ff-connecting-branch-datalist': evenRow,
26243
26309
  'ff-connecting-branch-datalist-reverse': !evenRow
26244
26310
  }),
@@ -26288,7 +26354,7 @@ const Branches = ({
26288
26354
  borderTop: `1px ${getBorderStyle(machineInstance, machineInstances[index + 1])} var(--ff-connecting-branch-color)`
26289
26355
  },
26290
26356
  children: jsxRuntime.jsx("div", {
26291
- className: classNames({
26357
+ className: cx({
26292
26358
  'ff-connecting-branch-arrow': evenRow,
26293
26359
  'ff-connecting-branch-arrow-reverse': !evenRow
26294
26360
  })
@@ -26296,7 +26362,7 @@ const Branches = ({
26296
26362
  })]
26297
26363
  }, ffid());
26298
26364
  }), !lastMachineInstance && jsxRuntime.jsx("div", {
26299
- className: classNames({
26365
+ className: cx({
26300
26366
  'ff-connecting-branch-end-arrow': evenRow,
26301
26367
  'ff-connecting-branch-end-arrow-reverse': !evenRow
26302
26368
  }),
@@ -26310,8 +26376,8 @@ const Branches = ({
26310
26376
  });
26311
26377
  };
26312
26378
 
26313
- var css_248z$n = ".ff-connecting-branch-grid-wrapper {\n box-sizing: border-box;\n}";
26314
- styleInject(css_248z$n);
26379
+ var css_248z$p = ".ff-connecting-branch-grid-wrapper {\n box-sizing: border-box;\n}";
26380
+ styleInject(css_248z$p);
26315
26381
 
26316
26382
  const ConnectingBranches = ({
26317
26383
  machineBranchInstances,
@@ -26407,7 +26473,7 @@ const SequentialConnectingBranch = ({
26407
26473
  selectedOption: selectedMachineInstance,
26408
26474
  valueAccessor: 'name'
26409
26475
  }), !isMachineSelected && jsxRuntime.jsxs("div", {
26410
- className: classNames({
26476
+ className: cx({
26411
26477
  'ff-select-branch-arrow': isMachineInstances,
26412
26478
  'ff-select-branch-arrow-down': !isMachineInstances
26413
26479
  }),
@@ -26482,8 +26548,8 @@ const SequentialConnectingBranch = ({
26482
26548
  });
26483
26549
  };
26484
26550
 
26485
- var css_248z$m = ".ff-input-field {\n display: none;\n}\n\n.ff-attachment-files {\n display: flex;\n align-items: center;\n gap: 4px;\n line-height: 15px;\n}";
26486
- styleInject(css_248z$m);
26551
+ var css_248z$o = ".ff-input-field {\n display: none;\n}\n\n.ff-attachment-files {\n display: flex;\n align-items: center;\n gap: 4px;\n line-height: 15px;\n}";
26552
+ styleInject(css_248z$o);
26487
26553
 
26488
26554
  const AttachmentButton = ({
26489
26555
  label,
@@ -26658,8 +26724,8 @@ const toast = {
26658
26724
  alert: (arg1, arg2) => openToast('alert', arg1, arg2)
26659
26725
  };
26660
26726
 
26661
- var css_248z$l = "/* Container Styling */\n.toggle-container {\n display: flex;\n background-color: var(--base-bg-color);\n height: 24px;\n border-radius: 6px;\n padding: 4px 2px;\n overflow: hidden;\n width: fit-content;\n box-shadow: 1px 1px 2px 0px var(--base-bg-color), inset -1px -1px 2px var(--base-bg-color), inset 1px -1px 2px var(--ff-toggle-switch-shadow-color), inset -1px 2px 0px var(--ff-toggle-switch-shadow-color);\n align-items: center;\n justify-content: center;\n gap: 4px;\n}\n\n/* Button Styling */\n.toggle-button {\n padding: 4px 2px;\n font-size: 10px;\n font-weight: 500;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n background-color: var(--base-bg-color);\n color: var(--ff-toggle-switch-off-color);\n outline: none;\n transition: all 0.3s ease;\n min-width: 24px;\n height: 20px;\n text-align: center;\n box-shadow: inset 1px 1px 2px 0 var(--base-bg-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), 1px -1px 2px 0 var(--ff-chips-blur-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Active Button */\n.toggle-button.active {\n background-color: var(--ff-line-number-bg);\n color: var(--base-bg-color);\n box-shadow: inset -1px -1px 2px 0 var(--ff-chips-blur-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Button Hover Effect */\n.toggle-button:hover {\n background-color: var(--hover-color);\n color: var(--brand-color);\n}";
26662
- styleInject(css_248z$l);
26727
+ var css_248z$n = "/* Container Styling */\n.toggle-container {\n display: flex;\n background-color: var(--base-bg-color);\n height: 24px;\n border-radius: 6px;\n padding: 4px 2px;\n overflow: hidden;\n width: fit-content;\n box-shadow: 1px 1px 2px 0px var(--base-bg-color), inset -1px -1px 2px var(--base-bg-color), inset 1px -1px 2px var(--ff-toggle-switch-shadow-color), inset -1px 2px 0px var(--ff-toggle-switch-shadow-color);\n align-items: center;\n justify-content: center;\n gap: 4px;\n}\n\n/* Button Styling */\n.toggle-button {\n padding: 4px 2px;\n font-size: 10px;\n font-weight: 500;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n background-color: var(--base-bg-color);\n color: var(--ff-toggle-switch-off-color);\n outline: none;\n transition: all 0.3s ease;\n min-width: 24px;\n height: 20px;\n text-align: center;\n box-shadow: inset 1px 1px 2px 0 var(--base-bg-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), 1px -1px 2px 0 var(--ff-chips-blur-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Active Button */\n.toggle-button.active {\n background-color: var(--ff-line-number-bg);\n color: var(--base-bg-color);\n box-shadow: inset -1px -1px 2px 0 var(--ff-chips-blur-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Button Hover Effect */\n.toggle-button:hover {\n background-color: var(--hover-color);\n color: var(--brand-color);\n}";
26728
+ styleInject(css_248z$n);
26663
26729
 
26664
26730
  const ToggleSwitch = ({
26665
26731
  selected = "text",
@@ -26681,8 +26747,8 @@ const ToggleSwitch = ({
26681
26747
  });
26682
26748
  };
26683
26749
 
26684
- var css_248z$k = ".ff-avatar {\n border-radius: 50%;\n overflow: hidden;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: var(--ff-avatar-background-color);\n}\n.ff-avatar--small {\n width: 32px;\n height: 32px;\n}\n.ff-avatar--medium {\n width: 48px;\n height: 48px;\n}\n.ff-avatar--large {\n width: 64px;\n height: 64px;\n}\n.ff-avatar .ff-avatar-label {\n font-weight: bold;\n text-align: center;\n}";
26685
- styleInject(css_248z$k);
26750
+ var css_248z$m = ".ff-avatar {\n border-radius: 50%;\n overflow: hidden;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: var(--ff-avatar-background-color);\n}\n.ff-avatar--small {\n width: 32px;\n height: 32px;\n}\n.ff-avatar--medium {\n width: 48px;\n height: 48px;\n}\n.ff-avatar--large {\n width: 64px;\n height: 64px;\n}\n.ff-avatar .ff-avatar-label {\n font-weight: bold;\n text-align: center;\n}";
26751
+ styleInject(css_248z$m);
26686
26752
 
26687
26753
  const Avatar = ({
26688
26754
  variant = "small",
@@ -26718,8 +26784,8 @@ const Avatar = ({
26718
26784
  });
26719
26785
  };
26720
26786
 
26721
- var css_248z$j = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown, .ff-label-edit-text-field .ff-text-dropdown-field {\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-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-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-label-edit-text-field {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n.ff-label-edit-text-field .ff-label-text-field {\n display: flex;\n gap: 10px;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n position: absolute;\n top: 0;\n left: 10px;\n transform: translateY(-50%);\n transition: all 0.2s ease;\n color: var(--label-edit-text-label-color);\n background: var(--label-edit-text-background-color);\n padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n padding: 4px;\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown {\n border: 1px solid var(--label-edit-text-label-color);\n outline: none;\n width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field {\n position: relative;\n padding: 0 4px;\n border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field {\n flex: 2;\n border: 1px solid var(--label-edit-text-label-color);\n border-radius: 4px 0 0 4px;\n border-right: none;\n border-width: thin;\n padding-left: 5px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field:focus-visible {\n outline: none;\n}\n.ff-label-edit-text-field .dropdown {\n border-radius: 0 4px 4px 0;\n flex: 1;\n height: inherit;\n}\n.ff-label-edit-text-field .ff-icon-container {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n margin: 0;\n color: var(--label-edit-error-text);\n}";
26722
- styleInject(css_248z$j);
26787
+ var css_248z$l = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown, .ff-label-edit-text-field .ff-text-dropdown-field {\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-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-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-label-edit-text-field {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n.ff-label-edit-text-field .ff-label-text-field {\n display: flex;\n gap: 10px;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n position: absolute;\n top: 0;\n left: 10px;\n transform: translateY(-50%);\n transition: all 0.2s ease;\n color: var(--label-edit-text-label-color);\n background: var(--label-edit-text-background-color);\n padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n padding: 4px;\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown {\n border: 1px solid var(--label-edit-text-label-color);\n outline: none;\n width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field {\n position: relative;\n padding: 0 4px;\n border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field {\n flex: 2;\n border: 1px solid var(--label-edit-text-label-color);\n border-radius: 4px 0 0 4px;\n border-right: none;\n border-width: thin;\n padding-left: 5px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field:focus-visible {\n outline: none;\n}\n.ff-label-edit-text-field .dropdown {\n border-radius: 0 4px 4px 0;\n flex: 1;\n height: inherit;\n}\n.ff-label-edit-text-field .ff-icon-container {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n margin: 0;\n color: var(--label-edit-error-text);\n}";
26788
+ styleInject(css_248z$l);
26723
26789
 
26724
26790
  const getErrorMessage$1 = (inputValue, text, customError, customErrorCondition) => {
26725
26791
  if (inputValue === text) {
@@ -26922,8 +26988,8 @@ const LabelEditTextField = ({
26922
26988
  });
26923
26989
  };
26924
26990
 
26925
- var css_248z$i = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field {\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-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-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-label-edit-text-field {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n.ff-label-edit-text-field .display-text-container {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button {\n padding: 4px 8px;\n background-color: var(--button-background-color);\n color: var(--button-text-color);\n border: 1px solid var(--button-border-color);\n border-radius: 4px;\n cursor: pointer;\n font-size: 12px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button:hover {\n background-color: var(--button-hover-background-color);\n}\n.ff-label-edit-text-field .ff-label-text-field {\n display: flex;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n position: absolute;\n top: 0;\n left: 10px;\n transform: translateY(-50%);\n transition: all 0.2s ease;\n color: var(--label-edit-text-label-color);\n background: var(--label-edit-text-background-color);\n padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field {\n outline: none;\n width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field-error-border {\n border: 1px solid var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-border {\n border: 1px solid var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field-error-text {\n color: var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-text {\n color: var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field {\n padding: 0 4px;\n border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-icon-container {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n color: var(--label-edit-error-text);\n margin: 0;\n}";
26926
- styleInject(css_248z$i);
26991
+ var css_248z$k = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field {\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-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-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-label-edit-text-field {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n.ff-label-edit-text-field .display-text-container {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button {\n padding: 4px 8px;\n background-color: var(--button-background-color);\n color: var(--button-text-color);\n border: 1px solid var(--button-border-color);\n border-radius: 4px;\n cursor: pointer;\n font-size: 12px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button:hover {\n background-color: var(--button-hover-background-color);\n}\n.ff-label-edit-text-field .ff-label-text-field {\n display: flex;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n position: absolute;\n top: 0;\n left: 10px;\n transform: translateY(-50%);\n transition: all 0.2s ease;\n color: var(--label-edit-text-label-color);\n background: var(--label-edit-text-background-color);\n padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field {\n outline: none;\n width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field-error-border {\n border: 1px solid var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-border {\n border: 1px solid var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field-error-text {\n color: var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-text {\n color: var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field {\n padding: 0 4px;\n border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-icon-container {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n color: var(--label-edit-error-text);\n margin: 0;\n}";
26992
+ styleInject(css_248z$k);
26927
26993
 
26928
26994
  const capitalize = text => {
26929
26995
  if (!text) return '';
@@ -30649,7 +30715,7 @@ const CornerIndicator = ({
30649
30715
  onSelect();
30650
30716
  }, [onSelect]);
30651
30717
  return jsxRuntime.jsx("th", {
30652
- className: classNames('ff-spreadsheet-header', {
30718
+ className: cx('ff-spreadsheet-header', {
30653
30719
  'ff-spreadsheet-header--selected': selected
30654
30720
  }),
30655
30721
  onClick: handleClick,
@@ -30741,7 +30807,7 @@ const ColumnIndicator = ({
30741
30807
  minWidth: `${columnWidth}px`,
30742
30808
  position: 'relative'
30743
30809
  },
30744
- className: classNames('ff-spreadsheet-header', {
30810
+ className: cx('ff-spreadsheet-header', {
30745
30811
  'ff-spreadsheet-header--selected': selected
30746
30812
  }),
30747
30813
  onClick: handleClick,
@@ -30855,7 +30921,7 @@ const RowIndicator = ({
30855
30921
  height: `${rowHeight}px`,
30856
30922
  position: 'relative'
30857
30923
  },
30858
- className: classNames('ff-spreadsheet-header', {
30924
+ className: cx('ff-spreadsheet-header', {
30859
30925
  'ff-spreadsheet-header--selected': selected
30860
30926
  }),
30861
30927
  onClick: handleClick,
@@ -30988,7 +31054,7 @@ const Cell = ({
30988
31054
  return jsxRuntime.jsxs("td", {
30989
31055
  ref: rootRef,
30990
31056
  style: data?.style,
30991
- className: classNames('ff-spreadsheet-cell', data?.className, {
31057
+ className: cx('ff-spreadsheet-cell', data?.className, {
30992
31058
  'ff-spreadsheet-active-cell': active || dragging
30993
31059
  }),
30994
31060
  onMouseEnter: handleMouseOver,
@@ -31086,7 +31152,7 @@ const DataViewer = ({
31086
31152
  children: convertBooleanToText(value)
31087
31153
  }) : jsxRuntime.jsx("span", {
31088
31154
  onContextMenu: contextClick,
31089
- className: classNames('ff-spreadsheet-data-viewer', {
31155
+ className: cx('ff-spreadsheet-data-viewer', {
31090
31156
  'ff-spreadsheet-data-viewer--preserve-breaks': hasLineBreaker(value)
31091
31157
  }),
31092
31158
  children: value
@@ -31193,7 +31259,7 @@ const ActiveCell = props => {
31193
31259
  const readOnly = cell && cell.readOnly;
31194
31260
  return hidden ? null : jsxRuntime.jsx("div", {
31195
31261
  ref: rootRef,
31196
- className: classNames('ff-spreadsheet-active-cell', `ff-spreadsheet-active-cell--${mode}`),
31262
+ className: cx('ff-spreadsheet-active-cell', `ff-spreadsheet-active-cell--${mode}`),
31197
31263
  style: dimensions,
31198
31264
  onClick: mode === 'view' && !readOnly ? edit : undefined,
31199
31265
  tabIndex: 0,
@@ -31221,7 +31287,7 @@ const FloatingRect = ({
31221
31287
  left
31222
31288
  } = dimensions || {};
31223
31289
  return jsxRuntime.jsx("div", {
31224
- className: classNames('ff-spreadsheet-floating-rect', {
31290
+ className: cx('ff-spreadsheet-floating-rect', {
31225
31291
  [`ff-spreadsheet-floating-rect--${variant}`]: variant,
31226
31292
  'ff-spreadsheet-floating-rect--dragging': dragging,
31227
31293
  'ff-spreadsheet-floating-rect--hidden': hidden
@@ -31260,14 +31326,14 @@ const Copied = () => {
31260
31326
  });
31261
31327
  };
31262
31328
 
31263
- 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-excel {\n display: flex;\n flex-direction: column;\n}\n\n.ff-spreadsheet {\n --background-color: var(--drawer-footer-bg);\n --text-color: var(--text-color);\n --readonly-text-color: var(--toggle-strip-active);\n --outline-color: var(--toggle-strip-active);\n --outline-background-color: var(--overlay-bg);\n --border-color: var(--toggle-strip-color);\n --header-background-color: var(--pop-up-background-blur);\n --elevation: var(--brand-color);\n position: relative;\n overflow: visible;\n background: var(--background-color);\n color: var(--text-color);\n display: inline-block;\n}\n\n.ff-spreadsheet-active-cell {\n position: absolute;\n border: 2px solid var(--outline-color);\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-active-cell--edit {\n background: var(--background-color);\n box-shadow: var(--elevation);\n}\n\n.ff-spreadsheet-table {\n overflow: scroll;\n margin-top: 20px;\n border-collapse: collapse;\n table-layout: fixed;\n}\n.ff-spreadsheet-table::-webkit-scrollbar {\n height: 0px;\n}\n\n.ff-spreadsheet-cell {\n outline: none;\n position: relative;\n z-index: 0;\n}\n\n.ff-spreadsheet-active-cell .Selection_dot {\n background-color: var(--elevation);\n height: 7px;\n width: 7px;\n border-radius: 50%;\n position: absolute;\n right: -3px;\n z-index: 10;\n bottom: -3px;\n cursor: crosshair;\n}\n\n.ff-spreadsheet-cell--readonly {\n color: var(--readonly-text-color);\n}\n\n.ff-spreadsheet-cell,\n.ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n overflow: hidden;\n word-break: keep-all;\n white-space: nowrap;\n text-align: left;\n box-sizing: border-box;\n user-select: none;\n}\n\n.ff-spreadsheet-header {\n background: var(--header-background-color);\n color: var(--readonly-text-color);\n text-align: center;\n}\n\n.corner_indicator {\n margin: 0px 0px 0px 15px;\n}\n\n.ff-spreadsheet-header--selected {\n background: var(--brand-color);\n color: var(--tooltip-text-color);\n}\n\n.ff-spreadsheet-header,\n.ff-spreadsheet-data-viewer,\n.ff-spreadsheet-data-editor input {\n padding: 4px;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-data-viewer--preserve-breaks {\n white-space: pre-wrap;\n}\n\n.ff-spreadsheet-data-editor,\n.ff-spreadsheet-data-editor input {\n width: 100%;\n height: 100%;\n}\n\n.ff-spreadsheet-data-editor input {\n font: inherit;\n color: inherit;\n background: none;\n border: none;\n outline: none;\n margin: 0;\n}\n\n.ff-spreadsheet-data-viewer--boolean {\n text-align: center;\n}\n\n.ff-spreadsheet-floating-rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-floating-rect--hidden {\n display: none;\n}\n\n.ff-spreadsheet-floating-rect--selected {\n background: var(--outline-background-color);\n border: 2px var(--outline-color) solid;\n}\n\n.ff-spreadsheet-floating-rect--dragging {\n border: none;\n}\n\n.ff-spreadsheet-floating-rect--copied {\n border: 2px var(--outline-color) dashed;\n}";
31264
- styleInject(css_248z$h);
31329
+ var css_248z$j = ".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-excel {\n display: flex;\n flex-direction: column;\n}\n\n.ff-spreadsheet {\n --background-color: var(--drawer-footer-bg);\n --text-color: var(--text-color);\n --readonly-text-color: var(--toggle-strip-active);\n --outline-color: var(--toggle-strip-active);\n --outline-background-color: var(--overlay-bg);\n --border-color: var(--toggle-strip-color);\n --header-background-color: var(--pop-up-background-blur);\n --elevation: var(--brand-color);\n position: relative;\n overflow: visible;\n background: var(--background-color);\n color: var(--text-color);\n display: inline-block;\n}\n\n.ff-spreadsheet-active-cell {\n position: absolute;\n border: 2px solid var(--outline-color);\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-active-cell--edit {\n background: var(--background-color);\n box-shadow: var(--elevation);\n}\n\n.ff-spreadsheet-table {\n overflow: scroll;\n margin-top: 20px;\n border-collapse: collapse;\n table-layout: fixed;\n}\n.ff-spreadsheet-table::-webkit-scrollbar {\n height: 0px;\n}\n\n.ff-spreadsheet-cell {\n outline: none;\n position: relative;\n z-index: 0;\n}\n\n.ff-spreadsheet-active-cell .Selection_dot {\n background-color: var(--elevation);\n height: 7px;\n width: 7px;\n border-radius: 50%;\n position: absolute;\n right: -3px;\n z-index: 10;\n bottom: -3px;\n cursor: crosshair;\n}\n\n.ff-spreadsheet-cell--readonly {\n color: var(--readonly-text-color);\n}\n\n.ff-spreadsheet-cell,\n.ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n overflow: hidden;\n word-break: keep-all;\n white-space: nowrap;\n text-align: left;\n box-sizing: border-box;\n user-select: none;\n}\n\n.ff-spreadsheet-header {\n background: var(--header-background-color);\n color: var(--readonly-text-color);\n text-align: center;\n}\n\n.corner_indicator {\n margin: 0px 0px 0px 15px;\n}\n\n.ff-spreadsheet-header--selected {\n background: var(--brand-color);\n color: var(--tooltip-text-color);\n}\n\n.ff-spreadsheet-header,\n.ff-spreadsheet-data-viewer,\n.ff-spreadsheet-data-editor input {\n padding: 4px;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-data-viewer--preserve-breaks {\n white-space: pre-wrap;\n}\n\n.ff-spreadsheet-data-editor,\n.ff-spreadsheet-data-editor input {\n width: 100%;\n height: 100%;\n}\n\n.ff-spreadsheet-data-editor input {\n font: inherit;\n color: inherit;\n background: none;\n border: none;\n outline: none;\n margin: 0;\n}\n\n.ff-spreadsheet-data-viewer--boolean {\n text-align: center;\n}\n\n.ff-spreadsheet-floating-rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-floating-rect--hidden {\n display: none;\n}\n\n.ff-spreadsheet-floating-rect--selected {\n background: var(--outline-background-color);\n border: 2px var(--outline-color) solid;\n}\n\n.ff-spreadsheet-floating-rect--dragging {\n border: none;\n}\n\n.ff-spreadsheet-floating-rect--copied {\n border: 2px var(--outline-color) dashed;\n}";
31330
+ styleInject(css_248z$j);
31265
31331
 
31266
- var css_248z$g = ".ff-excel-toolbar {\n display: flex;\n height: 32px;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-divider {\n width: 1px;\n height: 24px;\n background-color: var(--excel-toolbar-divider);\n margin: 0 24px;\n border-radius: 1px;\n z-index: 1000;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font {\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-family {\n width: 120px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-size {\n width: 56px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text {\n width: 100px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text .ff-excel-toolbar-icon-underline {\n display: flex;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon {\n width: 88px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu {\n display: flex;\n align-items: center;\n width: 36px;\n height: 24px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu .ff-excel-toolbar-menu-option {\n display: flex;\n align-items: center;\n}";
31267
- styleInject(css_248z$g);
31332
+ var css_248z$i = ".ff-excel-toolbar {\n display: flex;\n height: 32px;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-divider {\n width: 1px;\n height: 24px;\n background-color: var(--excel-toolbar-divider);\n margin: 0 24px;\n border-radius: 1px;\n z-index: 1000;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font {\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-family {\n width: 120px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-size {\n width: 56px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text {\n width: 100px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text .ff-excel-toolbar-icon-underline {\n display: flex;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon {\n width: 88px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu {\n display: flex;\n align-items: center;\n width: 36px;\n height: 24px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu .ff-excel-toolbar-menu-option {\n display: flex;\n align-items: center;\n}";
31333
+ styleInject(css_248z$i);
31268
31334
 
31269
- var css_248z$f = ".ff-excel-color-selector {\n position: absolute;\n background-color: var(--error_light);\n width: 14px;\n height: 3px;\n bottom: 3px;\n z-index: 200;\n cursor: pointer;\n}\n.ff-excel-color-selector .ff-excel-color-selector-picker {\n width: 100%;\n height: 0;\n padding: 0;\n visibility: hidden;\n}";
31270
- styleInject(css_248z$f);
31335
+ var css_248z$h = ".ff-excel-color-selector {\n position: absolute;\n background-color: var(--error_light);\n width: 14px;\n height: 3px;\n bottom: 3px;\n z-index: 200;\n cursor: pointer;\n}\n.ff-excel-color-selector .ff-excel-color-selector-picker {\n width: 100%;\n height: 0;\n padding: 0;\n visibility: hidden;\n}";
31336
+ styleInject(css_248z$h);
31271
31337
 
31272
31338
  const ColorBarSelector = ({
31273
31339
  getColorValue,
@@ -32003,7 +32069,7 @@ const Spreadsheet = props => {
32003
32069
  setFormatePainter: setFormatePainter
32004
32070
  }), jsxRuntime.jsxs("div", {
32005
32071
  ref: rootRef,
32006
- className: classNames('ff-spreadsheet', className),
32072
+ className: cx('ff-spreadsheet', className),
32007
32073
  onKeyDown: handleKeyDown,
32008
32074
  onMouseMove: handleMouseMove,
32009
32075
  children: [tableNode, activeCellNode, jsxRuntime.jsx(Selected, {}), jsxRuntime.jsx(Copied, {})]
@@ -32015,11 +32081,11 @@ const Spreadsheet = props => {
32015
32081
  });
32016
32082
  };
32017
32083
 
32018
- var css_248z$e = ".ff-excel-page {\n width: 100%;\n display: flex;\n margin-top: 40px;\n flex-direction: column;\n align-items: center;\n}\n.ff-excel-page .ff-excel-book {\n position: relative;\n width: 100%;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar {\n margin-left: 60px;\n display: flex;\n height: 36px;\n align-items: center;\n color: var(--brand2-color);\n margin-top: -2px;\n box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-add-sheet-icon {\n padding: 4px 6px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container {\n height: 36px;\n width: 860px;\n display: flex;\n overflow-x: auto;\n align-items: center;\n scrollbar-width: none;\n scrollbar-color: var(--hover-color) transparent;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-thumb {\n border-radius: 5px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar {\n height: 0px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list {\n margin-top: 2px;\n padding: 10px 9px;\n min-width: max-content;\n cursor: pointer;\n display: flex;\n background-color: var(--hover-color);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list.active {\n background-color: var(--excel-sheet-button-color);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list:focus {\n outline: none;\n text-decoration: none;\n}";
32019
- styleInject(css_248z$e);
32084
+ var css_248z$g = ".ff-excel-page {\n width: 100%;\n display: flex;\n margin-top: 40px;\n flex-direction: column;\n align-items: center;\n}\n.ff-excel-page .ff-excel-book {\n position: relative;\n width: 100%;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar {\n margin-left: 60px;\n display: flex;\n height: 36px;\n align-items: center;\n color: var(--brand2-color);\n margin-top: -2px;\n box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-add-sheet-icon {\n padding: 4px 6px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container {\n height: 36px;\n width: 860px;\n display: flex;\n overflow-x: auto;\n align-items: center;\n scrollbar-width: none;\n scrollbar-color: var(--hover-color) transparent;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-thumb {\n border-radius: 5px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar {\n height: 0px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list {\n margin-top: 2px;\n padding: 10px 9px;\n min-width: max-content;\n cursor: pointer;\n display: flex;\n background-color: var(--hover-color);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list.active {\n background-color: var(--excel-sheet-button-color);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list:focus {\n outline: none;\n text-decoration: none;\n}";
32085
+ styleInject(css_248z$g);
32020
32086
 
32021
- var css_248z$d = ".ff-excel-menu {\n position: absolute;\n border: 1px solid var(--option-card-border-color);\n background: var(--option-card-bg-color);\n border-radius: 4px;\n margin: 2px;\n min-height: 32px;\n min-width: 111px;\n white-space: nowrap;\n z-index: 100;\n}\n.ff-excel-menu .ff-excel-menu-options {\n color: var(--text-color);\n cursor: pointer;\n border-radius: 3px;\n display: flex;\n align-items: center;\n padding: 4px;\n gap: 8px;\n}\n.ff-excel-menu .ff-excel-menu-options:hover {\n background-color: var(--hover-color);\n}\n.ff-excel-menu .ff-excel-menu-options label {\n cursor: pointer;\n}";
32022
- styleInject(css_248z$d);
32087
+ var css_248z$f = ".ff-excel-menu {\n position: absolute;\n border: 1px solid var(--option-card-border-color);\n background: var(--option-card-bg-color);\n border-radius: 4px;\n margin: 2px;\n min-height: 32px;\n min-width: 111px;\n white-space: nowrap;\n z-index: 100;\n}\n.ff-excel-menu .ff-excel-menu-options {\n color: var(--text-color);\n cursor: pointer;\n border-radius: 3px;\n display: flex;\n align-items: center;\n padding: 4px;\n gap: 8px;\n}\n.ff-excel-menu .ff-excel-menu-options:hover {\n background-color: var(--hover-color);\n}\n.ff-excel-menu .ff-excel-menu-options label {\n cursor: pointer;\n}";
32088
+ styleInject(css_248z$f);
32023
32089
 
32024
32090
  const ExcelContextMenu = ({
32025
32091
  contextMenu
@@ -32458,8 +32524,8 @@ const ExcelFile = ({
32458
32524
  });
32459
32525
  };
32460
32526
 
32461
- var css_248z$c = ".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}";
32462
- styleInject(css_248z$c);
32527
+ var css_248z$e = ".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}";
32528
+ styleInject(css_248z$e);
32463
32529
 
32464
32530
  const ModuleChip = ({
32465
32531
  label = '',
@@ -32467,12 +32533,12 @@ const ModuleChip = ({
32467
32533
  onClick = () => {}
32468
32534
  }) => {
32469
32535
  return jsxRuntime.jsx("div", {
32470
- className: classNames('ff-Module-chip', {
32536
+ className: cx('ff-Module-chip', {
32471
32537
  'ff-Module-chip--active': isActive
32472
32538
  }),
32473
32539
  onClick: onClick,
32474
32540
  children: jsxRuntime.jsx("div", {
32475
- className: classNames(`ff-Module-label-chip `, {
32541
+ className: cx(`ff-Module-label-chip `, {
32476
32542
  'ff-Module-label-chip--active': isActive
32477
32543
  }),
32478
32544
  children: jsxRuntime.jsx(Typography, {
@@ -32485,8 +32551,8 @@ const ModuleChip = ({
32485
32551
  });
32486
32552
  };
32487
32553
 
32488
- var css_248z$b = ".fontXs, .ff-icon-radial-chart-container svg text {\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-icon-radial-chart-container {\n position: relative;\n}\n.ff-icon-radial-chart-container svg .ff-radial-chart-icon-padding {\n padding: 0px;\n}\n.ff-icon-radial-chart-container svg text {\n font-size: var(--fontSize) !important;\n font-weight: 400;\n}\n.ff-icon-radial-chart-container .ff-icon-radial-chart-tooltip {\n position: fixed;\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}";
32489
- styleInject(css_248z$b);
32554
+ var css_248z$d = ".fontXs, .ff-icon-radial-chart-container svg text {\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-icon-radial-chart-container {\n position: relative;\n}\n.ff-icon-radial-chart-container svg .ff-radial-chart-icon-padding {\n padding: 0px;\n}\n.ff-icon-radial-chart-container svg text {\n font-size: var(--fontSize) !important;\n font-weight: 400;\n}\n.ff-icon-radial-chart-container .ff-icon-radial-chart-tooltip {\n position: fixed;\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}";
32555
+ styleInject(css_248z$d);
32490
32556
 
32491
32557
  // Function to generate SVG arc paths
32492
32558
  const calculateArc$1 = ({
@@ -32634,19 +32700,29 @@ const IconRadialChart = ({
32634
32700
  });
32635
32701
  };
32636
32702
 
32637
- var css_248z$a = ".ff-attach-image-container {\n position: relative;\n display: inline-block;\n}\n.ff-attach-image-container .ff-image-wrapper {\n position: relative;\n width: 79px;\n height: 75px;\n}\n.ff-attach-image-container .ff-image-wrapper img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n background-color: rgba(0, 0, 0, 0.7);\n transition: opacity 0.4s ease;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-top-icons {\n position: absolute;\n top: 1px;\n right: 1px;\n display: flex;\n gap: 4px;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-top-icons .ff-icon-container {\n width: 8px;\n height: 8px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n border-radius: 4px;\n background-color: transparent;\n transition: background-color 0.3s ease;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-expand-icon-container {\n width: 24px;\n height: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n border-radius: 4px;\n background-color: transparent;\n transition: background-color 0.3s ease;\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-hover-icons {\n opacity: 1;\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-icon-container, .ff-attach-image-container .ff-image-wrapper:hover .ff-top-icons .ff-icon-container {\n border-radius: 4px;\n background-color: var(--ff-icon-hover-bg-color);\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-expand-icon-container {\n background-color: var(--ff-icon-hover-bg-color);\n}";
32638
- styleInject(css_248z$a);
32703
+ var css_248z$c = ".ff-attach-image-container {\n position: relative;\n display: inline-block;\n}\n.ff-attach-image-container .ff-image-wrapper {\n position: relative;\n width: 79px;\n height: 75px;\n}\n.ff-attach-image-container .ff-image-wrapper img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n background-color: rgba(0, 0, 0, 0.7);\n transition: opacity 0.4s ease;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-top-icons {\n position: absolute;\n top: 1px;\n right: 1px;\n display: flex;\n gap: 4px;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-top-icons .ff-icon-container {\n width: 8px;\n height: 8px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n border-radius: 4px;\n background-color: transparent;\n transition: background-color 0.3s ease;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-expand-icon-container {\n width: 24px;\n height: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n border-radius: 4px;\n background-color: transparent;\n transition: background-color 0.3s ease;\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-hover-icons {\n opacity: 1;\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-icon-container, .ff-attach-image-container .ff-image-wrapper:hover .ff-top-icons .ff-icon-container {\n border-radius: 4px;\n background-color: var(--ff-icon-hover-bg-color);\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-expand-icon-container {\n background-color: var(--ff-icon-hover-bg-color);\n}";
32704
+ styleInject(css_248z$c);
32639
32705
 
32640
32706
  const AttachImage = ({
32641
32707
  imageSrc,
32642
32708
  onExpandClick,
32643
32709
  onDeleteClick,
32644
- onDownloadClick
32710
+ onDownloadClick,
32711
+ height = '75px',
32712
+ width = '79px'
32645
32713
  }) => {
32646
32714
  return jsxRuntime.jsx("div", {
32647
32715
  className: "ff-attach-image-container",
32716
+ style: {
32717
+ height,
32718
+ width
32719
+ },
32648
32720
  children: jsxRuntime.jsxs("div", {
32649
32721
  className: "ff-image-wrapper",
32722
+ style: {
32723
+ height,
32724
+ width
32725
+ },
32650
32726
  children: [jsxRuntime.jsx("img", {
32651
32727
  src: imageSrc,
32652
32728
  alt: "Attached"
@@ -32699,8 +32775,8 @@ const AttachImage = ({
32699
32775
  });
32700
32776
  };
32701
32777
 
32702
- var css_248z$9 = ".ff-card-container {\n width: 120px;\n height: 93px;\n display: flex;\n align-items: center;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n overflow: hidden;\n cursor: pointer;\n}\n.ff-card-container:hover.passed {\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n width: 24px;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: start;\n align-items: center;\n border-right: 1px solid var(--border-color);\n gap: 30px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n transform: rotate(-90deg);\n transform-origin: center;\n display: inline-block;\n}\n.ff-card-container.passed .ff-status-bar {\n background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n background-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-content {\n flex: 1;\n padding: 8px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n margin-bottom: 4px;\n color: inherit;\n}\n.ff-card-container.passed .ff-number {\n color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-number {\n color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-number {\n color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-number {\n color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-number {\n color: var(--ff-card-flaky-status-bg-color);\n}";
32703
- styleInject(css_248z$9);
32778
+ var css_248z$b = ".ff-card-container {\n width: 120px;\n height: 93px;\n display: flex;\n align-items: center;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n overflow: hidden;\n cursor: pointer;\n}\n.ff-card-container:hover.passed {\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n width: 24px;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: start;\n align-items: center;\n border-right: 1px solid var(--border-color);\n gap: 30px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n transform: rotate(-90deg);\n transform-origin: center;\n display: inline-block;\n}\n.ff-card-container.passed .ff-status-bar {\n background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n background-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-content {\n flex: 1;\n padding: 8px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n margin-bottom: 4px;\n color: inherit;\n}\n.ff-card-container.passed .ff-number {\n color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-number {\n color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-number {\n color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-number {\n color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-number {\n color: var(--ff-card-flaky-status-bg-color);\n}";
32779
+ styleInject(css_248z$b);
32704
32780
 
32705
32781
  const StatusCard = ({
32706
32782
  icon,
@@ -32749,19 +32825,24 @@ const StatusCard = ({
32749
32825
  });
32750
32826
  };
32751
32827
 
32752
- var css_248z$8 = ".ff-variable-dropdown {\n position: absolute;\n width: 200px;\n height: 300px;\n display: flex;\n flex-direction: column;\n background-color: var(--variable-dropdown-bg);\n border: 1px solid var(--border-color);\n border-radius: 3px;\n z-index: 9999;\n}\n\n.ff-variable-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px;\n cursor: pointer;\n}\n.ff-variable-option:hover {\n background-color: var(--hover-color);\n}";
32753
- styleInject(css_248z$8);
32828
+ var css_248z$a = ".ff-variable-dropdown {\n height: 300px;\n display: flex;\n flex-direction: column;\n background-color: var(--variable-dropdown-bg);\n border: 1px solid var(--border-color);\n border-radius: 3px;\n z-index: 9999;\n overflow: hidden;\n overflow-y: auto;\n}\n.ff-variable-dropdown.absolute {\n position: absolute;\n}\n.ff-variable-dropdown.relative {\n position: relative;\n}\n\n.ff-variable-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px;\n cursor: pointer;\n}\n.ff-variable-option:hover {\n background-color: var(--hover-color);\n}";
32829
+ styleInject(css_248z$a);
32754
32830
 
32755
32831
  const VariableDropdown = ({
32756
32832
  optionsList = [],
32757
32833
  onSelectVariable,
32758
- dropdownPosition
32834
+ dropdownPosition,
32835
+ position = 'relative',
32836
+ width = '300px'
32759
32837
  }) => {
32760
32838
  return jsxRuntime.jsx("div", {
32761
- className: "ff-variable-dropdown",
32762
- style: {
32839
+ className: cx('ff-variable-dropdown', position),
32840
+ style: dropdownPosition ? {
32763
32841
  top: dropdownPosition.top + 30,
32764
- left: dropdownPosition.left - 30
32842
+ left: dropdownPosition.left - 30,
32843
+ width
32844
+ } : {
32845
+ width
32765
32846
  },
32766
32847
  children: optionsList?.map(option => {
32767
32848
  return jsxRuntime.jsxs("div", {
@@ -32782,8 +32863,8 @@ const VariableDropdown = ({
32782
32863
  });
32783
32864
  };
32784
32865
 
32785
- var css_248z$7 = ".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}";
32786
- styleInject(css_248z$7);
32866
+ var css_248z$9 = ".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}";
32867
+ styleInject(css_248z$9);
32787
32868
 
32788
32869
  const LineChart = ({
32789
32870
  data,
@@ -33022,8 +33103,8 @@ const LineChart = ({
33022
33103
  });
33023
33104
  };
33024
33105
 
33025
- var css_248z$6 = ":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-download-client-overlay {\n width: 378px;\n height: 217px;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n z-index: 9999;\n}\n.ff-download-client-overlay .ff-download-client-container {\n width: 370px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n flex-direction: column;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n border: 1px solid var(--download-client-border-color);\n margin-left: 5px;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-header {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: space-between;\n padding: 7px 4px;\n margin-bottom: 8px;\n border-radius: 4px 4px 0 0;\n background-color: var(--download-client-header-bg-color);\n box-sizing: border-box;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-header .ff-header-arrow {\n content: \"\";\n display: block;\n position: absolute;\n top: 10px;\n right: 70px;\n width: 10px;\n height: 10px;\n background-color: var(--download-client-icon-container-bg-color);\n transform: translateY(-50%) rotate(-45deg);\n z-index: -999;\n border: 1px solid var(--download-client-header-bg-color);\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n flex-direction: column;\n padding-left: 8px;\n padding-right: 24px;\n gap: 8px;\n margin-bottom: 8px;\n color: var(--popup-text-color);\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content .ff-download-install,\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content .ff-choose-os {\n padding: 4px 0;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-actions {\n width: 240px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 12px;\n margin-bottom: 17px;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-actions .ff-icons-container {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n width: 64px;\n height: 64px;\n border-radius: 8px;\n border: 1px solid var(--download-client-icon-container-border-color);\n background-color: var(--download-client-icon-container-bg-color);\n cursor: pointer;\n box-shadow: 0px 0px 10px 0px var(--download-client-icon-container-box-shadow-color);\n}";
33026
- styleInject(css_248z$6);
33106
+ var css_248z$8 = ":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-download-client-overlay {\n width: 378px;\n height: 217px;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n z-index: 9999;\n}\n.ff-download-client-overlay .ff-download-client-container {\n width: 370px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n flex-direction: column;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n border: 1px solid var(--download-client-border-color);\n margin-left: 5px;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-header {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: space-between;\n padding: 7px 4px;\n margin-bottom: 8px;\n border-radius: 4px 4px 0 0;\n background-color: var(--download-client-header-bg-color);\n box-sizing: border-box;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-header .ff-header-arrow {\n content: \"\";\n display: block;\n position: absolute;\n top: 10px;\n right: 70px;\n width: 10px;\n height: 10px;\n background-color: var(--download-client-icon-container-bg-color);\n transform: translateY(-50%) rotate(-45deg);\n z-index: -999;\n border: 1px solid var(--download-client-header-bg-color);\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n flex-direction: column;\n padding-left: 8px;\n padding-right: 24px;\n gap: 8px;\n margin-bottom: 8px;\n color: var(--popup-text-color);\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content .ff-download-install,\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content .ff-choose-os {\n padding: 4px 0;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-actions {\n width: 240px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 12px;\n margin-bottom: 17px;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-actions .ff-icons-container {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n width: 64px;\n height: 64px;\n border-radius: 8px;\n border: 1px solid var(--download-client-icon-container-border-color);\n background-color: var(--download-client-icon-container-bg-color);\n cursor: pointer;\n box-shadow: 0px 0px 10px 0px var(--download-client-icon-container-box-shadow-color);\n}";
33107
+ styleInject(css_248z$8);
33027
33108
 
33028
33109
  const DownloadClient = ({
33029
33110
  onClose,
@@ -33120,8 +33201,8 @@ const DownloadClient = ({
33120
33201
  });
33121
33202
  };
33122
33203
 
33123
- var css_248z$5 = ".ff_fieldSet_container .ff_fieldSet {\n border-color: var(--ff-connecting-branch-modal-border);\n border-radius: 5px;\n}\n.ff_fieldSet_container .ff_fieldSet .ff_legend_container {\n display: flex;\n}";
33124
- styleInject(css_248z$5);
33204
+ var css_248z$7 = ".ff_fieldSet_container .ff_fieldSet {\n border-color: var(--ff-connecting-branch-modal-border);\n border-radius: 5px;\n}\n.ff_fieldSet_container .ff_fieldSet .ff_legend_container {\n display: flex;\n}";
33205
+ styleInject(css_248z$7);
33125
33206
 
33126
33207
  const FieldSet = ({
33127
33208
  legendName,
@@ -33153,6 +33234,93 @@ const FieldSet = ({
33153
33234
  });
33154
33235
  };
33155
33236
 
33237
+ var css_248z$6 = ".ff-create-variable-slider {\n padding: 8px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.ff-create-variable-slider .ff-hide-value-content {\n display: flex;\n align-items: center;\n}\n\n.ff-create-slider-footer {\n width: 100%;\n gap: 8px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}";
33238
+ styleInject(css_248z$6);
33239
+
33240
+ const CreateVariableSlider = ({
33241
+ isOpen,
33242
+ variableTypesList = [],
33243
+ onClose,
33244
+ onNameChange,
33245
+ onValueChange,
33246
+ variableName,
33247
+ value,
33248
+ onVariableTypeChange,
33249
+ selectedVariableType,
33250
+ hideValue = false,
33251
+ onHideChange,
33252
+ handleSubmit
33253
+ }) => {
33254
+ const FooterContent = () => {
33255
+ return jsxRuntime.jsxs("div", {
33256
+ className: "ff-create-slider-footer",
33257
+ children: [jsxRuntime.jsx(Button$1, {
33258
+ onClick: onClose,
33259
+ label: "Cancel",
33260
+ variant: "tertiary"
33261
+ }), jsxRuntime.jsx(Button$1, {
33262
+ variant: "primary",
33263
+ label: "create",
33264
+ type: "submit",
33265
+ onClick: handleSubmit,
33266
+ disabled: checkEmpty(variableName) || checkEmpty(value)
33267
+ })]
33268
+ });
33269
+ };
33270
+ return jsxRuntime.jsx(Drawer, {
33271
+ onClose: onClose,
33272
+ isOpen: isOpen,
33273
+ title: "Create Variable",
33274
+ width: "284px",
33275
+ height: "222px",
33276
+ top: "35%",
33277
+ right: 8,
33278
+ isFooterRequired: true,
33279
+ overlay: true,
33280
+ footerContent: jsxRuntime.jsx(FooterContent, {}),
33281
+ children: jsxRuntime.jsxs("div", {
33282
+ className: "ff-create-variable-slider",
33283
+ children: [jsxRuntime.jsx(Input, {
33284
+ label: "Variable Name",
33285
+ required: true,
33286
+ type: "text",
33287
+ name: "variable name",
33288
+ value: variableName,
33289
+ onChange: event => onNameChange(event.target.value)
33290
+ }), jsxRuntime.jsx(Select$1, {
33291
+ label: "Variable Type",
33292
+ required: true,
33293
+ onChange: option => onVariableTypeChange(option),
33294
+ selectedOption: selectedVariableType,
33295
+ optionsList: variableTypesList,
33296
+ optionZIndex: 99999
33297
+ }), jsxRuntime.jsx(Input, {
33298
+ label: "Variable Value",
33299
+ required: true,
33300
+ type: "text",
33301
+ name: "value",
33302
+ value: value,
33303
+ onChange: event => onValueChange(event.target.value)
33304
+ }), jsxRuntime.jsxs("div", {
33305
+ className: "ff-hide-value-content",
33306
+ children: [jsxRuntime.jsx(Checkbox, {
33307
+ onChange: event => onHideChange(event.target.checked),
33308
+ name: "hide value",
33309
+ label: "Hide Value",
33310
+ checked: hideValue
33311
+ }), jsxRuntime.jsx(Tooltip, {
33312
+ title: "Once the value is hidden, it cannot be undone",
33313
+ children: jsxRuntime.jsx(Icon, {
33314
+ name: "info",
33315
+ width: 12,
33316
+ height: 12
33317
+ })
33318
+ })]
33319
+ })]
33320
+ })
33321
+ });
33322
+ };
33323
+
33156
33324
  function findAndInsert(data, key, targetId, newEntry, insertPosition, childrenKey = 'children' // Allow dynamic key for nested children
33157
33325
  ) {
33158
33326
  function recursiveSearch(items) {
@@ -38500,8 +38668,8 @@ const throttle = (func, limit) => {
38500
38668
  return throttled;
38501
38669
  };
38502
38670
 
38503
- var css_248z$4 = ".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}";
38504
- styleInject(css_248z$4);
38671
+ var css_248z$5 = ".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}";
38672
+ styleInject(css_248z$5);
38505
38673
 
38506
38674
  const BarChart = ({
38507
38675
  data,
@@ -38719,8 +38887,8 @@ const BarChart = ({
38719
38887
  });
38720
38888
  };
38721
38889
 
38722
- var css_248z$3 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-multi-radial-chart-container .ff-center-text, .ff-multi-radial-chart-container .ff-center-text-tooltip, .ff-multi-radial-chart-container .ff-multi-radial-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, .ff-multi-radial-chart-container .ff-center-first-text {\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-multi-radial-chart-container {\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-number {\n flex-direction: column;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-pill {\n flex-direction: row;\n}\n.ff-multi-radial-chart-container .ff-center-first-text {\n color: var(--text-color);\n font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-center-text {\n color: var(--text-color);\n font-weight: 400;\n}\n.ff-multi-radial-chart-container .ff-center-text-tooltip {\n font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-multi-radial-tooltip {\n position: absolute;\n font-weight: 400;\n background-color: var(--tooltip-bg-color);\n color: var(--primary-icon-color);\n padding: 5px 10px;\n border-radius: 4px;\n pointer-events: none;\n z-index: 1000;\n}\n.ff-multi-radial-chart-container .ff-legend-container {\n display: grid;\n gap: 10px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend {\n grid-template-columns: repeat(3, 1fr);\n margin-top: 21px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend .ff-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend {\n grid-template-columns: auto;\n display: flex;\n flex-direction: column;\n gap: 15px;\n justify-content: center;\n margin-left: 8px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--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-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n margin-left: 8px;\n color: var(--text-color);\n}";
38723
- styleInject(css_248z$3);
38890
+ var css_248z$4 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-multi-radial-chart-container .ff-center-text, .ff-multi-radial-chart-container .ff-center-text-tooltip, .ff-multi-radial-chart-container .ff-multi-radial-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, .ff-multi-radial-chart-container .ff-center-first-text {\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-multi-radial-chart-container {\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-number {\n flex-direction: column;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-pill {\n flex-direction: row;\n}\n.ff-multi-radial-chart-container .ff-center-first-text {\n color: var(--text-color);\n font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-center-text {\n color: var(--text-color);\n font-weight: 400;\n}\n.ff-multi-radial-chart-container .ff-center-text-tooltip {\n font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-multi-radial-tooltip {\n position: absolute;\n font-weight: 400;\n background-color: var(--tooltip-bg-color);\n color: var(--primary-icon-color);\n padding: 5px 10px;\n border-radius: 4px;\n pointer-events: none;\n z-index: 1000;\n}\n.ff-multi-radial-chart-container .ff-legend-container {\n display: grid;\n gap: 10px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend {\n grid-template-columns: repeat(3, 1fr);\n margin-top: 21px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend .ff-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend {\n grid-template-columns: auto;\n display: flex;\n flex-direction: column;\n gap: 15px;\n justify-content: center;\n margin-left: 8px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--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-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n margin-left: 8px;\n color: var(--text-color);\n}";
38891
+ styleInject(css_248z$4);
38724
38892
 
38725
38893
  const calculateArc = (centerX, centerY, radius, startAngle, endAngle) => {
38726
38894
  const startX = centerX + radius * Math.cos(startAngle);
@@ -44275,8 +44443,8 @@ function requireJs() {
44275
44443
 
44276
44444
  var jsExports = requireJs();
44277
44445
 
44278
- var css_248z$2 = "/* Editor container to add padding and rounded corners */\n.monaco-editor {\n border-radius: 6px;\n border-top: 1px solid var(--ff-editor-border-color);\n border-right: 1px dashed var(--ff-editor-border-color);\n border-bottom: 1px dashed var(--ff-editor-border-color);\n border-left: 1px solid var(--ff-editor-border-color);\n}\n\n/* Style for the line number gutter */\n.monaco-editor .margin {\n background-color: var(--ff-editor-gutter-color) !important;\n width: 32px !important;\n}\n\n/* Style for the line numbers */\n.monaco-editor .margin .line-numbers {\n color: var(--ff-line-number-color) !important;\n background-color: var(--ff-line-number-bg);\n text-align: center !important;\n}\n\n/* Active line number styling */\n.monaco-editor .margin .line-numbers.active {\n color: var(--ff-line-number-color);\n background-color: var(--ff-line-number-bg) !important;\n}\n\n.monaco-editor .margin-view-overlays {\n width: 100% !important;\n}\n\n.monaco-editor .margin-view-overlays .line-numbers {\n width: 100% !important;\n}\n\n.monaco-scrollable-element {\n left: 32px !important;\n}\n\n.monaco-editor .current-line-background {\n background-color: var(--ff-editor-line-bg) !important;\n}\n\n.ff-editor-container {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.ff-editor-container .ff-top-toolbar {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 10px;\n}";
44279
- styleInject(css_248z$2);
44446
+ var css_248z$3 = "/* Editor container to add padding and rounded corners */\n.monaco-editor {\n border-radius: 6px;\n border-top: 1px solid var(--ff-editor-border-color);\n border-right: 1px dashed var(--ff-editor-border-color);\n border-bottom: 1px dashed var(--ff-editor-border-color);\n border-left: 1px solid var(--ff-editor-border-color);\n}\n\n/* Style for the line number gutter */\n.monaco-editor .margin {\n background-color: var(--ff-editor-gutter-color) !important;\n width: 32px !important;\n}\n\n/* Style for the line numbers */\n.monaco-editor .margin .line-numbers {\n color: var(--ff-line-number-color) !important;\n background-color: var(--ff-line-number-bg);\n text-align: center !important;\n}\n\n/* Active line number styling */\n.monaco-editor .margin .line-numbers.active {\n color: var(--ff-line-number-color);\n background-color: var(--ff-line-number-bg) !important;\n}\n\n.monaco-editor .margin-view-overlays {\n width: 100% !important;\n}\n\n.monaco-editor .margin-view-overlays .line-numbers {\n width: 100% !important;\n}\n\n.monaco-scrollable-element {\n left: 32px !important;\n}\n\n.monaco-editor .current-line-background {\n background-color: var(--ff-editor-line-bg) !important;\n}\n\n.ff-editor-container {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.ff-editor-container .ff-top-toolbar {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 10px;\n}";
44447
+ styleInject(css_248z$3);
44280
44448
 
44281
44449
  const Editor = /*#__PURE__*/React.forwardRef(({
44282
44450
  width,
@@ -44476,6 +44644,8 @@ const Editor = /*#__PURE__*/React.forwardRef(({
44476
44644
  onChange: (newValue, event) => handleChange(newValue, event),
44477
44645
  theme: theme
44478
44646
  }), showDropdown && dropdownPosition && jsxRuntime.jsx(VariableDropdown, {
44647
+ position: "absolute",
44648
+ width: "300px",
44479
44649
  optionsList: variableOptionsList,
44480
44650
  onSelectVariable: handleSelectVariable,
44481
44651
  dropdownPosition: dropdownPosition
@@ -44497,8 +44667,8 @@ const getSequentialPayload = data => {
44497
44667
  }));
44498
44668
  };
44499
44669
 
44500
- var css_248z$1 = ".ff-grid-container {\n display: grid;\n grid-template-columns: 1fr 4fr 1fr 6fr;\n padding: 24px 0;\n grid-auto-rows: auto;\n}\n.ff-grid-container .ff-selectedMachines {\n display: contents;\n}\n.ff-grid-container .ff-selectedMachines-input {\n grid-column: 2/3;\n display: grid;\n}\n.ff-grid-container .ff-input-box-container {\n border: 1px solid var(--description-text);\n width: 100%;\n height: 32px;\n}\n.ff-grid-container .ff-machine-instance-row {\n display: contents;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line {\n grid-column: 3/4;\n position: relative;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-line {\n position: absolute;\n height: 1px;\n background-color: var(--brand-color);\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-left-icon {\n height: 8px;\n width: 8px;\n background-color: var(--brand-color);\n border-radius: 50%;\n margin-right: 5px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-selectedMachines-connecting-line-text {\n position: absolute;\n top: -10px;\n left: 50%;\n transform: translateX(-50%);\n background-color: var(--brand-color);\n color: var(--tooltip-text-color);\n padding: 4px;\n border-radius: 12px;\n text-align: center;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-right-icon {\n width: 0;\n height: 0;\n border-top: 4px solid transparent;\n border-bottom: 4px solid transparent;\n border-left: 8px solid var(--brand-color);\n margin-left: 84px;\n bottom: -4px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-second-line {\n position: relative;\n margin-left: 20px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-vertical-line {\n position: absolute;\n left: 22px;\n top: 0;\n width: 1px;\n height: auto;\n background-color: var(--brand-color);\n}\n.ff-grid-container .ff-machine-instance {\n grid-column: 4/5;\n}\n.ff-grid-container .ff-machine-instance .ff-add-browser-device {\n margin-bottom: 16px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line {\n margin-top: 20px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-no-instance-line {\n margin-top: 20px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-line {\n width: 100%;\n background-color: var(--brand-color);\n height: 1px;\n position: relative;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-selectedMachines-connecting-line-text {\n position: absolute;\n top: -10px;\n left: 50%;\n transform: translateX(-50%);\n background-color: var(--brand-color);\n color: var(--tooltip-text-color);\n font-weight: bold;\n font-size: 8px;\n padding: 4px;\n border-radius: 12px;\n text-align: center;\n}\n.ff-grid-container .ff-run-level-execution-dataset p {\n margin: 0;\n font-size: 12px;\n}\n.ff-grid-container .ff-run-level-execution-dataset {\n min-height: 70px;\n max-width: 600px;\n border: 1px solid var(--description-text);\n margin-bottom: 8px;\n border-radius: 4px;\n margin-bottom: 16px;\n position: relative;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector {\n position: absolute;\n left: -12%;\n transform: translateX(-50%);\n width: 40px;\n height: 0;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve {\n position: relative;\n width: 88px;\n height: 0;\n border: 1px dashed var(--brand-color);\n border-top: none;\n border-right: none;\n border-bottom-left-radius: 8px;\n display: flex;\n flex-direction: column-reverse;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve .ff-curve-right-icon {\n width: 0;\n height: 0;\n border-top: 4px solid transparent;\n border-bottom: 4px solid transparent;\n border-left: 8px solid var(--brand-color);\n margin-left: 84px;\n position: absolute;\n bottom: -4px;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve .ff-selectedMachines-connecting-line-text {\n position: absolute;\n left: 50%;\n top: 85px;\n transform: translateX(-50%);\n background-color: var(--brand-color);\n color: var(--tooltip-text-color);\n font-weight: 400;\n font-size: 8px;\n padding: 4px;\n border-radius: 12px;\n text-align: center;\n width: 44px;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-connector-0 {\n bottom: 8px;\n border: none;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve-right-icon-0 {\n display: none;\n}\n.ff-grid-container .ff-select-machine-input {\n grid-column: 2/3;\n}\n.ff-grid-container .ff-select-machine-input input {\n width: 430px;\n height: 32px;\n}\n.ff-grid-container .ff-grid-item.ff-dynamic-item {\n grid-column: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n place-self: first baseline;\n top: 1px;\n left: 20px;\n}\n.ff-grid-container .ff-script-count-container {\n grid-column: 1;\n align-self: center;\n background-color: var(--brand-color);\n color: var(--tooltip-text-color);\n text-align: center;\n border-radius: 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 4px;\n}\n.ff-grid-container .ff-script-count-container .ff-script-count-box {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}";
44501
- styleInject(css_248z$1);
44670
+ var css_248z$2 = ".ff-grid-container {\n display: grid;\n grid-template-columns: 1fr 4fr 1fr 6fr;\n padding: 24px 0;\n grid-auto-rows: auto;\n}\n.ff-grid-container .ff-selectedMachines {\n display: contents;\n}\n.ff-grid-container .ff-selectedMachines-input {\n grid-column: 2/3;\n display: grid;\n}\n.ff-grid-container .ff-input-box-container {\n border: 1px solid var(--description-text);\n width: 100%;\n height: 32px;\n}\n.ff-grid-container .ff-machine-instance-row {\n display: contents;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line {\n grid-column: 3/4;\n position: relative;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-line {\n position: absolute;\n height: 1px;\n background-color: var(--brand-color);\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-left-icon {\n height: 8px;\n width: 8px;\n background-color: var(--brand-color);\n border-radius: 50%;\n margin-right: 5px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-selectedMachines-connecting-line-text {\n position: absolute;\n top: -10px;\n left: 50%;\n transform: translateX(-50%);\n background-color: var(--brand-color);\n color: var(--tooltip-text-color);\n padding: 4px;\n border-radius: 12px;\n text-align: center;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-right-icon {\n width: 0;\n height: 0;\n border-top: 4px solid transparent;\n border-bottom: 4px solid transparent;\n border-left: 8px solid var(--brand-color);\n margin-left: 84px;\n bottom: -4px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-second-line {\n position: relative;\n margin-left: 20px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-vertical-line {\n position: absolute;\n left: 22px;\n top: 0;\n width: 1px;\n height: auto;\n background-color: var(--brand-color);\n}\n.ff-grid-container .ff-machine-instance {\n grid-column: 4/5;\n}\n.ff-grid-container .ff-machine-instance .ff-add-browser-device {\n margin-bottom: 16px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line {\n margin-top: 20px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-no-instance-line {\n margin-top: 20px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-line {\n width: 100%;\n background-color: var(--brand-color);\n height: 1px;\n position: relative;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-selectedMachines-connecting-line-text {\n position: absolute;\n top: -10px;\n left: 50%;\n transform: translateX(-50%);\n background-color: var(--brand-color);\n color: var(--tooltip-text-color);\n font-weight: bold;\n font-size: 8px;\n padding: 4px;\n border-radius: 12px;\n text-align: center;\n}\n.ff-grid-container .ff-run-level-execution-dataset p {\n margin: 0;\n font-size: 12px;\n}\n.ff-grid-container .ff-run-level-execution-dataset {\n min-height: 70px;\n max-width: 600px;\n border: 1px solid var(--description-text);\n margin-bottom: 8px;\n border-radius: 4px;\n margin-bottom: 16px;\n position: relative;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector {\n position: absolute;\n left: -12%;\n transform: translateX(-50%);\n width: 40px;\n height: 0;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve {\n position: relative;\n width: 88px;\n height: 0;\n border: 1px dashed var(--brand-color);\n border-top: none;\n border-right: none;\n border-bottom-left-radius: 8px;\n display: flex;\n flex-direction: column-reverse;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve .ff-curve-right-icon {\n width: 0;\n height: 0;\n border-top: 4px solid transparent;\n border-bottom: 4px solid transparent;\n border-left: 8px solid var(--brand-color);\n margin-left: 84px;\n position: absolute;\n bottom: -4px;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve .ff-selectedMachines-connecting-line-text {\n position: absolute;\n left: 50%;\n top: 85px;\n transform: translateX(-50%);\n background-color: var(--brand-color);\n color: var(--tooltip-text-color);\n font-weight: 400;\n font-size: 8px;\n padding: 4px;\n border-radius: 12px;\n text-align: center;\n width: 44px;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-connector-0 {\n bottom: 8px;\n border: none;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve-right-icon-0 {\n display: none;\n}\n.ff-grid-container .ff-select-machine-input {\n grid-column: 2/3;\n}\n.ff-grid-container .ff-select-machine-input input {\n width: 430px;\n height: 32px;\n}\n.ff-grid-container .ff-grid-item.ff-dynamic-item {\n grid-column: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n place-self: first baseline;\n top: 1px;\n left: 20px;\n}\n.ff-grid-container .ff-script-count-container {\n grid-column: 1;\n align-self: center;\n background-color: var(--brand-color);\n color: var(--tooltip-text-color);\n text-align: center;\n border-radius: 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 4px;\n}\n.ff-grid-container .ff-script-count-container .ff-script-count-box {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n}";
44671
+ styleInject(css_248z$2);
44502
44672
 
44503
44673
  var reactArcher$1 = {exports: {}};
44504
44674
 
@@ -46102,8 +46272,8 @@ const saveFileFromBlob = (blob, filename) => {
46102
46272
  }
46103
46273
  };
46104
46274
 
46105
- var css_248z = ".warning_modal_container {\n height: 100%;\n}\n\n.warning_modal_content {\n display: flex;\n height: 80%;\n width: 100%;\n}\n\n.warning_modal_icon {\n position: relative;\n bottom: 16px;\n right: 4px;\n}\n\n.warning_modal_title_wrapper {\n line-height: 30px;\n}\n\n.warning_modal_message_wrapper {\n padding-top: 8px;\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.warning_modal_message {\n display: flex;\n flex-direction: column;\n line-height: 24px;\n}\n\n.warning_modal_footer_button {\n height: 20%;\n width: 100%;\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n gap: 8px;\n}";
46106
- styleInject(css_248z);
46275
+ var css_248z$1 = ".warning_modal_container {\n height: 100%;\n}\n\n.warning_modal_content {\n display: flex;\n height: 80%;\n width: 100%;\n}\n\n.warning_modal_icon {\n position: relative;\n bottom: 16px;\n right: 4px;\n}\n\n.warning_modal_title_wrapper {\n line-height: 30px;\n}\n\n.warning_modal_message_wrapper {\n padding-top: 8px;\n display: flex;\n height: 100%;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.warning_modal_message {\n display: flex;\n flex-direction: column;\n line-height: 24px;\n}\n\n.warning_modal_footer_button {\n height: 20%;\n width: 100%;\n display: flex;\n align-items: flex-end;\n justify-content: flex-end;\n gap: 8px;\n}";
46276
+ styleInject(css_248z$1);
46107
46277
 
46108
46278
  const PopUpModal = ({
46109
46279
  isOpen,
@@ -46178,8 +46348,105 @@ const PopUpModal = ({
46178
46348
  });
46179
46349
  };
46180
46350
 
46351
+ var css_248z = ".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}";
46352
+ styleInject(css_248z);
46353
+
46354
+ const AddVariables = ({
46355
+ label = '',
46356
+ variableList = [],
46357
+ placeholder = 'Enter text',
46358
+ onChange,
46359
+ onCreateVariableClick,
46360
+ value = '',
46361
+ dropdownWidth = 'inherit'
46362
+ }) => {
46363
+ const [showDropdown, setShowDropdown] = React.useState(false);
46364
+ const [cursorPosition, setCursorPosition] = React.useState(null);
46365
+ const [showCreateVariableIcon, setShowCreateVariableIcon] = React.useState(false);
46366
+ const inputRef = React.useRef(null);
46367
+ React.useEffect(() => {
46368
+ if (cursorPosition !== null && inputRef.current) {
46369
+ inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
46370
+ inputRef.current.focus();
46371
+ }
46372
+ }, [cursorPosition]);
46373
+ const handleChange = event => {
46374
+ const value = event.target.value;
46375
+ onChange?.(value);
46376
+ // Show dropdown only if the last character typed is `$`
46377
+ const cursorPos = inputRef.current?.selectionStart || 0;
46378
+ const isDollarTyped = value[cursorPos - 1] === '$';
46379
+ if (isDollarTyped) {
46380
+ setShowDropdown(true);
46381
+ } else {
46382
+ setShowDropdown(false); // Close if it's a space or other characters
46383
+ }
46384
+ if (value?.includes('$')) {
46385
+ setShowCreateVariableIcon(false);
46386
+ } else {
46387
+ setShowCreateVariableIcon(true);
46388
+ }
46389
+ };
46390
+ const handleDropdownClick = item => {
46391
+ if (inputRef.current) {
46392
+ const {
46393
+ selectionStart,
46394
+ selectionEnd
46395
+ } = inputRef.current;
46396
+ const dollarSyntax = `{${item.type === 'LOCAL' ? 'LV' : item.type === 'GLOBAL' ? 'GV' : item.type === 'GROUP' ? 'SG' : 'PEV'}_${item.name}}`;
46397
+ const newValue = value.slice(0, selectionStart || 0) + dollarSyntax + value.slice(selectionEnd || 0);
46398
+ onChange(newValue);
46399
+ setCursorPosition((selectionStart || 0) + dollarSyntax.length);
46400
+ // Close the dropdown after inserting the variable
46401
+ setShowDropdown(false);
46402
+ onChange?.(newValue);
46403
+ }
46404
+ };
46405
+ return jsxRuntime.jsxs("div", {
46406
+ className: "ff-add-variable-container",
46407
+ children: [jsxRuntime.jsxs("div", {
46408
+ className: "ff-add-variable-input",
46409
+ children: [jsxRuntime.jsx(Input, {
46410
+ name: "add_variable",
46411
+ ref: inputRef,
46412
+ type: "text",
46413
+ value: value,
46414
+ onChange: handleChange,
46415
+ variant: "primary",
46416
+ label: label,
46417
+ placeholder: placeholder
46418
+ }), !checkEmpty(value) && showCreateVariableIcon && jsxRuntime.jsx(Icon, {
46419
+ onClick: onCreateVariableClick,
46420
+ name: "add_variable",
46421
+ width: 24,
46422
+ height: 24,
46423
+ hoverEffect: true
46424
+ })]
46425
+ }), showDropdown && jsxRuntime.jsx(VariableDropdown, {
46426
+ position: "relative",
46427
+ width: dropdownWidth,
46428
+ optionsList: variableList,
46429
+ onSelectVariable: handleDropdownClick
46430
+ })]
46431
+ });
46432
+ };
46433
+
46434
+ // Will be used to find duplicate key-value pair in an array of objects.
46435
+ const hasDuplicateFile = (array, property) => {
46436
+ const seen = new Set();
46437
+ for (const obj of array) {
46438
+ const key = property ? obj[property] : JSON.stringify(obj);
46439
+ if (seen.has(key)) {
46440
+ return true;
46441
+ }
46442
+ seen.add(key);
46443
+ }
46444
+ return false;
46445
+ };
46446
+
46181
46447
  exports.Accordion = Accordion;
46182
46448
  exports.AddResourceButton = AddButton;
46449
+ exports.AddVariables = AddVariables;
46183
46450
  exports.AllProjectsDropdown = AllProjectsDropdown;
46184
46451
  exports.AppHeader = AppHeader;
46185
46452
  exports.AttachImage = AttachImage;
@@ -46192,6 +46459,7 @@ exports.Chip = Chip;
46192
46459
  exports.Col = Col;
46193
46460
  exports.ConnectingBranch = ConnectingBranch;
46194
46461
  exports.Container = Container;
46462
+ exports.CreateVariableSlider = CreateVariableSlider;
46195
46463
  exports.DashboardDonutChart = DashboardDonutChart;
46196
46464
  exports.DatePicker = CustomDatePicker;
46197
46465
  exports.DonutChart = DonutChart;
@@ -46262,6 +46530,7 @@ exports.getEncryptedData = getEncryptedData;
46262
46530
  exports.getExtension = getExtension;
46263
46531
  exports.getExtensionWithPeriod = getExtensionWithPeriod;
46264
46532
  exports.getSequentialPayload = getSequentialPayload;
46533
+ exports.hasDuplicateFile = hasDuplicateFile;
46265
46534
  exports.saveFileFromBlob = saveFileFromBlob;
46266
46535
  exports.throttle = throttle;
46267
46536
  exports.toast = toast;