pixel-react 1.6.5 → 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 (726) 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/Checkbox/types.d.ts +4 -0
  12. package/lib/components/Editor/constants.d.ts +1 -1
  13. package/lib/components/Editor/types.d.ts +10 -2
  14. package/lib/components/Input/Input.d.ts +1 -1
  15. package/lib/index.d.ts +56 -4
  16. package/lib/index.esm.js +519 -494
  17. package/lib/index.esm.js.map +1 -1
  18. package/lib/index.js +520 -493
  19. package/lib/index.js.map +1 -1
  20. package/lib/tsconfig.tsbuildinfo +1 -1
  21. package/lib/utils/checkDuplicates/checkDuplicates.d.ts +1 -0
  22. package/package.json +80 -80
  23. package/rollup.config.mjs +67 -67
  24. package/src/StyleGuide/ColorPalette/ColorPalette.scss +62 -62
  25. package/src/StyleGuide/ColorPalette/ColorPalette.stories.tsx +16 -16
  26. package/src/StyleGuide/ColorPalette/ColorPalette.tsx +67 -67
  27. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +279 -279
  28. package/src/StyleGuide/ColorPalette/index.ts +1 -1
  29. package/src/StyleGuide/ColorPalette/types.ts +19 -19
  30. package/src/StyleGuide/Typography/Typography.scss +99 -99
  31. package/src/StyleGuide/Typography/Typography.stories.tsx +16 -16
  32. package/src/StyleGuide/Typography/Typography.tsx +60 -60
  33. package/src/StyleGuide/Typography/TypographyList.ts +3 -3
  34. package/src/StyleGuide/Typography/types.ts +9 -9
  35. package/src/assets/Themes/BaseTheme.scss +270 -270
  36. package/src/assets/Themes/DarkTheme.scss +264 -264
  37. package/src/assets/Themes/Theme.scss +16 -16
  38. package/src/assets/icons/Arrow.svg +4 -4
  39. package/src/assets/icons/Header_preset.svg +18 -18
  40. package/src/assets/icons/accordion_header_icon.svg +10 -10
  41. package/src/assets/icons/active_license_icon.svg +3 -3
  42. package/src/assets/icons/add_archive.svg +9 -9
  43. package/src/assets/icons/add_file.svg +16 -16
  44. package/src/assets/icons/add_label_icon.svg +3 -3
  45. package/src/assets/icons/add_locator.svg +4 -4
  46. package/src/assets/icons/add_testcase.svg +3 -3
  47. package/src/assets/icons/add_user.svg +9 -9
  48. package/src/assets/icons/add_variable.svg +11 -0
  49. package/src/assets/icons/add_variable_icon.svg +4 -4
  50. package/src/assets/icons/alert.svg +17 -17
  51. package/src/assets/icons/all_borders.svg +3 -3
  52. package/src/assets/icons/all_projects.svg +3 -3
  53. package/src/assets/icons/android.svg +9 -9
  54. package/src/assets/icons/android_icon.svg +6 -6
  55. package/src/assets/icons/apk_file_type.svg +4 -4
  56. package/src/assets/icons/app_switch.svg +11 -11
  57. package/src/assets/icons/approval_pending.svg +8 -8
  58. package/src/assets/icons/arrow_down.svg +3 -3
  59. package/src/assets/icons/arrow_right.svg +4 -4
  60. package/src/assets/icons/arrow_up.svg +3 -3
  61. package/src/assets/icons/arrows_down_icon.svg +3 -3
  62. package/src/assets/icons/arrows_right_icon.svg +10 -10
  63. package/src/assets/icons/arrows_top_icon.svg +3 -3
  64. package/src/assets/icons/attachment_icon.svg +3 -3
  65. package/src/assets/icons/authorization_icon.svg +4 -4
  66. package/src/assets/icons/automation_testcase.svg +4 -4
  67. package/src/assets/icons/back_icon.svg +3 -3
  68. package/src/assets/icons/backward.svg +10 -10
  69. package/src/assets/icons/backward_icon.svg +3 -3
  70. package/src/assets/icons/beautify_icon.svg +3 -3
  71. package/src/assets/icons/bold.svg +3 -3
  72. package/src/assets/icons/border_bottom.svg +3 -3
  73. package/src/assets/icons/border_left.svg +3 -3
  74. package/src/assets/icons/border_right.svg +3 -3
  75. package/src/assets/icons/border_top.svg +3 -3
  76. package/src/assets/icons/browser_stack.svg +9 -9
  77. package/src/assets/icons/browserstack_icon.svg +24 -24
  78. package/src/assets/icons/calendar_icon.svg +9 -9
  79. package/src/assets/icons/capture_icon.svg +3 -6
  80. package/src/assets/icons/check_mark.svg +3 -3
  81. package/src/assets/icons/chrome.svg +12 -12
  82. package/src/assets/icons/client_profile.svg +4 -4
  83. package/src/assets/icons/clock_icon.svg +11 -11
  84. package/src/assets/icons/clone_icon.svg +3 -3
  85. package/src/assets/icons/close_pill.svg +3 -3
  86. package/src/assets/icons/cloud_server_host_icon.svg +3 -3
  87. package/src/assets/icons/collapse-icon.svg +6 -6
  88. package/src/assets/icons/compressed_file_type.svg +4 -4
  89. package/src/assets/icons/configuration.svg +3 -3
  90. package/src/assets/icons/continue_without_sign.svg +3 -3
  91. package/src/assets/icons/copy-icon.svg +3 -3
  92. package/src/assets/icons/csv_file_type.svg +4 -4
  93. package/src/assets/icons/dashboard_icon.svg +31 -31
  94. package/src/assets/icons/dashboard_mobile_icon.svg +47 -47
  95. package/src/assets/icons/dashboard_web_icon.svg +9 -9
  96. package/src/assets/icons/data_provider.svg +8 -8
  97. package/src/assets/icons/dataset_list.svg +3 -3
  98. package/src/assets/icons/defects.svg +8 -8
  99. package/src/assets/icons/delete.svg +3 -3
  100. package/src/assets/icons/delete_info.svg +17 -17
  101. package/src/assets/icons/details.svg +3 -3
  102. package/src/assets/icons/double_underline.svg +5 -5
  103. package/src/assets/icons/download-icon.svg +3 -3
  104. package/src/assets/icons/download_file_icon.svg +3 -3
  105. package/src/assets/icons/download_icon.svg +4 -4
  106. package/src/assets/icons/drag_icon.svg +4 -4
  107. package/src/assets/icons/drawer_maximize.svg +6 -6
  108. package/src/assets/icons/dropzone_icon.svg +18 -18
  109. package/src/assets/icons/edge.svg +30 -30
  110. package/src/assets/icons/edit_icon.svg +5 -5
  111. package/src/assets/icons/element.svg +4 -4
  112. package/src/assets/icons/error.svg +17 -17
  113. package/src/assets/icons/excel_corner_menu.svg +3 -3
  114. package/src/assets/icons/expand-icon.svg +6 -6
  115. package/src/assets/icons/export.svg +4 -4
  116. package/src/assets/icons/export_collection_icon.svg +13 -13
  117. package/src/assets/icons/eye_closed.svg +3 -3
  118. package/src/assets/icons/eye_open_icon.svg +3 -3
  119. package/src/assets/icons/failed_status_icon.svg +12 -12
  120. package/src/assets/icons/file.svg +11 -11
  121. package/src/assets/icons/fill_color.svg +7 -7
  122. package/src/assets/icons/filter.svg +4 -4
  123. package/src/assets/icons/fire_fox.svg +106 -106
  124. package/src/assets/icons/fireflink_finder_logo.svg +7 -7
  125. package/src/assets/icons/fireflink_icon.svg +4 -4
  126. package/src/assets/icons/fireflink_logo.svg +13 -13
  127. package/src/assets/icons/fireflink_platform.svg +4 -4
  128. package/src/assets/icons/firefox.svg +84 -84
  129. package/src/assets/icons/flaky_status_icon.svg +12 -12
  130. package/src/assets/icons/formate_painter.svg +5 -5
  131. package/src/assets/icons/formula_icon.svg +3 -3
  132. package/src/assets/icons/forward.svg +3 -3
  133. package/src/assets/icons/forward_icon.svg +3 -3
  134. package/src/assets/icons/full_access_icon.svg +4 -4
  135. package/src/assets/icons/gif_file_type.svg +4 -4
  136. package/src/assets/icons/global_variable_icon.svg +4 -4
  137. package/src/assets/icons/hamburger_menu.svg +3 -3
  138. package/src/assets/icons/hide_access_icon.svg +3 -3
  139. package/src/assets/icons/hide_icon.svg +9 -9
  140. package/src/assets/icons/history_icon.svg +19 -19
  141. package/src/assets/icons/html_file_type.svg +4 -4
  142. package/src/assets/icons/impactList.svg +6 -6
  143. package/src/assets/icons/import.svg +4 -4
  144. package/src/assets/icons/info.svg +17 -17
  145. package/src/assets/icons/info_icon.svg +5 -5
  146. package/src/assets/icons/info_user.svg +5 -5
  147. package/src/assets/icons/internet_explorer.svg +3 -3
  148. package/src/assets/icons/ipk_file_type.svg +4 -4
  149. package/src/assets/icons/italic.svg +3 -3
  150. package/src/assets/icons/jira.svg +3 -3
  151. package/src/assets/icons/jpg_file_type.svg +4 -4
  152. package/src/assets/icons/json_file_type.svg +4 -4
  153. package/src/assets/icons/label_icon.svg +8 -8
  154. package/src/assets/icons/label_plus.svg +3 -3
  155. package/src/assets/icons/lambda_icon.svg +3 -3
  156. package/src/assets/icons/left_arrow_icon.svg +3 -3
  157. package/src/assets/icons/license_expired.svg +20 -20
  158. package/src/assets/icons/license_info.svg +28 -28
  159. package/src/assets/icons/license_warning.svg +10 -10
  160. package/src/assets/icons/link_expired.svg +186 -186
  161. package/src/assets/icons/linked_defects.svg +11 -11
  162. package/src/assets/icons/linux.svg +42 -42
  163. package/src/assets/icons/local.svg +3 -3
  164. package/src/assets/icons/local_variable_icon.svg +4 -4
  165. package/src/assets/icons/logo.svg +17 -17
  166. package/src/assets/icons/mac.svg +9 -9
  167. package/src/assets/icons/manage_apps.svg +3 -3
  168. package/src/assets/icons/manual_locator.svg +7 -7
  169. package/src/assets/icons/manual_testcase.svg +3 -3
  170. package/src/assets/icons/maximize_icon.svg +5 -5
  171. package/src/assets/icons/maximize_script.svg +12 -12
  172. package/src/assets/icons/maximize_tree.svg +3 -3
  173. package/src/assets/icons/minimize_script.svg +5 -5
  174. package/src/assets/icons/mobile_icon.svg +3 -3
  175. package/src/assets/icons/moon_stars.svg +10 -10
  176. package/src/assets/icons/more.svg +10 -10
  177. package/src/assets/icons/move_icon.svg +5 -5
  178. package/src/assets/icons/ms_dynamic.svg +4 -4
  179. package/src/assets/icons/ms_dynamic_icon.svg +15 -15
  180. package/src/assets/icons/nlp_help_icon.svg +3 -3
  181. package/src/assets/icons/no_access_icon.svg +4 -4
  182. package/src/assets/icons/no_border.svg +3 -3
  183. package/src/assets/icons/no_data.svg +13 -13
  184. package/src/assets/icons/no_license_found.svg +22 -22
  185. package/src/assets/icons/notification_icon.svg +3 -3
  186. package/src/assets/icons/opera.svg +9 -9
  187. package/src/assets/icons/passed_status_icon.svg +12 -12
  188. package/src/assets/icons/pdf_file_type.svg +4 -4
  189. package/src/assets/icons/plus_icon.svg +11 -11
  190. package/src/assets/icons/plus_user_icon.svg +3 -3
  191. package/src/assets/icons/png_file_type.svg +4 -4
  192. package/src/assets/icons/project_element.svg +4 -4
  193. package/src/assets/icons/project_env_variable_icon.svg +4 -4
  194. package/src/assets/icons/project_status_icon.svg +10 -10
  195. package/src/assets/icons/quick_run_setting_icon.svg +5 -5
  196. package/src/assets/icons/refresh-icon.svg +4 -4
  197. package/src/assets/icons/refresh_icon.svg +4 -4
  198. package/src/assets/icons/reload.svg +3 -3
  199. package/src/assets/icons/remove.svg +11 -11
  200. package/src/assets/icons/remove_user.svg +3 -3
  201. package/src/assets/icons/replace.svg +11 -11
  202. package/src/assets/icons/replace_file.svg +13 -13
  203. package/src/assets/icons/replace_icon.svg +6 -6
  204. package/src/assets/icons/reset-link.svg +52 -52
  205. package/src/assets/icons/right_arrow_icon.svg +4 -4
  206. package/src/assets/icons/rotate_icon.svg +10 -10
  207. package/src/assets/icons/run_automation_scripts_icon.svg +33 -33
  208. package/src/assets/icons/run_icon.svg +26 -26
  209. package/src/assets/icons/run_manual_testcase_icon.svg +4 -4
  210. package/src/assets/icons/safari.svg +93 -93
  211. package/src/assets/icons/safari_icon.svg +12 -12
  212. package/src/assets/icons/sales_force.svg +7 -7
  213. package/src/assets/icons/salesforce_icon.svg +14 -14
  214. package/src/assets/icons/sample_template_first.svg +29 -29
  215. package/src/assets/icons/sample_template_second.svg +47 -47
  216. package/src/assets/icons/sause_lab.svg +3 -3
  217. package/src/assets/icons/save_as_step.svg +3 -3
  218. package/src/assets/icons/search.svg +3 -3
  219. package/src/assets/icons/send_step.svg +4 -4
  220. package/src/assets/icons/skipped_status_icon.svg +12 -12
  221. package/src/assets/icons/standard_template.svg +30 -30
  222. package/src/assets/icons/step_group.svg +10 -10
  223. package/src/assets/icons/strike_through.svg +3 -3
  224. package/src/assets/icons/success.svg +17 -17
  225. package/src/assets/icons/sun_icon.svg +10 -10
  226. package/src/assets/icons/swipe_icon.svg +9 -9
  227. package/src/assets/icons/switch_license_icon.svg +123 -123
  228. package/src/assets/icons/system_warning.svg +61 -61
  229. package/src/assets/icons/tap_icon.svg +4 -4
  230. package/src/assets/icons/text_align_center.svg +3 -3
  231. package/src/assets/icons/text_align_left.svg +3 -3
  232. package/src/assets/icons/text_align_right.svg +3 -3
  233. package/src/assets/icons/text_color.svg +3 -3
  234. package/src/assets/icons/tick_icon.svg +4 -4
  235. package/src/assets/icons/toast_close.svg +3 -3
  236. package/src/assets/icons/txt_file_type.svg +4 -4
  237. package/src/assets/icons/underline.svg +4 -4
  238. package/src/assets/icons/update_icon.svg +3 -3
  239. package/src/assets/icons/user_password_lock.svg +220 -220
  240. package/src/assets/icons/user_profile.svg +3 -3
  241. package/src/assets/icons/user_warning.svg +235 -235
  242. package/src/assets/icons/user_with_system.svg +637 -637
  243. package/src/assets/icons/variable.svg +3 -3
  244. package/src/assets/icons/variable_icon.svg +4 -4
  245. package/src/assets/icons/vertical_separator.svg +3 -3
  246. package/src/assets/icons/view_access_icon.svg +4 -4
  247. package/src/assets/icons/view_icon.svg +3 -3
  248. package/src/assets/icons/warning.svg +17 -17
  249. package/src/assets/icons/warning_status_icon.svg +12 -12
  250. package/src/assets/icons/web&mobile_icon.svg +3 -3
  251. package/src/assets/icons/web_icon.svg +3 -3
  252. package/src/assets/icons/web_mobile_icon.svg +29 -29
  253. package/src/assets/icons/web_service_icon.svg +3 -3
  254. package/src/assets/icons/web_services_icon.svg +30 -30
  255. package/src/assets/icons/window_maximize.svg +4 -4
  256. package/src/assets/icons/window_minimize.svg +3 -3
  257. package/src/assets/icons/windows.svg +10 -10
  258. package/src/assets/icons/wrong_mark.svg +3 -3
  259. package/src/assets/icons/wswb_delete_icon.svg +3 -3
  260. package/src/assets/icons/wswb_plus_icon.svg +4 -4
  261. package/src/assets/icons/xls_file_type.svg +4 -4
  262. package/src/assets/icons/xlsx_file_type.svg +4 -4
  263. package/src/assets/icons/xml_file_type.svg +4 -4
  264. package/src/assets/styles/_colors.scss +151 -151
  265. package/src/assets/styles/_fonts.scss +45 -45
  266. package/src/assets/styles/_mixins.scss +21 -21
  267. package/src/assets/utils/functionUtils.ts +96 -96
  268. package/src/components/Accordion/Accordion.scss +46 -46
  269. package/src/components/Accordion/Accordion.stories.tsx +31 -31
  270. package/src/components/Accordion/Accordion.tsx +62 -62
  271. package/src/components/Accordion/index.ts +1 -1
  272. package/src/components/Accordion/types.ts +28 -28
  273. package/src/components/AddResourceButton/AddButton.scss +36 -36
  274. package/src/components/AddResourceButton/AddButton.stories.tsx +126 -126
  275. package/src/components/AddResourceButton/AddButton.tsx +121 -121
  276. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.scss +161 -161
  277. package/src/components/AddResourceButton/ArrowsButton/ArrowsButton.tsx +38 -38
  278. package/src/components/AddResourceButton/index.ts +1 -1
  279. package/src/components/AddResourceButton/type.ts +92 -92
  280. package/src/components/AddVariables/AddVariables.scss +14 -0
  281. package/src/components/AddVariables/AddVariables.stories.tsx +44 -0
  282. package/src/components/AddVariables/AddVariables.tsx +113 -0
  283. package/src/components/AddVariables/index.ts +1 -0
  284. package/src/components/AddVariables/types.ts +36 -0
  285. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +189 -189
  286. package/src/components/AllProjectsDropdown/AllProjectsDropdown.stories.tsx +117 -117
  287. package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx +152 -152
  288. package/src/components/AllProjectsDropdown/types.ts +12 -12
  289. package/src/components/AppHeader/AppHeader.scss +182 -176
  290. package/src/components/AppHeader/AppHeader.stories.tsx +425 -425
  291. package/src/components/AppHeader/AppHeader.tsx +198 -198
  292. package/src/components/AppHeader/index.ts +1 -1
  293. package/src/components/AppHeader/types.ts +52 -53
  294. package/src/components/AttachImage/AttachImage.scss +76 -76
  295. package/src/components/AttachImage/AttachImage.stories.tsx +24 -24
  296. package/src/components/AttachImage/AttachImage.tsx +60 -60
  297. package/src/components/AttachImage/index.ts +2 -2
  298. package/src/components/AttachImage/types.ts +26 -26
  299. package/src/components/AttachmentButton/AttachmentButton.scss +9 -9
  300. package/src/components/AttachmentButton/AttachmentButton.stories.tsx +81 -81
  301. package/src/components/AttachmentButton/AttachmentButton.tsx +129 -129
  302. package/src/components/AttachmentButton/types.ts +13 -13
  303. package/src/components/Avatar/Avatar.scss +27 -27
  304. package/src/components/Avatar/Avatar.stories.tsx +76 -76
  305. package/src/components/Avatar/Avatar.tsx +41 -41
  306. package/src/components/Avatar/types.ts +35 -35
  307. package/src/components/Button/Button.scss +155 -155
  308. package/src/components/Button/Button.stories.tsx +81 -81
  309. package/src/components/Button/Button.tsx +73 -73
  310. package/src/components/Button/index.ts +1 -1
  311. package/src/components/Button/types.ts +69 -69
  312. package/src/components/Charts/BarChart/BarChart.scss +66 -66
  313. package/src/components/Charts/BarChart/BarChart.stories.tsx +67 -67
  314. package/src/components/Charts/BarChart/BarChart.tsx +328 -328
  315. package/src/components/Charts/BarChart/types.ts +12 -12
  316. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss +157 -157
  317. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx +54 -54
  318. package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.tsx +502 -502
  319. package/src/components/Charts/DashboardDonutChart/types.ts +52 -52
  320. package/src/components/Charts/DonutChart/DonutChart.scss +76 -76
  321. package/src/components/Charts/DonutChart/DonutChart.stories.tsx +30 -30
  322. package/src/components/Charts/DonutChart/DonutChart.tsx +246 -246
  323. package/src/components/Charts/DonutChart/index.ts +1 -1
  324. package/src/components/Charts/DonutChart/type.ts +23 -23
  325. package/src/components/Charts/IconRadialChart/IconRadialChart.scss +25 -25
  326. package/src/components/Charts/IconRadialChart/IconRadialChart.stories.tsx +51 -51
  327. package/src/components/Charts/IconRadialChart/IconRadialChart.tsx +173 -173
  328. package/src/components/Charts/IconRadialChart/types.ts +28 -28
  329. package/src/components/Charts/LineChart/LineChart.scss +88 -88
  330. package/src/components/Charts/LineChart/LineChart.stories.tsx +255 -255
  331. package/src/components/Charts/LineChart/LineChart.tsx +282 -282
  332. package/src/components/Charts/LineChart/index.ts +1 -1
  333. package/src/components/Charts/LineChart/types.ts +29 -29
  334. package/src/components/Charts/MultiRadialChart/MultiRadialChart.scss +86 -86
  335. package/src/components/Charts/MultiRadialChart/MultiRadialChart.stories.tsx +116 -116
  336. package/src/components/Charts/MultiRadialChart/MultiRadialChart.tsx +292 -292
  337. package/src/components/Charts/MultiRadialChart/index.ts +1 -1
  338. package/src/components/Charts/MultiRadialChart/types.ts +25 -25
  339. package/src/components/Charts/PieChart/PieChart.scss +41 -41
  340. package/src/components/Charts/PieChart/PieChart.stories.tsx +46 -46
  341. package/src/components/Charts/PieChart/PieChart.tsx +192 -192
  342. package/src/components/Charts/PieChart/index.ts +1 -1
  343. package/src/components/Charts/PieChart/types.ts +28 -28
  344. package/src/components/Charts/RadialChart/RadialChart.scss +16 -16
  345. package/src/components/Charts/RadialChart/RadialChart.stories.tsx +36 -36
  346. package/src/components/Charts/RadialChart/RadialChart.tsx +180 -180
  347. package/src/components/Charts/RadialChart/index.ts +1 -1
  348. package/src/components/Charts/RadialChart/types.ts +32 -32
  349. package/src/components/Checkbox/Checkbox.scss +146 -89
  350. package/src/components/Checkbox/Checkbox.stories.tsx +123 -47
  351. package/src/components/Checkbox/Checkbox.tsx +58 -55
  352. package/src/components/Checkbox/types.ts +34 -30
  353. package/src/components/Chip/Chip.scss +85 -85
  354. package/src/components/Chip/Chip.stories.tsx +116 -116
  355. package/src/components/Chip/Chip.tsx +35 -35
  356. package/src/components/Chip/index.ts +1 -1
  357. package/src/components/Chip/types.ts +19 -19
  358. package/src/components/ConnectingBranch/BranchComponents/MachineInstances.tsx +128 -128
  359. package/src/components/ConnectingBranch/ConnectingBranch.scss +233 -233
  360. package/src/components/ConnectingBranch/ConnectingBranch.stories.tsx +21 -21
  361. package/src/components/ConnectingBranch/ConnectingBranch.tsx +182 -182
  362. package/src/components/ConnectingBranch/data.ts +137 -137
  363. package/src/components/ConnectingBranch/index.ts +1 -1
  364. package/src/components/ConnectingBranch/types.ts +21 -21
  365. package/src/components/CreateVariable/CreateVariableSlider.scss +18 -18
  366. package/src/components/CreateVariable/CreateVariableSlider.stories.tsx +66 -66
  367. package/src/components/CreateVariable/CreateVariableSlider.tsx +95 -95
  368. package/src/components/CreateVariable/index.ts +1 -1
  369. package/src/components/CreateVariable/types.ts +58 -58
  370. package/src/components/DatePicker/DatePicker.scss +402 -402
  371. package/src/components/DatePicker/DatePicker.stories.tsx +174 -174
  372. package/src/components/DatePicker/DatePicker.tsx +451 -451
  373. package/src/components/DatePicker/Timepicker.tsx +372 -372
  374. package/src/components/DatePicker/types.ts +105 -105
  375. package/src/components/DownloadClient/DownloadClient.scss +80 -80
  376. package/src/components/DownloadClient/DownloadClient.stories.tsx +26 -26
  377. package/src/components/DownloadClient/DownloadClient.tsx +81 -81
  378. package/src/components/DownloadClient/type.ts +40 -40
  379. package/src/components/DragAndDrop/DragAndDrop.d.ts +5 -5
  380. package/src/components/DragAndDrop/DragAndDrop.stories.tsx +25 -25
  381. package/src/components/DragAndDrop/DragAndDrop.ts +7 -7
  382. package/src/components/DragAndDrop/DragAndDropList.scss +69 -69
  383. package/src/components/DragAndDrop/DragAndDropList.tsx +151 -151
  384. package/src/components/Drawer/Drawer.scss +138 -138
  385. package/src/components/Drawer/Drawer.stories.tsx +155 -155
  386. package/src/components/Drawer/Drawer.tsx +232 -232
  387. package/src/components/Drawer/Types.ts +157 -157
  388. package/src/components/EditTextField/EditTextField.scss +97 -97
  389. package/src/components/EditTextField/EditTextField.stories.tsx +127 -127
  390. package/src/components/EditTextField/EditTextField.tsx +181 -181
  391. package/src/components/EditTextField/index.ts +1 -1
  392. package/src/components/EditTextField/types.ts +55 -55
  393. package/src/components/Editor/Editor.scss +56 -56
  394. package/src/components/Editor/Editor.stories.tsx +54 -54
  395. package/src/components/Editor/Editor.tsx +250 -248
  396. package/src/components/Editor/VariableDropdown.scss +27 -21
  397. package/src/components/Editor/VariableDropdown.tsx +57 -49
  398. package/src/components/Editor/constants.ts +180 -180
  399. package/src/components/Editor/types.ts +89 -79
  400. package/src/components/Excel/ColorBarSelector/ColorBarSelector.scss +15 -15
  401. package/src/components/Excel/ColorBarSelector/ColorBarSelector.tsx +43 -43
  402. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.scss +27 -27
  403. package/src/components/Excel/ExcelContextMenu/ExcelContextMenu.tsx +42 -42
  404. package/src/components/Excel/ExcelFile/ExcelFile.scss +68 -68
  405. package/src/components/Excel/ExcelFile/ExcelFile.tsx +491 -491
  406. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +131 -131
  407. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +238 -238
  408. package/src/components/Excel/ExcelFile/ExcelFileComponents/ColumnIndicator.tsx +168 -168
  409. package/src/components/Excel/ExcelFile/ExcelFileComponents/Copied.tsx +25 -25
  410. package/src/components/Excel/ExcelFile/ExcelFileComponents/CornerIndicator.tsx +56 -56
  411. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataEditor.tsx +37 -37
  412. package/src/components/Excel/ExcelFile/ExcelFileComponents/DataViewer.tsx +85 -85
  413. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +31 -31
  414. package/src/components/Excel/ExcelFile/ExcelFileComponents/HeaderRow.tsx +5 -5
  415. package/src/components/Excel/ExcelFile/ExcelFileComponents/Row.tsx +5 -5
  416. package/src/components/Excel/ExcelFile/ExcelFileComponents/RowIndicator.tsx +154 -154
  417. package/src/components/Excel/ExcelFile/ExcelFileComponents/Selected.tsx +32 -32
  418. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +146 -146
  419. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.tsx +479 -479
  420. package/src/components/Excel/ExcelFile/ExcelFileComponents/Table.tsx +19 -19
  421. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +548 -548
  422. package/src/components/Excel/ExcelFile/ExcelFileComponents/areModelsEqual.ts +18 -18
  423. package/src/components/Excel/ExcelFile/ExcelFileComponents/context.ts +12 -12
  424. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/engine.ts +153 -153
  425. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/formula.ts +31 -31
  426. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/index.ts +2 -2
  427. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/point-graph.ts +152 -152
  428. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/point-hash.ts +10 -10
  429. package/src/components/Excel/ExcelFile/ExcelFileComponents/engine/point-set.ts +69 -69
  430. package/src/components/Excel/ExcelFile/ExcelFileComponents/index.ts +49 -49
  431. package/src/components/Excel/ExcelFile/ExcelFileComponents/matrix.ts +382 -382
  432. package/src/components/Excel/ExcelFile/ExcelFileComponents/point-range.ts +82 -82
  433. package/src/components/Excel/ExcelFile/ExcelFileComponents/point.ts +15 -15
  434. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +673 -673
  435. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +819 -819
  436. package/src/components/Excel/ExcelFile/ExcelFileComponents/selection.ts +257 -257
  437. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +255 -255
  438. package/src/components/Excel/ExcelFile/ExcelFileComponents/typings/fast-formula-parser.d.ts +58 -58
  439. package/src/components/Excel/ExcelFile/ExcelFileComponents/use-dispatch.ts +8 -8
  440. package/src/components/Excel/ExcelFile/ExcelFileComponents/use-selector.ts +9 -9
  441. package/src/components/Excel/ExcelFile/ExcelFileComponents/util.ts +172 -172
  442. package/src/components/Excel/ExcelFile.stories.tsx +167 -167
  443. package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +96 -96
  444. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +397 -397
  445. package/src/components/Excel/Types.ts +196 -196
  446. package/src/components/Excel/dataConversion.ts +173 -173
  447. package/src/components/Excel/index.ts +1 -1
  448. package/src/components/ExpandableMenu/ExpandableMenu.scss +110 -110
  449. package/src/components/ExpandableMenu/ExpandableMenu.stories.tsx +67 -67
  450. package/src/components/ExpandableMenu/ExpandableMenu.tsx +101 -101
  451. package/src/components/ExpandableMenu/index.ts +1 -1
  452. package/src/components/ExpandableMenu/types.ts +34 -34
  453. package/src/components/FF_Captcha/Recaptcha.scss +10 -10
  454. package/src/components/FF_Captcha/Recaptcha.tsx +40 -40
  455. package/src/components/FF_Captcha/captcha.stories.tsx +40 -40
  456. package/src/components/FF_Captcha/types.ts +22 -22
  457. package/src/components/FieldSet/FieldSet.scss +9 -9
  458. package/src/components/FieldSet/FieldSet.stories.tsx +103 -103
  459. package/src/components/FieldSet/FieldSet.tsx +29 -29
  460. package/src/components/FieldSet/index.ts +1 -1
  461. package/src/components/FieldSet/types.ts +8 -8
  462. package/src/components/FileDropzone/Dropzone.tsx +57 -57
  463. package/src/components/FileDropzone/FileDropzone.scss +135 -135
  464. package/src/components/FileDropzone/FileDropzone.stories.tsx +98 -98
  465. package/src/components/FileDropzone/FileDropzone.tsx +111 -111
  466. package/src/components/FileDropzone/FilePreview.tsx +77 -77
  467. package/src/components/FileDropzone/index.ts +1 -1
  468. package/src/components/FileDropzone/types.ts +126 -126
  469. package/src/components/Form/Form.d.ts +2 -2
  470. package/src/components/Form/Form.scss +158 -158
  471. package/src/components/Form/Form.stories.tsx +508 -508
  472. package/src/components/Form/Form.ts +2 -2
  473. package/src/components/Form/Forms.tsx +41 -41
  474. package/src/components/Form/validation.json +29 -29
  475. package/src/components/GridLayout/GridLayout.scss +69 -69
  476. package/src/components/GridLayout/GridLayout.stories.tsx +90 -90
  477. package/src/components/GridLayout/GridLayout.tsx +39 -39
  478. package/src/components/GridLayout/GridLayoutStory.scss +25 -25
  479. package/src/components/GridLayout/types.ts +84 -84
  480. package/src/components/HighlightText/HighlightText.scss +3 -3
  481. package/src/components/HighlightText/HighlightText.stories.tsx +22 -22
  482. package/src/components/HighlightText/HighlightText.tsx +33 -33
  483. package/src/components/HighlightText/index.ts +1 -1
  484. package/src/components/HighlightText/types.ts +4 -4
  485. package/src/components/Icon/Icon.stories.tsx +65 -65
  486. package/src/components/Icon/Icon.tsx +88 -88
  487. package/src/components/Icon/Icons.scss +50 -50
  488. package/src/components/Icon/iconList.ts +464 -462
  489. package/src/components/Icon/index.ts +1 -1
  490. package/src/components/Icon/types.ts +14 -14
  491. package/src/components/IconButton/IconButton.scss +54 -54
  492. package/src/components/IconButton/IconButton.stories.tsx +33 -33
  493. package/src/components/IconButton/IconButton.tsx +36 -36
  494. package/src/components/IconButton/index.ts +1 -1
  495. package/src/components/IconButton/types.ts +6 -6
  496. package/src/components/IconRadioGroup/IconRadioGroup.scss +63 -63
  497. package/src/components/IconRadioGroup/IconRadioGroup.stories.tsx +108 -108
  498. package/src/components/IconRadioGroup/IconRadioGroup.tsx +73 -73
  499. package/src/components/IconRadioGroup/index.ts +1 -1
  500. package/src/components/IconRadioGroup/type.ts +49 -49
  501. package/src/components/Input/Input.scss +159 -159
  502. package/src/components/Input/Input.stories.tsx +141 -141
  503. package/src/components/Input/Input.tsx +114 -103
  504. package/src/components/Input/types.ts +85 -85
  505. package/src/components/InputWithDropdown/InputWithDropdown.scss +213 -213
  506. package/src/components/InputWithDropdown/InputWithDropdown.stories.tsx +169 -169
  507. package/src/components/InputWithDropdown/InputWithDropdown.tsx +122 -122
  508. package/src/components/InputWithDropdown/index.ts +1 -1
  509. package/src/components/InputWithDropdown/types.ts +113 -113
  510. package/src/components/LabelEditTextField/LabelEditTextField.scss +86 -86
  511. package/src/components/LabelEditTextField/LabelEditTextField.stories.tsx +192 -192
  512. package/src/components/LabelEditTextField/LabelEditTextField.tsx +246 -246
  513. package/src/components/LabelEditTextField/index.ts +1 -1
  514. package/src/components/LabelEditTextField/types.ts +46 -46
  515. package/src/components/LazyLoad/LazyLoad.d.ts +3 -3
  516. package/src/components/LazyLoad/LazyLoad.stories.tsx +33 -33
  517. package/src/components/LazyLoad/LazyLoad.ts +2 -2
  518. package/src/components/LazyLoad/LazyLoading.tsx +19 -19
  519. package/src/components/LazyLoad/index.ts +1 -1
  520. package/src/components/MachineInputField/MachineInputField.scss +59 -59
  521. package/src/components/MachineInputField/MachineInputField.stories.tsx +32 -32
  522. package/src/components/MachineInputField/MachineInputField.tsx +87 -87
  523. package/src/components/MachineInputField/index.ts +1 -1
  524. package/src/components/MachineInputField/types.ts +13 -13
  525. package/src/components/MenuOption/MenuOption.scss +97 -97
  526. package/src/components/MenuOption/MenuOption.stories.tsx +157 -157
  527. package/src/components/MenuOption/MenuOption.tsx +219 -219
  528. package/src/components/MenuOption/types.ts +228 -228
  529. package/src/components/MiniModal/MiniModal.scss +170 -170
  530. package/src/components/MiniModal/MiniModal.stories.tsx +735 -735
  531. package/src/components/MiniModal/MiniModal.tsx +344 -344
  532. package/src/components/MiniModal/index.ts +1 -1
  533. package/src/components/MiniModal/types.ts +123 -123
  534. package/src/components/Modal/Modal.stories.tsx +70 -69
  535. package/src/components/Modal/Modal.tsx +100 -100
  536. package/src/components/Modal/index.tsx +1 -1
  537. package/src/components/Modal/modal.scss +51 -51
  538. package/src/components/Modal/types.ts +43 -43
  539. package/src/components/ModulesChip/ModuleChip.scss +20 -20
  540. package/src/components/ModulesChip/ModuleChip.stories.tsx +41 -41
  541. package/src/components/ModulesChip/ModuleChip.tsx +31 -31
  542. package/src/components/ModulesChip/types.ts +14 -14
  543. package/src/components/MultiSelect/Dropdown.scss +78 -78
  544. package/src/components/MultiSelect/Dropdown.tsx +135 -135
  545. package/src/components/MultiSelect/MultiSelect.scss +217 -217
  546. package/src/components/MultiSelect/MultiSelect.stories.tsx +273 -273
  547. package/src/components/MultiSelect/MultiSelect.tsx +472 -472
  548. package/src/components/MultiSelect/MultiSelectTypes.ts +47 -47
  549. package/src/components/MultiSelect/dropdownTypes.ts +19 -19
  550. package/src/components/MultiSelect/index.ts +1 -1
  551. package/src/components/NLPInput/NLPInput.scss +246 -246
  552. package/src/components/NLPInput/NlpInput.stories.tsx +136 -136
  553. package/src/components/NLPInput/NlpInput.tsx +374 -374
  554. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +60 -60
  555. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +83 -83
  556. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +180 -180
  557. package/src/components/NLPInput/index.ts +1 -1
  558. package/src/components/NLPInput/type.tsx +124 -124
  559. package/src/components/Paper/Paper.scss +13 -13
  560. package/src/components/Paper/Paper.stories.tsx +77 -77
  561. package/src/components/Paper/Paper.tsx +14 -14
  562. package/src/components/Paper/types.ts +19 -19
  563. package/src/components/PopUpModal/PopUpModal.scss +36 -36
  564. package/src/components/PopUpModal/PopUpModal.stories.tsx +61 -61
  565. package/src/components/PopUpModal/PopUpModal.tsx +85 -85
  566. package/src/components/PopUpModal/types.ts +13 -13
  567. package/src/components/RadioButton/RadioButton.scss +106 -106
  568. package/src/components/RadioButton/RadioButton.stories.tsx +43 -43
  569. package/src/components/RadioButton/RadioButton.tsx +41 -41
  570. package/src/components/RadioButton/index.ts +1 -1
  571. package/src/components/RadioButton/radioButtonTypes.tsx +62 -62
  572. package/src/components/RadioGroup/RadioGroup.scss +11 -11
  573. package/src/components/RadioGroup/RadioGroup.stories.tsx +150 -150
  574. package/src/components/RadioGroup/RadioGroup.tsx +49 -49
  575. package/src/components/RadioGroup/index.ts +1 -1
  576. package/src/components/RadioGroup/radioGroupTypes.tsx +96 -96
  577. package/src/components/Search/Search.scss +103 -103
  578. package/src/components/Search/Search.stories.tsx +26 -26
  579. package/src/components/Search/Search.tsx +127 -127
  580. package/src/components/Search/index.ts +1 -1
  581. package/src/components/Search/types.ts +15 -15
  582. package/src/components/Select/Select.scss +213 -213
  583. package/src/components/Select/Select.stories.tsx +355 -355
  584. package/src/components/Select/Select.tsx +278 -278
  585. package/src/components/Select/components/Dropdown.scss +61 -61
  586. package/src/components/Select/components/Dropdown.tsx +140 -140
  587. package/src/components/Select/components/types.ts +24 -24
  588. package/src/components/Select/index.ts +1 -1
  589. package/src/components/Select/types.ts +134 -134
  590. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.scss +128 -128
  591. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +56 -56
  592. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +167 -167
  593. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.scss +51 -51
  594. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/AddBrowserModal.tsx +107 -107
  595. package/src/components/SequentialConnectingBranch/components/AddBrowserModal/types.ts +5 -5
  596. package/src/components/SequentialConnectingBranch/components/Branches/Branches.scss +190 -190
  597. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +236 -236
  598. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +25 -25
  599. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.scss +3 -3
  600. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +68 -68
  601. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +17 -17
  602. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.scss +31 -31
  603. package/src/components/SequentialConnectingBranch/components/DatasetListModal/DatasetListModal.tsx +85 -85
  604. package/src/components/SequentialConnectingBranch/components/DatasetListModal/types.ts +4 -4
  605. package/src/components/SequentialConnectingBranch/index.ts +1 -1
  606. package/src/components/SequentialConnectingBranch/types.ts +60 -60
  607. package/src/components/StateDropdown/StateDropdown.stories.tsx +104 -104
  608. package/src/components/StateDropdown/StateDropdown.tsx +245 -245
  609. package/src/components/StateDropdown/StateDropdownTypes.tsx +27 -27
  610. package/src/components/StatusButton/StatusButton.scss +90 -90
  611. package/src/components/StatusButton/StatusButton.stories.tsx +91 -91
  612. package/src/components/StatusButton/StatusButton.tsx +46 -46
  613. package/src/components/StatusButton/index.ts +1 -1
  614. package/src/components/StatusButton/types.ts +45 -45
  615. package/src/components/StatusCard/StatusCard.scss +94 -94
  616. package/src/components/StatusCard/StatusCard.stories.tsx +58 -58
  617. package/src/components/StatusCard/StatusCard.tsx +49 -49
  618. package/src/components/StatusCard/index.ts +1 -1
  619. package/src/components/StatusCard/types.ts +10 -10
  620. package/src/components/Table/Table.scss +116 -116
  621. package/src/components/Table/Table.stories.tsx +373 -373
  622. package/src/components/Table/Table.tsx +178 -178
  623. package/src/components/Table/Types.ts +124 -124
  624. package/src/components/Table/index.ts +1 -1
  625. package/src/components/TableTree/Components/TableBody.tsx +35 -35
  626. package/src/components/TableTree/Components/TableCell.tsx +59 -59
  627. package/src/components/TableTree/Components/TableHead.tsx +39 -39
  628. package/src/components/TableTree/Components/TableRow.tsx +37 -37
  629. package/src/components/TableTree/TableTree.scss +205 -205
  630. package/src/components/TableTree/TableTree.stories.tsx +179 -179
  631. package/src/components/TableTree/TableTree.tsx +245 -245
  632. package/src/components/TableTree/TableTreeStories.scss +22 -22
  633. package/src/components/TableTree/Utils/getAllChildIds.ts +12 -12
  634. package/src/components/TableTree/data.ts +322 -322
  635. package/src/components/TableTree/index.ts +1 -1
  636. package/src/components/TableTree/types.ts +68 -68
  637. package/src/components/Tabs/Tabs.scss +79 -79
  638. package/src/components/Tabs/Tabs.stories.tsx +133 -133
  639. package/src/components/Tabs/Tabs.tsx +61 -61
  640. package/src/components/Tabs/index.ts +1 -1
  641. package/src/components/Tabs/types.ts +48 -48
  642. package/src/components/TextArea/Textarea.scss +144 -144
  643. package/src/components/TextArea/Textarea.stories.tsx +92 -92
  644. package/src/components/TextArea/Textarea.tsx +84 -84
  645. package/src/components/TextArea/Types.ts +82 -82
  646. package/src/components/TextArea/index.tsx +1 -1
  647. package/src/components/ThemeProvider/ThemeProvider.tsx +27 -27
  648. package/src/components/ThemeProvider/index.ts +1 -1
  649. package/src/components/ThemeProvider/types.ts +14 -14
  650. package/src/components/Toast/Toast.scss +121 -121
  651. package/src/components/Toast/Toast.stories.tsx +144 -144
  652. package/src/components/Toast/Toast.tsx +117 -117
  653. package/src/components/Toast/index.ts +1 -1
  654. package/src/components/Toast/types.ts +27 -27
  655. package/src/components/Toastify/Toastify.stories.tsx +71 -71
  656. package/src/components/Toastify/Toastify.tsx +94 -94
  657. package/src/components/Toastify/index.ts +1 -1
  658. package/src/components/Toastify/types.ts +9 -9
  659. package/src/components/Toggle/Toggle.scss +133 -133
  660. package/src/components/Toggle/Toggle.stories.tsx +132 -132
  661. package/src/components/Toggle/Toggle.tsx +96 -96
  662. package/src/components/Toggle/index.ts +1 -1
  663. package/src/components/Toggle/types.ts +43 -43
  664. package/src/components/ToggleSwitch/ToggleSwitch.scss +58 -58
  665. package/src/components/ToggleSwitch/ToggleSwitch.stories.tsx +52 -52
  666. package/src/components/ToggleSwitch/ToggleSwitch.tsx +30 -30
  667. package/src/components/ToggleSwitch/index.ts +1 -1
  668. package/src/components/Tooltip/Tooltip.scss +27 -27
  669. package/src/components/Tooltip/Tooltip.stories.tsx +98 -98
  670. package/src/components/Tooltip/Tooltip.tsx +194 -194
  671. package/src/components/Tooltip/index.ts +1 -1
  672. package/src/components/Tooltip/types.ts +66 -66
  673. package/src/components/Typography/Typography.scss +25 -25
  674. package/src/components/Typography/Typography.stories.tsx +59 -59
  675. package/src/components/Typography/Typography.tsx +41 -41
  676. package/src/components/Typography/index.ts +1 -1
  677. package/src/components/Typography/types.ts +57 -57
  678. package/src/components/VariableInput/VariableInput.scss +127 -127
  679. package/src/components/VariableInput/VariableInput.stories.tsx +32 -32
  680. package/src/components/VariableInput/VariableInput.tsx +352 -352
  681. package/src/components/VariableInput/types.ts +56 -56
  682. package/src/hooks/keyboardevents/useEscKeyEvent.tsx +30 -30
  683. package/src/hooks/useClickOutside.tsx +30 -30
  684. package/src/hooks/useFileDropzone.tsx +274 -274
  685. package/src/hooks/usePortalPosition.tsx +53 -53
  686. package/src/hooks/useTheme.tsx +13 -13
  687. package/src/index.ts +193 -189
  688. package/src/utils/TableCell/TableCell.ts +16 -16
  689. package/src/utils/capitalize/capitalize.stories.tsx +44 -44
  690. package/src/utils/capitalize/capitalize.tsx +4 -4
  691. package/src/utils/checkDuplicates/CheckDuplicates.stories.tsx +40 -0
  692. package/src/utils/checkDuplicates/checkDuplicates.ts +13 -0
  693. package/src/utils/checkEmpty/checkEmpty.stories.tsx +34 -34
  694. package/src/utils/checkEmpty/checkEmpty.ts +24 -24
  695. package/src/utils/compareArrays/compareArrays.stories.tsx +62 -62
  696. package/src/utils/compareArrays/compareArrays.ts +31 -31
  697. package/src/utils/compareObjects/compareObjects.stories.tsx +51 -51
  698. package/src/utils/compareObjects/compareObjects.ts +53 -53
  699. package/src/utils/debounce/debounce.stories.tsx +81 -81
  700. package/src/utils/debounce/debounce.ts +28 -28
  701. package/src/utils/downloadFile/saveFileFromBlob.stories.tsx +62 -62
  702. package/src/utils/downloadFile/saveFileFromBlob.ts +40 -40
  703. package/src/utils/ffID/ffID.stories.tsx +35 -35
  704. package/src/utils/ffID/ffid.ts +7 -7
  705. package/src/utils/findAndInsert/findAndInsert.stories.tsx +119 -119
  706. package/src/utils/findAndInsert/findAndInsert.ts +49 -49
  707. package/src/utils/getEncryptedData/getEncryptedData.stories.tsx +55 -55
  708. package/src/utils/getEncryptedData/getEncryptedData.ts +8 -8
  709. package/src/utils/getExtension/getExtension.stories.tsx +23 -23
  710. package/src/utils/getExtension/getExtension.ts +28 -28
  711. package/src/utils/getSelectOptionValue/getSelectOptionValue.ts +31 -31
  712. package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx +72 -72
  713. package/src/utils/getSequentialPayload/getSequentialPayload.ts +16 -16
  714. package/src/utils/getSequentialPayload/types.ts +32 -32
  715. package/src/utils/throttle/throttle.stories.tsx +100 -100
  716. package/src/utils/throttle/throttle.ts +33 -33
  717. package/src/utils/truncateText/truncateText.stories.tsx +37 -37
  718. package/src/utils/truncateText/truncateText.ts +4 -4
  719. package/tsconfig.json +55 -55
  720. package/vite.config.js +14 -14
  721. package/lib/assets/fonts/Poppins-Bold.ttf +0 -0
  722. package/lib/assets/fonts/Poppins-Medium.ttf +0 -0
  723. package/lib/assets/fonts/Poppins-Regular.ttf +0 -0
  724. package/lib/assets/fonts/Poppins-SemiBold.ttf +0 -0
  725. package/lib/components/Excel/ContextMenu/ContextMenu.d.ts +0 -4
  726. package/lib/components/TableTree/TableTree copy.d.ts +0 -25
package/lib/index.js CHANGED
@@ -48,11 +48,11 @@ function styleInject(css, ref) {
48
48
  }
49
49
  }
50
50
 
51
- 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}\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$1d);
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$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}";
55
- styleInject(css_248z$1c);
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
 
@@ -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$1b = ".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$1b);
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$1a = ".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$1a);
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$19 = ".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}";
988
- styleInject(css_248z$19);
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$18 = ":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$18);
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 = ({
@@ -1088,11 +1091,11 @@ const Drawer = ({
1088
1091
  const themeContext = React.useContext(ThemeContext);
1089
1092
  const currentTheme = themeContext?.currentTheme;
1090
1093
  return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsxs("div", {
1091
- className: classNames('ff-drawer-container', currentTheme),
1094
+ className: cx('ff-drawer-container', currentTheme),
1092
1095
  children: [overlay && jsxRuntime.jsx("div", {
1093
- className: classNames(secondLayerZIndex && 'child-drawer-overlay', 'ff-overlay')
1096
+ className: cx(secondLayerZIndex && 'child-drawer-overlay', 'ff-overlay')
1094
1097
  }), jsxRuntime.jsxs("div", {
1095
- className: classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
1098
+ className: cx('ff-drawer', `ff-drawer--${drawerSize}`, {
1096
1099
  'ff-drawer--open': isOpen
1097
1100
  }),
1098
1101
  style: {
@@ -1103,7 +1106,7 @@ const Drawer = ({
1103
1106
  right
1104
1107
  },
1105
1108
  children: [showHeader && jsxRuntime.jsx("div", {
1106
- className: classNames('ff-drawer-header', {
1109
+ className: cx('ff-drawer-header', {
1107
1110
  'ff-custom-header': customHeader
1108
1111
  }),
1109
1112
  children: customHeader ? jsxRuntime.jsx("div", {
@@ -1152,12 +1155,12 @@ const Drawer = ({
1152
1155
  })]
1153
1156
  })
1154
1157
  }), jsxRuntime.jsx("div", {
1155
- className: classNames('ff-drawer-body', {
1158
+ className: cx('ff-drawer-body', {
1156
1159
  'no-footer': !isFooterRequired
1157
1160
  }),
1158
1161
  children: children
1159
1162
  }), isFooterRequired && jsxRuntime.jsx("div", {
1160
- className: classNames('ff-drawer-footer', {
1163
+ className: cx('ff-drawer-footer', {
1161
1164
  'ff-custom-footer': customFooter
1162
1165
  }),
1163
1166
  children: customFooter || footerContent || jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -1204,15 +1207,15 @@ const Drawer = ({
1204
1207
  }), document.body);
1205
1208
  };
1206
1209
 
1207
- var css_248z$17 = ".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}";
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);
1212
+
1213
+ var css_248z$17 = "/* global.css or component CSS */\nbody {\n font-family: \"Poppins\", sans-serif;\n}";
1208
1214
  styleInject(css_248z$17);
1209
1215
 
1210
- var css_248z$16 = "/* global.css or component CSS */\nbody {\n font-family: \"Poppins\", sans-serif;\n}";
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}";
1211
1217
  styleInject(css_248z$16);
1212
1218
 
1213
- var css_248z$15 = ".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}";
1214
- styleInject(css_248z$15);
1215
-
1216
1219
  const checkEmpty = value => {
1217
1220
  // Check for null or undefined
1218
1221
  if (value == null) return true;
@@ -1366,7 +1369,7 @@ const Tooltip = ({
1366
1369
  }, [isVisible]);
1367
1370
  return jsxRuntime.jsxs("div", {
1368
1371
  ref: tooltipContainerRef,
1369
- className: classNames('ff-tooltip-container', currentTheme),
1372
+ className: cx('ff-tooltip-container', currentTheme),
1370
1373
  onMouseEnter: () => setIsVisible(true),
1371
1374
  onMouseLeave: () => setIsVisible(false),
1372
1375
  children: [children, isVisible && !disabled && !isTitleEmpty(title) && /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsx("div", {
@@ -1374,7 +1377,7 @@ const Tooltip = ({
1374
1377
  style: {
1375
1378
  ...styles[placement]
1376
1379
  },
1377
- className: classNames('ff-tooltip', currentTheme, {
1380
+ className: cx('ff-tooltip', currentTheme, {
1378
1381
  'ff-tooltip--visible': isVisible
1379
1382
  }),
1380
1383
  children: title
@@ -1434,8 +1437,8 @@ const Accordion = ({
1434
1437
  });
1435
1438
  };
1436
1439
 
1437
- var css_248z$14 = ".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}";
1438
- styleInject(css_248z$14);
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);
1439
1442
 
1440
1443
  const dropdownDefaultCSSData$1 = {
1441
1444
  verticalMargin: 4,
@@ -1443,11 +1446,11 @@ const dropdownDefaultCSSData$1 = {
1443
1446
  maxDropdownHeight: 160
1444
1447
  };
1445
1448
 
1446
- 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, .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}";
1447
- styleInject(css_248z$13);
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);
1448
1451
 
1449
- 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-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}";
1450
- styleInject(css_248z$12);
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);
1451
1454
 
1452
1455
  const Checkbox = ({
1453
1456
  id,
@@ -1456,7 +1459,8 @@ const Checkbox = ({
1456
1459
  disabled = false,
1457
1460
  checked: initialChecked = false,
1458
1461
  partial = false,
1459
- onChange
1462
+ onChange,
1463
+ variant
1460
1464
  }) => {
1461
1465
  const [checked, setChecked] = React.useState(initialChecked);
1462
1466
  React.useEffect(() => {
@@ -1474,9 +1478,11 @@ const Checkbox = ({
1474
1478
  onChange: onChange,
1475
1479
  disabled: disabled
1476
1480
  }), jsxRuntime.jsx("span", {
1477
- className: classNames('ff-checkbox-custom', {
1481
+ className: cx('ff-checkbox-custom', {
1478
1482
  'ff-checkbox-checked': checked,
1479
- '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
1480
1486
  }),
1481
1487
  children: checked && jsxRuntime.jsx(Icon, {
1482
1488
  name: "tick",
@@ -1546,7 +1552,7 @@ const Dropdown$2 = /*#__PURE__*/React.forwardRef(({
1546
1552
  return jsxRuntime.jsxs("div", {
1547
1553
  role: "listbox",
1548
1554
  ref: ref,
1549
- className: classNames('ff-multiselect-dropdown-container', {
1555
+ className: cx('ff-multiselect-dropdown-container', {
1550
1556
  [currentTheme || '']: true
1551
1557
  }),
1552
1558
  style: {
@@ -1842,7 +1848,7 @@ const MultiSelect = ({
1842
1848
  className: `ff-multiselect-container-with-icon ${className}`,
1843
1849
  children: [jsxRuntime.jsxs("div", {
1844
1850
  ref: selectWrapper,
1845
- className: classNames('ff-multiselect-wrapper', {
1851
+ className: cx('ff-multiselect-wrapper', {
1846
1852
  'ff-multiselect-wrapper--with-options': selectedOptions?.length,
1847
1853
  'ff-multiselect-wrapper--opened-dropdown': isOpen,
1848
1854
  'ff-multiselect-wrapper--error': isFieldSkipped && required || inputError,
@@ -1855,7 +1861,7 @@ const MultiSelect = ({
1855
1861
  className: "ff-multiselect__main",
1856
1862
  children: [checkEmpty(highlightedMachine) ? jsxRuntime.jsx(Typography, {
1857
1863
  as: "span",
1858
- className: classNames({
1864
+ className: cx({
1859
1865
  'active-default-label': isOpen || checkEmpty(highlightedMachine) && !withSelectButton && selectedOptions?.length || isFieldSkipped && required,
1860
1866
  'default-label': !isOpen && !selectedOptions?.length
1861
1867
  }),
@@ -1917,7 +1923,7 @@ const MultiSelect = ({
1917
1923
  className: "ff-multiselect__toggle",
1918
1924
  children: jsxRuntime.jsx(Icon, {
1919
1925
  name: "arrow_down",
1920
- className: classNames({
1926
+ className: cx({
1921
1927
  'ff-select-arrow--opened-dropdown': isOpen,
1922
1928
  'ff-select-arrow': !isOpen
1923
1929
  }),
@@ -1958,8 +1964,8 @@ const MultiSelect = ({
1958
1964
  });
1959
1965
  };
1960
1966
 
1961
- 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-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}";
1962
- styleInject(css_248z$11);
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);
1963
1969
 
1964
1970
  const Toaster = ({
1965
1971
  isOpen = false,
@@ -2015,7 +2021,7 @@ const Toaster = ({
2015
2021
  return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsx("div", {
2016
2022
  role: "alert",
2017
2023
  "aria-live": "assertive",
2018
- className: classNames('ff-toaster-overlay', {
2024
+ className: cx('ff-toaster-overlay', {
2019
2025
  exiting: isExiting,
2020
2026
  [currentTheme || '']: true
2021
2027
  }),
@@ -2023,7 +2029,7 @@ const Toaster = ({
2023
2029
  zIndex
2024
2030
  },
2025
2031
  children: jsxRuntime.jsx("div", {
2026
- className: classNames('ff-toaster', {
2032
+ className: cx('ff-toaster', {
2027
2033
  exiting: isExiting
2028
2034
  }),
2029
2035
  children: jsxRuntime.jsxs("div", {
@@ -2068,8 +2074,8 @@ const Toaster = ({
2068
2074
  }), document.body);
2069
2075
  };
2070
2076
 
2071
- var css_248z$10 = "/* 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}";
2072
- styleInject(css_248z$10);
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);
2073
2079
 
2074
2080
  const Container = ({
2075
2081
  children,
@@ -2079,7 +2085,7 @@ const Container = ({
2079
2085
  }) => {
2080
2086
  const containerClassName = fluid ? 'ff-container-fluid' : 'ff-container';
2081
2087
  return jsxRuntime.jsx("div", {
2082
- className: classNames(containerClassName, className),
2088
+ className: cx(containerClassName, className),
2083
2089
  style: {
2084
2090
  gap
2085
2091
  },
@@ -2092,7 +2098,7 @@ const Row$1 = ({
2092
2098
  className = ''
2093
2099
  }) => {
2094
2100
  return jsxRuntime.jsx("div", {
2095
- className: classNames('ff-row', className),
2101
+ className: cx('ff-row', className),
2096
2102
  style: {
2097
2103
  gap
2098
2104
  },
@@ -2106,13 +2112,13 @@ const Col = ({
2106
2112
  }) => {
2107
2113
  const colClassName = `ff-col-${size}`;
2108
2114
  return jsxRuntime.jsx("div", {
2109
- className: classNames(colClassName, className),
2115
+ className: cx(colClassName, className),
2110
2116
  children: children
2111
2117
  });
2112
2118
  };
2113
2119
 
2114
- 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}";
2115
- 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);
2116
2122
 
2117
2123
  const Toggle = ({
2118
2124
  onChange,
@@ -2166,12 +2172,12 @@ const Toggle = ({
2166
2172
  onChange: handleChange,
2167
2173
  checked: checked
2168
2174
  }), jsxRuntime.jsx("label", {
2169
- className: classNames(`ff--switch-label default--${size} ff--switch-label--${variant}`, {
2175
+ className: cx(`ff--switch-label default--${size} ff--switch-label--${variant}`, {
2170
2176
  'ff--switch-label--disabled': disabled
2171
2177
  }),
2172
2178
  htmlFor: `ff-toggle-${id}`,
2173
2179
  children: jsxRuntime.jsx("span", {
2174
- className: classNames(`ff--switch-button ff--switch-button--${size}`, {
2180
+ className: cx(`ff--switch-button ff--switch-button--${size}`, {
2175
2181
  checked: checked
2176
2182
  }),
2177
2183
  children: checked ? jsxRuntime.jsx(Icon, {
@@ -2190,8 +2196,8 @@ const Toggle = ({
2190
2196
  });
2191
2197
  };
2192
2198
 
2193
- 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}";
2194
- styleInject(css_248z$_);
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$$);
2195
2201
 
2196
2202
  const Chip = ({
2197
2203
  label = '',
@@ -2209,7 +2215,7 @@ const Chip = ({
2209
2215
  onMouseEnter: handleOnMouseEnter,
2210
2216
  onMouseLeave: handleOnMouseLeave,
2211
2217
  onClick: onClick,
2212
- className: classNames(`ff-default-chip-style ff-default-chip-style--${variant}`, {
2218
+ className: cx(`ff-default-chip-style ff-default-chip-style--${variant}`, {
2213
2219
  ['ff-default-chip-style--fullText']: !!fullText
2214
2220
  }),
2215
2221
  children: labelText && jsxRuntime.jsx(Typography, {
@@ -2220,10 +2226,10 @@ const Chip = ({
2220
2226
  });
2221
2227
  };
2222
2228
 
2223
- var css_248z$Z = ".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}";
2224
- styleInject(css_248z$Z);
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$_);
2225
2231
 
2226
- const Input = ({
2232
+ const Input = /*#__PURE__*/React.forwardRef(({
2227
2233
  type = 'text',
2228
2234
  variant = 'primary',
2229
2235
  name = '',
@@ -2246,23 +2252,23 @@ const Input = ({
2246
2252
  size = 'small',
2247
2253
  isLabelRequired = true,
2248
2254
  ...props
2249
- }) => {
2255
+ }, ref) => {
2250
2256
  const isValueFilled = !checkEmpty(value);
2251
2257
  return jsxRuntime.jsxs("div", {
2252
- className: classNames('ff-input-container', {
2258
+ className: cx('ff-input-container', {
2253
2259
  'ff-input-container--float': isValueFilled,
2254
2260
  'ff-input-container--disabled': !!disabled
2255
2261
  }),
2256
2262
  children: [isLabelRequired && jsxRuntime.jsxs("label", {
2257
2263
  htmlFor: name,
2258
- className: classNames(`ff-input-label-container ff-input-label-container--${size}`, {
2264
+ className: cx(`ff-input-label-container ff-input-label-container--${size}`, {
2259
2265
  'ff-input-label-container--danger': !!error
2260
2266
  }),
2261
2267
  children: [required && jsxRuntime.jsx("span", {
2262
2268
  className: "required-asterisk",
2263
2269
  children: "*"
2264
2270
  }), jsxRuntime.jsx("span", {
2265
- className: classNames(`ff-input-label ff-input-label--${variant}`, {
2271
+ className: cx(`ff-input-label ff-input-label--${variant}`, {
2266
2272
  'ff-input-label--no-hover': !!value,
2267
2273
  'ff-input-label--disabled': !!disabled,
2268
2274
  'ff-input-label--danger': !!error
@@ -2270,12 +2276,13 @@ const Input = ({
2270
2276
  children: label
2271
2277
  })]
2272
2278
  }), jsxRuntime.jsx("input", {
2279
+ ref: ref,
2273
2280
  name: name,
2274
2281
  value: value,
2275
2282
  type: type,
2276
2283
  spellCheck: false,
2277
2284
  id: name,
2278
- 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}`, {
2279
2286
  ['ff-input--transparentBackground']: !!transparentBackground,
2280
2287
  'ff-input--no-hover': !!value,
2281
2288
  'ff-input--disabled': !!disabled,
@@ -2293,16 +2300,16 @@ const Input = ({
2293
2300
  max: maxValue,
2294
2301
  ...props
2295
2302
  }), helperText && error && jsxRuntime.jsx("span", {
2296
- className: classNames('ff-input-message', {
2303
+ className: cx('ff-input-message', {
2297
2304
  'ff-input-message--danger': !!error
2298
2305
  }),
2299
2306
  children: helperText
2300
2307
  })]
2301
2308
  });
2302
- };
2309
+ });
2303
2310
 
2304
- var css_248z$Y = ".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}";
2305
- styleInject(css_248z$Y);
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);
2306
2313
 
2307
2314
  const useColorMappings$1 = () => React.useMemo(() => {
2308
2315
  return {
@@ -2448,8 +2455,8 @@ const RadialChart = ({
2448
2455
  });
2449
2456
  };
2450
2457
 
2451
- var css_248z$X = ".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}";
2452
- styleInject(css_248z$X);
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);
2453
2460
 
2454
2461
  const ExpandableMenu = ({
2455
2462
  label = '',
@@ -2486,7 +2493,7 @@ const ExpandableMenu = ({
2486
2493
  };
2487
2494
  const hasExpanded = isExpanded || isHovered;
2488
2495
  return jsxRuntime.jsxs("div", {
2489
- className: classNames('ff-expandable-chip-menu', `ff-expandable-chip-menu--${variant}`, {
2496
+ className: cx('ff-expandable-chip-menu', `ff-expandable-chip-menu--${variant}`, {
2490
2497
  'ff-expandable-chip-menu--disabled': disable,
2491
2498
  expanded: hasExpanded
2492
2499
  }),
@@ -2502,11 +2509,11 @@ const ExpandableMenu = ({
2502
2509
  children: icon
2503
2510
  })]
2504
2511
  }), hasExpanded && !checkEmpty(subMenus) && jsxRuntime.jsx("div", {
2505
- className: classNames('ff-sub-chips', {
2512
+ className: cx('ff-sub-chips', {
2506
2513
  expanded: hasExpanded
2507
2514
  }),
2508
2515
  children: subMenus.map((chip, index) => jsxRuntime.jsx("div", {
2509
- 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}`, {
2510
2517
  selected: selectedMenu === chip
2511
2518
  }),
2512
2519
  onClick: () => handleSelectedMenu(chip),
@@ -2516,8 +2523,8 @@ const ExpandableMenu = ({
2516
2523
  });
2517
2524
  };
2518
2525
 
2519
- var css_248z$W = ".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}";
2520
- styleInject(css_248z$W);
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);
2521
2528
 
2522
2529
  const dropdownDefaultCSSData = {
2523
2530
  margin: 6,
@@ -2526,8 +2533,8 @@ const dropdownDefaultCSSData = {
2526
2533
  dropDownWrapperPadding: 0
2527
2534
  };
2528
2535
 
2529
- var css_248z$V = ".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}";
2530
- styleInject(css_248z$V);
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);
2531
2538
 
2532
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));
2533
2540
 
@@ -2609,7 +2616,7 @@ const Dropdown$1 = ({
2609
2616
  as: "div",
2610
2617
  lineHeight: "30px",
2611
2618
  color: "var(--ff-select-text-color)",
2612
- className: classNames({
2619
+ className: cx({
2613
2620
  'ff-select-dropdown-icon-container': showIcon
2614
2621
  }),
2615
2622
  children: [showIcon && jsxRuntime.jsx(Icon, {
@@ -2619,12 +2626,12 @@ const Dropdown$1 = ({
2619
2626
  });
2620
2627
  };
2621
2628
  return jsxRuntime.jsx("div", {
2622
- className: classNames('ff-select-dropdown-wrapper', currentTheme),
2629
+ className: cx('ff-select-dropdown-wrapper', currentTheme),
2623
2630
  ref: optionsWrapperRef,
2624
2631
  style: updateDropdownPosition(),
2625
2632
  children: jsxRuntime.jsx("div", {
2626
2633
  children: !checkEmpty(options) ? options.map(option => jsxRuntime.jsx("div", {
2627
- className: classNames('ff-select-dropdown-option', {
2634
+ className: cx('ff-select-dropdown-option', {
2628
2635
  'ff-select-dropdown-option__selected': getValue$1(option, valueAccessor) === selectedOption
2629
2636
  }, currentTheme),
2630
2637
  onClick: () => {
@@ -2637,7 +2644,7 @@ const Dropdown$1 = ({
2637
2644
  as: "div",
2638
2645
  lineHeight: "32px",
2639
2646
  color: "var(--ff-select-text-color)",
2640
- className: classNames('ff-select-no-option', currentTheme),
2647
+ className: cx('ff-select-no-option', currentTheme),
2641
2648
  children: "No Results found"
2642
2649
  })
2643
2650
  })
@@ -2833,7 +2840,7 @@ const Select$1 = ({
2833
2840
  width: `${selectWidth}`
2834
2841
  },
2835
2842
  children: [jsxRuntime.jsxs("div", {
2836
- className: classNames('ff-select', {
2843
+ className: cx('ff-select', {
2837
2844
  'ff-select__focus': showDropdownOptions,
2838
2845
  'ff-select__disabled': disabled,
2839
2846
  'ff-select__error': !!errorMsg,
@@ -2847,7 +2854,7 @@ const Select$1 = ({
2847
2854
  type: "text",
2848
2855
  ref: inputRef,
2849
2856
  id: "select-input-element",
2850
- className: classNames('ff-select-inputField', {
2857
+ className: cx('ff-select-inputField', {
2851
2858
  'ff-select-inputField__disabled': disabled,
2852
2859
  'ff-select-inputField__readonly': disableInput,
2853
2860
  'ff-select-inputField__icon': showIcon
@@ -2866,7 +2873,7 @@ const Select$1 = ({
2866
2873
  readOnly: disableInput
2867
2874
  }), optionsRequired && jsxRuntime.jsx("div", {
2868
2875
  ref: selectArrowRef,
2869
- className: classNames('ff-select-arrows-wrapper', {
2876
+ className: cx('ff-select-arrows-wrapper', {
2870
2877
  'ff-select-arrows-wrapper__disabled': disabled
2871
2878
  }),
2872
2879
  onClick: handleIconClick,
@@ -2878,7 +2885,7 @@ const Select$1 = ({
2878
2885
  })
2879
2886
  }), showLabel && jsxRuntime.jsx(Typography, {
2880
2887
  as: "span",
2881
- className: classNames('ff-select-labels', {
2888
+ className: cx('ff-select-labels', {
2882
2889
  'ff-select-labels__icon': showIcon,
2883
2890
  'ff-select-labels__active': searchedOption
2884
2891
  }),
@@ -2913,8 +2920,8 @@ const Select$1 = ({
2913
2920
  });
2914
2921
  };
2915
2922
 
2916
- var css_248z$U = ".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}";
2917
- styleInject(css_248z$U);
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);
2918
2925
 
2919
2926
  const Textarea = ({
2920
2927
  capacity = 200,
@@ -2937,17 +2944,17 @@ const Textarea = ({
2937
2944
  ...props
2938
2945
  }) => {
2939
2946
  return jsxRuntime.jsxs("div", {
2940
- className: classNames('ff-textarea-container', {
2947
+ className: cx('ff-textarea-container', {
2941
2948
  'ff-textarea-container--disabled': disabled,
2942
2949
  'ff-textarea-container--float': !!value
2943
2950
  }),
2944
2951
  children: [jsxRuntime.jsx("label", {
2945
2952
  htmlFor: name,
2946
- className: classNames('ff-textarea-label-container', {
2953
+ className: cx('ff-textarea-label-container', {
2947
2954
  'ff-textarea-label-container--danger': error
2948
2955
  }),
2949
2956
  children: jsxRuntime.jsxs("span", {
2950
- className: classNames(`ff-textarea-label ff-textarea-label--${variant}`, {
2957
+ className: cx(`ff-textarea-label ff-textarea-label--${variant}`, {
2951
2958
  'ff-textarea-label--danger': error
2952
2959
  }),
2953
2960
  children: [required && jsxRuntime.jsx("span", {
@@ -2960,7 +2967,7 @@ const Textarea = ({
2960
2967
  name: name,
2961
2968
  value: value,
2962
2969
  id: name,
2963
- className: classNames(`ff-textarea ff-textarea--${variant}`, className, {
2970
+ className: cx(`ff-textarea ff-textarea--${variant}`, className, {
2964
2971
  'ff-textarea--danger': error,
2965
2972
  'ff-textarea--resize': !resize
2966
2973
  }),
@@ -2984,8 +2991,8 @@ const Textarea = ({
2984
2991
  });
2985
2992
  };
2986
2993
 
2987
- var css_248z$T = ".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}";
2988
- styleInject(css_248z$T);
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);
2989
2996
 
2990
2997
  const StatusButton = ({
2991
2998
  status = 'passed',
@@ -3001,7 +3008,7 @@ const StatusButton = ({
3001
3008
  title: hasTooltip ? label : '',
3002
3009
  placement: "bottom",
3003
3010
  children: jsxRuntime.jsx("button", {
3004
- className: classNames('ff-status-button', `ff-status-button--${status}`, className),
3011
+ className: cx('ff-status-button', `ff-status-button--${status}`, className),
3005
3012
  style: style,
3006
3013
  onClick: onClick,
3007
3014
  disabled: disabled,
@@ -3018,14 +3025,14 @@ const StatusButton = ({
3018
3025
  });
3019
3026
  };
3020
3027
 
3021
- var css_248z$S = ".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}";
3022
- styleInject(css_248z$S);
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);
3023
3030
 
3024
3031
  const Option$1 = ({
3025
3032
  option,
3026
3033
  onClick
3027
3034
  }) => jsxRuntime.jsxs("div", {
3028
- className: classNames('ff-options', {
3035
+ className: cx('ff-options', {
3029
3036
  'ff-disable-option': option.disable
3030
3037
  }),
3031
3038
  onClick: () => !option.disable && onClick(option),
@@ -3094,7 +3101,7 @@ const OptionCard = ({
3094
3101
  }
3095
3102
  })();
3096
3103
  return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsx("div", {
3097
- className: classNames('ff-option-card', [{
3104
+ className: cx('ff-option-card', [{
3098
3105
  'ff-option-card--primary': variant === 'primary'
3099
3106
  }], currentTheme),
3100
3107
  style: {
@@ -3166,7 +3173,7 @@ const MenuOption = ({
3166
3173
  children: jsxRuntime.jsxs("div", {
3167
3174
  className: "ff-icon-label",
3168
3175
  children: [jsxRuntime.jsx("div", {
3169
- className: classNames('ff-menuicon-container', {
3176
+ className: cx('ff-menuicon-container', {
3170
3177
  'ff-menuicon-container-clicked': isClicked,
3171
3178
  dark: variant === 'dark'
3172
3179
  }),
@@ -3202,8 +3209,8 @@ const MenuOption = ({
3202
3209
  });
3203
3210
  };
3204
3211
 
3205
- var css_248z$R = ".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}";
3206
- styleInject(css_248z$R);
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);
3207
3214
 
3208
3215
  const isFunction$2 = functionToCheck => {
3209
3216
  return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
@@ -3335,7 +3342,7 @@ const Table$1 = ({
3335
3342
  height: height,
3336
3343
  position: 'relative'
3337
3344
  },
3338
- className: classNames(className, {
3345
+ className: cx(className, {
3339
3346
  'ff-fixed-header-table': withFixedHeader,
3340
3347
  'border-borderRadius': borderWithRadius
3341
3348
  }),
@@ -3348,15 +3355,15 @@ const Table$1 = ({
3348
3355
  onClick: headerIconOnClick
3349
3356
  })
3350
3357
  }), jsxRuntime.jsxs("table", {
3351
- className: classNames(`ff-table`),
3358
+ className: cx(`ff-table`),
3352
3359
  cellSpacing: 0,
3353
3360
  children: [jsxRuntime.jsx("thead", {
3354
- className: classNames({
3361
+ className: cx({
3355
3362
  'ff-fixed-header': withFixedHeader
3356
3363
  }, tableHeadClass),
3357
3364
  children: jsxRuntime.jsx("tr", {
3358
3365
  children: columns.map((column, index) => jsxRuntime.jsx("th", {
3359
- className: classNames(`${headerType && `${headerType}-bg`}`, `${headerTextColor && `${headerTextColor}-color`}`),
3366
+ className: cx(`${headerType && `${headerType}-bg`}`, `${headerTextColor && `${headerTextColor}-color`}`),
3360
3367
  style: {
3361
3368
  width: column?.width
3362
3369
  },
@@ -3383,13 +3390,13 @@ const Table$1 = ({
3383
3390
  })
3384
3391
  }), jsxRuntime.jsx("tbody", {
3385
3392
  children: data.length > 0 && data.map((row, index) => jsxRuntime.jsx("tr", {
3386
- className: classNames(tableBodyRowClass, {
3393
+ className: cx(tableBodyRowClass, {
3387
3394
  'disabled-row': row.disabled
3388
3395
  }),
3389
3396
  children: columns.map((column, i) => {
3390
3397
  return jsxRuntime.jsx("td", {
3391
3398
  onClick: () => hanleOnclick(column, row),
3392
- className: classNames(column.className, {
3399
+ className: cx(column.className, {
3393
3400
  'clickable-cell': column.onClick
3394
3401
  }),
3395
3402
  children: jsxRuntime.jsxs(Typography, {
@@ -3421,11 +3428,11 @@ const Table$1 = ({
3421
3428
  });
3422
3429
  };
3423
3430
 
3424
- var css_248z$Q = ".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}";
3425
- styleInject(css_248z$Q);
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);
3426
3433
 
3427
- var css_248z$P = ".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}";
3428
- styleInject(css_248z$P);
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);
3429
3436
 
3430
3437
  const ArrowsButton = ({
3431
3438
  direction,
@@ -3437,7 +3444,7 @@ const ArrowsButton = ({
3437
3444
  };
3438
3445
  return jsxRuntime.jsx("div", {
3439
3446
  children: jsxRuntime.jsx("button", {
3440
- className: classNames('ff-arrow-button', `ff-arrow-button--${direction}`),
3447
+ className: cx('ff-arrow-button', `ff-arrow-button--${direction}`),
3441
3448
  onClick: onArrowClick,
3442
3449
  children: jsxRuntime.jsx(MenuOption, {
3443
3450
  iconName: getIconName(),
@@ -3562,8 +3569,8 @@ const AddButton = ({
3562
3569
  });
3563
3570
  };
3564
3571
 
3565
- var css_248z$O = ".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}";
3566
- styleInject(css_248z$O);
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);
3567
3574
 
3568
3575
  const calculateArc$4 = (x, y, radius, startAngle, endAngle) => {
3569
3576
  const startX = x + radius * Math.cos(startAngle);
@@ -3918,8 +3925,8 @@ const useFileDropzone = options => {
3918
3925
  };
3919
3926
  };
3920
3927
 
3921
- var css_248z$N = ".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}";
3922
- styleInject(css_248z$N);
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);
3923
3930
 
3924
3931
  const Dropzone = ({
3925
3932
  icon,
@@ -3933,7 +3940,7 @@ const Dropzone = ({
3933
3940
  }) => {
3934
3941
  return jsxRuntime.jsxs("div", {
3935
3942
  ...getRootProps(),
3936
- className: classNames('ff-file-dropzone', {
3943
+ className: cx('ff-file-dropzone', {
3937
3944
  'ff-file-dropzone--active': isDragActive
3938
3945
  }),
3939
3946
  style: {
@@ -8726,8 +8733,8 @@ const Forms = ({
8726
8733
  };
8727
8734
  const ForwardedForms = /*#__PURE__*/React.forwardRef(Forms);
8728
8735
 
8729
- var css_248z$M = ".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}";
8730
- styleInject(css_248z$M);
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);
8731
8738
 
8732
8739
  const InputWithDropdown = ({
8733
8740
  name = '',
@@ -8750,11 +8757,11 @@ const InputWithDropdown = ({
8750
8757
  }) => {
8751
8758
  const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
8752
8759
  return jsxRuntime.jsxs("div", {
8753
- className: classNames('ff-input-with-dropdown-container', {
8760
+ className: cx('ff-input-with-dropdown-container', {
8754
8761
  'ff-input-with-dropdown-container--filled': isValueFilled
8755
8762
  }),
8756
8763
  children: [jsxRuntime.jsxs("fieldset", {
8757
- className: classNames('ff-input-with-dropdown', {
8764
+ className: cx('ff-input-with-dropdown', {
8758
8765
  'ff-input-with-dropdown--filled': isValueFilled,
8759
8766
  'ff-input-with-dropdown--no-hover': isValueFilled,
8760
8767
  'ff-input-with-dropdown--disabled': !!disabled,
@@ -8770,7 +8777,7 @@ const InputWithDropdown = ({
8770
8777
  onChange: onDropdownChangeHandler,
8771
8778
  disabled: disabled || !optionsRequired,
8772
8779
  optionsRequired: optionsRequired,
8773
- className: classNames('ff-floating-dropdown', {
8780
+ className: cx('ff-floating-dropdown', {
8774
8781
  'ff-floating-dropdown--disabled': !!disabled,
8775
8782
  'ff-floating-dropdown--error': !!error,
8776
8783
  'ff-floating-dropdown--left': dropdownPosition === 'left'
@@ -8781,11 +8788,11 @@ const InputWithDropdown = ({
8781
8788
  className: "seperatorline"
8782
8789
  })]
8783
8790
  }), jsxRuntime.jsxs("div", {
8784
- className: classNames('ff-floating-label-input-container'),
8791
+ className: cx('ff-floating-label-input-container'),
8785
8792
  children: [jsxRuntime.jsx(Typography, {
8786
8793
  as: "label",
8787
8794
  htmlFor: name,
8788
- className: classNames('ff-floating-label', {
8795
+ className: cx('ff-floating-label', {
8789
8796
  'ff-floating-label--filled': isValueFilled,
8790
8797
  'ff-floating-label--no-hover': isValueFilled,
8791
8798
  'ff-floating-label--error': !!error
@@ -8803,7 +8810,7 @@ const InputWithDropdown = ({
8803
8810
  autoComplete: autoComplete,
8804
8811
  required: required,
8805
8812
  disabled: disabled,
8806
- className: classNames('ff-floating-input', {
8813
+ className: cx('ff-floating-input', {
8807
8814
  'ff-floating-input--filled': isValueFilled,
8808
8815
  'ff-floating-input--disabled': !!disabled,
8809
8816
  'ff-floating-input--error': !!error,
@@ -8818,7 +8825,7 @@ const InputWithDropdown = ({
8818
8825
  onChange: onDropdownChangeHandler,
8819
8826
  disabled: disabled || !optionsRequired,
8820
8827
  optionsRequired: optionsRequired,
8821
- className: classNames('ff-floating-dropdown', {
8828
+ className: cx('ff-floating-dropdown', {
8822
8829
  'ff-floating-dropdown--disabled': !!disabled,
8823
8830
  'ff-floating-dropdown--error': !!error
8824
8831
  }),
@@ -8832,8 +8839,8 @@ const InputWithDropdown = ({
8832
8839
  });
8833
8840
  };
8834
8841
 
8835
- var css_248z$L = ".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}";
8836
- styleInject(css_248z$L);
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);
8837
8844
 
8838
8845
  const RadioButton = ({
8839
8846
  label,
@@ -8849,7 +8856,7 @@ const RadioButton = ({
8849
8856
  return jsxRuntime.jsxs("div", {
8850
8857
  className: "ff-radio-wrapper",
8851
8858
  children: [jsxRuntime.jsxs("label", {
8852
- className: classNames('ff-radio', {
8859
+ className: cx('ff-radio', {
8853
8860
  'ff-radio--disabled': disabled
8854
8861
  }),
8855
8862
  children: [jsxRuntime.jsx("input", {
@@ -8873,8 +8880,8 @@ const RadioButton = ({
8873
8880
  });
8874
8881
  };
8875
8882
 
8876
- var css_248z$K = ".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}";
8877
- styleInject(css_248z$K);
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);
8878
8885
 
8879
8886
  const RadioGroup = ({
8880
8887
  options,
@@ -8888,12 +8895,12 @@ const RadioGroup = ({
8888
8895
  classNameForLabel
8889
8896
  }) => {
8890
8897
  return jsxRuntime.jsxs("div", {
8891
- className: classNames('ff-radio-group', className),
8898
+ className: cx('ff-radio-group', className),
8892
8899
  children: [isLabel && jsxRuntime.jsxs(Typography, {
8893
8900
  fontWeight: 'semi-bold',
8894
- className: classNames(classNameForLabel),
8901
+ className: cx(classNameForLabel),
8895
8902
  children: [' ', isAsteriskRequired && jsxRuntime.jsxs(Typography, {
8896
- className: classNames('ff-required-asterisk'),
8903
+ className: cx('ff-required-asterisk'),
8897
8904
  children: ["*", ' ']
8898
8905
  }), label, ' ']
8899
8906
  }), options.map(option => jsxRuntime.jsx(RadioButton, {
@@ -8910,8 +8917,8 @@ const RadioGroup = ({
8910
8917
  });
8911
8918
  };
8912
8919
 
8913
- var css_248z$J = ".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}";
8914
- styleInject(css_248z$J);
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);
8915
8922
 
8916
8923
  const MiniModal = /*#__PURE__*/React.forwardRef(({
8917
8924
  anchorRef,
@@ -9107,7 +9114,7 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
9107
9114
  }
9108
9115
  return /*#__PURE__*/reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, {
9109
9116
  children: [isOverlay && jsxRuntime.jsx("div", {
9110
- className: classNames('ff-mini-modal-overlay'),
9117
+ className: cx('ff-mini-modal-overlay'),
9111
9118
  style: {
9112
9119
  zIndex: zIndexOverlay ?? 98,
9113
9120
  backgroundColor: backgroundColorOverlay ?? 'transparent'
@@ -9115,7 +9122,7 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
9115
9122
  onClick: cancelButtonProps?.onClick
9116
9123
  }), jsxRuntime.jsxs("div", {
9117
9124
  ref: ref || modalRef,
9118
- className: classNames('ff-mini-edit-modal-container', {
9125
+ className: cx('ff-mini-edit-modal-container', {
9119
9126
  modalVisible: isVisible,
9120
9127
  animatedModal: isAnimated
9121
9128
  }),
@@ -9140,7 +9147,7 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
9140
9147
  boxShadow: wrapperBoxShadow ?? `0px -3px 4px 0px var(--ff-mini-modal-box-shadow)`
9141
9148
  }
9142
9149
  }), jsxRuntime.jsxs("div", {
9143
- className: classNames('mini-edit-modal', {
9150
+ className: cx('mini-edit-modal', {
9144
9151
  'mini-edit-modal-wrapper-shadow': !!isWrapped && !modalBoxShadow,
9145
9152
  'mini-edit-modal-arrow-shadow': !!isPopOver && !modalBoxShadow
9146
9153
  }),
@@ -9185,8 +9192,8 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
9185
9192
  }), document.body);
9186
9193
  });
9187
9194
 
9188
- var css_248z$I = ".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}";
9189
- styleInject(css_248z$I);
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);
9190
9197
 
9191
9198
  // Helper to render spaces for levels
9192
9199
  const renderSpaces = level => Array.from({
@@ -9364,8 +9371,8 @@ const TreeTable = ({
9364
9371
  });
9365
9372
  };
9366
9373
 
9367
- var css_248z$H = ":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}";
9368
- styleInject(css_248z$H);
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);
9369
9376
 
9370
9377
  const Tabs = ({
9371
9378
  variant = 'default',
@@ -9377,13 +9384,13 @@ const Tabs = ({
9377
9384
  return jsxRuntime.jsxs("div", {
9378
9385
  className: `ff-tabs-container`,
9379
9386
  children: [jsxRuntime.jsx("div", {
9380
- className: classNames(`ff-tab-row--${variant}`, {
9387
+ className: cx(`ff-tab-row--${variant}`, {
9381
9388
  'ff-tab-row--no-border': noBorder
9382
9389
  }),
9383
9390
  children: tabsData.map(tab => jsxRuntime.jsxs("button", {
9384
9391
  onClick: () => !tab.disabled && onTabClick(tab.id),
9385
9392
  disabled: tab.disabled,
9386
- className: classNames(`ff-tab-button--${variant}`, {
9393
+ className: cx(`ff-tab-button--${variant}`, {
9387
9394
  disabled: tab.disabled,
9388
9395
  active: activeTabId === tab.id
9389
9396
  }),
@@ -9392,13 +9399,13 @@ const Tabs = ({
9392
9399
  lineHeight: "18px",
9393
9400
  fontWeight: activeTabId === tab.id ? 'semi-bold' : 'regular',
9394
9401
  color: activeTabId === tab.id ? 'var(--tabs-label-active-color)' : 'var(--tabs-label-default-color)',
9395
- className: classNames('ff-tab-label', {
9402
+ className: cx('ff-tab-label', {
9396
9403
  'ff-tab-label--active': activeTabId === tab.id
9397
9404
  })
9398
9405
  }), jsxRuntime.jsx(Typography, {
9399
9406
  children: "",
9400
9407
  color: "",
9401
- className: classNames('ff-tab-bar', {
9408
+ className: cx('ff-tab-bar', {
9402
9409
  'ff-tab-bar--active': activeTabId === tab.id
9403
9410
  })
9404
9411
  })]
@@ -9410,8 +9417,8 @@ const Tabs = ({
9410
9417
  });
9411
9418
  };
9412
9419
 
9413
- var css_248z$G = ".ff-highlight-bg {\n background-color: var(--text-bg-highlight);\n}";
9414
- styleInject(css_248z$G);
9420
+ var css_248z$H = ".ff-highlight-bg {\n background-color: var(--text-bg-highlight);\n}";
9421
+ styleInject(css_248z$H);
9415
9422
 
9416
9423
  // Function to escape special characters in the search term
9417
9424
  const escapeRegExp = text => {
@@ -9434,8 +9441,8 @@ const HighlightText = ({
9434
9441
  });
9435
9442
  };
9436
9443
 
9437
- var css_248z$F = ".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}";
9438
- styleInject(css_248z$F);
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);
9439
9446
 
9440
9447
  const Search = ({
9441
9448
  placeholder = 'Search',
@@ -9478,12 +9485,12 @@ const Search = ({
9478
9485
  }
9479
9486
  };
9480
9487
  return jsxRuntime.jsxs("div", {
9481
- className: classNames('ff-search-container', {
9488
+ className: cx('ff-search-container', {
9482
9489
  expanded: isExpanded,
9483
9490
  disabled: disabled
9484
9491
  }),
9485
9492
  children: [jsxRuntime.jsx("div", {
9486
- className: classNames('ff-search-icon', {
9493
+ className: cx('ff-search-icon', {
9487
9494
  expanded: isExpanded
9488
9495
  }),
9489
9496
  onClick: handleIconClick,
@@ -9496,7 +9503,7 @@ const Search = ({
9496
9503
  })
9497
9504
  })
9498
9505
  }), jsxRuntime.jsx("div", {
9499
- className: classNames('ff-vertical-line', {
9506
+ className: cx('ff-vertical-line', {
9500
9507
  expanded: isExpanded
9501
9508
  })
9502
9509
  }), jsxRuntime.jsx("input", {
@@ -12932,53 +12939,6 @@ function setYear(date, year, options) {
12932
12939
  return date_;
12933
12940
  }
12934
12941
 
12935
- const FIVE_WEEKS = 5;
12936
- const FOUR_WEEKS = 4;
12937
- /**
12938
- * Return the number of weeks to display in the broadcast calendar.
12939
- *
12940
- * @since 9.4.0
12941
- */
12942
- function getBroadcastWeeksInMonth(month, dateLib) {
12943
- // Get the first day of the month
12944
- const firstDayOfMonth = dateLib.startOfMonth(month);
12945
- // Get the day of the week for the first day of the month (1-7, where 1 is Monday)
12946
- const firstDayOfWeek = firstDayOfMonth.getDay() > 0 ? firstDayOfMonth.getDay() : 7;
12947
- const broadcastStartDate = dateLib.addDays(month, -firstDayOfWeek + 1);
12948
- const lastDateOfLastWeek = dateLib.addDays(broadcastStartDate, FIVE_WEEKS * 7 - 1);
12949
- const numberOfWeeks = month.getMonth() === lastDateOfLastWeek.getMonth() ? FIVE_WEEKS : FOUR_WEEKS;
12950
- return numberOfWeeks;
12951
- }
12952
-
12953
- /**
12954
- * Return the start date of the week in the broadcast calendar.
12955
- *
12956
- * @since 9.4.0
12957
- */
12958
- function startOfBroadcastWeek(date, dateLib) {
12959
- const firstOfMonth = dateLib.startOfMonth(date);
12960
- const dayOfWeek = firstOfMonth.getDay();
12961
- if (dayOfWeek === 1) {
12962
- return firstOfMonth;
12963
- } else if (dayOfWeek === 0) {
12964
- return dateLib.addDays(firstOfMonth, -1 * 6);
12965
- } else {
12966
- return dateLib.addDays(firstOfMonth, -1 * (dayOfWeek - 1));
12967
- }
12968
- }
12969
-
12970
- /**
12971
- * Return the end date of the week in the broadcast calendar.
12972
- *
12973
- * @since 9.4.0
12974
- */
12975
- function endOfBroadcastWeek(date, dateLib) {
12976
- const startDate = startOfBroadcastWeek(date, dateLib);
12977
- const numberOfWeeks = getBroadcastWeeksInMonth(date, dateLib);
12978
- const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
12979
- return endDate;
12980
- }
12981
-
12982
12942
  /**
12983
12943
  * A wrapper class around [date-fns](http://date-fns.org) sharing the same
12984
12944
  * options. Methods of this class can be overridden using the
@@ -13059,15 +13019,6 @@ class DateLib {
13059
13019
  this.differenceInCalendarMonths = (dateLeft, dateRight) => {
13060
13020
  return this.overrides?.differenceInCalendarMonths ? this.overrides.differenceInCalendarMonths(dateLeft, dateRight) : differenceInCalendarMonths(dateLeft, dateRight);
13061
13021
  };
13062
- /**
13063
- * Returns the end of the broadcast week for the given date.
13064
- *
13065
- * @param date The original date.
13066
- * @returns The end of the broadcast week.
13067
- */
13068
- this.endOfBroadcastWeek = date => {
13069
- return this.overrides?.endOfBroadcastWeek ? this.overrides.endOfBroadcastWeek(date, this) : endOfBroadcastWeek(date, this);
13070
- };
13071
13022
  /**
13072
13023
  * Returns the end of the ISO week for the given date.
13073
13024
  *
@@ -13229,15 +13180,6 @@ class DateLib {
13229
13180
  this.setYear = (date, year) => {
13230
13181
  return this.overrides?.setYear ? this.overrides.setYear(date, year) : setYear(date, year);
13231
13182
  };
13232
- /**
13233
- * Returns the start of the broadcast week for the given date.
13234
- *
13235
- * @param date The original date.
13236
- * @returns The start of the broadcast week.
13237
- */
13238
- this.startOfBroadcastWeek = date => {
13239
- return this.overrides?.startOfBroadcastWeek ? this.overrides.startOfBroadcastWeek(date, this) : startOfBroadcastWeek(date, this);
13240
- };
13241
13183
  /**
13242
13184
  * Returns the start of the day for the given date.
13243
13185
  *
@@ -13823,8 +13765,7 @@ function getDataAttributes(props) {
13823
13765
  "data-mode": props.mode ?? undefined,
13824
13766
  "data-required": "required" in props ? props.required : undefined,
13825
13767
  "data-multiple-months": props.numberOfMonths && props.numberOfMonths > 1 || undefined,
13826
- "data-week-numbers": props.showWeekNumber || undefined,
13827
- "data-broadcast-calendar": props.broadcastCalendar || undefined
13768
+ "data-week-numbers": props.showWeekNumber || undefined
13828
13769
  };
13829
13770
  Object.entries(props).forEach(([key, val]) => {
13830
13771
  if (key.startsWith("data-")) {
@@ -13890,7 +13831,7 @@ function formatDay(date, options, dateLib) {
13890
13831
  */
13891
13832
  function formatMonthDropdown(/** The month number to format. */
13892
13833
  monthNumber, /** The locale to use for formatting. */
13893
- locale) {
13834
+ locale = enUS) {
13894
13835
  return locale.localize?.month(monthNumber);
13895
13836
  }
13896
13837
 
@@ -13994,7 +13935,7 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
13994
13935
  return a - b;
13995
13936
  });
13996
13937
  const options = sortedMonths.map(value => {
13997
- const label = formatters.formatMonthDropdown(value, dateLib.options.locale ?? enUS);
13938
+ const label = formatters.formatMonthDropdown(value, dateLib.options.locale);
13998
13939
  const month = dateLib.Date ? new dateLib.Date(year, value) : new Date(year, value);
13999
13940
  const disabled = navStart && month < startOfMonth(navStart) || navEnd && month > startOfMonth(navEnd) || false;
14000
13941
  return {
@@ -14369,8 +14310,7 @@ function tzName(tz, date) {
14369
14310
  */
14370
14311
  function getWeekdays(/** The date library. */
14371
14312
  dateLib, /** Use ISOWeek instead of locale/ */
14372
- ISOWeek, timeZone, /** @since 9.4.0 */
14373
- broadcastCalendar) {
14313
+ ISOWeek, timeZone) {
14374
14314
  const date = timeZone ? TZDate.tz(timeZone) : dateLib.Date ? new dateLib.Date() : new Date();
14375
14315
  const start = ISOWeek ? dateLib.startOfISOWeek(date) : dateLib.startOfWeek(date);
14376
14316
  const days = [];
@@ -14573,30 +14513,29 @@ var defaultLabels = /*#__PURE__*/Object.freeze({
14573
14513
  labelYearDropdown: labelYearDropdown
14574
14514
  });
14575
14515
 
14516
+ /** The number of days in a month when having 6 weeks. */
14517
+ const NrOfDaysWithFixedWeeks = 42;
14576
14518
  /** Return all the dates to display in the calendar. */
14577
14519
  function getDates(displayMonths, maxDate, props, dateLib) {
14578
14520
  const firstMonth = displayMonths[0];
14579
14521
  const lastMonth = displayMonths[displayMonths.length - 1];
14580
14522
  const {
14581
14523
  ISOWeek,
14582
- fixedWeeks,
14583
- broadcastCalendar
14524
+ fixedWeeks
14584
14525
  } = props ?? {};
14585
14526
  const {
14527
+ startOfWeek,
14528
+ endOfWeek,
14529
+ startOfISOWeek,
14530
+ endOfISOWeek,
14586
14531
  addDays,
14587
14532
  differenceInCalendarDays,
14588
14533
  differenceInCalendarMonths,
14589
- endOfBroadcastWeek,
14590
- endOfISOWeek,
14591
- endOfMonth,
14592
- endOfWeek,
14593
14534
  isAfter,
14594
- startOfBroadcastWeek,
14595
- startOfISOWeek,
14596
- startOfWeek
14535
+ endOfMonth
14597
14536
  } = dateLib;
14598
- const startWeekFirstDate = broadcastCalendar ? startOfBroadcastWeek(firstMonth, dateLib) : ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
14599
- const endWeekLastDate = broadcastCalendar ? endOfBroadcastWeek(lastMonth, dateLib) : ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
14537
+ const startWeekFirstDate = ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
14538
+ const endWeekLastDate = ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
14600
14539
  const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
14601
14540
  const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
14602
14541
  const dates = [];
@@ -14608,11 +14547,9 @@ function getDates(displayMonths, maxDate, props, dateLib) {
14608
14547
  dates.push(date);
14609
14548
  }
14610
14549
  // If fixed weeks is enabled, add the extra dates to the array
14611
- const nrOfDaysWithFixedWeeks = broadcastCalendar ? 35 : 42;
14612
- const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
14550
+ const extraDates = NrOfDaysWithFixedWeeks * nOfMonths;
14613
14551
  if (fixedWeeks && dates.length < extraDates) {
14614
- const daysToAdd = extraDates - dates.length;
14615
- for (let i = 0; i < daysToAdd; i++) {
14552
+ for (let i = 0; i < 7; i++) {
14616
14553
  const date = addDays(dates[dates.length - 1], 1);
14617
14554
  dates.push(date);
14618
14555
  }
@@ -14723,29 +14660,25 @@ displayMonths, /** The dates to display in the calendar. */
14723
14660
  dates, /** Options from the props context. */
14724
14661
  props, dateLib) {
14725
14662
  const {
14726
- addDays,
14727
- endOfBroadcastWeek,
14663
+ startOfWeek,
14664
+ endOfWeek,
14665
+ startOfISOWeek,
14728
14666
  endOfISOWeek,
14729
14667
  endOfMonth,
14730
- endOfWeek,
14731
- getISOWeek,
14668
+ addDays,
14732
14669
  getWeek,
14733
- startOfBroadcastWeek,
14734
- startOfISOWeek,
14735
- startOfWeek
14670
+ getISOWeek
14736
14671
  } = dateLib;
14737
14672
  const dayPickerMonths = displayMonths.reduce((months, month) => {
14738
- const firstDateOfFirstWeek = props.broadcastCalendar ? startOfBroadcastWeek(month, dateLib) : props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
14739
- const lastDateOfLastWeek = props.broadcastCalendar ? endOfBroadcastWeek(month, dateLib) : props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
14673
+ const firstDateOfFirstWeek = props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
14674
+ const lastDateOfLastWeek = props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
14740
14675
  /** The dates to display in the month. */
14741
14676
  const monthDates = dates.filter(date => {
14742
14677
  return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
14743
14678
  });
14744
- const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
14745
- if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
14679
+ if (props.fixedWeeks && monthDates.length < 42) {
14746
14680
  const extraDates = dates.filter(date => {
14747
- const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
14748
- return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, daysToAdd);
14681
+ return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7);
14749
14682
  });
14750
14683
  monthDates.push(...extraDates);
14751
14684
  }
@@ -15183,30 +15116,27 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
15183
15116
  /** Return the next date that should be focused. */
15184
15117
  function getFocusableDate(moveBy, moveDir, refDate, navStart, navEnd, props, dateLib) {
15185
15118
  const {
15186
- ISOWeek,
15187
- broadcastCalendar
15119
+ ISOWeek
15188
15120
  } = props;
15189
15121
  const {
15190
15122
  addDays,
15191
15123
  addMonths,
15192
- addWeeks,
15193
15124
  addYears,
15194
- endOfBroadcastWeek,
15125
+ addWeeks,
15126
+ startOfISOWeek,
15195
15127
  endOfISOWeek,
15128
+ startOfWeek,
15196
15129
  endOfWeek,
15197
15130
  max,
15198
- min,
15199
- startOfBroadcastWeek,
15200
- startOfISOWeek,
15201
- startOfWeek
15131
+ min
15202
15132
  } = dateLib;
15203
15133
  const moveFns = {
15204
15134
  day: addDays,
15205
15135
  week: addWeeks,
15206
15136
  month: addMonths,
15207
15137
  year: addYears,
15208
- startOfWeek: date => broadcastCalendar ? startOfBroadcastWeek(date, dateLib) : ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
15209
- endOfWeek: date => broadcastCalendar ? endOfBroadcastWeek(date, dateLib) : ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
15138
+ startOfWeek: date => ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
15139
+ endOfWeek: date => ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
15210
15140
  };
15211
15141
  let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
15212
15142
  if (moveDir === "before" && navStart) {
@@ -15272,8 +15202,6 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
15272
15202
  /**
15273
15203
  * Return a function to get the modifiers for a given day.
15274
15204
  *
15275
- * NOTE: this is not an hook, but a factory for `getModifiers`.
15276
- *
15277
15205
  * @private
15278
15206
  */
15279
15207
  function useGetModifiers(days, props, dateLib) {
@@ -15282,19 +15210,12 @@ function useGetModifiers(days, props, dateLib) {
15282
15210
  hidden,
15283
15211
  modifiers,
15284
15212
  showOutsideDays,
15285
- broadcastCalendar,
15286
15213
  today
15287
15214
  } = props;
15288
15215
  const {
15289
15216
  isSameDay,
15290
- isSameMonth,
15291
- startOfMonth,
15292
- isBefore,
15293
- endOfMonth,
15294
- isAfter
15217
+ isSameMonth
15295
15218
  } = dateLib;
15296
- const startMonth = props.startMonth && startOfMonth(props.startMonth);
15297
- const endMonth = props.endMonth && endOfMonth(props.endMonth);
15298
15219
  const internalModifiersMap = {
15299
15220
  [DayFlag.focused]: [],
15300
15221
  [DayFlag.outside]: [],
@@ -15303,18 +15224,20 @@ function useGetModifiers(days, props, dateLib) {
15303
15224
  [DayFlag.today]: []
15304
15225
  };
15305
15226
  const customModifiersMap = {};
15227
+ const selectionModifiersMap = {
15228
+ [SelectionState.range_end]: [],
15229
+ [SelectionState.range_middle]: [],
15230
+ [SelectionState.range_start]: [],
15231
+ [SelectionState.selected]: []
15232
+ };
15306
15233
  for (const day of days) {
15307
15234
  const {
15308
15235
  date,
15309
15236
  displayMonth
15310
15237
  } = day;
15311
15238
  const isOutside = Boolean(displayMonth && !isSameMonth(date, displayMonth));
15312
- const isBeforeStartMonth = Boolean(startMonth && isBefore(date, startMonth));
15313
- const isAfterEndMonth = Boolean(endMonth && isAfter(date, endMonth));
15314
15239
  const isDisabled = Boolean(disabled && dateMatchModifiers(date, disabled, dateLib));
15315
- const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || isBeforeStartMonth || isAfterEndMonth ||
15316
- // Broadcast calendar will show outside days as default
15317
- !broadcastCalendar && !showOutsideDays && isOutside || broadcastCalendar && showOutsideDays === false && isOutside;
15240
+ const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || !showOutsideDays && isOutside;
15318
15241
  const isToday = isSameDay(date, today ?? (props.timeZone ? TZDate.tz(props.timeZone) : dateLib.Date ? new dateLib.Date() : new Date()));
15319
15242
  if (isOutside) internalModifiersMap.outside.push(day);
15320
15243
  if (isDisabled) internalModifiersMap.disabled.push(day);
@@ -15343,16 +15266,27 @@ function useGetModifiers(days, props, dateLib) {
15343
15266
  [DayFlag.outside]: false,
15344
15267
  [DayFlag.today]: false
15345
15268
  };
15269
+ const selectionStates = {
15270
+ [SelectionState.range_end]: false,
15271
+ [SelectionState.range_middle]: false,
15272
+ [SelectionState.range_start]: false,
15273
+ [SelectionState.selected]: false
15274
+ };
15346
15275
  const customModifiers = {};
15347
15276
  // Find the modifiers for the given day
15348
15277
  for (const name in internalModifiersMap) {
15349
15278
  const days = internalModifiersMap[name];
15350
15279
  dayFlags[name] = days.some(d => d === day);
15351
15280
  }
15281
+ for (const name in selectionModifiersMap) {
15282
+ const days = selectionModifiersMap[name];
15283
+ selectionStates[name] = days.some(d => d === day);
15284
+ }
15352
15285
  for (const name in customModifiersMap) {
15353
15286
  customModifiers[name] = customModifiersMap[name].some(d => d === day);
15354
15287
  }
15355
15288
  return {
15289
+ ...selectionStates,
15356
15290
  ...dayFlags,
15357
15291
  // custom modifiers should override all the previous ones
15358
15292
  ...customModifiers
@@ -15757,7 +15691,7 @@ function DayPicker(props) {
15757
15691
  };
15758
15692
  const dateLib = new DateLib({
15759
15693
  locale,
15760
- weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
15694
+ weekStartsOn: props.weekStartsOn,
15761
15695
  firstWeekContainsDate: props.firstWeekContainsDate,
15762
15696
  useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
15763
15697
  useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
@@ -15776,7 +15710,7 @@ function DayPicker(props) {
15776
15710
  ...props.classNames
15777
15711
  }
15778
15712
  };
15779
- }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn, props.broadcastCalendar]);
15713
+ }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn]);
15780
15714
  const {
15781
15715
  captionLayout,
15782
15716
  mode,
@@ -17444,7 +17378,7 @@ const TimePicker = ({
17444
17378
  children: [jsxRuntime.jsxs("div", {
17445
17379
  className: "ff-time-picker-fields",
17446
17380
  children: [jsxRuntime.jsxs("div", {
17447
- className: classNames('ff-time-input-container', {
17381
+ className: cx('ff-time-input-container', {
17448
17382
  'ff-time-input-container--float': !!inputValue
17449
17383
  }, {
17450
17384
  'ff-time-input-container--danger': !!timeFieldError
@@ -17452,7 +17386,7 @@ const TimePicker = ({
17452
17386
  children: [jsxRuntime.jsx(Typography, {
17453
17387
  as: "label",
17454
17388
  htmlFor: "time",
17455
- className: classNames('ff-time-input-label', {
17389
+ className: cx('ff-time-input-label', {
17456
17390
  'ff-time-input-label--danger': !!timeFieldError
17457
17391
  }),
17458
17392
  children: "Time"
@@ -17470,12 +17404,12 @@ const TimePicker = ({
17470
17404
  onClick: handleClick,
17471
17405
  onBlur: handleBlur,
17472
17406
  maxLength: 5,
17473
- className: classNames('ff-time-input', {
17407
+ className: cx('ff-time-input', {
17474
17408
  'ff-time-input--danger': !!timeFieldError
17475
17409
  })
17476
17410
  })]
17477
17411
  }), jsxRuntime.jsxs("div", {
17478
- className: classNames('ff-time-period-container', {
17412
+ className: cx('ff-time-period-container', {
17479
17413
  'ff-time-period-container--active': !!isPeriodDropdownOpen
17480
17414
  }),
17481
17415
  ref: periodRef,
@@ -17529,8 +17463,8 @@ const TimePicker = ({
17529
17463
  });
17530
17464
  };
17531
17465
 
17532
- var css_248z$E = "@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}";
17533
- styleInject(css_248z$E);
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);
17534
17468
 
17535
17469
  const CustomDatePicker = ({
17536
17470
  minDate,
@@ -17730,7 +17664,7 @@ const CustomDatePicker = ({
17730
17664
  className: "ff-custom-month_grid",
17731
17665
  children: months.map((month, index) => jsxRuntime.jsx("div", {
17732
17666
  onClick: () => handleMonthSelect(index),
17733
- className: classNames('ff-custom-month', {
17667
+ className: cx('ff-custom-month', {
17734
17668
  'ff-custom-month--selected': index === selectedMonth?.getMonth()
17735
17669
  }),
17736
17670
  children: jsxRuntime.jsx(Typography, {
@@ -17775,7 +17709,7 @@ const CustomDatePicker = ({
17775
17709
  className: "ff-custom-year_grid",
17776
17710
  children: years.map(year => jsxRuntime.jsx("div", {
17777
17711
  onClick: () => handleYearSelect(year),
17778
- className: classNames('ff-custom-year', {
17712
+ className: cx('ff-custom-year', {
17779
17713
  'ff-custom-year--selected': year === selectedMonth?.getFullYear()
17780
17714
  }),
17781
17715
  children: jsxRuntime.jsx(Typography, {
@@ -17804,7 +17738,7 @@ const CustomDatePicker = ({
17804
17738
  disabled: disabled,
17805
17739
  onClick: handleDateInputClick
17806
17740
  }), helperText && error && jsxRuntime.jsx("span", {
17807
- className: classNames('ff-date-input-message', {
17741
+ className: cx('ff-date-input-message', {
17808
17742
  'ff-date-input-message--danger': !!error
17809
17743
  }),
17810
17744
  children: helperText
@@ -18084,8 +18018,8 @@ const StateDropdown = ({
18084
18018
  });
18085
18019
  };
18086
18020
 
18087
- var css_248z$D = ".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}";
18088
- styleInject(css_248z$D);
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);
18089
18023
 
18090
18024
  const IconButton = ({
18091
18025
  label,
@@ -18095,10 +18029,10 @@ const IconButton = ({
18095
18029
  }) => {
18096
18030
  return jsxRuntime.jsxs("button", {
18097
18031
  onClick: onClick,
18098
- className: classNames('ff-plus-icon'),
18032
+ className: cx('ff-plus-icon'),
18099
18033
  ref: ref,
18100
18034
  children: [jsxRuntime.jsx("div", {
18101
- className: classNames('button-icon'),
18035
+ className: cx('button-icon'),
18102
18036
  children: jsxRuntime.jsx(Icon, {
18103
18037
  height: 12,
18104
18038
  width: 12,
@@ -18115,8 +18049,8 @@ const IconButton = ({
18115
18049
  });
18116
18050
  };
18117
18051
 
18118
- var css_248z$C = ".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}";
18119
- styleInject(css_248z$C);
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);
18120
18054
 
18121
18055
  const Modal = ({
18122
18056
  isOpen,
@@ -18176,7 +18110,7 @@ const Modal = ({
18176
18110
  },
18177
18111
  className: "ff-modal-container",
18178
18112
  children: [jsxRuntime.jsxs("div", {
18179
- className: classNames(`ff-modal-content ${currentTheme} ${contentClassName}`, {
18113
+ className: cx(`ff-modal-content ${currentTheme} ${contentClassName}`, {
18180
18114
  'modal-bottom-border': !isFooterDisplayed,
18181
18115
  'modal-top-border': !isHeaderDisplayed
18182
18116
  }),
@@ -18534,8 +18468,6 @@ function LiveRegion(_ref) {
18534
18468
  // Hide element visually but keep it readable by screen readers
18535
18469
  const visuallyHidden = {
18536
18470
  position: 'fixed',
18537
- top: 0,
18538
- left: 0,
18539
18471
  width: 1,
18540
18472
  height: 1,
18541
18473
  margin: -1,
@@ -19828,9 +19760,6 @@ class AbstractPointerSensor {
19828
19760
  passive: false
19829
19761
  });
19830
19762
  this.listeners.add(events.end.name, this.handleEnd);
19831
- if (events.cancel) {
19832
- this.listeners.add(events.cancel.name, this.handleCancel);
19833
- }
19834
19763
  this.windowListeners.add(EventName.Resize, this.handleCancel);
19835
19764
  this.windowListeners.add(EventName.DragStart, preventDefault);
19836
19765
  this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
@@ -19950,9 +19879,6 @@ class AbstractPointerSensor {
19950
19879
  }
19951
19880
  }
19952
19881
  const events = {
19953
- cancel: {
19954
- name: 'pointercancel'
19955
- },
19956
19882
  move: {
19957
19883
  name: 'pointermove'
19958
19884
  },
@@ -20025,9 +19951,6 @@ MouseSensor.activators = [{
20025
19951
  }
20026
19952
  }];
20027
19953
  const events$2 = {
20028
- cancel: {
20029
- name: 'touchcancel'
20030
- },
20031
19954
  move: {
20032
19955
  name: 'touchmove'
20033
19956
  },
@@ -20229,11 +20152,11 @@ function useScrollIntent(_ref2) {
20229
20152
  }, [disabled, delta, previousDelta]);
20230
20153
  }
20231
20154
  function useCachedNode(draggableNodes, id) {
20232
- const draggableNode = id != null ? draggableNodes.get(id) : undefined;
20155
+ const draggableNode = id !== null ? draggableNodes.get(id) : undefined;
20233
20156
  const node = draggableNode ? draggableNode.node.current : null;
20234
20157
  return useLazyMemo(cachedNode => {
20235
20158
  var _ref;
20236
- if (id == null) {
20159
+ if (id === null) {
20237
20160
  return null;
20238
20161
  } // In some cases, the draggable node can unmount while dragging
20239
20162
  // This is the case for virtualized lists. In those situations,
@@ -20441,26 +20364,7 @@ function useRect(element, measure, fallbackRect) {
20441
20364
  if (measure === void 0) {
20442
20365
  measure = defaultMeasure;
20443
20366
  }
20444
- const [rect, setRect] = React.useState(null);
20445
- function measureRect() {
20446
- setRect(currentRect => {
20447
- if (!element) {
20448
- return null;
20449
- }
20450
- if (element.isConnected === false) {
20451
- var _ref;
20452
-
20453
- // Fall back to last rect we measured if the element is
20454
- // no longer connected to the DOM.
20455
- return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
20456
- }
20457
- const newRect = measure(element);
20458
- if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
20459
- return currentRect;
20460
- }
20461
- return newRect;
20462
- });
20463
- }
20367
+ const [rect, measureRect] = React.useReducer(reducer, null);
20464
20368
  const mutationObserver = useMutationObserver({
20465
20369
  callback(records) {
20466
20370
  if (!element) {
@@ -20495,6 +20399,23 @@ function useRect(element, measure, fallbackRect) {
20495
20399
  }
20496
20400
  }, [element]);
20497
20401
  return rect;
20402
+ function reducer(currentRect) {
20403
+ if (!element) {
20404
+ return null;
20405
+ }
20406
+ if (element.isConnected === false) {
20407
+ var _ref;
20408
+
20409
+ // Fall back to last rect we measured if the element is
20410
+ // no longer connected to the DOM.
20411
+ return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
20412
+ }
20413
+ const newRect = measure(element);
20414
+ if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
20415
+ return currentRect;
20416
+ }
20417
+ return newRect;
20418
+ }
20498
20419
  }
20499
20420
  function useRectDelta(rect) {
20500
20421
  const initialRect = useInitialValue(rect);
@@ -20640,24 +20561,28 @@ function useRects(elements, measure) {
20640
20561
  }
20641
20562
  const [firstElement] = elements;
20642
20563
  const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
20643
- const [rects, setRects] = React.useState(defaultValue$2);
20644
- function measureRects() {
20645
- setRects(() => {
20646
- if (!elements.length) {
20647
- return defaultValue$2;
20648
- }
20649
- return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
20650
- });
20651
- }
20564
+ const [rects, measureRects] = React.useReducer(reducer, defaultValue$2);
20652
20565
  const resizeObserver = useResizeObserver({
20653
20566
  callback: measureRects
20654
20567
  });
20655
- useIsomorphicLayoutEffect$1(() => {
20656
- resizeObserver == null ? void 0 : resizeObserver.disconnect();
20568
+ if (elements.length > 0 && rects === defaultValue$2) {
20657
20569
  measureRects();
20658
- elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
20570
+ }
20571
+ useIsomorphicLayoutEffect$1(() => {
20572
+ if (elements.length) {
20573
+ elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
20574
+ } else {
20575
+ resizeObserver == null ? void 0 : resizeObserver.disconnect();
20576
+ measureRects();
20577
+ }
20659
20578
  }, [elements]);
20660
20579
  return rects;
20580
+ function reducer() {
20581
+ if (!elements.length) {
20582
+ return defaultValue$2;
20583
+ }
20584
+ return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
20585
+ }
20661
20586
  }
20662
20587
  function getMeasurableNode(node) {
20663
20588
  if (!node) {
@@ -20824,7 +20749,7 @@ function reducer$1(state, action) {
20824
20749
  }
20825
20750
  };
20826
20751
  case Action.DragMove:
20827
- if (state.draggable.active == null) {
20752
+ if (!state.draggable.active) {
20828
20753
  return state;
20829
20754
  }
20830
20755
  return {
@@ -21096,7 +21021,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
21096
21021
  containers: droppableContainers
21097
21022
  }
21098
21023
  } = state;
21099
- const node = activeId != null ? draggableNodes.get(activeId) : null;
21024
+ const node = activeId ? draggableNodes.get(activeId) : null;
21100
21025
  const activeRects = React.useRef({
21101
21026
  initial: null,
21102
21027
  translated: null
@@ -21131,7 +21056,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
21131
21056
  const autoScrollOptions = getAutoScrollerOptions();
21132
21057
  const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
21133
21058
  useLayoutShiftScrollCompensation({
21134
- activeNode: activeId != null ? draggableNodes.get(activeId) : null,
21059
+ activeNode: activeId ? draggableNodes.get(activeId) : null,
21135
21060
  config: autoScrollOptions.layoutShiftCompensation,
21136
21061
  initialRect: initialActiveNodeRect,
21137
21062
  measure: measuringConfiguration.draggable.measure
@@ -21209,7 +21134,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
21209
21134
 
21210
21135
  const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
21211
21136
  const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
21212
- const activeSensorRef = React.useRef(null);
21213
21137
  const instantiateSensor = React.useCallback((event, _ref2) => {
21214
21138
  let {
21215
21139
  sensor: Sensor,
@@ -21244,7 +21168,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
21244
21168
  onDragStart
21245
21169
  } = latestProps.current;
21246
21170
  const event = {
21247
- activatorEvent,
21248
21171
  active: {
21249
21172
  id,
21250
21173
  data: draggableNode.data,
@@ -21263,8 +21186,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
21263
21186
  type: 'onDragStart',
21264
21187
  event
21265
21188
  });
21266
- setActiveSensor(activeSensorRef.current);
21267
- setActivatorEvent(activatorEvent);
21268
21189
  });
21269
21190
  },
21270
21191
  onMove(coordinates) {
@@ -21276,7 +21197,10 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
21276
21197
  onEnd: createHandler(Action.DragEnd),
21277
21198
  onCancel: createHandler(Action.DragCancel)
21278
21199
  });
21279
- activeSensorRef.current = sensorInstance;
21200
+ reactDom.unstable_batchedUpdates(() => {
21201
+ setActiveSensor(sensorInstance);
21202
+ setActivatorEvent(event.nativeEvent);
21203
+ });
21280
21204
  function createHandler(type) {
21281
21205
  return async function handler() {
21282
21206
  const {
@@ -21313,7 +21237,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
21313
21237
  setOver(null);
21314
21238
  setActiveSensor(null);
21315
21239
  setActivatorEvent(null);
21316
- activeSensorRef.current = null;
21317
21240
  const eventName = type === Action.DragEnd ? 'onDragEnd' : 'onDragCancel';
21318
21241
  if (event) {
21319
21242
  const handler = latestProps.current[eventName];
@@ -21535,7 +21458,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
21535
21458
  });
21536
21459
  const NullContext = /*#__PURE__*/React.createContext(null);
21537
21460
  const defaultRole = 'button';
21538
- const ID_PREFIX$1 = 'Draggable';
21461
+ const ID_PREFIX$1 = 'Droppable';
21539
21462
  function useDraggable(_ref) {
21540
21463
  let {
21541
21464
  id,
@@ -21682,7 +21605,7 @@ function useDroppable(_ref) {
21682
21605
  resizeObserverConnected.current = false;
21683
21606
  resizeObserver.observe(nodeRef.current);
21684
21607
  }, [nodeRef, resizeObserver]);
21685
- React.useEffect(() => {
21608
+ useIsomorphicLayoutEffect$1(() => {
21686
21609
  dispatch({
21687
21610
  type: Action.RegisterDroppable,
21688
21611
  element: {
@@ -22097,7 +22020,6 @@ var DNDCore = /*#__PURE__*/Object.freeze({
22097
22020
  defaultCoordinates: defaultCoordinates,
22098
22021
  defaultDropAnimation: defaultDropAnimationConfiguration,
22099
22022
  defaultDropAnimationSideEffects: defaultDropAnimationSideEffects,
22100
- defaultKeyboardCoordinateGetter: defaultKeyboardCoordinateGetter,
22101
22023
  defaultScreenReaderInstructions: defaultScreenReaderInstructions,
22102
22024
  getClientRect: getClientRect,
22103
22025
  getFirstCollision: getFirstCollision,
@@ -22824,8 +22746,8 @@ const DragAndDrop = {
22824
22746
  DNDUtilities
22825
22747
  };
22826
22748
 
22827
- var css_248z$B = ".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}";
22828
- styleInject(css_248z$B);
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);
22829
22751
 
22830
22752
  const VariableInput = ({
22831
22753
  type = 'url',
@@ -22890,7 +22812,7 @@ const VariableInput = ({
22890
22812
  const contentEditableElement = contentEditableRef.current;
22891
22813
  if (contentEditableElement) {
22892
22814
  contentEditableElement.innerHTML = parsedParts.map(part => {
22893
- const varClassName = classNames({
22815
+ const varClassName = cx({
22894
22816
  ['ff_var_red']: part.textType === 'nonVariable',
22895
22817
  ['ff_var_green']: part.textType === 'variable',
22896
22818
  ['ff_var_def_textType']: part.textType !== 'nonVariable' && part.textType !== 'variable'
@@ -23041,7 +22963,7 @@ const VariableInput = ({
23041
22963
  React.useEffect(() => {
23042
22964
  updateContentEditable();
23043
22965
  }, [inputValue]);
23044
- const inputClasses = classNames('ff_content_editable', {
22966
+ const inputClasses = cx('ff_content_editable', {
23045
22967
  ['ff_placeholder']: !inputValue,
23046
22968
  ['ff_disabled']: disabled,
23047
22969
  ['ff_required']: required,
@@ -23051,14 +22973,14 @@ const VariableInput = ({
23051
22973
  className: 'ff_variable_input_container',
23052
22974
  children: [label && jsxRuntime.jsxs("label", {
23053
22975
  htmlFor: name,
23054
- className: classNames('ff_label_container', {
22976
+ className: cx('ff_label_container', {
23055
22977
  ['ff_labelDanger']: error
23056
22978
  }),
23057
22979
  children: [required && jsxRuntime.jsx(Typography, {
23058
22980
  className: 'ff_required_asterisk',
23059
22981
  children: "*"
23060
22982
  }), jsxRuntime.jsx(Typography, {
23061
- className: classNames('ff_input_label', {
22983
+ className: cx('ff_input_label', {
23062
22984
  ['ff_no_hover']: value,
23063
22985
  ['ff_disabled_label']: disabled,
23064
22986
  ['ff_danger_label']: error
@@ -23103,8 +23025,8 @@ const VariableInput = ({
23103
23025
  });
23104
23026
  };
23105
23027
 
23106
- var css_248z$A = ".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}";
23107
- styleInject(css_248z$A);
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);
23108
23030
 
23109
23031
  const AllProjectsDropdown = ({
23110
23032
  onClick = () => {},
@@ -23143,26 +23065,26 @@ const AllProjectsDropdown = ({
23143
23065
  };
23144
23066
  useClickOutside(optionsRef, closeOptions);
23145
23067
  return jsxRuntime.jsxs("div", {
23146
- className: classNames('ff-all-project'),
23068
+ className: cx('ff-all-project'),
23147
23069
  children: [jsxRuntime.jsx("div", {
23148
- className: classNames('ff-all-project-dropdown', {
23070
+ className: cx('ff-all-project-dropdown', {
23149
23071
  ['ff-all-project-dropdown--selected']: selected
23150
23072
  }),
23151
23073
  children: jsxRuntime.jsxs("div", {
23152
- className: classNames('ff-all-project-container'),
23074
+ className: cx('ff-all-project-container'),
23153
23075
  children: [jsxRuntime.jsx(Typography, {
23154
23076
  as: 'div',
23155
23077
  lineHeight: '18px',
23156
23078
  fontSize: 12,
23157
23079
  fontWeight: 'regular',
23158
- className: classNames('projects-label'),
23080
+ className: cx('projects-label'),
23159
23081
  onClick: onMenuClick,
23160
23082
  children: jsxRuntime.jsx(Tooltip, {
23161
23083
  title: selectedOptions?.label,
23162
23084
  children: selectedOptions.label.length <= 12 ? selectedOptions.label : truncateText(selectedOptions?.label, 8)
23163
23085
  })
23164
23086
  }), jsxRuntime.jsx("div", {
23165
- className: classNames('label-icon'),
23087
+ className: cx('label-icon'),
23166
23088
  onClick: handleShowOption,
23167
23089
  children: jsxRuntime.jsx(Icon, {
23168
23090
  name: "arrows_down_icon",
@@ -23174,10 +23096,10 @@ const AllProjectsDropdown = ({
23174
23096
  })]
23175
23097
  })
23176
23098
  }), showOptions && jsxRuntime.jsxs("div", {
23177
- className: classNames('ff-projects-dropdown'),
23099
+ className: cx('ff-projects-dropdown'),
23178
23100
  ref: optionsRef,
23179
23101
  children: [jsxRuntime.jsxs("div", {
23180
- className: classNames('ff-projects-search'),
23102
+ className: cx('ff-projects-search'),
23181
23103
  onMouseEnter: () => handleSearchEnter(),
23182
23104
  onMouseLeave: () => handleSearchLeave(),
23183
23105
  children: [search && jsxRuntime.jsx(Icon, {
@@ -23195,11 +23117,11 @@ const AllProjectsDropdown = ({
23195
23117
  value: 'All Projects',
23196
23118
  iconName: 'all_projects'
23197
23119
  }),
23198
- className: classNames('ff-all-projects-options', {
23120
+ className: cx('ff-all-projects-options', {
23199
23121
  ['ff-selected-option']: selectedOption.label === 'All Projects'
23200
23122
  }),
23201
23123
  children: [jsxRuntime.jsx("div", {
23202
- className: classNames('ff-projects-icons'),
23124
+ className: cx('ff-projects-icons'),
23203
23125
  children: jsxRuntime.jsx(Icon, {
23204
23126
  name: 'all_projects',
23205
23127
  height: 12,
@@ -23211,14 +23133,14 @@ const AllProjectsDropdown = ({
23211
23133
  children: 'All Projects'
23212
23134
  })]
23213
23135
  }), jsxRuntime.jsx("div", {
23214
- className: classNames('option-card', `${options.length > 4 ? 'scroll' : ''}`),
23136
+ className: cx('option-card', `${options.length > 4 ? 'scroll' : ''}`),
23215
23137
  children: options.map((option, index) => jsxRuntime.jsxs("div", {
23216
23138
  onClick: () => handleSelectOption(option),
23217
- className: classNames('ff-projects-options', {
23139
+ className: cx('ff-projects-options', {
23218
23140
  ['ff-selected-option']: selectedOption.label === option.label
23219
23141
  }),
23220
23142
  children: [jsxRuntime.jsx("div", {
23221
- className: classNames('ff-projects-icons'),
23143
+ className: cx('ff-projects-icons'),
23222
23144
  children: jsxRuntime.jsx(Icon, {
23223
23145
  name: option.iconName,
23224
23146
  height: 12,
@@ -23239,8 +23161,8 @@ const AllProjectsDropdown = ({
23239
23161
  });
23240
23162
  };
23241
23163
 
23242
- var css_248z$z = ".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}";
23243
- styleInject(css_248z$z);
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);
23244
23166
 
23245
23167
  const calculateArc$3 = ({
23246
23168
  x,
@@ -23394,8 +23316,8 @@ const PieChart = ({
23394
23316
  });
23395
23317
  };
23396
23318
 
23397
- var css_248z$y = ".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}";
23398
- styleInject(css_248z$y);
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);
23399
23321
 
23400
23322
  const AppHeader = ({
23401
23323
  logoIconName = 'fireflink_icon',
@@ -23455,7 +23377,7 @@ const AppHeader = ({
23455
23377
  className: "ff-app-header-nav-bar-items fontSm",
23456
23378
  children: appHeaderMenuItems.map(menuItem => {
23457
23379
  return jsxRuntime.jsxs("div", {
23458
- className: classNames('ff-app-header-nav-bar-item', {
23380
+ className: cx('ff-app-header-nav-bar-item', {
23459
23381
  ['ff-app-header-nav-bar-item--selected']: menuItem.label === selectedMenu
23460
23382
  }),
23461
23383
  children: [jsxRuntime.jsx(Typography, {
@@ -23470,7 +23392,7 @@ const AppHeader = ({
23470
23392
  className: "ff-app-header-submenu-container",
23471
23393
  children: jsxRuntime.jsx(Typography, {
23472
23394
  as: "div",
23473
- className: classNames('ff-app-header-nav-bar-submenu-item', {
23395
+ className: cx('ff-app-header-nav-bar-submenu-item', {
23474
23396
  ['ff-app-header-nav-bar-submenu-item--selected']: subMenuItem.label === selectedSubMenu
23475
23397
  }),
23476
23398
  lineHeight: "18px",
@@ -23491,7 +23413,7 @@ const AppHeader = ({
23491
23413
  return jsxRuntime.jsx(jsxRuntime.Fragment, {
23492
23414
  children: jsxRuntime.jsx("div", {
23493
23415
  onClick: () => onQuickMenuClick(quickMenuItem),
23494
- className: classNames('ff-app-header-nav-bar-quickmenu-item', {
23416
+ className: cx('ff-app-header-nav-bar-quickmenu-item', {
23495
23417
  ['ff-app-header-nav-bar-quickmenu-item--selected']: quickMenuItem.iconName === selectedQuickMenu
23496
23418
  }),
23497
23419
  children: jsxRuntime.jsx(Tooltip, {
@@ -23533,15 +23455,15 @@ const AppHeader = ({
23533
23455
  });
23534
23456
  };
23535
23457
 
23536
- var css_248z$x = ".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}";
23537
- styleInject(css_248z$x);
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);
23538
23460
 
23539
23461
  const Paper = ({
23540
23462
  children,
23541
23463
  className = '',
23542
23464
  rounded = false
23543
23465
  }) => {
23544
- const dynamicClassName = classNames({
23466
+ const dynamicClassName = cx({
23545
23467
  ['ff_rounded_lg']: rounded
23546
23468
  }, className);
23547
23469
  return jsxRuntime.jsx("div", {
@@ -23550,8 +23472,8 @@ const Paper = ({
23550
23472
  });
23551
23473
  };
23552
23474
 
23553
- var css_248z$w = ".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}";
23554
- styleInject(css_248z$w);
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);
23555
23477
 
23556
23478
  const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
23557
23479
  const startX = x + radius * Math.cos(startAngle);
@@ -23710,7 +23632,7 @@ const DashboardDonutChart = ({
23710
23632
  switch (legendType) {
23711
23633
  case 'numberLegend':
23712
23634
  return jsxRuntime.jsx("div", {
23713
- className: classNames('ff-legend-container ff-number-legend', {
23635
+ className: cx('ff-legend-container ff-number-legend', {
23714
23636
  'ff-side-legend': legendPosition === 'left' || legendPosition === 'right'
23715
23637
  }),
23716
23638
  children: legendData.map((item, index) => jsxRuntime.jsxs("div", {
@@ -23751,7 +23673,7 @@ const DashboardDonutChart = ({
23751
23673
  });
23752
23674
  case 'memoryLegend':
23753
23675
  return jsxRuntime.jsx("div", {
23754
- className: classNames('ff-legend-container ff-memory-legend', {
23676
+ className: cx('ff-legend-container ff-memory-legend', {
23755
23677
  'ff-side-legend': legendPosition === 'left' || legendPosition === 'right'
23756
23678
  }),
23757
23679
  children: legendData.map((item, index) => jsxRuntime.jsx(React.Fragment, {
@@ -23854,7 +23776,7 @@ const DashboardDonutChart = ({
23854
23776
  return context.measureText(text).width;
23855
23777
  }
23856
23778
  return jsxRuntime.jsxs("div", {
23857
- className: classNames('ff-dashboard-donut-chart-section', {
23779
+ className: cx('ff-dashboard-donut-chart-section', {
23858
23780
  'ff-dashboard-donut-chart-section-table-legend': legendType === 'tableLegend',
23859
23781
  'legend-position-bottom': legendPosition === 'bottom',
23860
23782
  'legend-position-left': legendPosition === 'left'
@@ -25649,8 +25571,8 @@ var RecaptchaWrapper = makeAsyncScript(getURL, {
25649
25571
  } : {}
25650
25572
  })(ReCAPTCHA);
25651
25573
 
25652
- var css_248z$v = ".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}";
25653
- styleInject(css_248z$v);
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);
25654
25576
 
25655
25577
  const Recaptcha = /*#__PURE__*/React.forwardRef(({
25656
25578
  onVerify,
@@ -25670,7 +25592,7 @@ const Recaptcha = /*#__PURE__*/React.forwardRef(({
25670
25592
  };
25671
25593
  const error = externalError || internalError;
25672
25594
  return jsxRuntime.jsxs("div", {
25673
- className: classNames('ff-recaptcha-wrapper', className),
25595
+ className: cx('ff-recaptcha-wrapper', className),
25674
25596
  children: [jsxRuntime.jsx(RecaptchaWrapper, {
25675
25597
  ref: ref,
25676
25598
  sitekey: sitekey,
@@ -25693,8 +25615,8 @@ const nlpDropdownDefaultCSSData = {
25693
25615
  dropDownWrapperPadding: 0
25694
25616
  };
25695
25617
 
25696
- var css_248z$u = ".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}";
25697
- styleInject(css_248z$u);
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);
25698
25620
 
25699
25621
  const NlpDropdown = ({
25700
25622
  onSelectBlur,
@@ -25751,7 +25673,7 @@ const NlpDropdown = ({
25751
25673
  children: jsxRuntime.jsxs("div", {
25752
25674
  ref: optionsWrapperRef,
25753
25675
  style: updateDropdownPosition(),
25754
- className: classNames('ff-nlp-options-wrapper', currentTheme),
25676
+ className: cx('ff-nlp-options-wrapper', currentTheme),
25755
25677
  children: [jsxRuntime.jsxs("div", {
25756
25678
  className: "ff-nlp-options-wrapper1",
25757
25679
  children: [!checkEmpty(options) ? options.map(option =>
@@ -25760,7 +25682,7 @@ const NlpDropdown = ({
25760
25682
  children: jsxRuntime.jsxs(Typography, {
25761
25683
  as: "div",
25762
25684
  lineHeight: "30px",
25763
- className: classNames('ff-nlp-option', currentTheme),
25685
+ className: cx('ff-nlp-option', currentTheme),
25764
25686
  color: "var(--ff-nlp-text-color)",
25765
25687
  onClick: () => onSelectOptionSelector(option),
25766
25688
  children: [jsxRuntime.jsx("span", {
@@ -25858,8 +25780,8 @@ const NlpDropdown = ({
25858
25780
  });
25859
25781
  };
25860
25782
 
25861
- var css_248z$t = ".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}";
25862
- styleInject(css_248z$t);
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);
25863
25785
 
25864
25786
  const nlpInputReducer = (state, action) => {
25865
25787
  switch (action.type) {
@@ -26093,12 +26015,12 @@ const NlpInput = ({
26093
26015
  }, []);
26094
26016
  const applyActiveOptionClasses = !isInputFocused && Boolean(option);
26095
26017
  return jsxRuntime.jsxs("div", {
26096
- className: classNames(`ff-nlp-input-wrapper ${className}`),
26018
+ className: cx(`ff-nlp-input-wrapper ${className}`),
26097
26019
  children: [jsxRuntime.jsxs("div", {
26098
26020
  className: "ff-nlp-input",
26099
26021
  children: [jsxRuntime.jsx("input", {
26100
26022
  type: "text",
26101
- className: classNames('ff-nlp-input-input', {
26023
+ className: cx('ff-nlp-input-input', {
26102
26024
  'ff-nlp-input-input--default': !isInputFocused,
26103
26025
  'ff-nlp-input-input--active': applyActiveOptionClasses,
26104
26026
  'ff-nlp-input-input--no-label': !showLabel,
@@ -26121,7 +26043,7 @@ const NlpInput = ({
26121
26043
  spellCheck: "false",
26122
26044
  ref: InputRef
26123
26045
  }), showLabel && jsxRuntime.jsxs("div", {
26124
- className: classNames('ff-nlp-input-label', {
26046
+ className: cx('ff-nlp-input-label', {
26125
26047
  'ff-nlp-input-label--default': !isInputFocused,
26126
26048
  'ff-nlp-input-label--active': isInputFocused || Boolean(option),
26127
26049
  'ff-nlp-input-label--error': errorMsg
@@ -26135,13 +26057,13 @@ const NlpInput = ({
26135
26057
  name: "arrow_up",
26136
26058
  height: 7,
26137
26059
  width: 12,
26138
- className: classNames('ff-nlp-input-arrow', {
26060
+ className: cx('ff-nlp-input-arrow', {
26139
26061
  'ff-nlp-input-arrow--down': isIconClick,
26140
26062
  'ff-nlp-input-arrow--no-label': !showLabel
26141
26063
  }),
26142
26064
  color: iconColor
26143
26065
  }), jsxRuntime.jsx("fieldset", {
26144
- className: classNames('ff-nlp-input-fieldset', {
26066
+ className: cx('ff-nlp-input-fieldset', {
26145
26067
  'ff-nlp-input-fieldset--no-label': !showLabel,
26146
26068
  'ff-nlp-input-fieldset--default': !isInputFocused,
26147
26069
  'ff-nlp-input-fieldset--active': isInputFocused,
@@ -26170,8 +26092,8 @@ const NlpInput = ({
26170
26092
  });
26171
26093
  };
26172
26094
 
26173
- var css_248z$s = ".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}";
26174
- styleInject(css_248z$s);
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);
26175
26097
 
26176
26098
  const IconRadioGroup = ({
26177
26099
  items,
@@ -26196,9 +26118,9 @@ const IconRadioGroup = ({
26196
26118
  onButtonClick(item);
26197
26119
  };
26198
26120
  return jsxRuntime.jsxs("div", {
26199
- className: classNames('ff-icon-radio-group', className),
26121
+ className: cx('ff-icon-radio-group', className),
26200
26122
  children: [items.map(item => jsxRuntime.jsx("div", {
26201
- className: classNames('ff-icon-radio-button', {
26123
+ className: cx('ff-icon-radio-button', {
26202
26124
  selected: selectedValue === item.iconName,
26203
26125
  disabled: item.disabled
26204
26126
  }),
@@ -26206,7 +26128,7 @@ const IconRadioGroup = ({
26206
26128
  children: jsxRuntime.jsx(Tooltip, {
26207
26129
  title: item.iconLabel,
26208
26130
  children: jsxRuntime.jsx("div", {
26209
- className: classNames('icon-container', {
26131
+ className: cx('icon-container', {
26210
26132
  selected: selectedValue === item.iconName
26211
26133
  }),
26212
26134
  children: jsxRuntime.jsx(Icon, {
@@ -26222,8 +26144,8 @@ const IconRadioGroup = ({
26222
26144
  });
26223
26145
  };
26224
26146
 
26225
- var css_248z$r = ".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}";
26226
- styleInject(css_248z$r);
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);
26227
26149
 
26228
26150
  const MachineInputField = /*#__PURE__*/React.forwardRef(({
26229
26151
  width = '',
@@ -26253,7 +26175,7 @@ const MachineInputField = /*#__PURE__*/React.forwardRef(({
26253
26175
  style: {
26254
26176
  width: width
26255
26177
  },
26256
- className: classNames('ff-machine-input-field-wrapper', className),
26178
+ className: cx('ff-machine-input-field-wrapper', className),
26257
26179
  onClick: onClick,
26258
26180
  children: [jsxRuntime.jsxs(Typography, {
26259
26181
  as: "span",
@@ -26263,21 +26185,21 @@ const MachineInputField = /*#__PURE__*/React.forwardRef(({
26263
26185
  className: "ff-machine-input-label",
26264
26186
  children: ["Run ", runCount]
26265
26187
  }), jsxRuntime.jsx("div", {
26266
- className: classNames('ff-machine-input-field', {
26188
+ className: cx('ff-machine-input-field', {
26267
26189
  'ff-machine-input-field-reverse': contentReverse
26268
26190
  }),
26269
26191
  children: options.map(({
26270
26192
  label,
26271
26193
  type
26272
26194
  }) => jsxRuntime.jsxs("div", {
26273
- className: classNames('ff-machine-icon-text-wrapper', {
26195
+ className: cx('ff-machine-icon-text-wrapper', {
26274
26196
  'ff-machine-icon-text-wrapper-reverse': contentReverse
26275
26197
  }),
26276
26198
  children: [jsxRuntime.jsx(Icon, {
26277
26199
  name: getIcon[type] || 'local',
26278
26200
  className: "ff-machine-icon"
26279
26201
  }), jsxRuntime.jsx(Typography, {
26280
- className: classNames('ff-machine-text', {
26202
+ className: cx('ff-machine-text', {
26281
26203
  'ff-machine-text-reverse': contentReverse
26282
26204
  }),
26283
26205
  color: "var(--ff-machine-input-field-text-color)",
@@ -26289,11 +26211,11 @@ const MachineInputField = /*#__PURE__*/React.forwardRef(({
26289
26211
  });
26290
26212
  MachineInputField.displayName = 'MachineInputField';
26291
26213
 
26292
- var css_248z$q = ".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}";
26293
- styleInject(css_248z$q);
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);
26294
26216
 
26295
- var css_248z$p = ".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}";
26296
- styleInject(css_248z$p);
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);
26297
26219
 
26298
26220
  const Branches = ({
26299
26221
  machineInstances,
@@ -26323,7 +26245,7 @@ const Branches = ({
26323
26245
  return `24px ${machineColumnWidth}px repeat(${machineColumnCount - 1}, 40px ${machineColumnWidth}px) 24px`;
26324
26246
  };
26325
26247
  return jsxRuntime.jsxs("div", {
26326
- className: classNames({
26248
+ className: cx({
26327
26249
  'ff-connecting-branch-grid': evenRow,
26328
26250
  'ff-connecting-branch-grid-reverse': !evenRow
26329
26251
  }),
@@ -26333,12 +26255,12 @@ const Branches = ({
26333
26255
  children: [jsxRuntime.jsxs("div", {
26334
26256
  className: "ff-connecting-branch-start-wrapper",
26335
26257
  children: [jsxRuntime.jsx("div", {
26336
- className: classNames({
26258
+ className: cx({
26337
26259
  'ff-connecting-branch-arrow': evenRow,
26338
26260
  'ff-connecting-branch-arrow-reverse': !evenRow
26339
26261
  })
26340
26262
  }), jsxRuntime.jsx("div", {
26341
- className: classNames({
26263
+ className: cx({
26342
26264
  'ff-connecting-branch-container': evenRow,
26343
26265
  'ff-connecting-branch-container-reverse': !evenRow
26344
26266
  }),
@@ -26365,7 +26287,7 @@ const Branches = ({
26365
26287
  children: [jsxRuntime.jsxs("div", {
26366
26288
  className: "ff-connecting-branch-input-point-wrapper",
26367
26289
  children: [jsxRuntime.jsx("div", {
26368
- className: classNames({
26290
+ className: cx({
26369
26291
  'ff-connecting-branch-point': evenRow,
26370
26292
  'ff-connecting-branch-point-reverse': !evenRow
26371
26293
  })
@@ -26382,7 +26304,7 @@ const Branches = ({
26382
26304
  contentReverse: !evenRow
26383
26305
  }, ffid())]
26384
26306
  }), jsxRuntime.jsxs("div", {
26385
- className: classNames({
26307
+ className: cx({
26386
26308
  'ff-connecting-branch-datalist': evenRow,
26387
26309
  'ff-connecting-branch-datalist-reverse': !evenRow
26388
26310
  }),
@@ -26432,7 +26354,7 @@ const Branches = ({
26432
26354
  borderTop: `1px ${getBorderStyle(machineInstance, machineInstances[index + 1])} var(--ff-connecting-branch-color)`
26433
26355
  },
26434
26356
  children: jsxRuntime.jsx("div", {
26435
- className: classNames({
26357
+ className: cx({
26436
26358
  'ff-connecting-branch-arrow': evenRow,
26437
26359
  'ff-connecting-branch-arrow-reverse': !evenRow
26438
26360
  })
@@ -26440,7 +26362,7 @@ const Branches = ({
26440
26362
  })]
26441
26363
  }, ffid());
26442
26364
  }), !lastMachineInstance && jsxRuntime.jsx("div", {
26443
- className: classNames({
26365
+ className: cx({
26444
26366
  'ff-connecting-branch-end-arrow': evenRow,
26445
26367
  'ff-connecting-branch-end-arrow-reverse': !evenRow
26446
26368
  }),
@@ -26454,8 +26376,8 @@ const Branches = ({
26454
26376
  });
26455
26377
  };
26456
26378
 
26457
- var css_248z$o = ".ff-connecting-branch-grid-wrapper {\n box-sizing: border-box;\n}";
26458
- styleInject(css_248z$o);
26379
+ var css_248z$p = ".ff-connecting-branch-grid-wrapper {\n box-sizing: border-box;\n}";
26380
+ styleInject(css_248z$p);
26459
26381
 
26460
26382
  const ConnectingBranches = ({
26461
26383
  machineBranchInstances,
@@ -26551,7 +26473,7 @@ const SequentialConnectingBranch = ({
26551
26473
  selectedOption: selectedMachineInstance,
26552
26474
  valueAccessor: 'name'
26553
26475
  }), !isMachineSelected && jsxRuntime.jsxs("div", {
26554
- className: classNames({
26476
+ className: cx({
26555
26477
  'ff-select-branch-arrow': isMachineInstances,
26556
26478
  'ff-select-branch-arrow-down': !isMachineInstances
26557
26479
  }),
@@ -26626,8 +26548,8 @@ const SequentialConnectingBranch = ({
26626
26548
  });
26627
26549
  };
26628
26550
 
26629
- var css_248z$n = ".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}";
26630
- styleInject(css_248z$n);
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);
26631
26553
 
26632
26554
  const AttachmentButton = ({
26633
26555
  label,
@@ -26802,8 +26724,8 @@ const toast = {
26802
26724
  alert: (arg1, arg2) => openToast('alert', arg1, arg2)
26803
26725
  };
26804
26726
 
26805
- var css_248z$m = "/* 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}";
26806
- styleInject(css_248z$m);
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);
26807
26729
 
26808
26730
  const ToggleSwitch = ({
26809
26731
  selected = "text",
@@ -26825,8 +26747,8 @@ const ToggleSwitch = ({
26825
26747
  });
26826
26748
  };
26827
26749
 
26828
- var css_248z$l = ".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}";
26829
- styleInject(css_248z$l);
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);
26830
26752
 
26831
26753
  const Avatar = ({
26832
26754
  variant = "small",
@@ -26862,8 +26784,8 @@ const Avatar = ({
26862
26784
  });
26863
26785
  };
26864
26786
 
26865
- 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.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}";
26866
- styleInject(css_248z$k);
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);
26867
26789
 
26868
26790
  const getErrorMessage$1 = (inputValue, text, customError, customErrorCondition) => {
26869
26791
  if (inputValue === text) {
@@ -27066,8 +26988,8 @@ const LabelEditTextField = ({
27066
26988
  });
27067
26989
  };
27068
26990
 
27069
- 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 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}";
27070
- styleInject(css_248z$j);
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);
27071
26993
 
27072
26994
  const capitalize = text => {
27073
26995
  if (!text) return '';
@@ -30793,7 +30715,7 @@ const CornerIndicator = ({
30793
30715
  onSelect();
30794
30716
  }, [onSelect]);
30795
30717
  return jsxRuntime.jsx("th", {
30796
- className: classNames('ff-spreadsheet-header', {
30718
+ className: cx('ff-spreadsheet-header', {
30797
30719
  'ff-spreadsheet-header--selected': selected
30798
30720
  }),
30799
30721
  onClick: handleClick,
@@ -30885,7 +30807,7 @@ const ColumnIndicator = ({
30885
30807
  minWidth: `${columnWidth}px`,
30886
30808
  position: 'relative'
30887
30809
  },
30888
- className: classNames('ff-spreadsheet-header', {
30810
+ className: cx('ff-spreadsheet-header', {
30889
30811
  'ff-spreadsheet-header--selected': selected
30890
30812
  }),
30891
30813
  onClick: handleClick,
@@ -30999,7 +30921,7 @@ const RowIndicator = ({
30999
30921
  height: `${rowHeight}px`,
31000
30922
  position: 'relative'
31001
30923
  },
31002
- className: classNames('ff-spreadsheet-header', {
30924
+ className: cx('ff-spreadsheet-header', {
31003
30925
  'ff-spreadsheet-header--selected': selected
31004
30926
  }),
31005
30927
  onClick: handleClick,
@@ -31132,7 +31054,7 @@ const Cell = ({
31132
31054
  return jsxRuntime.jsxs("td", {
31133
31055
  ref: rootRef,
31134
31056
  style: data?.style,
31135
- className: classNames('ff-spreadsheet-cell', data?.className, {
31057
+ className: cx('ff-spreadsheet-cell', data?.className, {
31136
31058
  'ff-spreadsheet-active-cell': active || dragging
31137
31059
  }),
31138
31060
  onMouseEnter: handleMouseOver,
@@ -31230,7 +31152,7 @@ const DataViewer = ({
31230
31152
  children: convertBooleanToText(value)
31231
31153
  }) : jsxRuntime.jsx("span", {
31232
31154
  onContextMenu: contextClick,
31233
- className: classNames('ff-spreadsheet-data-viewer', {
31155
+ className: cx('ff-spreadsheet-data-viewer', {
31234
31156
  'ff-spreadsheet-data-viewer--preserve-breaks': hasLineBreaker(value)
31235
31157
  }),
31236
31158
  children: value
@@ -31337,7 +31259,7 @@ const ActiveCell = props => {
31337
31259
  const readOnly = cell && cell.readOnly;
31338
31260
  return hidden ? null : jsxRuntime.jsx("div", {
31339
31261
  ref: rootRef,
31340
- className: classNames('ff-spreadsheet-active-cell', `ff-spreadsheet-active-cell--${mode}`),
31262
+ className: cx('ff-spreadsheet-active-cell', `ff-spreadsheet-active-cell--${mode}`),
31341
31263
  style: dimensions,
31342
31264
  onClick: mode === 'view' && !readOnly ? edit : undefined,
31343
31265
  tabIndex: 0,
@@ -31365,7 +31287,7 @@ const FloatingRect = ({
31365
31287
  left
31366
31288
  } = dimensions || {};
31367
31289
  return jsxRuntime.jsx("div", {
31368
- className: classNames('ff-spreadsheet-floating-rect', {
31290
+ className: cx('ff-spreadsheet-floating-rect', {
31369
31291
  [`ff-spreadsheet-floating-rect--${variant}`]: variant,
31370
31292
  'ff-spreadsheet-floating-rect--dragging': dragging,
31371
31293
  'ff-spreadsheet-floating-rect--hidden': hidden
@@ -31404,15 +31326,15 @@ const Copied = () => {
31404
31326
  });
31405
31327
  };
31406
31328
 
31407
- var css_248z$i = ".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}";
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);
31331
+
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}";
31408
31333
  styleInject(css_248z$i);
31409
31334
 
31410
- var css_248z$h = ".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}";
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}";
31411
31336
  styleInject(css_248z$h);
31412
31337
 
31413
- var css_248z$g = ".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}";
31414
- styleInject(css_248z$g);
31415
-
31416
31338
  const ColorBarSelector = ({
31417
31339
  getColorValue,
31418
31340
  disabled
@@ -32147,7 +32069,7 @@ const Spreadsheet = props => {
32147
32069
  setFormatePainter: setFormatePainter
32148
32070
  }), jsxRuntime.jsxs("div", {
32149
32071
  ref: rootRef,
32150
- className: classNames('ff-spreadsheet', className),
32072
+ className: cx('ff-spreadsheet', className),
32151
32073
  onKeyDown: handleKeyDown,
32152
32074
  onMouseMove: handleMouseMove,
32153
32075
  children: [tableNode, activeCellNode, jsxRuntime.jsx(Selected, {}), jsxRuntime.jsx(Copied, {})]
@@ -32159,11 +32081,11 @@ const Spreadsheet = props => {
32159
32081
  });
32160
32082
  };
32161
32083
 
32162
- var css_248z$f = ".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}";
32163
- styleInject(css_248z$f);
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);
32164
32086
 
32165
- var css_248z$e = ".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}";
32166
- styleInject(css_248z$e);
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);
32167
32089
 
32168
32090
  const ExcelContextMenu = ({
32169
32091
  contextMenu
@@ -32602,8 +32524,8 @@ const ExcelFile = ({
32602
32524
  });
32603
32525
  };
32604
32526
 
32605
- var css_248z$d = ".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}";
32606
- styleInject(css_248z$d);
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);
32607
32529
 
32608
32530
  const ModuleChip = ({
32609
32531
  label = '',
@@ -32611,12 +32533,12 @@ const ModuleChip = ({
32611
32533
  onClick = () => {}
32612
32534
  }) => {
32613
32535
  return jsxRuntime.jsx("div", {
32614
- className: classNames('ff-Module-chip', {
32536
+ className: cx('ff-Module-chip', {
32615
32537
  'ff-Module-chip--active': isActive
32616
32538
  }),
32617
32539
  onClick: onClick,
32618
32540
  children: jsxRuntime.jsx("div", {
32619
- className: classNames(`ff-Module-label-chip `, {
32541
+ className: cx(`ff-Module-label-chip `, {
32620
32542
  'ff-Module-label-chip--active': isActive
32621
32543
  }),
32622
32544
  children: jsxRuntime.jsx(Typography, {
@@ -32629,8 +32551,8 @@ const ModuleChip = ({
32629
32551
  });
32630
32552
  };
32631
32553
 
32632
- var css_248z$c = ".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}";
32633
- styleInject(css_248z$c);
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);
32634
32556
 
32635
32557
  // Function to generate SVG arc paths
32636
32558
  const calculateArc$1 = ({
@@ -32778,8 +32700,8 @@ const IconRadialChart = ({
32778
32700
  });
32779
32701
  };
32780
32702
 
32781
- var css_248z$b = ".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}";
32782
- styleInject(css_248z$b);
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);
32783
32705
 
32784
32706
  const AttachImage = ({
32785
32707
  imageSrc,
@@ -32853,8 +32775,8 @@ const AttachImage = ({
32853
32775
  });
32854
32776
  };
32855
32777
 
32856
- var css_248z$a = ".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}";
32857
- styleInject(css_248z$a);
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);
32858
32780
 
32859
32781
  const StatusCard = ({
32860
32782
  icon,
@@ -32903,19 +32825,24 @@ const StatusCard = ({
32903
32825
  });
32904
32826
  };
32905
32827
 
32906
- var css_248z$9 = ".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}";
32907
- styleInject(css_248z$9);
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);
32908
32830
 
32909
32831
  const VariableDropdown = ({
32910
32832
  optionsList = [],
32911
32833
  onSelectVariable,
32912
- dropdownPosition
32834
+ dropdownPosition,
32835
+ position = 'relative',
32836
+ width = '300px'
32913
32837
  }) => {
32914
32838
  return jsxRuntime.jsx("div", {
32915
- className: "ff-variable-dropdown",
32916
- style: {
32839
+ className: cx('ff-variable-dropdown', position),
32840
+ style: dropdownPosition ? {
32917
32841
  top: dropdownPosition.top + 30,
32918
- left: dropdownPosition.left - 30
32842
+ left: dropdownPosition.left - 30,
32843
+ width
32844
+ } : {
32845
+ width
32919
32846
  },
32920
32847
  children: optionsList?.map(option => {
32921
32848
  return jsxRuntime.jsxs("div", {
@@ -32936,8 +32863,8 @@ const VariableDropdown = ({
32936
32863
  });
32937
32864
  };
32938
32865
 
32939
- var css_248z$8 = ".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}";
32940
- styleInject(css_248z$8);
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);
32941
32868
 
32942
32869
  const LineChart = ({
32943
32870
  data,
@@ -33176,8 +33103,8 @@ const LineChart = ({
33176
33103
  });
33177
33104
  };
33178
33105
 
33179
- var css_248z$7 = ":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}";
33180
- styleInject(css_248z$7);
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);
33181
33108
 
33182
33109
  const DownloadClient = ({
33183
33110
  onClose,
@@ -33274,8 +33201,8 @@ const DownloadClient = ({
33274
33201
  });
33275
33202
  };
33276
33203
 
33277
- var css_248z$6 = ".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}";
33278
- styleInject(css_248z$6);
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);
33279
33206
 
33280
33207
  const FieldSet = ({
33281
33208
  legendName,
@@ -33307,8 +33234,8 @@ const FieldSet = ({
33307
33234
  });
33308
33235
  };
33309
33236
 
33310
- var css_248z$5 = ".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}";
33311
- styleInject(css_248z$5);
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);
33312
33239
 
33313
33240
  const CreateVariableSlider = ({
33314
33241
  isOpen,
@@ -38741,8 +38668,8 @@ const throttle = (func, limit) => {
38741
38668
  return throttled;
38742
38669
  };
38743
38670
 
38744
- 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}";
38745
- 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);
38746
38673
 
38747
38674
  const BarChart = ({
38748
38675
  data,
@@ -38960,8 +38887,8 @@ const BarChart = ({
38960
38887
  });
38961
38888
  };
38962
38889
 
38963
- 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}";
38964
- 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);
38965
38892
 
38966
38893
  const calculateArc = (centerX, centerY, radius, startAngle, endAngle) => {
38967
38894
  const startX = centerX + radius * Math.cos(startAngle);
@@ -44516,8 +44443,8 @@ function requireJs() {
44516
44443
 
44517
44444
  var jsExports = requireJs();
44518
44445
 
44519
- 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}";
44520
- 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);
44521
44448
 
44522
44449
  const Editor = /*#__PURE__*/React.forwardRef(({
44523
44450
  width,
@@ -44717,6 +44644,8 @@ const Editor = /*#__PURE__*/React.forwardRef(({
44717
44644
  onChange: (newValue, event) => handleChange(newValue, event),
44718
44645
  theme: theme
44719
44646
  }), showDropdown && dropdownPosition && jsxRuntime.jsx(VariableDropdown, {
44647
+ position: "absolute",
44648
+ width: "300px",
44720
44649
  optionsList: variableOptionsList,
44721
44650
  onSelectVariable: handleSelectVariable,
44722
44651
  dropdownPosition: dropdownPosition
@@ -44738,8 +44667,8 @@ const getSequentialPayload = data => {
44738
44667
  }));
44739
44668
  };
44740
44669
 
44741
- 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}";
44742
- 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);
44743
44672
 
44744
44673
  var reactArcher$1 = {exports: {}};
44745
44674
 
@@ -46343,8 +46272,8 @@ const saveFileFromBlob = (blob, filename) => {
46343
46272
  }
46344
46273
  };
46345
46274
 
46346
- 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}";
46347
- 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);
46348
46277
 
46349
46278
  const PopUpModal = ({
46350
46279
  isOpen,
@@ -46419,8 +46348,105 @@ const PopUpModal = ({
46419
46348
  });
46420
46349
  };
46421
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
+
46422
46447
  exports.Accordion = Accordion;
46423
46448
  exports.AddResourceButton = AddButton;
46449
+ exports.AddVariables = AddVariables;
46424
46450
  exports.AllProjectsDropdown = AllProjectsDropdown;
46425
46451
  exports.AppHeader = AppHeader;
46426
46452
  exports.AttachImage = AttachImage;
@@ -46504,6 +46530,7 @@ exports.getEncryptedData = getEncryptedData;
46504
46530
  exports.getExtension = getExtension;
46505
46531
  exports.getExtensionWithPeriod = getExtensionWithPeriod;
46506
46532
  exports.getSequentialPayload = getSequentialPayload;
46533
+ exports.hasDuplicateFile = hasDuplicateFile;
46507
46534
  exports.saveFileFromBlob = saveFileFromBlob;
46508
46535
  exports.throttle = throttle;
46509
46536
  exports.toast = toast;