pixel-react 1.2.6 → 1.2.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (182) hide show
  1. package/.yarn/install-state.gz +0 -0
  2. package/lib/components/Drawer/Types.d.ts +29 -17
  3. package/lib/components/{ExcelFile → Excel}/ExcelFile/ExcelFile.d.ts +1 -0
  4. package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/actions.d.ts +39 -10
  5. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducer.d.ts +4 -0
  6. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +40 -0
  7. package/lib/components/{ExcelFile → Excel}/ExcelToolBar/ExcelToolBar.d.ts +7 -3
  8. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  9. package/lib/components/MenuOption/types.d.ts +4 -0
  10. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  11. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  12. package/lib/components/Select/Select.stories.d.ts +1 -0
  13. package/lib/components/Toastify/Toastify.d.ts +5 -4
  14. package/lib/components/Toastify/types.d.ts +1 -0
  15. package/lib/index.d.ts +76 -24
  16. package/lib/index.esm.js +1467 -1038
  17. package/lib/index.esm.js.map +1 -1
  18. package/lib/index.js +1468 -1038
  19. package/lib/index.js.map +1 -1
  20. package/lib/tsconfig.tsbuildinfo +1 -1
  21. package/lib/utils/getSequentialPayload/getSequentialPayload.d.ts +2 -0
  22. package/lib/utils/getSequentialPayload/getSequentialPayload.stories.d.ts +10 -0
  23. package/lib/utils/getSequentialPayload/types.d.ts +30 -0
  24. package/package.json +3 -3
  25. package/src/assets/Themes/BaseTheme.scss +4 -0
  26. package/src/assets/icons/maximize_icon.svg +5 -0
  27. package/src/assets/styles/_fonts.scss +1 -1
  28. package/src/components/AllProjectsDropdown/AllProjectsDropdown.scss +15 -6
  29. package/src/components/AllProjectsDropdown/AllProjectsDropdown.stories.tsx +0 -5
  30. package/src/components/AllProjectsDropdown/AllProjectsDropdown.tsx +20 -10
  31. package/src/components/Drawer/Drawer.scss +1 -0
  32. package/src/components/Drawer/Drawer.stories.tsx +8 -9
  33. package/src/components/Drawer/Drawer.tsx +8 -5
  34. package/src/components/Drawer/Types.ts +27 -14
  35. package/src/components/Excel/ExcelFile/ExcelFile.scss +62 -0
  36. package/src/components/Excel/ExcelFile/ExcelFile.tsx +312 -0
  37. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/ActiveCell.tsx +2 -2
  38. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Cell.tsx +3 -3
  39. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/ColumnIndicator.tsx +4 -4
  40. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/CornerIndicator.tsx +2 -2
  41. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/DataEditor.tsx +1 -1
  42. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/DataViewer.tsx +3 -3
  43. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/FloatingRect.tsx +4 -4
  44. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/RowIndicator.tsx +4 -4
  45. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Spreadsheet.scss +26 -24
  46. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Spreadsheet.tsx +13 -45
  47. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Table.tsx +1 -1
  48. package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/actions.ts +88 -20
  49. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +495 -0
  50. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +758 -0
  51. package/src/components/{ExcelFile → Excel}/ExcelFile.stories.tsx +45 -0
  52. package/src/components/Excel/ExcelToolBar/ExcelToolBar.scss +36 -0
  53. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +346 -0
  54. package/src/components/Form/Form.scss +54 -35
  55. package/src/components/Form/Form.stories.tsx +264 -225
  56. package/src/components/Form/Forms.tsx +5 -1
  57. package/src/components/Icon/iconList.ts +2 -1
  58. package/src/components/Input/Input.tsx +0 -1
  59. package/src/components/MenuOption/MenuOption.scss +0 -1
  60. package/src/components/MenuOption/MenuOption.stories.tsx +3 -0
  61. package/src/components/MenuOption/MenuOption.tsx +5 -4
  62. package/src/components/MenuOption/types.ts +4 -0
  63. package/src/components/ModulesChip/ModuleChip.scss +2 -2
  64. package/src/components/ModulesChip/ModuleChip.tsx +4 -4
  65. package/src/components/MultiSelect/Dropdown.tsx +5 -2
  66. package/src/components/MultiSelect/MultiSelect.scss +16 -11
  67. package/src/components/MultiSelect/MultiSelect.stories.tsx +17 -13
  68. package/src/components/MultiSelect/MultiSelect.tsx +49 -26
  69. package/src/components/MultiSelect/MultiSelectTypes.ts +2 -1
  70. package/src/components/Select/Select.stories.tsx +161 -18
  71. package/src/components/Select/Select.tsx +41 -33
  72. package/src/components/Table/Table.scss +6 -5
  73. package/src/components/Table/Table.stories.tsx +0 -9
  74. package/src/components/Table/Table.tsx +2 -2
  75. package/src/components/TableTree/TableTree.scss +1 -1
  76. package/src/components/TableTree/TableTree.tsx +3 -1
  77. package/src/components/Toastify/Toastify.stories.tsx +29 -10
  78. package/src/components/Toastify/Toastify.tsx +42 -16
  79. package/src/components/Toastify/types.ts +2 -0
  80. package/src/components/Tooltip/Tooltip.scss +1 -1
  81. package/src/index.ts +4 -2
  82. package/src/utils/getSequentialPayload/getSequentialPayload.stories.tsx +75 -0
  83. package/src/utils/getSequentialPayload/getSequentialPayload.ts +29 -0
  84. package/src/utils/getSequentialPayload/types.ts +35 -0
  85. package/lib/components/AddButton/AddButton.d.ts +0 -5
  86. package/lib/components/AddButton/AddButton.stories.d.ts +0 -6
  87. package/lib/components/AddButton/index.d.ts +0 -1
  88. package/lib/components/AddButton/types.d.ts +0 -4
  89. package/lib/components/ExcelFile/ChangeExcelStyles.d.ts +0 -14
  90. package/lib/components/ExcelFile/ExcelFile/Excel/reducer.d.ts +0 -27
  91. package/lib/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.d.ts +0 -12
  92. package/lib/components/ExcelFile/ImportExcelStyles.d.ts +0 -24
  93. package/lib/utils/find/findAndInsert.d.ts +0 -7
  94. package/lib/utils/find/findAndInsert.stories.d.ts +0 -7
  95. package/src/components/ExcelFile/ExcelFile/Excel/reducer.ts +0 -952
  96. package/src/components/ExcelFile/ExcelFile/ExcelFile.scss +0 -24
  97. package/src/components/ExcelFile/ExcelFile/ExcelFile.tsx +0 -162
  98. package/src/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.scss +0 -16
  99. package/src/components/ExcelFile/ExcelSheetBar/ExcelSheetBar.tsx +0 -68
  100. package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.scss +0 -19
  101. package/src/components/ExcelFile/ExcelToolBar/ExcelToolBar.tsx +0 -291
  102. package/src/fonts/Montserrat/Montserrat-Medium.ttf +0 -0
  103. package/src/fonts/Montserrat/Montserrat-Regular.ttf +0 -0
  104. package/src/fonts/Montserrat/Montserrat-SemiBold.ttf +0 -0
  105. package/src/fonts/Poppins/Poppins-Black.ttf +0 -0
  106. package/src/fonts/Poppins/Poppins-BlackItalic.ttf +0 -0
  107. package/src/fonts/Poppins/Poppins-BoldItalic.ttf +0 -0
  108. package/src/fonts/Poppins/Poppins-ExtraBold.ttf +0 -0
  109. package/src/fonts/Poppins/Poppins-ExtraBoldItalic.ttf +0 -0
  110. package/src/fonts/Poppins/Poppins-ExtraLight.ttf +0 -0
  111. package/src/fonts/Poppins/Poppins-ExtraLightItalic.ttf +0 -0
  112. package/src/fonts/Poppins/Poppins-Italic.ttf +0 -0
  113. package/src/fonts/Poppins/Poppins-Light.ttf +0 -0
  114. package/src/fonts/Poppins/Poppins-LightItalic.ttf +0 -0
  115. package/src/fonts/Poppins/Poppins-MediumItalic.ttf +0 -0
  116. package/src/fonts/Poppins/Poppins-SemiBoldItalic.ttf +0 -0
  117. package/src/fonts/Poppins/Poppins-Thin.ttf +0 -0
  118. package/src/fonts/Poppins/Poppins-ThinItalic.ttf +0 -0
  119. /package/lib/components/{ExcelFile → Excel}/ColorBarSelector/ColorBarSelector.d.ts +0 -0
  120. /package/lib/components/{ExcelFile → Excel}/ContextMenu/ContextMenu.d.ts +0 -0
  121. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/ActiveCell.d.ts +0 -0
  122. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Cell.d.ts +0 -0
  123. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/ColumnIndicator.d.ts +0 -0
  124. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Copied.d.ts +0 -0
  125. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/CornerIndicator.d.ts +0 -0
  126. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/DataEditor.d.ts +0 -0
  127. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/DataViewer.d.ts +0 -0
  128. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/FloatingRect.d.ts +0 -0
  129. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/HeaderRow.d.ts +0 -0
  130. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Row.d.ts +0 -0
  131. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/RowIndicator.d.ts +0 -0
  132. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Selected.d.ts +0 -0
  133. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Spreadsheet.d.ts +0 -0
  134. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Table.d.ts +0 -0
  135. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/areModelsEqual.d.ts +0 -0
  136. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/context.d.ts +0 -0
  137. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/engine.d.ts +0 -0
  138. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/formula.d.ts +0 -0
  139. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/index.d.ts +0 -0
  140. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-graph.d.ts +0 -0
  141. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-hash.d.ts +0 -0
  142. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-set.d.ts +0 -0
  143. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/index.d.ts +0 -0
  144. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/matrix.d.ts +0 -0
  145. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/point-range.d.ts +0 -0
  146. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/point.d.ts +0 -0
  147. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/selection.d.ts +0 -0
  148. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/types.d.ts +0 -0
  149. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/use-dispatch.d.ts +0 -0
  150. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/use-selector.d.ts +0 -0
  151. /package/lib/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/util.d.ts +0 -0
  152. /package/lib/components/{ExcelFile → Excel}/ExcelFile.stories.d.ts +0 -0
  153. /package/lib/components/{ExcelFile → Excel}/Types.d.ts +0 -0
  154. /package/lib/components/{ExcelFile → Excel}/index.d.ts +0 -0
  155. /package/src/components/{ExcelFile/ColorBarselector → Excel/ColorBarSelector}/ColorBarSelector.scss +0 -0
  156. /package/src/components/{ExcelFile/ColorBarselector → Excel/ColorBarSelector}/ColorBarSelector.tsx +0 -0
  157. /package/src/components/{ExcelFile → Excel}/ContextMenu/ContextMenu.scss +0 -0
  158. /package/src/components/{ExcelFile → Excel}/ContextMenu/ContextMenu.tsx +0 -0
  159. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Copied.tsx +0 -0
  160. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/HeaderRow.tsx +0 -0
  161. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Row.tsx +0 -0
  162. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/Selected.tsx +0 -0
  163. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/areModelsEqual.ts +0 -0
  164. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/context.ts +0 -0
  165. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/engine.ts +0 -0
  166. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/formula.ts +0 -0
  167. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/index.ts +0 -0
  168. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-graph.ts +0 -0
  169. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-hash.ts +0 -0
  170. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/engine/point-set.ts +0 -0
  171. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/index.ts +0 -0
  172. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/matrix.ts +0 -0
  173. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/point-range.ts +0 -0
  174. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/point.ts +0 -0
  175. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/selection.ts +0 -0
  176. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/types.ts +0 -0
  177. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/typings/fast-formula-parser.d.ts +0 -0
  178. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/use-dispatch.ts +0 -0
  179. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/use-selector.ts +0 -0
  180. /package/src/components/{ExcelFile/ExcelFile/Excel → Excel/ExcelFile/ExcelFileComponents}/util.ts +0 -0
  181. /package/src/components/{ExcelFile → Excel}/Types.ts +0 -0
  182. /package/src/components/{ExcelFile → Excel}/index.ts +0 -0
package/lib/index.js CHANGED
@@ -48,11 +48,11 @@ function styleInject(css, ref) {
48
48
  }
49
49
  }
50
50
 
51
- var css_248z$Z = ":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 --button-close-color: button-close-color;\n --button-bg-color: button-bg-color;\n}\n\n@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-button, .ff-button--small, .ff-button--medium {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd, .ff-button--large {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\n font-size: 80px;\n}\n\n.ff-button {\n width: auto;\n background-color: #ffffff;\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: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);\n mask-composite: exclude;\n -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 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: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\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: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n}\n.ff-button--primary:before {\n background: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n}\n.ff-button--primary:hover {\n background: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n}\n.ff-button--delete {\n background: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n color: #ffffff;\n}\n.ff-button--delete:before {\n background: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n}\n.ff-button--delete:hover {\n background: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\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: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n}\n.ff-button--secondary:hover {\n background: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n}\n.ff-button--tertiary {\n border: none;\n background: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n}\n.ff-button--tertiary:hover {\n background: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\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: #ffffff;\n}\n.ff-button-secondary--text, .ff-button-tertiary--text {\n background: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}";
52
- styleInject(css_248z$Z);
51
+ var css_248z$_ = ":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 --button-close-color: button-close-color;\n --button-bg-color: button-bg-color;\n}\n\n@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\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-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: #ffffff;\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: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);\n mask-composite: exclude;\n -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 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: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\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: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n}\n.ff-button--primary:before {\n background: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n}\n.ff-button--primary:hover {\n background: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n}\n.ff-button--delete {\n background: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n color: #ffffff;\n}\n.ff-button--delete:before {\n background: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n}\n.ff-button--delete:hover {\n background: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\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: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n}\n.ff-button--secondary:hover {\n background: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n}\n.ff-button--tertiary {\n border: none;\n background: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n}\n.ff-button--tertiary:hover {\n background: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\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: #ffffff;\n}\n.ff-button-secondary--text, .ff-button-tertiary--text {\n background: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}";
52
+ styleInject(css_248z$_);
53
53
 
54
- var css_248z$Y = ":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 --button-close-color: button-close-color;\n --button-bg-color: button-bg-color;\n}";
55
- styleInject(css_248z$Y);
54
+ var css_248z$Z = ":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 --button-close-color: button-close-color;\n --button-bg-color: button-bg-color;\n}";
55
+ styleInject(css_248z$Z);
56
56
 
57
57
  function getDefaultExportFromCjs (x) {
58
58
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -430,6 +430,8 @@ const SvgSafariIcon = (props) => /* @__PURE__ */ React__namespace.createElement(
430
430
 
431
431
  const SvgMaximizeScript = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_2947_11413)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M5.5 4H18.5C19.3271 4 20 4.67285 20 5.5V11.6748C20 11.9512 19.7761 12.1748 19.5 12.1748C19.2239 12.1748 19 11.9512 19 11.6748V5.5C19 5.22412 18.7756 5 18.5 5H5.5C5.22437 5 5 5.22412 5 5.5V18.5C5 18.7759 5.22437 19 5.5 19H11.675C11.9512 19 12.175 19.2236 12.175 19.5C12.175 19.7764 11.9512 20 11.675 20H5.5C4.67285 20 4 19.3272 4 18.5V5.5C4 4.67285 4.67285 4 5.5 4Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.5 13H18.5C19.3271 13 20 13.6729 20 14.5V18.5C20 19.3271 19.3271 20 18.5 20H14.5C13.6729 20 13 19.3271 13 18.5V14.5C13 13.6729 13.6729 13 14.5 13Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.6465 12.3535L8.5 9.20703V10C8.5 10.2764 8.27612 10.5 8 10.5C7.72388 10.5 7.5 10.2764 7.5 10V8C7.5 7.73216 7.72802 7.5 8 7.5H10C10.2761 7.5 10.5 7.72363 10.5 8C10.5 8.27637 10.2761 8.5 10 8.5H9.20703L12.3535 11.6465C12.5488 11.8418 12.5488 12.1582 12.3535 12.3535C12.1647 12.5423 11.8414 12.5484 11.6465 12.3535Z", fill: "currentColor" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_2947_11413" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z", fill: "currentColor" }))));
432
432
 
433
+ const SvgMaximizeIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M1.5 0H14.5C15.3271 0 16 0.67285 16 1.5V7.67481C16 7.95117 15.7761 8.1748 15.5 8.1748C15.2239 8.1748 15 7.95117 15 7.67481V1.5C15 1.22412 14.7756 1 14.5 1H1.5C1.22437 1 1 1.22412 1 1.5V14.5C1 14.7759 1.22437 15 1.5 15H7.67505C7.95117 15 8.17505 15.2236 8.17505 15.5C8.17505 15.7764 7.95117 16 7.67505 16H1.5C0.67285 16 0 15.3272 0 14.5V1.5C0 0.67285 0.67285 0 1.5 0Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.5 9H14.5C15.3271 9 16 9.67285 16 10.5V14.5C16 15.3271 15.3271 16 14.5 16H10.5C9.67285 16 9 15.3271 9 14.5V10.5C9 9.67285 9.67285 9 10.5 9Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.64649 8.35351L4.5 5.20703V6C4.5 6.27637 4.27612 6.5 4 6.5C3.72388 6.5 3.5 6.27637 3.5 6V4C3.5 3.73216 3.72802 3.5 4 3.5H6C6.27612 3.5 6.5 3.72363 6.5 4C6.5 4.27637 6.27612 4.5 6 4.5H5.20703L8.35352 7.64648C8.54883 7.84179 8.54883 8.1582 8.35352 8.35351C8.16474 8.54229 7.84137 8.54839 7.64649 8.35351Z", fill: "currentColor" }));
434
+
433
435
  let Components = {};
434
436
  Components['delete_info'] = SvgDeleteInfo;
435
437
  Components['success'] = SvgSuccess;
@@ -570,9 +572,10 @@ Components['linux'] = SvgLinux;
570
572
  Components['opera'] = SvgOpera;
571
573
  Components['safari_icon'] = SvgSafariIcon;
572
574
  Components['maximize_script'] = SvgMaximizeScript;
575
+ Components['maximize_icon'] = SvgMaximizeIcon;
573
576
 
574
- var css_248z$X = ".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-dark {\n background-color: var(--brand-color);\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover {\n border-radius: 4px;\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}";
575
- styleInject(css_248z$X);
577
+ var css_248z$Y = ".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-dark {\n background-color: var(--brand-color);\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover {\n border-radius: 4px;\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}";
578
+ styleInject(css_248z$Y);
576
579
 
577
580
  const Icon = /*#__PURE__*/React.forwardRef(({
578
581
  name,
@@ -659,8 +662,8 @@ const Button$1 = /*#__PURE__*/React.forwardRef(({
659
662
  });
660
663
  });
661
664
 
662
- var css_248z$W = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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}\n.ff-drawer-container .ff-drawer {\n position: fixed;\n right: 0;\n bottom: 0;\n top: 80px;\n min-width: 450px;\n background-color: var(--primary-button-text-color);\n z-index: 999;\n transform: translateX(100%);\n opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n transform: translateX(0);\n opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n transition: all 0.4s ease-in-out;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n padding: 4px 8px 4px 8px;\n display: flex;\n gap: 10px;\n border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-weight: 600;\n color: var(--drawer-title-color);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n height: 16px;\n width: 16px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n cursor: pointer;\n height: 24px;\n width: 24px;\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}\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}";
663
- styleInject(css_248z$W);
665
+ var css_248z$X = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.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-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}\n.ff-drawer-container .ff-drawer {\n margin-bottom: 4px;\n position: fixed;\n right: 0;\n bottom: 0;\n top: 80px;\n min-width: 450px;\n background-color: var(--primary-button-text-color);\n z-index: 999;\n transform: translateX(100%);\n opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n transform: translateX(0);\n opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n transition: all 0.4s ease-in-out;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n padding: 4px 8px 4px 8px;\n display: flex;\n gap: 10px;\n border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-weight: 600;\n color: var(--drawer-title-color);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n height: 16px;\n width: 16px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n cursor: pointer;\n height: 24px;\n width: 24px;\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}\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}";
666
+ styleInject(css_248z$X);
664
667
 
665
668
  function useEscapeKey(key) {
666
669
  return callBack => {
@@ -679,8 +682,8 @@ function useEscapeKey(key) {
679
682
  };
680
683
  }
681
684
 
682
- var css_248z$V = ":root {\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\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 --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-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 --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 --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: #f7ebff;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-avatar-background-color: #71347B;\n --ff-avatar-icon-color: #ffffff;\n}\n\n:root {\n --brand-color: #71347b;\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\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 --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-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(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 --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 --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-dark-variant: #ffffff;\n --avatar-background-color: #71347B;\n --avatar-icon-color: #ffffff;\n}\n\n.ff-light-theme {\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\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 --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-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 --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 --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: #f7ebff;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-avatar-background-color: #71347B;\n --ff-avatar-icon-color: #ffffff;\n}\n\n.ff-dark-theme {\n --brand-color: #71347b;\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\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 --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-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(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 --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 --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-dark-variant: #ffffff;\n --avatar-background-color: #71347B;\n --avatar-icon-color: #ffffff;\n}";
683
- styleInject(css_248z$V);
685
+ var css_248z$W = ":root {\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\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 --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-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 --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 --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: #f7ebff;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-avatar-background-color: #71347B;\n --ff-avatar-icon-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n}\n\n:root {\n --brand-color: #71347b;\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\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 --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-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(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 --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 --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-dark-variant: #ffffff;\n --avatar-background-color: #71347B;\n --avatar-icon-color: #ffffff;\n}\n\n.ff-light-theme {\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\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 --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-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 --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 --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: #f7ebff;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-avatar-background-color: #71347B;\n --ff-avatar-icon-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n}\n\n.ff-dark-theme {\n --brand-color: #71347b;\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\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 --file-drop-zone-default-fill-color: rgba(113, 52, 123, 0.1019607843);\n --file-drop-zone-default-text-color: #1e161f;\n --file-drop-zone-selected-fill-color: rgba(113, 52, 123, 0.2);\n --file-drop-zone-selected-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(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 --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 --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-dark-variant: #ffffff;\n --avatar-background-color: #71347B;\n --avatar-icon-color: #ffffff;\n}";
686
+ styleInject(css_248z$W);
684
687
 
685
688
  const ThemeContext = /*#__PURE__*/React.createContext(undefined);
686
689
  const ThemeProvider = ({
@@ -728,10 +731,8 @@ const Drawer = ({
728
731
  onCloseIconClick,
729
732
  customHeader,
730
733
  customFooter,
731
- tertiaryButtonProps = {
732
- left: {},
733
- right: {}
734
- },
734
+ leftTertiaryButtonProps = {},
735
+ rightTertiaryButtonProps = {},
735
736
  zIndex = 999
736
737
  }) => {
737
738
  const [isExpanded, setIsExpanded] = React.useState(_isExpanded);
@@ -845,15 +846,17 @@ const Drawer = ({
845
846
  onClick: leftPrimaryButtonProps.onClick,
846
847
  variant: "primary",
847
848
  transparentBackground: true
848
- }), tertiaryButtonProps.left?.label && jsxRuntime.jsx(Button$1, {
849
- ...tertiaryButtonProps.left,
849
+ }), leftTertiaryButtonProps?.label && jsxRuntime.jsx(Button$1, {
850
+ ...leftTertiaryButtonProps,
851
+ onClick: leftTertiaryButtonProps.onClick,
850
852
  variant: "tertiary",
851
853
  transparentBackground: true
852
854
  })]
853
855
  }), jsxRuntime.jsxs("div", {
854
856
  className: "button-container",
855
- children: [tertiaryButtonProps.right?.label && jsxRuntime.jsx(Button$1, {
856
- ...tertiaryButtonProps.right,
857
+ children: [rightTertiaryButtonProps?.label && jsxRuntime.jsx(Button$1, {
858
+ ...rightTertiaryButtonProps,
859
+ onClick: rightTertiaryButtonProps.onClick,
857
860
  variant: "tertiary",
858
861
  transparentBackground: true
859
862
  }), secondaryButtonProps.label && jsxRuntime.jsx(Button$1, {
@@ -874,15 +877,15 @@ const Drawer = ({
874
877
  }), document.body);
875
878
  };
876
879
 
877
- var css_248z$U = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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}\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: 4px;\n}";
880
+ var css_248z$V = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\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-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}\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: 4px;\n}";
881
+ styleInject(css_248z$V);
882
+
883
+ var css_248z$U = "";
878
884
  styleInject(css_248z$U);
879
885
 
880
- var css_248z$T = "";
886
+ var css_248z$T = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.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-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: 6px 12px;\n opacity: 0;\n}\n.ff-tooltip--visible {\n opacity: 1;\n transition: opacity 0.3s;\n}";
881
887
  styleInject(css_248z$T);
882
888
 
883
- var css_248z$S = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-tooltip {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\n font-size: 80px;\n}\n\n.ff-tooltip-container {\n cursor: auto;\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: 6px 12px;\n opacity: 0;\n}\n.ff-tooltip--visible {\n opacity: 1;\n transition: opacity 0.3s;\n}";
884
- styleInject(css_248z$S);
885
-
886
889
  const checkEmpty = value => {
887
890
  // Check for null or undefined
888
891
  if (value == null) return true;
@@ -1054,8 +1057,8 @@ const Tooltip = ({
1054
1057
  });
1055
1058
  };
1056
1059
 
1057
- var css_248z$R = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.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}";
1058
- styleInject(css_248z$R);
1060
+ var css_248z$S = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.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}";
1061
+ styleInject(css_248z$S);
1059
1062
 
1060
1063
  const Typography = ({
1061
1064
  fontWeight = 'regular',
@@ -1144,8 +1147,8 @@ const Accordion = ({
1144
1147
  });
1145
1148
  };
1146
1149
 
1147
- var css_248z$Q = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-multiselect-wrapper .ff-multiselect__main .default-label, .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-more-chip {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8, .ff-multiselect-wrapper .ff-multiselect__main .active-default-label, .ff-multiselect-wrapper .error-text {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\n font-size: 80px;\n}\n\n.ff-multiselect-wrapper {\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 width: 100%;\n height: 32px;\n}\n.ff-multiselect-wrapper .ff-multiselect {\n position: relative;\n padding: 3px;\n border: none;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-multiselect-wrapper .ff-multiselect__main {\n display: flex;\n flex: 1;\n}\n.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-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-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-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 #f1ebf2;\n padding: 0 1px 0 4px;\n gap: 4px;\n border-radius: 15px;\n}\n.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-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label.pr-2 {\n padding: 5px 2px;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-close-icon {\n cursor: pointer;\n}\n.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-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-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input:focus {\n outline: none;\n}\n.ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-more-chip {\n display: flex;\n align-items: center;\n width: 1.2rem;\n font-weight: 600;\n line-height: 16px;\n color: var(--brand-color);\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow {\n transition: transform 0.3s ease;\n transform: rotate(360deg);\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow svg path {\n transition: all 0.3s ease;\n}\n.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-wrapper:hover {\n border: 1px solid var(--tooltip-bg-color);\n}\n.ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--tooltip-bg-color);\n}\n.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-wrapper--with-options {\n height: fit-content;\n}\n.ff-multiselect-wrapper--opened-dropdown {\n border: 1px solid var(--brand-color);\n height: fit-content;\n cursor: default;\n}\n.ff-multiselect-wrapper--opened-dropdown .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--brand-color);\n}\n.ff-multiselect-wrapper--opened-dropdown:hover {\n border: 1px solid var(--brand-color);\n}\n.ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--brand-color);\n}\n.ff-multiselect-wrapper--error {\n border: 1px solid var(--error-light);\n}\n.ff-multiselect-wrapper--error .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--error-light);\n}\n.ff-multiselect-wrapper--error:hover {\n border: 1px solid var(--error-light);\n}\n.ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--error-light);\n}\n.ff-multiselect-wrapper--disabled {\n pointer-events: none;\n border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled:hover {\n border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--multi-select-border);\n}\n.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-wrapper--disabled:hover .ff-select-arrow svg path {\n fill: var(--multi-select-border);\n transition: all 0.3s ease;\n}\n.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-wrapper .error-text {\n position: absolute;\n margin-top: 0.25rem;\n left: 12px;\n color: var(--error-light);\n letter-spacing: 0.5px;\n}";
1148
- styleInject(css_248z$Q);
1150
+ var css_248z$R = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-multiselect-wrapper .ff-multiselect__main .default-label, .ff-multiselect-wrapper .ff-multiselect .ff-multiselect-more-chip {\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-wrapper .ff-multiselect__main .active-default-label, .ff-multiselect-wrapper .error-text {\n font-family: \"Poppins\";\n font-size: 8px;\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-wrapper {\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 width: 100%;\n height: 32px;\n}\n.ff-multiselect-wrapper .ff-multiselect {\n position: relative;\n padding: 3px;\n border: none;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-multiselect-wrapper .ff-multiselect__main {\n display: flex;\n flex: 1;\n}\n.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-wrapper .ff-multiselect__main .ff-required-asterisk {\n color: var(--error-light);\n}\n.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-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-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 #f1ebf2;\n padding: 0 1px 0 4px;\n gap: 4px;\n border-radius: 15px;\n}\n.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-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label.label-padding {\n padding: 5px 2px;\n}\n.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-right: 0px;\n padding-left: 0px;\n}\n.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-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-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input:focus {\n outline: none;\n}\n.ff-multiselect-wrapper .ff-multiselect .ff-multiselect-more-chip {\n display: flex;\n align-items: center;\n width: 1rem;\n font-weight: 600;\n line-height: 16px;\n color: var(--brand-color);\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow {\n transition: transform 0.3s ease;\n transform: rotate(360deg);\n}\n.ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow svg path {\n transition: all 0.3s ease;\n}\n.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-wrapper:hover {\n border: 1px solid var(--tooltip-bg-color);\n}\n.ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--tooltip-bg-color);\n}\n.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-wrapper--with-options {\n height: fit-content;\n}\n.ff-multiselect-wrapper--opened-dropdown {\n border: 1px solid var(--brand-color);\n height: fit-content;\n cursor: default;\n}\n.ff-multiselect-wrapper--opened-dropdown .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--brand-color);\n}\n.ff-multiselect-wrapper--opened-dropdown:hover {\n border: 1px solid var(--brand-color);\n}\n.ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--brand-color);\n}\n.ff-multiselect-wrapper--error {\n border: 1px solid var(--error-light);\n}\n.ff-multiselect-wrapper--error .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--error-light);\n}\n.ff-multiselect-wrapper--error:hover {\n border: 1px solid var(--error-light);\n}\n.ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--error-light);\n}\n.ff-multiselect-wrapper--disabled {\n pointer-events: none;\n border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled:hover {\n border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--multi-select-border);\n}\n.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-wrapper--disabled:hover .ff-select-arrow svg path {\n fill: var(--multi-select-border);\n transition: all 0.3s ease;\n}\n.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-wrapper .error-text {\n position: absolute;\n margin-top: 0.25rem;\n left: 12px;\n color: var(--error-light);\n letter-spacing: 0.5px;\n}";
1151
+ styleInject(css_248z$R);
1149
1152
 
1150
1153
  const dropdownDefaultCSSData$1 = {
1151
1154
  verticalMargin: 4,
@@ -1153,9 +1156,59 @@ const dropdownDefaultCSSData$1 = {
1153
1156
  maxDropdownHeight: 160
1154
1157
  };
1155
1158
 
1156
- var css_248z$P = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\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\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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}\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}";
1159
+ var css_248z$Q = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\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, .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-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}\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}";
1160
+ styleInject(css_248z$Q);
1161
+
1162
+ var css_248z$P = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\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-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: 8px;\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}";
1157
1163
  styleInject(css_248z$P);
1158
1164
 
1165
+ const Checkbox = ({
1166
+ id,
1167
+ name,
1168
+ label,
1169
+ disabled = false,
1170
+ checked: initialChecked = false,
1171
+ partial = false,
1172
+ onChange
1173
+ }) => {
1174
+ const [checked, setChecked] = React.useState(initialChecked);
1175
+ React.useEffect(() => {
1176
+ setChecked(initialChecked);
1177
+ }, [initialChecked]);
1178
+ const handleCheckboxChange = event => {
1179
+ if (!disabled) {
1180
+ setChecked(prev => !prev), onChange?.(event);
1181
+ }
1182
+ };
1183
+ return jsxRuntime.jsxs("label", {
1184
+ className: "ff-checkbox--overlay",
1185
+ htmlFor: id,
1186
+ children: [jsxRuntime.jsx("input", {
1187
+ type: "checkbox",
1188
+ className: "ff-checkbox-input",
1189
+ id: id,
1190
+ name: name,
1191
+ checked: checked,
1192
+ onChange: handleCheckboxChange,
1193
+ disabled: disabled
1194
+ }), jsxRuntime.jsx("span", {
1195
+ className: classNames('ff-checkbox-custom', {
1196
+ 'ff-checkbox-checked': checked,
1197
+ 'ff-storybook-checkbox--partial': partial && !checked
1198
+ }),
1199
+ children: checked && jsxRuntime.jsx(Icon, {
1200
+ name: "tick",
1201
+ height: 6,
1202
+ width: 8,
1203
+ color: "var(--primary-icon-color)"
1204
+ })
1205
+ }), jsxRuntime.jsx(Typography, {
1206
+ as: "span",
1207
+ children: label
1208
+ })]
1209
+ });
1210
+ };
1211
+
1159
1212
  const Dropdown$2 = /*#__PURE__*/React.forwardRef(({
1160
1213
  options,
1161
1214
  handleOptionChange,
@@ -1208,11 +1261,10 @@ const Dropdown$2 = /*#__PURE__*/React.forwardRef(({
1208
1261
  }) : filteredOptions.map(info => jsxRuntime.jsxs("div", {
1209
1262
  role: "option",
1210
1263
  className: `dropdown-option-container`,
1211
- onClick: () => handleOptionChange(info, !info.isChecked),
1212
- children: [jsxRuntime.jsx("input", {
1213
- type: "checkbox",
1264
+ onClick: () => !info?.isDisabled && handleOptionChange(info, !info.isChecked),
1265
+ children: [jsxRuntime.jsx(Checkbox, {
1214
1266
  checked: info.isChecked,
1215
- readOnly: true
1267
+ disabled: info?.isDisabled
1216
1268
  }), jsxRuntime.jsx(Typography, {
1217
1269
  as: "span",
1218
1270
  className: "dropdown-option-label",
@@ -1232,21 +1284,24 @@ const Dropdown$2 = /*#__PURE__*/React.forwardRef(({
1232
1284
 
1233
1285
  const ChipElement = ({
1234
1286
  label,
1235
- onChipCloseClick
1287
+ onChipCloseClick,
1288
+ disableChip
1236
1289
  }) => {
1237
1290
  if (label) {
1238
1291
  return jsxRuntime.jsxs("div", {
1239
1292
  className: "ff-multiselect-chip",
1240
- children: [jsxRuntime.jsxs("span", {
1241
- className: "ff-multiselect-chip-label",
1242
- children: [" ", label]
1243
- }), jsxRuntime.jsx(Icon, {
1244
- color: "#71347b",
1293
+ children: [jsxRuntime.jsx("span", {
1294
+ className: `ff-multiselect-chip-label ${disableChip && 'label-padding'}`,
1295
+ children: jsxRuntime.jsx(Tooltip, {
1296
+ placement: "bottom",
1297
+ title: label?.length > 25 ? label : '',
1298
+ zIndex: 101,
1299
+ children: label?.length > 25 ? label?.slice(0, 25) + '...' : label
1300
+ })
1301
+ }), !disableChip && jsxRuntime.jsx(Icon, {
1245
1302
  className: "ff-multiselect-chip-close-icon",
1246
1303
  onClick: onChipCloseClick,
1247
- name: "close_pill",
1248
- height: 13,
1249
- width: 13
1304
+ name: "close_pill"
1250
1305
  })]
1251
1306
  });
1252
1307
  }
@@ -1266,13 +1321,11 @@ const MultiSelect = ({
1266
1321
  errorMessage = 'Fill this field',
1267
1322
  withSelectButton = false,
1268
1323
  onSelect = () => {},
1269
- displayCount = false
1324
+ displayCount = false,
1325
+ placeholderForSearching = 'Search'
1270
1326
  }) => {
1271
1327
  const [isOpen, setIsOpen] = React.useState(false);
1272
1328
  const [allOptions, setAllOptions] = React.useState(options);
1273
- React.useEffect(() => {
1274
- setAllOptions(options);
1275
- }, [options]);
1276
1329
  const [searchedKeyword, setSearchedKeyword] = React.useState('');
1277
1330
  const [isSelectFocusedOnce, setIsSelectFocusedOnce] = React.useState(false);
1278
1331
  const [inputError, setInputError] = React.useState('');
@@ -1375,8 +1428,17 @@ const MultiSelect = ({
1375
1428
  calculatePosition();
1376
1429
  }
1377
1430
  }, [isOpen, allOptions]);
1431
+ function getScrollbarWidth() {
1432
+ const div = document.createElement('div');
1433
+ div.style.visibility = 'hidden';
1434
+ div.style.overflow = 'scroll';
1435
+ document.body.appendChild(div);
1436
+ const scrollbarWidth = div.offsetWidth - div.clientWidth;
1437
+ document.body.removeChild(div);
1438
+ return scrollbarWidth;
1439
+ }
1378
1440
  const onSelectToggleScroll = isEnabled => {
1379
- const bodyScrollWidth = window.innerWidth - document.body.clientWidth;
1441
+ const bodyScrollWidth = getScrollbarWidth();
1380
1442
  document.body.style.paddingRight = isEnabled ? '' : `${bodyScrollWidth}px`;
1381
1443
  document.body.style.overflow = isEnabled ? '' : 'hidden';
1382
1444
  };
@@ -1399,6 +1461,8 @@ const MultiSelect = ({
1399
1461
  }));
1400
1462
  setAllOptions(initializeOptions);
1401
1463
  }
1464
+ }, [options]);
1465
+ React.useEffect(() => {
1402
1466
  const handleClickAnywhere = event => {
1403
1467
  if (dropdownWrapper.current && inputRef.current && selectWrapper.current && dropdownRef.current && !inputRef.current.contains(event?.target) && !dropdownRef.current.contains(event?.target) && !selectWrapper.current.contains(event?.target)) {
1404
1468
  setInputError('');
@@ -1429,30 +1493,35 @@ const MultiSelect = ({
1429
1493
  onClick: handleClick,
1430
1494
  children: [jsxRuntime.jsxs("div", {
1431
1495
  className: "ff-multiselect__main",
1432
- children: [jsxRuntime.jsx(Typography, {
1496
+ children: [jsxRuntime.jsxs(Typography, {
1433
1497
  as: "span",
1434
1498
  className: classNames({
1435
1499
  'active-default-label': isOpen || selectedOptions?.length || isFieldSkipped && required,
1436
1500
  'default-label': !isOpen && !selectedOptions?.length
1437
1501
  }),
1438
- children: label
1502
+ children: [required && jsxRuntime.jsx("span", {
1503
+ className: "ff-required-asterisk",
1504
+ children: "*"
1505
+ }), label]
1439
1506
  }), jsxRuntime.jsxs("div", {
1440
1507
  className: "ff-multiselect-chip-container",
1441
1508
  children: [displayCount ? jsxRuntime.jsx(jsxRuntime.Fragment, {
1442
1509
  children: selectedOptions.slice(0, maxVisibleChips).map(option => jsxRuntime.jsx(ChipElement, {
1443
1510
  label: option?.label || '',
1444
- onChipCloseClick: e => handleChipCloseClick(option, e)
1511
+ onChipCloseClick: e => handleChipCloseClick(option, e),
1512
+ disableChip: option?.isDisabled || false
1445
1513
  }, option?.label))
1446
1514
  }) : selectedOptions.map(option => jsxRuntime.jsx(ChipElement, {
1447
1515
  label: option?.label || '',
1448
- onChipCloseClick: e => handleChipCloseClick(option, e)
1516
+ onChipCloseClick: e => handleChipCloseClick(option, e),
1517
+ disableChip: option?.isDisabled || false
1449
1518
  }, option?.label)), jsxRuntime.jsx("div", {
1450
1519
  className: "ff-multiselect-input-container",
1451
1520
  children: jsxRuntime.jsx("input", {
1452
1521
  value: searchedKeyword,
1453
1522
  type: type,
1454
1523
  autoComplete: "off",
1455
- placeholder: "search...",
1524
+ placeholder: placeholderForSearching,
1456
1525
  ref: inputRef,
1457
1526
  onChange: handleSearch,
1458
1527
  onKeyDown: handleKeyEnter,
@@ -1462,12 +1531,12 @@ const MultiSelect = ({
1462
1531
  display: isOpen || selectedOptions.length ? 'inherit' : 'none'
1463
1532
  }
1464
1533
  })
1465
- }), hiddenCount > 0 && jsxRuntime.jsxs("div", {
1466
- className: "ff-multiselect-more-chip",
1467
- onClick: toggleDropdown,
1468
- children: ["+", hiddenCount]
1469
1534
  })]
1470
1535
  })]
1536
+ }), hiddenCount > 0 && displayCount && jsxRuntime.jsxs("div", {
1537
+ className: "ff-multiselect-more-chip",
1538
+ onClick: toggleDropdown,
1539
+ children: ["+", hiddenCount]
1471
1540
  }), jsxRuntime.jsx("div", {
1472
1541
  onClick: toggleDropdown,
1473
1542
  className: "ff-multiselect__toggle",
@@ -1500,7 +1569,7 @@ const MultiSelect = ({
1500
1569
  });
1501
1570
  };
1502
1571
 
1503
- var css_248z$O = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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}";
1572
+ var css_248z$O = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\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-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}";
1504
1573
  styleInject(css_248z$O);
1505
1574
 
1506
1575
  const Toaster = ({
@@ -1731,7 +1800,7 @@ const Toggle = ({
1731
1800
  });
1732
1801
  };
1733
1802
 
1734
- var css_248z$L = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-chip-wrapper .ff-default-chip-style {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-chip-wrapper .ff-default-chip-style--custom {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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}";
1803
+ var css_248z$L = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.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-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}";
1735
1804
  styleInject(css_248z$L);
1736
1805
 
1737
1806
  const Chip = ({
@@ -1761,7 +1830,7 @@ const Chip = ({
1761
1830
  });
1762
1831
  };
1763
1832
 
1764
- var css_248z$K = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-input-container .ff-input, .ff-input-container .ff-input-label-container {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8, .ff-input-container:focus-within .ff-input-label-container, .ff-input-container:focus-within .ff-input::placeholder, .ff-input-container:focus-within .ff-input-label-container::placeholder, .ff-input-container .ff-input-message, .ff-input-container--float .ff-input-label-container {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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: 18px;\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-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-hover-border-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: -6px;\n background-color: var(--input-label-bg-color);\n line-height: 12px;\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--primary {\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: 12px;\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: -6px;\n background-color: var(--input-label-bg-color);\n line-height: 12px;\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}";
1833
+ var css_248z$K = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\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, .ff-input-container:focus-within .ff-input-label-container, .ff-input-container:focus-within .ff-input::placeholder, .ff-input-container:focus-within .ff-input-label-container::placeholder, .ff-input-container .ff-input-message, .ff-input-container--float .ff-input-label-container {\n font-family: \"Poppins\";\n font-size: 8px;\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: 18px;\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-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-hover-border-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: -6px;\n background-color: var(--input-label-bg-color);\n line-height: 12px;\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--primary {\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: 12px;\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: -6px;\n background-color: var(--input-label-bg-color);\n line-height: 12px;\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}";
1765
1834
  styleInject(css_248z$K);
1766
1835
 
1767
1836
  const Input = ({
@@ -1826,7 +1895,6 @@ const Input = ({
1826
1895
  onChange: onChange,
1827
1896
  onFocus: onFocus,
1828
1897
  onBlur: onBlur,
1829
- required: required,
1830
1898
  autoComplete: autoComplete,
1831
1899
  min: minValue,
1832
1900
  max: maxValue,
@@ -1840,7 +1908,7 @@ const Input = ({
1840
1908
  });
1841
1909
  };
1842
1910
 
1843
- var css_248z$J = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8, .ff-radial-chart-container svg text {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\n font-size: 80px;\n}\n\n.ff-radial-chart-container {\n cursor: pointer;\n}\n.ff-radial-chart-container svg text {\n font-size: var(--fontSize) !important;\n font-weight: 400;\n}";
1911
+ var css_248z$J = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\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, .ff-radial-chart-container svg text {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-radial-chart-container {\n cursor: pointer;\n}\n.ff-radial-chart-container svg text {\n font-size: var(--fontSize) !important;\n font-weight: 400;\n}";
1844
1912
  styleInject(css_248z$J);
1845
1913
 
1846
1914
  const useColorMappings$1 = () => React.useMemo(() => {
@@ -1983,7 +2051,7 @@ const RadialChart = ({
1983
2051
  });
1984
2052
  };
1985
2053
 
1986
- var css_248z$I = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\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\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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}";
2054
+ var css_248z$I = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.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-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}";
1987
2055
  styleInject(css_248z$I);
1988
2056
 
1989
2057
  const ExpandableMenu = ({
@@ -2073,7 +2141,7 @@ const useClickOutside = (ref, callback, ignoreRefs = []) => {
2073
2141
  }, [ref, callback, ignoreRefs]);
2074
2142
  };
2075
2143
 
2076
- var css_248z$H = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\n font-size: 80px;\n}\n\n.ff-select-dropdown-wrapper .ff-select-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}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper::-webkit-scrollbar-track {\n background-color: transparent;\n border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper .ff-select-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-select-dropdown-wrapper .ff-select-options-wrapper .ff-select-option:hover {\n border-color: var(--ff-select-background-color);\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper .ff-select-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}";
2144
+ var css_248z$H = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\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-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-dropdown-wrapper .ff-select-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}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper::-webkit-scrollbar-track {\n background-color: transparent;\n border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper .ff-select-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-select-dropdown-wrapper .ff-select-options-wrapper .ff-select-option:hover {\n border-color: var(--ff-select-background-color);\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-options-wrapper .ff-select-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}";
2077
2145
  styleInject(css_248z$H);
2078
2146
 
2079
2147
  const ffid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => ((char === 'x' ? Math.random() * 16 : Math.random() * 16 & 0x3 | 0x8) | 0).toString(16));
@@ -2170,7 +2238,7 @@ const Dropdown$1 = ({
2170
2238
  });
2171
2239
  };
2172
2240
 
2173
- var css_248z$G = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-select-wrapper .ff-select, .ff-select-wrapper .ff-select-input {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8, .ff-select-wrapper .ff-select-fieldset .ff-select-legend, .ff-select-wrapper .ff-select-label--active {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\n font-size: 80px;\n}\n\n.ff-select-wrapper {\n position: relative;\n}\n.ff-select-wrapper .ff-select-input {\n cursor: pointer;\n}\n.ff-select-wrapper .ff-select {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n min-height: 32px;\n min-width: 100px;\n display: flex;\n align-items: end;\n position: relative;\n}\n.ff-select-wrapper .ff-select-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-select-wrapper .ff-select-fieldset--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-select-wrapper .ff-select-fieldset--no-label {\n padding: 30px 0px 0px 8px;\n}\n.ff-select-wrapper .ff-select-fieldset--default {\n opacity: 0;\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-fieldset--active {\n opacity: 1;\n border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select-fieldset--option {\n opacity: 1;\n}\n.ff-select-wrapper .ff-select-fieldset--no-border {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-fieldset--error {\n border-color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend {\n padding: 0 2px;\n letter-spacing: 0.5px;\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-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-select-wrapper .ff-select-fieldset .ff-select-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-select-brand-color);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--option {\n opacity: 1;\n color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--error {\n color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--required {\n margin-right: 2px;\n}\n.ff-select-wrapper .ff-select-input {\n position: absolute;\n top: 6px;\n right: auto;\n bottom: auto;\n left: auto;\n width: 100%;\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}\n.ff-select-wrapper .ff-select-input:hover ~ .ff-select-label {\n color: var(--ff-select-text-hover-color);\n}\n.ff-select-wrapper .ff-select-input--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-select-wrapper .ff-select-input--default {\n opacity: 1;\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-input--default:hover {\n border-color: var(--ff-select-text-color);\n}\n.ff-select-wrapper .ff-select-input--default:hover ~ .ff-select-fieldset--option {\n border-color: var(--ff-select-text-color);\n}\n.ff-select-wrapper .ff-select-input--default:hover ~ .ff-select-fieldset--option .ff-select-legend--option {\n color: var(--ff-select-text-color);\n}\n.ff-select-wrapper .ff-select-input--no-label {\n min-height: calc(100% - 2px);\n margin-top: 0px;\n top: 0px;\n}\n.ff-select-wrapper .ff-select-input--active {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--active:hover {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--no-border {\n border: none;\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--no-border:hover {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--no-border:hover ~ .ff-select-fieldset--no-border {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--disable {\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-input--disable:hover {\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-input--disable:hover ~ .ff-select-label--default {\n color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select-input--error {\n border-color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-input--error:hover {\n border-color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-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-select-wrapper .ff-select-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-select-default-color);\n transform: translateY(-50%);\n}\n.ff-select-wrapper .ff-select-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-select-wrapper .ff-select-label--required {\n margin-right: 2px;\n}\n.ff-select-wrapper .ff-select-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-select-wrapper .ff-select-arrow--no-label {\n top: 50%;\n}\n.ff-select-wrapper .ff-select-arrow--down {\n transform: rotateX(0deg) translateY(-50%);\n z-index: 101;\n}\n.ff-select-wrapper-error-text {\n position: absolute;\n top: auto;\n right: auto;\n bottom: -14px;\n left: 12px;\n white-space: nowrap;\n}";
2241
+ var css_248z$G = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-select-wrapper .ff-select, .ff-select-wrapper .ff-select-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-select-wrapper .ff-select-fieldset .ff-select-legend, .ff-select-wrapper .ff-select-label--active {\n font-family: \"Poppins\";\n font-size: 8px;\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 position: relative;\n}\n.ff-select-wrapper .ff-select-input {\n cursor: pointer;\n}\n.ff-select-wrapper .ff-select {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n min-height: 32px;\n min-width: 100px;\n display: flex;\n align-items: end;\n position: relative;\n}\n.ff-select-wrapper .ff-select-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-select-wrapper .ff-select-fieldset--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-select-wrapper .ff-select-fieldset--no-label {\n padding: 30px 0px 0px 8px;\n}\n.ff-select-wrapper .ff-select-fieldset--default {\n opacity: 0;\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-fieldset--active {\n opacity: 1;\n border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select-fieldset--option {\n opacity: 1;\n}\n.ff-select-wrapper .ff-select-fieldset--no-border {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-fieldset--error {\n border-color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend {\n padding: 0 2px;\n letter-spacing: 0.5px;\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-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-select-wrapper .ff-select-fieldset .ff-select-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-select-brand-color);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--option {\n opacity: 1;\n color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--error {\n color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-fieldset .ff-select-legend--required {\n margin-right: 2px;\n}\n.ff-select-wrapper .ff-select-input {\n position: absolute;\n top: 6px;\n right: auto;\n bottom: auto;\n left: auto;\n width: 100%;\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}\n.ff-select-wrapper .ff-select-input:hover ~ .ff-select-label {\n color: var(--ff-select-text-hover-color);\n}\n.ff-select-wrapper .ff-select-input--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-select-wrapper .ff-select-input--default {\n opacity: 1;\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-input--default:hover {\n border-color: var(--ff-select-text-color);\n}\n.ff-select-wrapper .ff-select-input--default:hover ~ .ff-select-fieldset--option {\n border-color: var(--ff-select-text-color);\n}\n.ff-select-wrapper .ff-select-input--default:hover ~ .ff-select-fieldset--option .ff-select-legend--option {\n color: var(--ff-select-text-color);\n}\n.ff-select-wrapper .ff-select-input--no-label {\n min-height: calc(100% - 2px);\n margin-top: 0px;\n top: 0px;\n}\n.ff-select-wrapper .ff-select-input--active {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--active:hover {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--no-border {\n border: none;\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--no-border:hover {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--no-border:hover ~ .ff-select-fieldset--no-border {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-input--disable {\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-input--disable:hover {\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select-input--disable:hover ~ .ff-select-label--default {\n color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select-input--error {\n border-color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-input--error:hover {\n border-color: var(--error-light);\n}\n.ff-select-wrapper .ff-select-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-select-wrapper .ff-select-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-select-default-color);\n transform: translateY(-50%);\n}\n.ff-select-wrapper .ff-select-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-select-wrapper .ff-select-label--required {\n margin-right: 2px;\n}\n.ff-select-wrapper .ff-select-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-select-wrapper .ff-select-arrow--no-label {\n top: 50%;\n}\n.ff-select-wrapper .ff-select-arrow--down {\n transform: rotateX(0deg) translateY(-50%);\n z-index: 101;\n}\n.ff-select-wrapper-error-text {\n position: absolute;\n top: auto;\n right: auto;\n bottom: -14px;\n left: 12px;\n white-space: nowrap;\n}";
2174
2242
  styleInject(css_248z$G);
2175
2243
 
2176
2244
  const portalPosition = {
@@ -2443,6 +2511,11 @@ const Select$1 = ({
2443
2511
  handleSelectAction('SHOW_ERROR');
2444
2512
  }
2445
2513
  }, []);
2514
+ React.useEffect(() => {
2515
+ if (!checkEmpty(selectedOption.label)) {
2516
+ onSelectOptionSelector(selectedOption);
2517
+ }
2518
+ }, [selectedOption]);
2446
2519
  const applyActiveOptionClasses = !isInputFocused && Boolean(option);
2447
2520
  return jsxRuntime.jsxs("div", {
2448
2521
  className: classNames(`ff-select-wrapper`),
@@ -2493,7 +2566,7 @@ const Select$1 = ({
2493
2566
  'ff-select-arrow--no-label': !showLabel
2494
2567
  }),
2495
2568
  color: iconColor
2496
- }), jsxRuntime.jsx("fieldset", {
2569
+ }), (!checkEmpty(option) || showOptions) && jsxRuntime.jsx("fieldset", {
2497
2570
  className: classNames('ff-select-fieldset', {
2498
2571
  'ff-select-fieldset--no-label': !showLabel,
2499
2572
  'ff-select-fieldset--default': !isInputFocused,
@@ -2538,7 +2611,7 @@ const Select$1 = ({
2538
2611
  });
2539
2612
  };
2540
2613
 
2541
- var css_248z$F = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\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\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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}";
2614
+ var css_248z$F = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.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-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}";
2542
2615
  styleInject(css_248z$F);
2543
2616
 
2544
2617
  const truncateText = (text, maxLength) => {
@@ -2643,7 +2716,7 @@ const StatusButton = ({
2643
2716
  });
2644
2717
  };
2645
2718
 
2646
- var css_248z$D = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-menu-option-container .ff-option-card .ff-options {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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.ff-menu-option-container .ff-option-card {\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 z-index: 100000;\n white-space: nowrap;\n}\n.ff-menu-option-container .ff-option-card .ff-options {\n cursor: pointer;\n border-radius: 4px;\n display: flex;\n align-items: center;\n padding: 8px;\n line-height: 16px;\n gap: 8px;\n}\n.ff-menu-option-container .ff-option-card .ff-options:hover {\n background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-option-card .ff-options label {\n cursor: pointer;\n}\n.ff-menu-option-container .ff-option-card .ff-disable-option {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-menu-option-container .ff-option-card .ff-disable-option label {\n cursor: no-drop;\n}";
2719
+ var css_248z$D = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-menu-option-container .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-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.ff-menu-option-container .ff-option-card {\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}\n.ff-menu-option-container .ff-option-card .ff-options {\n cursor: pointer;\n border-radius: 4px;\n display: flex;\n align-items: center;\n padding: 8px;\n line-height: 16px;\n gap: 8px;\n}\n.ff-menu-option-container .ff-option-card .ff-options:hover {\n background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-option-card .ff-options label {\n cursor: pointer;\n}\n.ff-menu-option-container .ff-option-card .ff-disable-option {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-menu-option-container .ff-option-card .ff-disable-option label {\n cursor: no-drop;\n}";
2647
2720
  styleInject(css_248z$D);
2648
2721
 
2649
2722
  const Option$2 = ({
@@ -2690,7 +2763,8 @@ const MenuOption = ({
2690
2763
  iconButtonSize = 20,
2691
2764
  iconButtonBorderRadius = 7,
2692
2765
  iconSize = 16,
2693
- variant = 'light'
2766
+ variant = 'light',
2767
+ zIndex = 1000
2694
2768
  }) => {
2695
2769
  const [isClicked, setIsClicked] = React.useState(false);
2696
2770
  const menuRef = React.useRef(null);
@@ -2708,23 +2782,27 @@ const MenuOption = ({
2708
2782
  case 'top':
2709
2783
  return {
2710
2784
  bottom: '100%',
2711
- left: -2
2785
+ left: -2,
2786
+ zIndex
2712
2787
  };
2713
2788
  case 'left':
2714
2789
  return {
2715
2790
  top: -2,
2716
- right: '100%'
2791
+ right: '100%',
2792
+ zIndex
2717
2793
  };
2718
2794
  case 'right':
2719
2795
  return {
2720
2796
  top: -2,
2721
- left: '100%'
2797
+ left: '100%',
2798
+ zIndex
2722
2799
  };
2723
2800
  case 'down':
2724
2801
  default:
2725
2802
  return {
2726
2803
  top: '100%',
2727
- left: -2
2804
+ left: -2,
2805
+ zIndex
2728
2806
  };
2729
2807
  }
2730
2808
  };
@@ -2769,7 +2847,7 @@ const MenuOption = ({
2769
2847
  });
2770
2848
  };
2771
2849
 
2772
- var css_248z$C = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-table tbody tr td {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd, .ff-table thead tr th {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\n font-size: 80px;\n}\n\n.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 text-transform: uppercase;\n}\n.ff-table thead tr th:first-child div {\n align-items: center;\n}\n.ff-table thead tr th:first-child div .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:first-child div {\n align-items: center;\n}\n.ff-table tbody tr td:first-child div .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}";
2850
+ var css_248z$C = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-table tbody tr td {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd, .ff-table thead tr th {\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-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-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}";
2773
2851
  styleInject(css_248z$C);
2774
2852
 
2775
2853
  const isFunction$2 = functionToCheck => {
@@ -2818,56 +2896,6 @@ const prepareData = (dataObj, columnObj) => {
2818
2896
  }
2819
2897
  };
2820
2898
 
2821
- var css_248z$B = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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: 8px;\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}";
2822
- styleInject(css_248z$B);
2823
-
2824
- const Checkbox = ({
2825
- id,
2826
- name,
2827
- label,
2828
- disabled = false,
2829
- checked: initialChecked = false,
2830
- partial = false,
2831
- onChange
2832
- }) => {
2833
- const [checked, setChecked] = React.useState(initialChecked);
2834
- React.useEffect(() => {
2835
- setChecked(initialChecked);
2836
- }, [initialChecked]);
2837
- const handleCheckboxChange = event => {
2838
- if (!disabled) {
2839
- setChecked(prev => !prev), onChange?.(event);
2840
- }
2841
- };
2842
- return jsxRuntime.jsxs("label", {
2843
- className: "ff-checkbox--overlay",
2844
- htmlFor: id,
2845
- children: [jsxRuntime.jsx("input", {
2846
- type: "checkbox",
2847
- className: "ff-checkbox-input",
2848
- id: id,
2849
- name: name,
2850
- checked: checked,
2851
- onChange: handleCheckboxChange,
2852
- disabled: disabled
2853
- }), jsxRuntime.jsx("span", {
2854
- className: classNames('ff-checkbox-custom', {
2855
- 'ff-checkbox-checked': checked,
2856
- 'ff-storybook-checkbox--partial': partial && !checked
2857
- }),
2858
- children: checked && jsxRuntime.jsx(Icon, {
2859
- name: "tick",
2860
- height: 6,
2861
- width: 8,
2862
- color: "var(--primary-icon-color)"
2863
- })
2864
- }), jsxRuntime.jsx(Typography, {
2865
- as: "span",
2866
- children: label
2867
- })]
2868
- });
2869
- };
2870
-
2871
2899
  // import NoData from '../NoData/NoData';
2872
2900
  const Table$1 = ({
2873
2901
  data = [],
@@ -2938,6 +2966,7 @@ const Table$1 = ({
2938
2966
  width: column?.width
2939
2967
  },
2940
2968
  children: jsxRuntime.jsxs("div", {
2969
+ className: 'ff-label-checkbox-container',
2941
2970
  children: [index === 0 && withCheckbox && jsxRuntime.jsx("span", {
2942
2971
  className: "ff-table-checkbox",
2943
2972
  children: jsxRuntime.jsx(Checkbox, {
@@ -2968,6 +2997,7 @@ const Table$1 = ({
2968
2997
  children: jsxRuntime.jsxs(Typography, {
2969
2998
  as: "div",
2970
2999
  color: tableDataTextColor,
3000
+ className: 'ff-data-checkbox-container',
2971
3001
  children: [i === 0 && withCheckbox && jsxRuntime.jsx("span", {
2972
3002
  className: "ff-table-checkbox",
2973
3003
  children: jsxRuntime.jsx(Checkbox, {
@@ -2993,11 +3023,11 @@ const Table$1 = ({
2993
3023
  });
2994
3024
  };
2995
3025
 
2996
- var css_248z$A = ".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}";
2997
- styleInject(css_248z$A);
3026
+ var css_248z$B = ".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}";
3027
+ styleInject(css_248z$B);
2998
3028
 
2999
- var css_248z$z = ".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}";
3000
- styleInject(css_248z$z);
3029
+ var css_248z$A = ".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}";
3030
+ styleInject(css_248z$A);
3001
3031
 
3002
3032
  const ArrowsButton = ({
3003
3033
  direction,
@@ -3134,8 +3164,8 @@ const AddButton = ({
3134
3164
  });
3135
3165
  };
3136
3166
 
3137
- var css_248z$y = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\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\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL, .ff-donut-chart-svg-container svg text:nth-of-type(2) {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\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\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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}";
3138
- styleInject(css_248z$y);
3167
+ var css_248z$z = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-donut-chart-svg-container svg text:nth-of-type(1), .ff-status-item {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL, .ff-donut-chart-svg-container svg text:nth-of-type(2) {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-donut-chart-svg-container svg text:nth-of-type(3) {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-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}";
3168
+ styleInject(css_248z$z);
3139
3169
 
3140
3170
  const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
3141
3171
  const startX = x + radius * Math.cos(startAngle);
@@ -3487,8 +3517,8 @@ const useFileDropzone = options => {
3487
3517
  };
3488
3518
  };
3489
3519
 
3490
- var css_248z$x = ".ff-file-dropzone-wrapper {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n width: 640px;\n height: 188px;\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}\n.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 width: 640px;\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: 60%;\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}\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}";
3491
- styleInject(css_248z$x);
3520
+ var css_248z$y = ".ff-file-dropzone-wrapper {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n width: 640px;\n height: 188px;\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}\n.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 width: 640px;\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: 60%;\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}\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}";
3521
+ styleInject(css_248z$y);
3492
3522
 
3493
3523
  const Dropzone = ({
3494
3524
  icon,
@@ -8260,13 +8290,14 @@ const Forms = ({
8260
8290
  handleSubmit
8261
8291
  } = methods;
8262
8292
  return jsxRuntime.jsx("form", {
8293
+ id: id,
8263
8294
  onSubmit: handleSubmit(onSubmit),
8264
8295
  children: children(methods)
8265
8296
  });
8266
8297
  };
8267
8298
 
8268
- var css_248z$w = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\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\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8, .ff-input-with-dropdown-container .ff-helper-text {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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-floating-label-input-container .ff-floating-label {\n position: absolute;\n z-index: 9;\n color: var(--input-default-border-color);\n top: 7px;\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 top: 1px;\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--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:hover .ff-input-with-dropdown {\n border-color: var(--input-hover-border-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 .ff-floating-label {\n color: var(--input-hover-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-label--filled {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-label--disabled {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .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(--input-hover-border-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: -6px;\n background-color: var(--input-label-bg-color);\n padding: 0px 2px;\n color: var(--input-active-text-color);\n line-height: 12px;\n font-size: 8px !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: -6px;\n background-color: var(--input-label-bg-color);\n padding: 0px 2px;\n line-height: 12px;\n font-size: 8px !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}";
8269
- styleInject(css_248z$w);
8299
+ var css_248z$x = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\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, .ff-input-with-dropdown-container .ff-helper-text {\n font-family: \"Poppins\";\n font-size: 8px;\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-floating-label-input-container .ff-floating-label {\n position: absolute;\n z-index: 9;\n color: var(--input-default-border-color);\n top: 7px;\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 top: 1px;\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--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:hover .ff-input-with-dropdown {\n border-color: var(--input-hover-border-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 .ff-floating-label {\n color: var(--input-hover-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-label--filled {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-label--disabled {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .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(--input-hover-border-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: -6px;\n background-color: var(--input-label-bg-color);\n padding: 0px 2px;\n color: var(--input-active-text-color);\n line-height: 12px;\n font-size: 8px !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: -6px;\n background-color: var(--input-label-bg-color);\n padding: 0px 2px;\n line-height: 12px;\n font-size: 8px !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}";
8300
+ styleInject(css_248z$x);
8270
8301
 
8271
8302
  const InputWithDropdown = ({
8272
8303
  name = '',
@@ -8346,8 +8377,8 @@ const InputWithDropdown = ({
8346
8377
  });
8347
8378
  };
8348
8379
 
8349
- var css_248z$v = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-radio-wrapper .ff-radio {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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 opacity: 0.5;\n}";
8350
- styleInject(css_248z$v);
8380
+ var css_248z$w = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.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-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 opacity: 0.5;\n}";
8381
+ styleInject(css_248z$w);
8351
8382
 
8352
8383
  const RadioButton = ({
8353
8384
  label,
@@ -8384,8 +8415,8 @@ const RadioButton = ({
8384
8415
  });
8385
8416
  };
8386
8417
 
8387
- var css_248z$u = ".ff-radio-group {\n display: flex;\n flex-direction: row;\n gap: 12px;\n}";
8388
- styleInject(css_248z$u);
8418
+ var css_248z$v = ".ff-radio-group {\n display: flex;\n flex-direction: row;\n gap: 12px;\n}";
8419
+ styleInject(css_248z$v);
8389
8420
 
8390
8421
  const RadioGroup = ({
8391
8422
  options,
@@ -8410,8 +8441,8 @@ const RadioGroup = ({
8410
8441
  });
8411
8442
  };
8412
8443
 
8413
- var css_248z$t = ".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: 5;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top {\n bottom: 100%;\n left: 30px;\n border-width: 0 10px 10px 10px;\n padding: 0 3px 0 0;\n border-color: transparent transparent var(--ff-mini-modal-border) transparent;\n filter: drop-shadow(0 -1px 1px var(--ff-mini-modal-arrow-shadow));\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 4px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: -0.5px;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left {\n left: -15px;\n border-width: 10px 10px 10px 0;\n border-color: transparent var(--ff-mini-modal-border) transparent transparent;\n filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));\n padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left::before {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: 0;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom {\n top: 100%;\n left: 30px;\n border-width: 10px 10px 0 10px;\n border-color: var(--ff-mini-modal-border) transparent transparent transparent;\n filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));\n padding: 0 3px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: -2px;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right {\n right: -10px;\n top: 66px;\n border-width: 10px 0 10px 10px;\n border-color: transparent transparent transparent var(--ff-mini-modal-border);\n filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));\n padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: 0;\n left: -2px;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-top-arrow {\n top: 10%;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-middle-arrow {\n top: 45%;\n}\n.ff-mini-edit-modal-container .wrapped-div {\n width: 35px;\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 z-index: 10;\n border-radius: 7px 7px 0 0;\n box-shadow: 0px -3px 4px 0px var(--ff-mini-modal-box-shadow);\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 z-index: 2;\n padding: 4px;\n width: 100%;\n border-radius: 7px;\n margin: 0 0 0 -5px;\n height: 100%;\n box-shadow: 0px 4px 8px var(--ff-mini-modal-arrow-shadow);\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 .modal-content {\n max-height: 250px;\n overflow-y: auto;\n}\n.ff-mini-edit-modal-container .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}";
8414
- styleInject(css_248z$t);
8444
+ var css_248z$u = ".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: 5;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top {\n bottom: 100%;\n left: 30px;\n border-width: 0 10px 10px 10px;\n padding: 0 3px 0 0;\n border-color: transparent transparent var(--ff-mini-modal-border) transparent;\n filter: drop-shadow(0 -1px 1px var(--ff-mini-modal-arrow-shadow));\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 4px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: -0.5px;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left {\n left: -15px;\n border-width: 10px 10px 10px 0;\n border-color: transparent var(--ff-mini-modal-border) transparent transparent;\n filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));\n padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left::before {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: 0;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom {\n top: 100%;\n left: 30px;\n border-width: 10px 10px 0 10px;\n border-color: var(--ff-mini-modal-border) transparent transparent transparent;\n filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));\n padding: 0 3px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: -2px;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right {\n right: -10px;\n top: 66px;\n border-width: 10px 0 10px 10px;\n border-color: transparent transparent transparent var(--ff-mini-modal-border);\n filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));\n padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: 0;\n left: -2px;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-top-arrow {\n top: 10%;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-middle-arrow {\n top: 45%;\n}\n.ff-mini-edit-modal-container .wrapped-div {\n width: 35px;\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 z-index: 10;\n border-radius: 7px 7px 0 0;\n box-shadow: 0px -3px 4px 0px var(--ff-mini-modal-box-shadow);\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 z-index: 2;\n padding: 4px;\n width: 100%;\n border-radius: 7px;\n margin: 0 0 0 -5px;\n height: 100%;\n box-shadow: 0px 4px 8px var(--ff-mini-modal-arrow-shadow);\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 .modal-content {\n max-height: 250px;\n overflow-y: auto;\n}\n.ff-mini-edit-modal-container .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}";
8445
+ styleInject(css_248z$u);
8415
8446
 
8416
8447
  const MiniModal = /*#__PURE__*/React.forwardRef(({
8417
8448
  anchorRef,
@@ -8628,8 +8659,8 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
8628
8659
  }), document.body);
8629
8660
  });
8630
8661
 
8631
- var css_248z$s = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm, .ff-tree-container {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\n font-size: 80px;\n}\n\n.ff-tree-container {\n width: 100%;\n font-size: 12px;\n color: var(--brand-color);\n transition: all 0.3s ease;\n}\n.ff-tree-container table {\n border-collapse: collapse;\n width: 100%;\n text-align: left;\n}\n.ff-tree-container .ff-toggle-arrow-icon {\n height: 12px;\n width: 12px;\n margin-left: 8px;\n display: grid;\n place-items: center;\n transform: rotate(0deg);\n}\n.ff-tree-container .ff-toggle-arrow-icon svg path {\n fill: var(--brand-color);\n}\n.ff-tree-container .ff-toggle-arrow-icon.ff-expanded {\n transform: rotate(0deg);\n}\n.ff-tree-container .ff-toggle-arrow-icon.ff-collapsed {\n transform: rotate(-90deg);\n}\n.ff-tree-container th,\n.ff-tree-container td {\n padding: 0 8px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ff-tree-container th {\n vertical-align: middle;\n height: 32px;\n background-color: var(--slider-table-color);\n color: var(--text-color);\n font-weight: 600;\n text-transform: uppercase;\n}\n.ff-tree-container tr .ff-action-section {\n display: none;\n}\n.ff-tree-container tr:hover {\n background-color: var(--hover-color);\n}\n.ff-tree-container tr:hover .ff-title-action-container {\n display: flex;\n}\n.ff-tree-container .ff-title-container {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-tree-container .ff-title-container .ff-toggle-folder {\n display: flex;\n cursor: pointer;\n}\n.ff-tree-container .ff-title-container.ff-folder {\n font-weight: 600;\n}\n.ff-tree-container .ff-title-container.ff-file {\n font-weight: 400;\n}\n.ff-tree-container .ff-title-container .ff-title {\n display: flex;\n gap: 4px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: 400;\n cursor: pointer;\n}\n.ff-tree-container .ff-title-container .ff-title .ff-title-label {\n display: flex;\n align-items: center;\n}\n.ff-tree-container .ff-title-container .ff-title .ff-hover-icon {\n display: none;\n position: absolute;\n right: 10px;\n}\n.ff-tree-container .ff-node-li {\n position: relative;\n --indent-size: 16px;\n --total-children-height: var(--node-height);\n}\n.ff-tree-container .ff-node-li td:first-child {\n padding-left: calc(var(--level) * var(--indent-size));\n height: 32px;\n}\n.ff-tree-container .ff-node-li::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: calc(var(--level) * var(--indent-size) - 4px);\n width: 1px;\n height: calc(var(--total-children-height));\n background-color: var(--tree-connecting-lines-color);\n z-index: 1;\n}\n.ff-tree-container .ff-node-li::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: calc(var(--level) * var(--indent-size) - 4px);\n width: 12px;\n height: 1px;\n background-color: var(--tree-connecting-lines-color);\n z-index: 1;\n}\n.ff-tree-container .ff-node-li.ff-is-last::before {\n height: calc(var(--node-height) / 2);\n}\n.ff-tree-container .ff-node-li[style*=\"--level: 0\"]::before, .ff-tree-container .ff-node-li[style*=\"--level: 0\"]::after {\n content: none;\n}\n\n.ff-title-action-container {\n display: none;\n align-items: center;\n}";
8632
- styleInject(css_248z$s);
8662
+ var css_248z$t = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-tree-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-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-tree-container {\n width: 100%;\n font-size: 12px;\n color: var(--brand-color);\n transition: all 0.3s ease;\n}\n.ff-tree-container table {\n border-collapse: collapse;\n width: 100%;\n text-align: left;\n}\n.ff-tree-container .ff-toggle-arrow-icon {\n height: 12px;\n width: 12px;\n margin-left: 8px;\n display: grid;\n place-items: center;\n transform: rotate(0deg);\n}\n.ff-tree-container .ff-toggle-arrow-icon svg path {\n fill: var(--brand-color);\n}\n.ff-tree-container .ff-toggle-arrow-icon.ff-expanded {\n transform: rotate(0deg);\n}\n.ff-tree-container .ff-toggle-arrow-icon.ff-collapsed {\n transform: rotate(-90deg);\n}\n.ff-tree-container th,\n.ff-tree-container td {\n padding: 0 8px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}\n.ff-tree-container th {\n vertical-align: middle;\n height: 32px;\n background-color: var(--slider-table-color);\n color: var(--text-color);\n font-weight: 600;\n text-transform: uppercase;\n}\n.ff-tree-container tr .ff-action-section {\n display: none;\n}\n.ff-tree-container tr:hover {\n background-color: var(--hover-color);\n}\n.ff-tree-container tr:hover .ff-title-action-container {\n display: flex;\n}\n.ff-tree-container .ff-title-container {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-tree-container .ff-title-container .ff-toggle-folder {\n display: flex;\n cursor: pointer;\n}\n.ff-tree-container .ff-title-container.ff-folder {\n font-weight: 600;\n}\n.ff-tree-container .ff-title-container.ff-file {\n font-weight: 400;\n}\n.ff-tree-container .ff-title-container .ff-title {\n display: flex;\n gap: 4px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: 400;\n cursor: pointer;\n}\n.ff-tree-container .ff-title-container .ff-title .ff-title-label {\n display: flex;\n align-items: center;\n}\n.ff-tree-container .ff-title-container .ff-title .ff-hover-icon {\n display: none;\n position: absolute;\n right: 10px;\n}\n.ff-tree-container .ff-node-li {\n position: relative;\n --indent-size: 18px;\n --total-children-height: var(--node-height);\n}\n.ff-tree-container .ff-node-li td:first-child {\n padding-left: calc(var(--level) * var(--indent-size));\n height: 32px;\n}\n.ff-tree-container .ff-node-li::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: calc(var(--level) * var(--indent-size) - 4px);\n width: 1px;\n height: calc(var(--total-children-height));\n background-color: var(--tree-connecting-lines-color);\n z-index: 1;\n}\n.ff-tree-container .ff-node-li::after {\n content: \"\";\n position: absolute;\n top: 50%;\n left: calc(var(--level) * var(--indent-size) - 4px);\n width: 12px;\n height: 1px;\n background-color: var(--tree-connecting-lines-color);\n z-index: 1;\n}\n.ff-tree-container .ff-node-li.ff-is-last::before {\n height: calc(var(--node-height) / 2);\n}\n.ff-tree-container .ff-node-li[style*=\"--level: 0\"]::before, .ff-tree-container .ff-node-li[style*=\"--level: 0\"]::after {\n content: none;\n}\n\n.ff-title-action-container {\n display: none;\n align-items: center;\n}";
8663
+ styleInject(css_248z$t);
8633
8664
 
8634
8665
  const TableTree = ({
8635
8666
  columnsData,
@@ -8726,11 +8757,7 @@ const TableTree = ({
8726
8757
  onClick: handleToggleExpand,
8727
8758
  children: node.folder && jsxRuntime.jsx("span", {
8728
8759
  className: `ff-toggle-arrow-icon ${isExpanded ? 'ff-expanded' : 'ff-collapsed'}`,
8729
- children: jsxRuntime.jsx(Icon, {
8730
- name: "arrows_down_icon",
8731
- height: 12,
8732
- width: 12
8733
- })
8760
+ children: jsxRuntime.jsx(SvgArrowsDownIcon, {})
8734
8761
  })
8735
8762
  }), jsxRuntime.jsxs("div", {
8736
8763
  className: "ff-title",
@@ -8812,8 +8839,8 @@ const TableTree = ({
8812
8839
  });
8813
8840
  };
8814
8841
 
8815
- var css_248z$r = ":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 --button-close-color: button-close-color;\n --button-bg-color: button-bg-color;\n}\n\n@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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}";
8816
- styleInject(css_248z$r);
8842
+ var css_248z$s = ":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 --button-close-color: button-close-color;\n --button-bg-color: button-bg-color;\n}\n\n@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\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-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}";
8843
+ styleInject(css_248z$s);
8817
8844
 
8818
8845
  const Tabs = ({
8819
8846
  variant = 'default',
@@ -8858,8 +8885,8 @@ const Tabs = ({
8858
8885
  });
8859
8886
  };
8860
8887
 
8861
- var css_248z$q = ".ff-highlight-bg {\n background-color: var(--text-bg-highlight);\n}";
8862
- styleInject(css_248z$q);
8888
+ var css_248z$r = ".ff-highlight-bg {\n background-color: var(--text-bg-highlight);\n}";
8889
+ styleInject(css_248z$r);
8863
8890
 
8864
8891
  // Function to escape special characters in the search term
8865
8892
  const escapeRegExp = text => {
@@ -8882,8 +8909,8 @@ const HighlightText = ({
8882
8909
  });
8883
8910
  };
8884
8911
 
8885
- var css_248z$p = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs, .ff-search-container .ff-search-input {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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: 1px solid var(--border-color);\n border-radius: 4px;\n padding: 4px;\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}\n.ff-search-container.expanded .ff-vertical-line {\n height: 8px;\n width: 1px;\n position: relative;\n right: 2px;\n border-radius: 1px;\n margin: 8px 0px;\n background-color: var(--border-color);\n}\n.ff-search-container.expanded .ff-search-input {\n visibility: visible;\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 padding: 4px;\n border: none;\n cursor: default;\n}\n.ff-search-container.expanded .ff-search-clear-button {\n display: grid;\n place-items: center;\n cursor: pointer;\n width: 22px;\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}";
8886
- styleInject(css_248z$p);
8912
+ var css_248z$q = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.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-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: 1px solid var(--border-color);\n border-radius: 4px;\n padding: 4px;\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}\n.ff-search-container.expanded .ff-vertical-line {\n height: 8px;\n width: 1px;\n position: relative;\n right: 2px;\n border-radius: 1px;\n margin: 8px 0px;\n background-color: var(--border-color);\n}\n.ff-search-container.expanded .ff-search-input {\n visibility: visible;\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 padding: 4px;\n border: none;\n cursor: default;\n}\n.ff-search-container.expanded .ff-search-clear-button {\n display: grid;\n place-items: center;\n cursor: pointer;\n width: 22px;\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}";
8913
+ styleInject(css_248z$q);
8887
8914
 
8888
8915
  const Search = ({
8889
8916
  placeholder = 'Search',
@@ -16891,8 +16918,8 @@ const TimePicker = ({
16891
16918
  });
16892
16919
  };
16893
16920
 
16894
- var css_248z$o = "@import 'react-day-picker/style.css';\n@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\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\", sans-serif;\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\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\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\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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\", sans-serif;\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 transform: translate(50%, 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 -2px 2px 0 var(--ff-mini-modal-box-shadow);\n padding: 4px;\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}\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-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}";
16895
- styleInject(css_248z$o);
16921
+ var css_248z$p = "@import 'react-day-picker/style.css';\n@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\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-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 transform: translate(50%, 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 -2px 2px 0 var(--ff-mini-modal-box-shadow);\n padding: 4px;\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}\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-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}";
16922
+ styleInject(css_248z$p);
16896
16923
 
16897
16924
  const CustomDatePicker = ({
16898
16925
  minDate,
@@ -17412,8 +17439,8 @@ const StateDropdown = ({
17412
17439
  });
17413
17440
  };
17414
17441
 
17415
- var css_248z$n = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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(--secondary-icon-color);\n padding: 2px 8px 2px 2px;\n border: 1px solid transparent;\n}\n.ff-plus-icon .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 .button-icon .ff-icon-color path {\n color: var(--secondary-icon-color);\n}\n.ff-plus-icon .icon-name {\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 {\n border: 1px solid var(--secondary-icon-color);\n background-color: var(--hover-color);\n}\n.ff-plus-icon:hover .icon-name {\n font-weight: 600;\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 .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(--secondary-icon-color);\n}\n.ff-plus-icon:hover .button-icon .ff-icon-color path {\n color: var(--primary-icon-color);\n}";
17416
- styleInject(css_248z$n);
17442
+ var css_248z$o = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\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-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(--secondary-icon-color);\n padding: 2px 8px 2px 2px;\n border: 1px solid transparent;\n}\n.ff-plus-icon .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 .button-icon .ff-icon-color path {\n color: var(--secondary-icon-color);\n}\n.ff-plus-icon .icon-name {\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 {\n border: 1px solid var(--secondary-icon-color);\n background-color: var(--hover-color);\n}\n.ff-plus-icon:hover .icon-name {\n font-weight: 600;\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 .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(--secondary-icon-color);\n}\n.ff-plus-icon:hover .button-icon .ff-icon-color path {\n color: var(--primary-icon-color);\n}";
17443
+ styleInject(css_248z$o);
17417
17444
 
17418
17445
  const IconButton = ({
17419
17446
  label,
@@ -17441,8 +17468,8 @@ const IconButton = ({
17441
17468
  });
17442
17469
  };
17443
17470
 
17444
- var css_248z$m = ".ff-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--background-modal-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-content {\n background: var(--ff-mini-modal-border);\n position: relative;\n max-width: 100%;\n padding: 8px;\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: 12px;\n border-bottom-right-radius: 12px;\n}\n\n.modal-top-border {\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\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 border-radius: 0 0 12px 12px;\n display: flex;\n flex-direction: row;\n justify-content: end;\n align-items: center;\n gap: 8px;\n padding: 4px 8px;\n}";
17445
- styleInject(css_248z$m);
17471
+ var css_248z$n = ".ff-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--background-modal-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-content {\n background: var(--ff-mini-modal-border);\n position: relative;\n max-width: 100%;\n padding: 8px;\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: 12px;\n border-bottom-right-radius: 12px;\n}\n\n.modal-top-border {\n border-top-left-radius: 12px;\n border-top-right-radius: 12px;\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 border-radius: 0 0 12px 12px;\n display: flex;\n flex-direction: row;\n justify-content: end;\n align-items: center;\n gap: 8px;\n padding: 4px 8px;\n}";
17472
+ styleInject(css_248z$n);
17446
17473
 
17447
17474
  const Modal = ({
17448
17475
  isOpen,
@@ -22128,8 +22155,8 @@ const DragAndDrop = {
22128
22155
  DNDUtilities
22129
22156
  };
22130
22157
 
22131
- var css_248z$l = ".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-family: Arial, sans-serif;\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}";
22132
- styleInject(css_248z$l);
22158
+ var css_248z$m = ".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-family: Arial, sans-serif;\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}";
22159
+ styleInject(css_248z$m);
22133
22160
 
22134
22161
  const VariableInput = ({
22135
22162
  type = 'url',
@@ -22407,8 +22434,8 @@ const VariableInput = ({
22407
22434
  });
22408
22435
  };
22409
22436
 
22410
- var css_248z$k = ".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 background-color: var(--secondary-icon-color);\n color: var(--expandable-menu-default-bg);\n height: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 10px;\n padding: 4px;\n}\n.ff-all-project .ff-all-project-dropdown .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-dropdown {\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-dropdown .ff-search {\n margin-bottom: 1px;\n}\n.ff-all-project .ff-dropdown .ff-search input {\n height: 30px;\n width: inherit;\n border-radius: 4px;\n border-style: none;\n}\n.ff-all-project .ff-dropdown .ff-search input::placeholder {\n padding-left: 28px;\n font-size: 8px;\n line-height: 12px;\n}\n.ff-all-project .ff-dropdown .ff-search span {\n position: absolute;\n top: 11px;\n left: 8px;\n}\n.ff-all-project .ff-dropdown .scroll {\n max-height: 124px;\n overflow-y: scroll;\n}\n.ff-all-project .ff-dropdown .option-card .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-dropdown .option-card .projects-options .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-dropdown .option-card .all-projects-option {\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n border-radius: 4px;\n}";
22411
- styleInject(css_248z$k);
22437
+ var css_248z$l = ".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 background-color: var(--secondary-icon-color);\n color: var(--expandable-menu-default-bg);\n height: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 10px;\n padding: 4px;\n}\n.ff-all-project .ff-all-project-dropdown .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-dropdown {\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-dropdown .ff-search {\n margin-bottom: 1px;\n}\n.ff-all-project .ff-dropdown .ff-search input {\n height: 30px;\n width: inherit;\n border-radius: 4px;\n border-style: none;\n}\n.ff-all-project .ff-dropdown .ff-search input::placeholder {\n padding-left: 28px;\n font-size: 8px;\n line-height: 12px;\n}\n.ff-all-project .ff-dropdown .ff-search span {\n position: absolute;\n top: 11px;\n left: 8px;\n}\n.ff-all-project .ff-dropdown .all-projects-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 border-radius: 4px;\n}\n.ff-all-project .ff-dropdown .scroll {\n max-height: 90px;\n overflow-y: scroll;\n}\n.ff-all-project .ff-dropdown .scroll::-webkit-scrollbar {\n width: 2px;\n}\n.ff-all-project .ff-dropdown .scroll::-webkit-scrollbar-thumb {\n background: var(--primary-icon-color);\n border-radius: 2px;\n}\n.ff-all-project .ff-dropdown .option-card .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-dropdown .option-card .projects-options .projects-icons {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n height: 24px;\n width: 24px;\n}";
22438
+ styleInject(css_248z$l);
22412
22439
 
22413
22440
  const AllProjectsDropdown = ({
22414
22441
  onClick = () => {},
@@ -22442,7 +22469,6 @@ const AllProjectsDropdown = ({
22442
22469
  return jsxRuntime.jsxs("div", {
22443
22470
  className: classNames('ff-all-project'),
22444
22471
  children: [jsxRuntime.jsxs("div", {
22445
- onClick: handleShowOption,
22446
22472
  className: classNames('ff-all-project-dropdown'),
22447
22473
  children: [jsxRuntime.jsx(Typography, {
22448
22474
  as: 'div',
@@ -22453,6 +22479,7 @@ const AllProjectsDropdown = ({
22453
22479
  children: truncateText(selectedOptions?.label, 12)
22454
22480
  }), jsxRuntime.jsx("div", {
22455
22481
  className: classNames('label-icon'),
22482
+ onClick: handleShowOption,
22456
22483
  children: jsxRuntime.jsx(Icon, {
22457
22484
  name: "arrows_down_icon",
22458
22485
  color: "var(--primary-icon-color)",
@@ -22475,18 +22502,39 @@ const AllProjectsDropdown = ({
22475
22502
  placeholder: `${search ? 'Search Project' : ''}`,
22476
22503
  onClick: () => handleInput()
22477
22504
  })]
22505
+ }), jsxRuntime.jsxs("div", {
22506
+ onClick: () => handleSelectOption({
22507
+ label: 'All Projects',
22508
+ value: 'All Projects',
22509
+ iconName: 'all_projects'
22510
+ }),
22511
+ className: classNames('projects-options', 'all-projects-option'),
22512
+ children: [jsxRuntime.jsx("div", {
22513
+ className: classNames('projects-icons'),
22514
+ children: jsxRuntime.jsx(Icon, {
22515
+ name: 'all_projects',
22516
+ height: 12,
22517
+ width: 12,
22518
+ color: 'var(--secondary-icon-color)'
22519
+ })
22520
+ }), jsxRuntime.jsx(Typography, {
22521
+ as: 'div',
22522
+ lineHeight: '30px',
22523
+ color: 'var(--secondary-icon-color)',
22524
+ children: 'All Projects'
22525
+ })]
22478
22526
  }), jsxRuntime.jsx("div", {
22479
22527
  className: classNames('option-card', `${options.length > 4 ? 'scroll' : ''}`),
22480
22528
  children: options.map((option, index) => jsxRuntime.jsxs("div", {
22481
22529
  onClick: () => handleSelectOption(option),
22482
- className: classNames('projects-options', `${option.label === 'All Projects' ? 'all-projects-option' : ''}`),
22530
+ className: classNames('projects-options'),
22483
22531
  children: [jsxRuntime.jsx("div", {
22484
22532
  className: classNames('projects-icons'),
22485
22533
  children: jsxRuntime.jsx(Icon, {
22486
22534
  name: option.iconName,
22487
22535
  height: 12,
22488
22536
  width: 12,
22489
- color: option.label === 'All Projects' ? 'var(--secondary-icon-color)' : 'var(--primary-icon-color);'
22537
+ color: 'var(--primary-icon-color)'
22490
22538
  })
22491
22539
  }), jsxRuntime.jsx(Typography, {
22492
22540
  as: 'div',
@@ -22499,8 +22547,8 @@ const AllProjectsDropdown = ({
22499
22547
  });
22500
22548
  };
22501
22549
 
22502
- var css_248z$j = ".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 border: 10px solid;\n font-size: 14px;\n font-weight: 400;\n pointer-events: none;\n opacity: 0.8;\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}";
22503
- styleInject(css_248z$j);
22550
+ var css_248z$k = ".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 border: 10px solid;\n font-size: 14px;\n font-weight: 400;\n pointer-events: none;\n opacity: 0.8;\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}";
22551
+ styleInject(css_248z$k);
22504
22552
 
22505
22553
  const calculateArc$1 = ({
22506
22554
  x,
@@ -22655,8 +22703,8 @@ const PieChart = ({
22655
22703
  });
22656
22704
  };
22657
22705
 
22658
- var css_248z$i = ".ff-app-header {\n display: flex;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n}\n.ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.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}\n.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 .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 .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 .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 .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}\n.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}\n.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 background-color: var(--brand-color);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.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 .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 .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 .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 .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 .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 background: var(--ff-app-header-submenu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.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 .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: 10%;\n width: 90%;\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 .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 .ff-app-header-nav-bar .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header .ff-app-header-left-content,\n.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}";
22659
- styleInject(css_248z$i);
22706
+ var css_248z$j = ".ff-app-header {\n display: flex;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n}\n.ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.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}\n.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 .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 .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 .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 .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}\n.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}\n.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 background-color: var(--brand-color);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.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 .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 .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 .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 .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 .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 background: var(--ff-app-header-submenu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.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 .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: 10%;\n width: 90%;\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 .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 .ff-app-header-nav-bar .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header .ff-app-header-nav-bar .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header .ff-app-header-left-content,\n.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}";
22707
+ styleInject(css_248z$j);
22660
22708
 
22661
22709
  const AppHeader = ({
22662
22710
  logoIconName = 'fireflink_icon',
@@ -22770,8 +22818,8 @@ const AppHeader = ({
22770
22818
  });
22771
22819
  };
22772
22820
 
22773
- var css_248z$h = ".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}";
22774
- styleInject(css_248z$h);
22821
+ var css_248z$i = ".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}";
22822
+ styleInject(css_248z$i);
22775
22823
 
22776
22824
  const Paper = ({
22777
22825
  children,
@@ -22787,8 +22835,8 @@ const Paper = ({
22787
22835
  });
22788
22836
  };
22789
22837
 
22790
- var css_248z$g = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.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\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\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\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\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\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\n font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n display: flex;\n flex-direction: column;\n align-items: center;\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: 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}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n display: grid;\n gap: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.numberLegend {\n grid-template-columns: repeat(3, 1fr);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.numberLegend .ff-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend {\n grid-template-columns: repeat(2, 1fr);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend .ff-legend-item {\n display: flex;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend .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.pillLegend .ff-legend-item .ff-legend-key {\n margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.memoryLegend {\n grid-template-columns: repeat(2, 1fr);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.memoryLegend .ff-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n padding-right: 10px;\n border-right: 1px solid var(--border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.memoryLegend .ff-legend-item:nth-child(2n) {\n border-right: none;\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}";
22791
- styleInject(css_248z$g);
22838
+ var css_248z$h = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.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-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 flex-direction: column;\n align-items: center;\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: 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}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n display: grid;\n gap: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.numberLegend {\n grid-template-columns: repeat(3, 1fr);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.numberLegend .ff-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend {\n grid-template-columns: repeat(2, 1fr);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend .ff-legend-item {\n display: flex;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend .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.pillLegend .ff-legend-item .ff-legend-key {\n margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.memoryLegend {\n grid-template-columns: repeat(2, 1fr);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.memoryLegend .ff-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n padding-right: 10px;\n border-right: 1px solid var(--border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.memoryLegend .ff-legend-item:nth-child(2n) {\n border-right: none;\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}";
22839
+ styleInject(css_248z$h);
22792
22840
 
22793
22841
  const calculateArc = (x, y, radius, startAngle, endAngle) => {
22794
22842
  const startX = x + radius * Math.cos(startAngle);
@@ -24771,8 +24819,8 @@ var RecaptchaWrapper = makeAsyncScript(getURL, {
24771
24819
  } : {}
24772
24820
  })(ReCAPTCHA);
24773
24821
 
24774
- var css_248z$f = ".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}";
24775
- styleInject(css_248z$f);
24822
+ var css_248z$g = ".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}";
24823
+ styleInject(css_248z$g);
24776
24824
 
24777
24825
  const Recaptcha = /*#__PURE__*/React.forwardRef(({
24778
24826
  onVerify,
@@ -24815,8 +24863,8 @@ const nlpDropdownDefaultCSSData = {
24815
24863
  dropDownWrapperPadding: 0
24816
24864
  };
24817
24865
 
24818
- var css_248z$e = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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}";
24819
- styleInject(css_248z$e);
24866
+ var css_248z$f = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\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-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}";
24867
+ styleInject(css_248z$f);
24820
24868
 
24821
24869
  const NlpDropdown = ({
24822
24870
  onSelectBlur,
@@ -24980,8 +25028,8 @@ const NlpDropdown = ({
24980
25028
  });
24981
25029
  };
24982
25030
 
24983
- var css_248z$d = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\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\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\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\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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}";
24984
- styleInject(css_248z$d);
25031
+ var css_248z$e = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.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-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}";
25032
+ styleInject(css_248z$e);
24985
25033
 
24986
25034
  const nlpInputReducer = (state, action) => {
24987
25035
  switch (action.type) {
@@ -25292,8 +25340,8 @@ const NlpInput = ({
25292
25340
  });
25293
25341
  };
25294
25342
 
25295
- var css_248z$c = ".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.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}";
25296
- styleInject(css_248z$c);
25343
+ var css_248z$d = ".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.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}";
25344
+ styleInject(css_248z$d);
25297
25345
 
25298
25346
  const IconRadioGroup = ({
25299
25347
  items,
@@ -25343,8 +25391,8 @@ const IconRadioGroup = ({
25343
25391
  });
25344
25392
  };
25345
25393
 
25346
- var css_248z$b = ".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 border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-around;\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}\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-right: 8px;\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: 10px;\n}";
25347
- styleInject(css_248z$b);
25394
+ var css_248z$c = ".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 border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-around;\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}\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-right: 8px;\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: 10px;\n}";
25395
+ styleInject(css_248z$c);
25348
25396
 
25349
25397
  const MachineInputField = /*#__PURE__*/React.forwardRef(({
25350
25398
  width = '',
@@ -25397,11 +25445,11 @@ const MachineInputField = /*#__PURE__*/React.forwardRef(({
25397
25445
  });
25398
25446
  MachineInputField.displayName = 'MachineInputField';
25399
25447
 
25400
- var css_248z$a = ".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 position: relative;\n display: flex;\n align-items: center;\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 width: 40px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n margin-top: 4px;\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}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .branch-button {\n margin-top: 4px;\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 position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n top: 50%;\n left: -2px;\n z-index: 102;\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: 0px;\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 margin-top: 4px;\n padding: 0px 4px;\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}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper .ff-scope-text {\n margin-left: 4px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper {\n display: flex;\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: 0px 12px 0px 4px;\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}";
25401
- styleInject(css_248z$a);
25448
+ var css_248z$b = ".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 position: relative;\n display: flex;\n align-items: center;\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 width: 40px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n margin-top: 4px;\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}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .branch-button {\n margin-top: 4px;\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 position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n top: 50%;\n left: -2px;\n z-index: 102;\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: 0px;\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 margin-top: 4px;\n padding: 0px 4px;\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}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper .ff-scope-text {\n margin-left: 4px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper {\n display: flex;\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: 0px 12px 0px 4px;\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}";
25449
+ styleInject(css_248z$b);
25402
25450
 
25403
- var css_248z$9 = ".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-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-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: -4px;\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: 0px;\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% - 4px);\n right: -1px;\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% - 4px);\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: 0px 0px 16px 0px;\n}";
25404
- styleInject(css_248z$9);
25451
+ var css_248z$a = ".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-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-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: -4px;\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: 0px;\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% - 4px);\n right: -1px;\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% - 4px);\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: 0px 0px 16px 0px;\n}";
25452
+ styleInject(css_248z$a);
25405
25453
 
25406
25454
  const Branches = ({
25407
25455
  machineInstances,
@@ -25548,8 +25596,8 @@ const Branches = ({
25548
25596
  });
25549
25597
  };
25550
25598
 
25551
- var css_248z$8 = ".ff-connecting-branch-grid-wrapper {\n box-sizing: border-box;\n}";
25552
- styleInject(css_248z$8);
25599
+ var css_248z$9 = ".ff-connecting-branch-grid-wrapper {\n box-sizing: border-box;\n}";
25600
+ styleInject(css_248z$9);
25553
25601
 
25554
25602
  const ConnectingBranches = ({
25555
25603
  machineBranchInstances,
@@ -25589,8 +25637,8 @@ const ConnectingBranches = ({
25589
25637
  });
25590
25638
  };
25591
25639
 
25592
- var css_248z$7 = ".ff-datalist-modal-header-wrapper,\n.ff-datalist-modal-child-wrapper,\n.ff-datalist-modal-footer-wrapper {\n margin: 0 8px;\n}\n\n.ff-datalist-modal-header-wrapper {\n width: 255px;\n border-bottom: 1px solid var(--ff-connecting-branch-modal-border);\n display: flex;\n align-items: center;\n}\n\n.ff-datalist-modal-child-wrapper .variable {\n margin: 8px 0;\n}\n\n.ff-datalist-modal-footer-wrapper {\n display: flex;\n justify-content: space-between;\n border-top: 1px solid var(--ff-connecting-branch-modal-border);\n}\n.ff-datalist-modal-footer-wrapper .datalist-button-wrapper {\n display: flex;\n gap: 10px;\n margin-top: 4px;\n justify-content: flex-end;\n}";
25593
- styleInject(css_248z$7);
25640
+ var css_248z$8 = ".ff-datalist-modal-header-wrapper,\n.ff-datalist-modal-child-wrapper,\n.ff-datalist-modal-footer-wrapper {\n margin: 0 8px;\n}\n\n.ff-datalist-modal-header-wrapper {\n width: 255px;\n border-bottom: 1px solid var(--ff-connecting-branch-modal-border);\n display: flex;\n align-items: center;\n}\n\n.ff-datalist-modal-child-wrapper .variable {\n margin: 8px 0;\n}\n\n.ff-datalist-modal-footer-wrapper {\n display: flex;\n justify-content: space-between;\n border-top: 1px solid var(--ff-connecting-branch-modal-border);\n}\n.ff-datalist-modal-footer-wrapper .datalist-button-wrapper {\n display: flex;\n gap: 10px;\n margin-top: 4px;\n justify-content: flex-end;\n}";
25641
+ styleInject(css_248z$8);
25594
25642
 
25595
25643
  const DatasetListModal = /*#__PURE__*/React.forwardRef((props, ref) => {
25596
25644
  const selectOptions = [{
@@ -25667,8 +25715,8 @@ const DatasetListModal = /*#__PURE__*/React.forwardRef((props, ref) => {
25667
25715
  });
25668
25716
  });
25669
25717
 
25670
- var css_248z$6 = ".ff-connecting-datalist-modal-header-wrapper,\n.ff-connecting-modal-child-wrapper {\n width: 534px;\n padding: 0 4px;\n}\n\n.ff-connecting-datalist-modal-header-wrapper {\n border-bottom: 1px solid var(--ff-connecting-branch-modal-border);\n margin-bottom: 4px;\n}\n\n.ff-connecting-modal-child-wrapper .ff-branch-select-input-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.ff-connecting-modal-child-wrapper .ff-branch-select-input-wrapper .ff-select-browser {\n width: 263px;\n}\n.ff-connecting-modal-child-wrapper .ff-branch-select-input-wrapper .ff-branch-input-wrapper {\n display: flex;\n align-items: flex-end;\n height: 38px;\n}\n.ff-connecting-modal-child-wrapper .ff-branch-select-input-wrapper .ff-branch-input-wrapper .ff-input-browser {\n width: 245px;\n}\n\n.ff-connecting-modal-footer-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 8px;\n margin-top: 8px;\n border-top: 1px solid var(--ff-connecting-branch-modal-border);\n}\n.ff-connecting-modal-footer-wrapper .ff-branch-toggle-wrapper,\n.ff-connecting-modal-footer-wrapper .ff-datalist-button-wrapper {\n display: flex;\n gap: 8px;\n}\n.ff-connecting-modal-footer-wrapper .ff-branch-toggle-wrapper {\n gap: 4px;\n}";
25671
- styleInject(css_248z$6);
25718
+ var css_248z$7 = ".ff-connecting-datalist-modal-header-wrapper,\n.ff-connecting-modal-child-wrapper {\n width: 534px;\n padding: 0 4px;\n}\n\n.ff-connecting-datalist-modal-header-wrapper {\n border-bottom: 1px solid var(--ff-connecting-branch-modal-border);\n margin-bottom: 4px;\n}\n\n.ff-connecting-modal-child-wrapper .ff-branch-select-input-wrapper {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.ff-connecting-modal-child-wrapper .ff-branch-select-input-wrapper .ff-select-browser {\n width: 263px;\n}\n.ff-connecting-modal-child-wrapper .ff-branch-select-input-wrapper .ff-branch-input-wrapper {\n display: flex;\n align-items: flex-end;\n height: 38px;\n}\n.ff-connecting-modal-child-wrapper .ff-branch-select-input-wrapper .ff-branch-input-wrapper .ff-input-browser {\n width: 245px;\n}\n\n.ff-connecting-modal-footer-wrapper {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 8px;\n margin-top: 8px;\n border-top: 1px solid var(--ff-connecting-branch-modal-border);\n}\n.ff-connecting-modal-footer-wrapper .ff-branch-toggle-wrapper,\n.ff-connecting-modal-footer-wrapper .ff-datalist-button-wrapper {\n display: flex;\n gap: 8px;\n}\n.ff-connecting-modal-footer-wrapper .ff-branch-toggle-wrapper {\n gap: 4px;\n}";
25719
+ styleInject(css_248z$7);
25672
25720
 
25673
25721
  const AddBrowserModal = /*#__PURE__*/React.forwardRef((props, ref) => {
25674
25722
  // TODO: WILL BE REMOVE IN THE FUTURE
@@ -25931,8 +25979,8 @@ const SequentialConnectingBranch = ({
25931
25979
  });
25932
25980
  };
25933
25981
 
25934
- var css_248z$5 = ".ff-input-field {\n display: none;\n}\n\n.ff-attachment-files {\n padding: 9px;\n display: flex;\n align-items: center;\n gap: 4px;\n}";
25935
- styleInject(css_248z$5);
25982
+ var css_248z$6 = ".ff-input-field {\n display: none;\n}\n\n.ff-attachment-files {\n padding: 9px;\n display: flex;\n align-items: center;\n gap: 4px;\n}";
25983
+ styleInject(css_248z$6);
25936
25984
 
25937
25985
  const AttachmentButton = ({
25938
25986
  label,
@@ -26030,13 +26078,33 @@ const Toastify = () => {
26030
26078
  toastMessage: ''
26031
26079
  });
26032
26080
  const timeoutRef = React.useRef(null);
26033
- openToast = (variant, message) => {
26081
+ openToast = (variant, arg1, arg2) => {
26034
26082
  // Clear the previous timeout if it exists
26035
26083
  if (timeoutRef.current) {
26036
26084
  clearTimeout(timeoutRef.current);
26037
26085
  timeoutRef.current = null;
26038
26086
  }
26039
- const title = variant === 'danger' ? 'Error!' : variant.charAt(0).toUpperCase() + variant.slice(1);
26087
+ // Set the title and message based on the arguments
26088
+ let title = '';
26089
+ let message = '';
26090
+ // Function to format message
26091
+ const formatMessage = input => {
26092
+ if (input && typeof input === 'object') {
26093
+ return JSON.stringify(input, null, 2);
26094
+ } else if (typeof input === 'function') {
26095
+ return input.toString();
26096
+ }
26097
+ return String(input);
26098
+ };
26099
+ // If arg2 exists, use it as the message
26100
+ if (arg2 !== undefined) {
26101
+ title = formatMessage(arg1);
26102
+ message = formatMessage(arg2);
26103
+ } else {
26104
+ title = formatMessage(arg1);
26105
+ message = '';
26106
+ }
26107
+ const formattedTitle = title.charAt(0).toUpperCase() + title.slice(1);
26040
26108
  // Close the existing toast if open, and then immediately show the new one
26041
26109
  setToastProps(prev => ({
26042
26110
  ...prev,
@@ -26046,7 +26114,7 @@ const Toastify = () => {
26046
26114
  setToastProps({
26047
26115
  isOpen: true,
26048
26116
  variant,
26049
- toastTitle: `${title}!`,
26117
+ toastTitle: formattedTitle,
26050
26118
  toastMessage: message
26051
26119
  });
26052
26120
  }, 10);
@@ -26066,14 +26134,14 @@ const Toastify = () => {
26066
26134
  };
26067
26135
  // Utility to trigger toast messages outside of the Toastify component
26068
26136
  const toast = {
26069
- success: message => openToast('success', message),
26070
- error: message => openToast('danger', message),
26071
- warning: message => openToast('warning', message),
26072
- info: message => openToast('info', message)
26137
+ success: (arg1, arg2) => openToast('success', arg1, arg2),
26138
+ error: (arg1, arg2) => openToast('danger', arg1, arg2),
26139
+ warning: (arg1, arg2) => openToast('warning', arg1, arg2),
26140
+ info: (arg1, arg2) => openToast('info', arg1, arg2)
26073
26141
  };
26074
26142
 
26075
- var css_248z$4 = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\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\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\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\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\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 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}";
26076
- styleInject(css_248z$4);
26143
+ var css_248z$5 = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.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-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 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}";
26144
+ styleInject(css_248z$5);
26077
26145
 
26078
26146
  const getErrorMessage = (inputValue, text, customError) => {
26079
26147
  if (inputValue === text) {
@@ -26244,53 +26312,6 @@ const LabelEditTextField = ({
26244
26312
  });
26245
26313
  };
26246
26314
 
26247
- const ExcelSheetBar = ({
26248
- fileDetails,
26249
- handleSheetChange,
26250
- selectedSheet
26251
- }) => {
26252
- const [activeTabId, setActiveTabId] = React.useState('0');
26253
- const tabsData = fileDetails.sheetNames.map((name, index) => ({
26254
- label: name,
26255
- components: jsxRuntime.jsx("div", {
26256
- className: `tab-request ${name === selectedSheet.name ? 'active font-bold' : ''}`,
26257
- onClick: () => handleSheetChange(name, index),
26258
- children: name
26259
- }, name),
26260
- id: index.toString()
26261
- }));
26262
- return jsxRuntime.jsx(jsxRuntime.Fragment, {
26263
- children: jsxRuntime.jsx(Container, {
26264
- fluid: true,
26265
- children: jsxRuntime.jsxs(Row$1, {
26266
- children: [jsxRuntime.jsx(Col, {
26267
- size: 0,
26268
- children: jsxRuntime.jsx(Tooltip, {
26269
- title: "Add Sheet",
26270
- placement: "top",
26271
- children: jsxRuntime.jsx(Icon, {
26272
- className: "cursor-pointer ml-1",
26273
- hoverEffect: true,
26274
- name: "plus_icon",
26275
- height: 20,
26276
- width: 20
26277
- })
26278
- })
26279
- }), jsxRuntime.jsx(Col, {
26280
- size: 11,
26281
- children: jsxRuntime.jsx(Tabs, {
26282
- tabsData: tabsData,
26283
- activeTabId: activeTabId,
26284
- onTabClick: tabId => {
26285
- setActiveTabId(tabId);
26286
- }
26287
- })
26288
- })]
26289
- })
26290
- })
26291
- });
26292
- };
26293
-
26294
26315
  const SET_DATA = 'SET_DATA';
26295
26316
  const SET_CREATE_FORMULA_PARSER = 'SET_CREATE_FORMULA_PARSER';
26296
26317
  const SELECT_ENTIRE_ROW = 'SELECT_ENTIRE_ROW';
@@ -26308,14 +26329,17 @@ const EDIT = 'EDIT';
26308
26329
  const VIEW = 'VIEW';
26309
26330
  const CLEAR = 'CLEAR';
26310
26331
  const BLUR = 'BLUR';
26311
- const KEY_PRESS = 'KEY_PRESS';
26312
26332
  const KEY_DOWN = 'KEY_DOWN';
26313
26333
  const DRAG_START = 'DRAG_START';
26314
26334
  const DRAG_END = 'DRAG_END';
26315
26335
  const COMMIT = 'COMMIT';
26316
26336
  const BOLD = 'BOLD';
26317
26337
  const ITALIC = 'ITALIC';
26318
- const UNDERLINE = 'UNDERLINE';
26338
+ const UNDERLINE_TYPE = 'UNDERLINE_TYPE';
26339
+ const FONT_FAMILY = 'FONT_FAMILY';
26340
+ const FONT_SIZE = 'FONT_SIZE';
26341
+ const TEXT_ALIGN = 'TEXT_ALIGN';
26342
+ const BORDER_TYPE = 'BORDER_TYPE';
26319
26343
  const COLOR = 'COLOR';
26320
26344
  const BACKGROUND_COLOR = 'BACKGROUND_COLOR';
26321
26345
  const FORMATE_PAINTER = 'FORMATE_PAINTER';
@@ -26335,11 +26359,50 @@ function italic(data) {
26335
26359
  }
26336
26360
  };
26337
26361
  }
26338
- function underline(data) {
26362
+ function borderType(data, value, color) {
26339
26363
  return {
26340
- type: UNDERLINE,
26364
+ type: BORDER_TYPE,
26341
26365
  payload: {
26342
- data
26366
+ data,
26367
+ value,
26368
+ color
26369
+ }
26370
+ };
26371
+ }
26372
+ function underlineType(data, value, active) {
26373
+ return {
26374
+ type: UNDERLINE_TYPE,
26375
+ payload: {
26376
+ data,
26377
+ value,
26378
+ active
26379
+ }
26380
+ };
26381
+ }
26382
+ function fontSize(data, value) {
26383
+ return {
26384
+ type: FONT_SIZE,
26385
+ payload: {
26386
+ data,
26387
+ value
26388
+ }
26389
+ };
26390
+ }
26391
+ function fontFamily(data, value) {
26392
+ return {
26393
+ type: FONT_FAMILY,
26394
+ payload: {
26395
+ data,
26396
+ value
26397
+ }
26398
+ };
26399
+ }
26400
+ function textAlign(data, value) {
26401
+ return {
26402
+ type: TEXT_ALIGN,
26403
+ payload: {
26404
+ data,
26405
+ value
26343
26406
  }
26344
26407
  };
26345
26408
  }
@@ -26458,14 +26521,6 @@ function paste(data) {
26458
26521
  }
26459
26522
  };
26460
26523
  }
26461
- function keyPress(event) {
26462
- return {
26463
- type: KEY_PRESS,
26464
- payload: {
26465
- event
26466
- }
26467
- };
26468
- }
26469
26524
  function keyDown(event) {
26470
26525
  return {
26471
26526
  type: KEY_DOWN,
@@ -48384,435 +48439,10 @@ function getFormulaComputedValue(value, point, formulaParser) {
48384
48439
  }
48385
48440
  }
48386
48441
 
48387
- const INITIAL_STATE = {
48388
- active: null,
48389
- mode: 'view',
48390
- rowDimensions: {},
48391
- columnDimensions: {},
48392
- lastChanged: null,
48393
- hasPasted: false,
48394
- cut: false,
48395
- dragging: false,
48396
- model: new Model(createFormulaParser, []),
48397
- selected: new EmptySelection(),
48398
- copied: null,
48399
- lastCommit: null
48400
- };
48401
- function reducer(state, action) {
48402
- switch (action.type) {
48403
- case BOLD:
48404
- {
48405
- const selectedRange = state.selected.toRange(state.model.data);
48406
- const updatedData = applyBoldToCells(state.model.data, selectedRange);
48407
- return {
48408
- ...state,
48409
- model: new Model(state.model.createFormulaParser, updatedData)
48410
- };
48411
- }
48412
- case ITALIC:
48413
- {
48414
- const selectedRange = state.selected.toRange(state.model.data);
48415
- const updatedData = applyItalicToCells(state.model.data, selectedRange);
48416
- return {
48417
- ...state,
48418
- model: new Model(state.model.createFormulaParser, updatedData)
48419
- };
48420
- }
48421
- case UNDERLINE:
48422
- {
48423
- const selectedRange = state.selected.toRange(state.model.data);
48424
- const updatedData = applyUnderlineToCells(state.model.data, selectedRange);
48425
- return {
48426
- ...state,
48427
- model: new Model(state.model.createFormulaParser, updatedData)
48428
- };
48429
- }
48430
- case COLOR:
48431
- {
48432
- const {
48433
- value
48434
- } = action.payload;
48435
- const selectedRange = state.selected.toRange(state.model.data);
48436
- const updatedData = applyColorToCells(state.model.data, selectedRange, value);
48437
- return {
48438
- ...state,
48439
- model: new Model(state.model.createFormulaParser, updatedData)
48440
- };
48441
- }
48442
- case BACKGROUND_COLOR:
48443
- {
48444
- const {
48445
- value
48446
- } = action.payload;
48447
- const selectedRange = state.selected.toRange(state.model.data);
48448
- const updatedData = applyBackgroundColorToCells(state.model.data, selectedRange, value);
48449
- return {
48450
- ...state,
48451
- model: new Model(state.model.createFormulaParser, updatedData)
48452
- };
48453
- }
48454
- case FORMATE_PAINTER:
48455
- {
48456
- const selectedRange = state.selected.toRange(state.model.data);
48457
- const updatedData = applyUnderlineToCells(state.model.data, selectedRange);
48458
- return {
48459
- ...state,
48460
- model: new Model(state.model.createFormulaParser, updatedData)
48461
- };
48462
- }
48463
- case SET_DATA:
48464
- {
48465
- const {
48466
- data
48467
- } = action.payload;
48468
- const nextActive = state.active && has$1(state.active, data) ? state.active : null;
48469
- const nextSelected = state.selected.normalizeTo(data);
48470
- return {
48471
- ...state,
48472
- model: new Model(state.model.createFormulaParser, data),
48473
- active: nextActive,
48474
- selected: nextSelected
48475
- };
48476
- }
48477
- case SET_CREATE_FORMULA_PARSER:
48478
- {
48479
- const {
48480
- createFormulaParser
48481
- } = action.payload;
48482
- return {
48483
- ...state,
48484
- model: new Model(createFormulaParser, state.model.data)
48485
- };
48486
- }
48487
- case SELECT_ENTIRE_ROW:
48488
- {
48489
- const {
48490
- row,
48491
- extend
48492
- } = action.payload;
48493
- const {
48494
- active
48495
- } = state;
48496
- return {
48497
- ...state,
48498
- selected: extend && active ? new EntireRowsSelection(active.row, row) : new EntireRowsSelection(row, row),
48499
- active: extend && active ? active : {
48500
- ...ORIGIN,
48501
- row
48502
- },
48503
- mode: 'view'
48504
- };
48505
- }
48506
- case SELECT_ENTIRE_COLUMN:
48507
- {
48508
- const {
48509
- column,
48510
- extend
48511
- } = action.payload;
48512
- const {
48513
- active
48514
- } = state;
48515
- return {
48516
- ...state,
48517
- selected: extend && active ? new EntireColumnsSelection(active.column, column) : new EntireColumnsSelection(column, column),
48518
- active: extend && active ? active : {
48519
- ...ORIGIN,
48520
- column
48521
- },
48522
- mode: 'view'
48523
- };
48524
- }
48525
- case SELECT_ENTIRE_WORKSHEET:
48526
- {
48527
- return {
48528
- ...state,
48529
- selected: new EntireWorksheetSelection(),
48530
- active: ORIGIN,
48531
- mode: 'view'
48532
- };
48533
- }
48534
- case SET_SELECTION:
48535
- {
48536
- const {
48537
- selection
48538
- } = action.payload;
48539
- const range = selection.toRange(state.model.data);
48540
- const active = state.active && selection.has(state.model.data, state.active) ? state.active : range?.start;
48541
- return {
48542
- ...state,
48543
- selected: selection,
48544
- active: active || null,
48545
- mode: 'view'
48546
- };
48547
- }
48548
- case SELECT:
48549
- {
48550
- const {
48551
- point
48552
- } = action.payload;
48553
- if (state.active && !isActive(state.active, point)) {
48554
- return {
48555
- ...state,
48556
- selected: new RangeSelection(new PointRange(point, state.active)),
48557
- mode: 'view'
48558
- };
48559
- }
48560
- return state;
48561
- }
48562
- case ACTIVATE:
48563
- {
48564
- const {
48565
- point
48566
- } = action.payload;
48567
- return {
48568
- ...state,
48569
- selected: new RangeSelection(new PointRange(point, point)),
48570
- active: point,
48571
- mode: isActive(state.active, point) ? 'edit' : 'view'
48572
- };
48573
- }
48574
- case SET_CELL_DATA:
48575
- {
48576
- const {
48577
- active,
48578
- data: cellData
48579
- } = action.payload;
48580
- if (isActiveReadOnly(state)) {
48581
- return state;
48582
- }
48583
- return {
48584
- ...state,
48585
- model: updateCellValue(state.model, active, cellData),
48586
- lastChanged: active
48587
- };
48588
- }
48589
- case SET_CELL_DIMENSIONS:
48590
- {
48591
- const {
48592
- point,
48593
- dimensions
48594
- } = action.payload;
48595
- const prevRowDimensions = state.rowDimensions[point.row];
48596
- const prevColumnDimensions = state.columnDimensions[point.column];
48597
- if (prevRowDimensions && prevColumnDimensions && prevRowDimensions.top === dimensions.top && prevRowDimensions.height === dimensions.height && prevColumnDimensions.left === dimensions.left && prevColumnDimensions.width === dimensions.width) {
48598
- return state;
48599
- }
48600
- return {
48601
- ...state,
48602
- rowDimensions: {
48603
- ...state.rowDimensions,
48604
- [point.row]: {
48605
- top: dimensions.top,
48606
- height: dimensions.height
48607
- }
48608
- },
48609
- columnDimensions: {
48610
- ...state.columnDimensions,
48611
- [point.column]: {
48612
- left: dimensions.left,
48613
- width: dimensions.width
48614
- }
48615
- }
48616
- };
48617
- }
48618
- case COPY:
48619
- case CUT:
48620
- {
48621
- const selectedRange = state.selected.toRange(state.model.data);
48622
- return {
48623
- ...state,
48624
- copied: selectedRange,
48625
- cut: action.type === CUT,
48626
- hasPasted: false
48627
- };
48628
- }
48629
- case PASTE:
48630
- {
48631
- const {
48632
- data: text
48633
- } = action.payload;
48634
- const {
48635
- active
48636
- } = state;
48637
- if (!active) {
48638
- return state;
48639
- }
48640
- const copied = split(text, value => ({
48641
- value
48642
- }));
48643
- const copiedSize = getSize(copied);
48644
- const selectedRange = state.selected.toRange(state.model.data);
48645
- if (selectedRange && copiedSize.rows === 1 && copiedSize.columns === 1) {
48646
- const cell = get({
48647
- row: 0,
48648
- column: 0
48649
- }, copied);
48650
- let newData = state.cut && state.copied ? unset(state.copied.start, state.model.data) : state.model.data;
48651
- const commit = [];
48652
- for (const point of selectedRange || []) {
48653
- const currentCell = get(point, state.model.data);
48654
- commit.push({
48655
- prevCell: currentCell || null,
48656
- nextCell: cell || null
48657
- });
48658
- newData = set(point, cell, newData);
48659
- }
48660
- return {
48661
- ...state,
48662
- model: new Model(createFormulaParser, newData),
48663
- copied: null,
48664
- cut: false,
48665
- hasPasted: true,
48666
- mode: 'view',
48667
- lastCommit: commit
48668
- };
48669
- }
48670
- const requiredSize = {
48671
- rows: active.row + copiedSize.rows,
48672
- columns: active.column + copiedSize.columns
48673
- };
48674
- const paddedData = pad(state.model.data, requiredSize);
48675
- let acc = {
48676
- data: paddedData,
48677
- commit: []
48678
- };
48679
- for (const [point, cell] of entries(copied)) {
48680
- let commit = acc.commit || [];
48681
- const nextPoint = {
48682
- row: point.row + active.row,
48683
- column: point.column + active.column
48684
- };
48685
- let nextData = acc.data;
48686
- if (state.cut) {
48687
- if (state.copied) {
48688
- const prevPoint = {
48689
- row: point.row + state.copied.start.row,
48690
- column: point.column + state.copied.start.column
48691
- };
48692
- nextData = unset(prevPoint, acc.data);
48693
- }
48694
- commit = [...commit, {
48695
- prevCell: cell || null,
48696
- nextCell: null
48697
- }];
48698
- }
48699
- if (!has$1(nextPoint, paddedData)) {
48700
- acc = {
48701
- data: nextData,
48702
- commit
48703
- };
48704
- }
48705
- const currentCell = get(nextPoint, nextData) || null;
48706
- commit = [...commit, {
48707
- prevCell: currentCell,
48708
- nextCell: cell || null
48709
- }];
48710
- acc.data = set(nextPoint, {
48711
- value: undefined,
48712
- ...currentCell,
48713
- ...cell
48714
- }, nextData);
48715
- acc.commit = commit;
48716
- }
48717
- return {
48718
- ...state,
48719
- model: new Model(createFormulaParser, acc.data),
48720
- selected: new RangeSelection(new PointRange(active, {
48721
- row: active.row + copiedSize.rows - 1,
48722
- column: active.column + copiedSize.columns - 1
48723
- })),
48724
- copied: null,
48725
- cut: false,
48726
- hasPasted: true,
48727
- mode: 'view',
48728
- lastCommit: acc.commit
48729
- };
48730
- }
48731
- case EDIT:
48732
- {
48733
- return edit(state);
48734
- }
48735
- case VIEW:
48736
- {
48737
- return view(state);
48738
- }
48739
- case CLEAR:
48740
- {
48741
- return clear(state);
48742
- }
48743
- case BLUR:
48744
- {
48745
- return blur(state);
48746
- }
48747
- case KEY_PRESS:
48748
- {
48749
- const {
48750
- event
48751
- } = action.payload;
48752
- if (isActiveReadOnly(state) || event.metaKey) {
48753
- return state;
48754
- }
48755
- if (state.mode === 'view' && state.active) {
48756
- const selectedRange = state.selected.toRange(state.model.data);
48757
- if (selectedRange?.size() === 1) {
48758
- return edit(clear(state));
48759
- }
48760
- return edit(state);
48761
- }
48762
- return state;
48763
- }
48764
- case KEY_DOWN:
48765
- {
48766
- const {
48767
- event
48768
- } = action.payload;
48769
- const handler = getKeyDownHandler(state, event);
48770
- if (handler) {
48771
- return {
48772
- ...state,
48773
- ...handler(state, event)
48774
- };
48775
- }
48776
- return state;
48777
- }
48778
- case DRAG_START:
48779
- {
48780
- return {
48781
- ...state,
48782
- dragging: true
48783
- };
48784
- }
48785
- case DRAG_END:
48786
- {
48787
- return {
48788
- ...state,
48789
- dragging: false
48790
- };
48791
- }
48792
- case COMMIT:
48793
- {
48794
- const {
48795
- changes
48796
- } = action.payload;
48797
- return {
48798
- ...state,
48799
- ...commit(changes)
48800
- };
48801
- }
48802
- default:
48803
- throw new Error('Unknown action');
48804
- }
48805
- }
48806
- // const reducer = createReducer(INITIAL_STATE, (builder) => {
48807
- // builder.addMatcher(
48808
- // (action) =>
48809
- // action.type === Actions.copy.type || action.type === Actions.cut.type,
48810
- // (state, action) => {
48811
- // }
48812
- // );
48813
- // });
48814
- // // Shared reducers
48815
48442
  function applyBoldToCells(currentData, selectedRange) {
48443
+ if (!selectedRange) {
48444
+ return currentData;
48445
+ }
48816
48446
  const {
48817
48447
  start,
48818
48448
  end
@@ -48843,6 +48473,9 @@ function applyBoldToCells(currentData, selectedRange) {
48843
48473
  return updatedData;
48844
48474
  }
48845
48475
  function applyItalicToCells(currentData, selectedRange) {
48476
+ if (!selectedRange) {
48477
+ return currentData;
48478
+ }
48846
48479
  const {
48847
48480
  start,
48848
48481
  end
@@ -48872,7 +48505,10 @@ function applyItalicToCells(currentData, selectedRange) {
48872
48505
  }
48873
48506
  return updatedData;
48874
48507
  }
48875
- function applyUnderlineToCells(currentData, selectedRange) {
48508
+ function applyFontFamily(currentData, selectedRange, value) {
48509
+ if (!selectedRange) {
48510
+ return currentData;
48511
+ }
48876
48512
  const {
48877
48513
  start,
48878
48514
  end
@@ -48887,11 +48523,11 @@ function applyUnderlineToCells(currentData, selectedRange) {
48887
48523
  if (!currentCell) {
48888
48524
  continue;
48889
48525
  }
48890
- const updatedCell = {
48526
+ let updatedCell = {
48891
48527
  ...currentCell,
48892
48528
  style: {
48893
48529
  ...currentCell.style,
48894
- textDecoration: 'underline'
48530
+ fontFamily: value
48895
48531
  }
48896
48532
  };
48897
48533
  updatedData = set({
@@ -48902,13 +48538,193 @@ function applyUnderlineToCells(currentData, selectedRange) {
48902
48538
  }
48903
48539
  return updatedData;
48904
48540
  }
48541
+ function applyFontSize(currentData, selectedRange, value) {
48542
+ const conversion = Number(value);
48543
+ if (isNaN(conversion)) {
48544
+ return currentData;
48545
+ }
48546
+ const fontSizeInPx = convertPtToPx(conversion);
48547
+ if (!selectedRange) {
48548
+ return currentData;
48549
+ }
48550
+ const {
48551
+ start,
48552
+ end
48553
+ } = selectedRange;
48554
+ let updatedData = currentData;
48555
+ for (let row = start.row; row <= end.row; row++) {
48556
+ for (let col = start.column; col <= end.column; col++) {
48557
+ const currentCell = get({
48558
+ row,
48559
+ column: col
48560
+ }, updatedData);
48561
+ if (!currentCell) {
48562
+ continue;
48563
+ }
48564
+ let updatedCell = {
48565
+ ...currentCell,
48566
+ style: {
48567
+ ...currentCell.style,
48568
+ fontSize: fontSizeInPx
48569
+ }
48570
+ };
48571
+ updatedData = set({
48572
+ row,
48573
+ column: col
48574
+ }, updatedCell, updatedData);
48575
+ }
48576
+ }
48577
+ return updatedData;
48578
+ }
48579
+ function applyBorderToCells(currentData, selectedRange, value, color) {
48580
+ if (!selectedRange) {
48581
+ return currentData;
48582
+ }
48583
+ const {
48584
+ start,
48585
+ end
48586
+ } = selectedRange;
48587
+ let updatedData = currentData;
48588
+ for (let row = start.row; row <= end.row; row++) {
48589
+ for (let col = start.column; col <= end.column; col++) {
48590
+ const currentCell = get({
48591
+ row,
48592
+ column: col
48593
+ }, updatedData);
48594
+ if (!currentCell) {
48595
+ continue;
48596
+ }
48597
+ let updatedCell = {
48598
+ ...currentCell
48599
+ };
48600
+ switch (value) {
48601
+ case 'border-all-sides':
48602
+ updatedCell.style = {
48603
+ ...currentCell.style,
48604
+ border: `2px solid ${color}`
48605
+ };
48606
+ break;
48607
+ case 'border-none':
48608
+ updatedCell.style = {
48609
+ ...currentCell.style,
48610
+ border: `1px solid var(--toggle-strip-color)`
48611
+ };
48612
+ break;
48613
+ case 'border-right':
48614
+ updatedCell.style = {
48615
+ ...currentCell.style,
48616
+ borderRight: `2px solid ${color}`
48617
+ };
48618
+ break;
48619
+ case 'border-left':
48620
+ updatedCell.style = {
48621
+ ...currentCell.style,
48622
+ borderLeft: `2px solid ${color}`
48623
+ };
48624
+ break;
48625
+ case 'border-top':
48626
+ updatedCell.style = {
48627
+ ...currentCell.style,
48628
+ borderTop: `2px solid ${color}`
48629
+ };
48630
+ break;
48631
+ case 'border-bottom':
48632
+ updatedCell.style = {
48633
+ ...currentCell.style,
48634
+ borderBottom: `2px solid ${color}`
48635
+ };
48636
+ break;
48637
+ }
48638
+ updatedData = set({
48639
+ row,
48640
+ column: col
48641
+ }, updatedCell, updatedData);
48642
+ }
48643
+ }
48644
+ return updatedData;
48645
+ }
48646
+ function applyTextAlign(currentData, selectedRange, value) {
48647
+ if (!selectedRange) {
48648
+ return currentData;
48649
+ }
48650
+ const {
48651
+ start,
48652
+ end
48653
+ } = selectedRange;
48654
+ let updatedData = currentData;
48655
+ for (let row = start.row; row <= end.row; row++) {
48656
+ for (let col = start.column; col <= end.column; col++) {
48657
+ const currentCell = get({
48658
+ row,
48659
+ column: col
48660
+ }, updatedData);
48661
+ if (!currentCell) {
48662
+ continue;
48663
+ }
48664
+ let updatedCell = {
48665
+ ...currentCell,
48666
+ style: {
48667
+ ...currentCell.style,
48668
+ textAlign: value
48669
+ }
48670
+ };
48671
+ updatedData = set({
48672
+ row,
48673
+ column: col
48674
+ }, updatedCell, updatedData);
48675
+ }
48676
+ }
48677
+ return updatedData;
48678
+ }
48679
+ function applyUnderlineToCells(currentData, selectedRange, value, active) {
48680
+ const {
48681
+ start,
48682
+ end
48683
+ } = selectedRange;
48684
+ let updatedData = currentData;
48685
+ for (let row = start.row; row <= end.row; row++) {
48686
+ for (let col = start.column; col <= end.column; col++) {
48687
+ const currentCell = get({
48688
+ row,
48689
+ column: col
48690
+ }, updatedData);
48691
+ if (!currentCell) {
48692
+ continue;
48693
+ }
48694
+ let updatedCell;
48695
+ if (!active) {
48696
+ updatedCell = {
48697
+ ...currentCell,
48698
+ style: {
48699
+ ...currentCell.style,
48700
+ textDecoration: 'none',
48701
+ textDecorationStyle: 'none'
48702
+ }
48703
+ };
48704
+ } else {
48705
+ updatedCell = {
48706
+ ...currentCell,
48707
+ style: {
48708
+ ...currentCell.style,
48709
+ textDecoration: value === 'double_border' ? 'underline' : value,
48710
+ textDecorationStyle: value === 'double_border' ? 'double' : 'none'
48711
+ }
48712
+ };
48713
+ }
48714
+ updatedData = set({
48715
+ row,
48716
+ column: col
48717
+ }, updatedCell, updatedData);
48718
+ }
48719
+ }
48720
+ return updatedData;
48721
+ }
48905
48722
  function isValidHexColor(color) {
48906
48723
  if (color.length !== 6) {
48907
48724
  return false;
48908
48725
  }
48909
48726
  const hexChars = '0123456789ABCDEFabcdef';
48910
48727
  for (let i = 1; i < color.length; i++) {
48911
- console.log(typeof color[i]);
48912
48728
  if (!hexChars.includes(color[i])) {
48913
48729
  return false;
48914
48730
  }
@@ -49068,6 +48884,10 @@ const go = (rowDelta, columnDelta) => state => {
49068
48884
  mode: 'view'
49069
48885
  };
49070
48886
  };
48887
+ function convertPtToPx(pt) {
48888
+ const px = pt * 1.33;
48889
+ return `${Math.round(px)}px`;
48890
+ }
49071
48891
  const keyDownHandlers = {
49072
48892
  ArrowUp: go(-1, 0),
49073
48893
  ArrowDown: go(+1, 0),
@@ -49223,6 +49043,469 @@ function modifyEntireColumnsSelection(selection, active, data, edge) {
49223
49043
  return nextSelection.normalizeTo(data);
49224
49044
  }
49225
49045
 
49046
+ const INITIAL_STATE = {
49047
+ active: null,
49048
+ mode: 'view',
49049
+ rowDimensions: {},
49050
+ columnDimensions: {},
49051
+ lastChanged: null,
49052
+ hasPasted: false,
49053
+ cut: false,
49054
+ dragging: false,
49055
+ model: new Model(createFormulaParser, []),
49056
+ selected: new EmptySelection(),
49057
+ copied: null,
49058
+ lastCommit: null
49059
+ };
49060
+ function reducer(state, action) {
49061
+ switch (action.type) {
49062
+ case BOLD:
49063
+ {
49064
+ const selectedRange = state.selected.toRange(state.model.data);
49065
+ const updatedData = applyBoldToCells(state.model.data, selectedRange);
49066
+ return {
49067
+ ...state,
49068
+ model: new Model(state.model.createFormulaParser, updatedData)
49069
+ };
49070
+ }
49071
+ case ITALIC:
49072
+ {
49073
+ const selectedRange = state.selected.toRange(state.model.data);
49074
+ const updatedData = applyItalicToCells(state.model.data, selectedRange);
49075
+ return {
49076
+ ...state,
49077
+ model: new Model(state.model.createFormulaParser, updatedData)
49078
+ };
49079
+ }
49080
+ case BORDER_TYPE:
49081
+ {
49082
+ const {
49083
+ value,
49084
+ color
49085
+ } = action.payload;
49086
+ const selectedRange = state.selected.toRange(state.model.data);
49087
+ const updatedData = applyBorderToCells(state.model.data, selectedRange, value, color);
49088
+ return {
49089
+ ...state,
49090
+ model: new Model(state.model.createFormulaParser, updatedData)
49091
+ };
49092
+ }
49093
+ case UNDERLINE_TYPE:
49094
+ {
49095
+ const {
49096
+ value,
49097
+ active
49098
+ } = action.payload;
49099
+ const selectedRange = state.selected.toRange(state.model.data);
49100
+ const updatedData = applyUnderlineToCells(state.model.data, selectedRange, value, active);
49101
+ return {
49102
+ ...state,
49103
+ model: new Model(state.model.createFormulaParser, updatedData)
49104
+ };
49105
+ }
49106
+ case FONT_SIZE:
49107
+ {
49108
+ const {
49109
+ value
49110
+ } = action.payload;
49111
+ const selectedRange = state.selected.toRange(state.model.data);
49112
+ const updatedData = applyFontSize(state.model.data, selectedRange, value);
49113
+ return {
49114
+ ...state,
49115
+ model: new Model(state.model.createFormulaParser, updatedData)
49116
+ };
49117
+ }
49118
+ case FONT_FAMILY:
49119
+ {
49120
+ const {
49121
+ value
49122
+ } = action.payload;
49123
+ const selectedRange = state.selected.toRange(state.model.data);
49124
+ const updatedData = applyFontFamily(state.model.data, selectedRange, value);
49125
+ return {
49126
+ ...state,
49127
+ model: new Model(state.model.createFormulaParser, updatedData)
49128
+ };
49129
+ }
49130
+ case TEXT_ALIGN:
49131
+ {
49132
+ const {
49133
+ value
49134
+ } = action.payload;
49135
+ const selectedRange = state.selected.toRange(state.model.data);
49136
+ const updatedData = applyTextAlign(state.model.data, selectedRange, value);
49137
+ return {
49138
+ ...state,
49139
+ model: new Model(state.model.createFormulaParser, updatedData)
49140
+ };
49141
+ }
49142
+ case COLOR:
49143
+ {
49144
+ const {
49145
+ value
49146
+ } = action.payload;
49147
+ const selectedRange = state.selected.toRange(state.model.data);
49148
+ const updatedData = applyColorToCells(state.model.data, selectedRange, value);
49149
+ return {
49150
+ ...state,
49151
+ model: new Model(state.model.createFormulaParser, updatedData)
49152
+ };
49153
+ }
49154
+ case BACKGROUND_COLOR:
49155
+ {
49156
+ const {
49157
+ value
49158
+ } = action.payload;
49159
+ const selectedRange = state.selected.toRange(state.model.data);
49160
+ const updatedData = applyBackgroundColorToCells(state.model.data, selectedRange, value);
49161
+ return {
49162
+ ...state,
49163
+ model: new Model(state.model.createFormulaParser, updatedData)
49164
+ };
49165
+ }
49166
+ case FORMATE_PAINTER:
49167
+ {
49168
+ return {
49169
+ ...state,
49170
+ model: new Model(state.model.createFormulaParser, state.model.data)
49171
+ };
49172
+ }
49173
+ case SET_DATA:
49174
+ {
49175
+ const {
49176
+ data
49177
+ } = action.payload;
49178
+ const nextActive = state.active && has$1(state.active, data) ? state.active : null;
49179
+ const nextSelected = state.selected.normalizeTo(data);
49180
+ return {
49181
+ ...state,
49182
+ model: new Model(state.model.createFormulaParser, data),
49183
+ active: nextActive,
49184
+ selected: nextSelected
49185
+ };
49186
+ }
49187
+ case SET_CREATE_FORMULA_PARSER:
49188
+ {
49189
+ const {
49190
+ createFormulaParser
49191
+ } = action.payload;
49192
+ return {
49193
+ ...state,
49194
+ model: new Model(createFormulaParser, state.model.data)
49195
+ };
49196
+ }
49197
+ case SELECT_ENTIRE_ROW:
49198
+ {
49199
+ const {
49200
+ row,
49201
+ extend
49202
+ } = action.payload;
49203
+ const {
49204
+ active
49205
+ } = state;
49206
+ return {
49207
+ ...state,
49208
+ selected: extend && active ? new EntireRowsSelection(active.row, row) : new EntireRowsSelection(row, row),
49209
+ active: extend && active ? active : {
49210
+ ...ORIGIN,
49211
+ row
49212
+ },
49213
+ mode: 'view'
49214
+ };
49215
+ }
49216
+ case SELECT_ENTIRE_COLUMN:
49217
+ {
49218
+ const {
49219
+ column,
49220
+ extend
49221
+ } = action.payload;
49222
+ const {
49223
+ active
49224
+ } = state;
49225
+ return {
49226
+ ...state,
49227
+ selected: extend && active ? new EntireColumnsSelection(active.column, column) : new EntireColumnsSelection(column, column),
49228
+ active: extend && active ? active : {
49229
+ ...ORIGIN,
49230
+ column
49231
+ },
49232
+ mode: 'view'
49233
+ };
49234
+ }
49235
+ case SELECT_ENTIRE_WORKSHEET:
49236
+ {
49237
+ return {
49238
+ ...state,
49239
+ selected: new EntireWorksheetSelection(),
49240
+ active: ORIGIN,
49241
+ mode: 'view'
49242
+ };
49243
+ }
49244
+ case SET_SELECTION:
49245
+ {
49246
+ const {
49247
+ selection
49248
+ } = action.payload;
49249
+ const range = selection.toRange(state.model.data);
49250
+ const active = state.active && selection.has(state.model.data, state.active) ? state.active : range?.start;
49251
+ return {
49252
+ ...state,
49253
+ selected: selection,
49254
+ active: active || null,
49255
+ mode: 'view'
49256
+ };
49257
+ }
49258
+ case SELECT:
49259
+ {
49260
+ const {
49261
+ point
49262
+ } = action.payload;
49263
+ if (state.active && !isActive(state.active, point)) {
49264
+ return {
49265
+ ...state,
49266
+ selected: new RangeSelection(new PointRange(point, state.active)),
49267
+ mode: 'view'
49268
+ };
49269
+ }
49270
+ return state;
49271
+ }
49272
+ case ACTIVATE:
49273
+ {
49274
+ const {
49275
+ point
49276
+ } = action.payload;
49277
+ return {
49278
+ ...state,
49279
+ selected: new RangeSelection(new PointRange(point, point)),
49280
+ active: point,
49281
+ mode: isActive(state.active, point) ? 'edit' : 'view'
49282
+ };
49283
+ }
49284
+ case SET_CELL_DATA:
49285
+ {
49286
+ const {
49287
+ active,
49288
+ data: cellData
49289
+ } = action.payload;
49290
+ if (isActiveReadOnly(state)) {
49291
+ return state;
49292
+ }
49293
+ return {
49294
+ ...state,
49295
+ model: updateCellValue(state.model, active, cellData),
49296
+ lastChanged: active
49297
+ };
49298
+ }
49299
+ case SET_CELL_DIMENSIONS:
49300
+ {
49301
+ const {
49302
+ point,
49303
+ dimensions
49304
+ } = action.payload;
49305
+ const prevRowDimensions = state.rowDimensions[point.row];
49306
+ const prevColumnDimensions = state.columnDimensions[point.column];
49307
+ if (prevRowDimensions && prevColumnDimensions && prevRowDimensions.top === dimensions.top && prevRowDimensions.height === dimensions.height && prevColumnDimensions.left === dimensions.left && prevColumnDimensions.width === dimensions.width) {
49308
+ return state;
49309
+ }
49310
+ return {
49311
+ ...state,
49312
+ rowDimensions: {
49313
+ ...state.rowDimensions,
49314
+ [point.row]: {
49315
+ top: dimensions.top,
49316
+ height: dimensions.height
49317
+ }
49318
+ },
49319
+ columnDimensions: {
49320
+ ...state.columnDimensions,
49321
+ [point.column]: {
49322
+ left: dimensions.left,
49323
+ width: dimensions.width
49324
+ }
49325
+ }
49326
+ };
49327
+ }
49328
+ case COPY:
49329
+ case CUT:
49330
+ {
49331
+ const selectedRange = state.selected.toRange(state.model.data);
49332
+ return {
49333
+ ...state,
49334
+ copied: selectedRange,
49335
+ cut: action.type === CUT,
49336
+ hasPasted: false
49337
+ };
49338
+ }
49339
+ case PASTE:
49340
+ {
49341
+ const {
49342
+ data: text
49343
+ } = action.payload;
49344
+ const {
49345
+ active
49346
+ } = state;
49347
+ if (!active) {
49348
+ return state;
49349
+ }
49350
+ const copied = split(text, value => ({
49351
+ value
49352
+ }));
49353
+ const copiedSize = getSize(copied);
49354
+ const selectedRange = state.selected.toRange(state.model.data);
49355
+ if (selectedRange && copiedSize.rows === 1 && copiedSize.columns === 1) {
49356
+ const cell = get({
49357
+ row: 0,
49358
+ column: 0
49359
+ }, copied);
49360
+ let newData = state.cut && state.copied ? unset(state.copied.start, state.model.data) : state.model.data;
49361
+ const commit = [];
49362
+ for (const point of selectedRange || []) {
49363
+ const currentCell = get(point, state.model.data);
49364
+ commit.push({
49365
+ prevCell: currentCell || null,
49366
+ nextCell: cell || null
49367
+ });
49368
+ newData = set(point, cell, newData);
49369
+ }
49370
+ return {
49371
+ ...state,
49372
+ model: new Model(createFormulaParser, newData),
49373
+ copied: null,
49374
+ cut: false,
49375
+ hasPasted: true,
49376
+ mode: 'view',
49377
+ lastCommit: commit
49378
+ };
49379
+ }
49380
+ const requiredSize = {
49381
+ rows: active.row + copiedSize.rows,
49382
+ columns: active.column + copiedSize.columns
49383
+ };
49384
+ const paddedData = pad(state.model.data, requiredSize);
49385
+ let acc = {
49386
+ data: paddedData,
49387
+ commit: []
49388
+ };
49389
+ for (const [point, cell] of entries(copied)) {
49390
+ let commit = acc.commit || [];
49391
+ const nextPoint = {
49392
+ row: point.row + active.row,
49393
+ column: point.column + active.column
49394
+ };
49395
+ let nextData = acc.data;
49396
+ if (state.cut) {
49397
+ if (state.copied) {
49398
+ const prevPoint = {
49399
+ row: point.row + state.copied.start.row,
49400
+ column: point.column + state.copied.start.column
49401
+ };
49402
+ nextData = unset(prevPoint, acc.data);
49403
+ }
49404
+ commit = [...commit, {
49405
+ prevCell: cell || null,
49406
+ nextCell: null
49407
+ }];
49408
+ }
49409
+ if (!has$1(nextPoint, paddedData)) {
49410
+ acc = {
49411
+ data: nextData,
49412
+ commit
49413
+ };
49414
+ }
49415
+ const currentCell = get(nextPoint, nextData) || null;
49416
+ commit = [...commit, {
49417
+ prevCell: currentCell,
49418
+ nextCell: cell || null
49419
+ }];
49420
+ acc.data = set(nextPoint, {
49421
+ value: undefined,
49422
+ ...currentCell,
49423
+ ...cell
49424
+ }, nextData);
49425
+ acc.commit = commit;
49426
+ }
49427
+ return {
49428
+ ...state,
49429
+ model: new Model(createFormulaParser, acc.data),
49430
+ selected: new RangeSelection(new PointRange(active, {
49431
+ row: active.row + copiedSize.rows - 1,
49432
+ column: active.column + copiedSize.columns - 1
49433
+ })),
49434
+ copied: null,
49435
+ cut: false,
49436
+ hasPasted: true,
49437
+ mode: 'view',
49438
+ lastCommit: acc.commit
49439
+ };
49440
+ }
49441
+ case EDIT:
49442
+ {
49443
+ return edit(state);
49444
+ }
49445
+ case VIEW:
49446
+ {
49447
+ return view(state);
49448
+ }
49449
+ case CLEAR:
49450
+ {
49451
+ return clear(state);
49452
+ }
49453
+ case BLUR:
49454
+ {
49455
+ return blur(state);
49456
+ }
49457
+ case KEY_DOWN:
49458
+ {
49459
+ const {
49460
+ event
49461
+ } = action.payload;
49462
+ const handler = getKeyDownHandler(state, event);
49463
+ if (handler) {
49464
+ return {
49465
+ ...state,
49466
+ ...handler(state, event)
49467
+ };
49468
+ }
49469
+ return state;
49470
+ }
49471
+ case DRAG_START:
49472
+ {
49473
+ return {
49474
+ ...state,
49475
+ dragging: true
49476
+ };
49477
+ }
49478
+ case DRAG_END:
49479
+ {
49480
+ return {
49481
+ ...state,
49482
+ dragging: false
49483
+ };
49484
+ }
49485
+ case COMMIT:
49486
+ {
49487
+ const {
49488
+ changes
49489
+ } = action.payload;
49490
+ return {
49491
+ ...state,
49492
+ ...commit(changes)
49493
+ };
49494
+ }
49495
+ default:
49496
+ throw new Error('Unknown action');
49497
+ }
49498
+ }
49499
+ // const reducer = createReducer(INITIAL_STATE, (builder) => {
49500
+ // builder.addMatcher(
49501
+ // (action) =>
49502
+ // action.type === Actions.copy.type || action.type === Actions.cut.type,
49503
+ // (state, action) => {
49504
+ // }
49505
+ // );
49506
+ // });
49507
+ // // Shared reducers
49508
+
49226
49509
  var scheduler = {exports: {}};
49227
49510
 
49228
49511
  var scheduler_production_min = {};
@@ -50217,7 +50500,7 @@ const Table = ({
50217
50500
  const columnCount = columns + (hideColumnIndicators ? 0 : 1);
50218
50501
  const columnNodes = range(columnCount).map(i => jsxRuntime.jsx("col", {}, i));
50219
50502
  return jsxRuntime.jsxs("table", {
50220
- className: "Spreadsheet__table",
50503
+ className: "ff-spreadsheet-table",
50221
50504
  children: [jsxRuntime.jsx("colgroup", {
50222
50505
  children: columnNodes
50223
50506
  }), jsxRuntime.jsx("tbody", {
@@ -50250,8 +50533,8 @@ const CornerIndicator = ({
50250
50533
  onSelect();
50251
50534
  }, [onSelect]);
50252
50535
  return jsxRuntime.jsx("th", {
50253
- className: classNames('Spreadsheet__header', {
50254
- 'Spreadsheet__header--selected': selected
50536
+ className: classNames('ff-spreadsheet-header', {
50537
+ 'ff-spreadsheet-header--selected': selected
50255
50538
  }),
50256
50539
  onClick: handleClick,
50257
50540
  tabIndex: 0
@@ -50285,8 +50568,8 @@ const ColumnIndicator = ({
50285
50568
  const onMouseMove = moveEvent => {
50286
50569
  const newWidth = width + (moveEvent.clientX - startX);
50287
50570
  setWidth(newWidth);
50288
- const selectedAllRow = document.querySelector('.Spreadsheet__floating-rect--selected');
50289
- const selectedSingleRow = document.querySelector('.Spreadsheet__active-cell');
50571
+ const selectedAllRow = document.querySelector('ff-spreadsheet-floating-rect--selected');
50572
+ const selectedSingleRow = document.querySelector('ff-spreadsheet-active-cell');
50290
50573
  // If the element exists, update its height
50291
50574
  if (selectedAllRow instanceof HTMLElement && selectedSingleRow instanceof HTMLElement) {
50292
50575
  selectedAllRow.style.width = `${newWidth}px`;
@@ -50312,8 +50595,8 @@ const ColumnIndicator = ({
50312
50595
  minWidth: `${width}px`,
50313
50596
  position: 'relative'
50314
50597
  },
50315
- className: classNames('Spreadsheet__header', {
50316
- 'Spreadsheet__header--selected': selected
50598
+ className: classNames('ff-spreadsheet-header', {
50599
+ 'ff-spreadsheet-header--selected': selected
50317
50600
  }),
50318
50601
  onClick: handleClick,
50319
50602
  tabIndex: 0,
@@ -50371,8 +50654,8 @@ const RowIndicator = ({
50371
50654
  const newHeight = height + (moveEvent.clientY - startY);
50372
50655
  setHeight(newHeight);
50373
50656
  // Fetch the floating rectangle element from the DOM
50374
- const selectedAllRow = document.querySelector('.Spreadsheet__floating-rect--selected');
50375
- const selectedSingleRow = document.querySelector('.Spreadsheet__active-cell');
50657
+ const selectedAllRow = document.querySelector('.ff-spreadsheet-floating-rect--selected');
50658
+ const selectedSingleRow = document.querySelector('.ff-spreadsheet-active-cell');
50376
50659
  // If the element exists, update its height
50377
50660
  if (selectedAllRow instanceof HTMLElement && selectedSingleRow instanceof HTMLElement) {
50378
50661
  selectedAllRow.style.height = `${newHeight}px`;
@@ -50397,8 +50680,8 @@ const RowIndicator = ({
50397
50680
  minWidth: '60px',
50398
50681
  position: 'relative'
50399
50682
  },
50400
- className: classNames('Spreadsheet__header', {
50401
- 'Spreadsheet__header--selected': selected
50683
+ className: classNames('ff-spreadsheet-header', {
50684
+ 'ff-spreadsheet-header--selected': selected
50402
50685
  }),
50403
50686
  onClick: handleClick,
50404
50687
  tabIndex: 0,
@@ -50498,9 +50781,9 @@ const Cell = ({
50498
50781
  }
50499
50782
  return jsxRuntime.jsxs("td", {
50500
50783
  ref: rootRef,
50501
- // style={data?.style}
50502
- className: classNames('Spreadsheet__cell', data?.className, {
50503
- 'Spreadsheet__active-cell': active || dragging
50784
+ style: data?.style,
50785
+ className: classNames('ff-spreadsheet-cell', data?.className, {
50786
+ 'ff-spreadsheet-active-cell': active || dragging
50504
50787
  }),
50505
50788
  onMouseEnter: handleMouseOver,
50506
50789
  onMouseDown: handleMouseDown,
@@ -50566,11 +50849,11 @@ const DataViewer = ({
50566
50849
  }) => {
50567
50850
  const value = getValue(cell, evaluatedCell);
50568
50851
  return typeof value === 'boolean' ? jsxRuntime.jsx("span", {
50569
- className: "Spreadsheet__data-viewer Spreadsheet__data-viewer--boolean",
50852
+ className: "ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean",
50570
50853
  children: convertBooleanToText(value)
50571
50854
  }) : jsxRuntime.jsx("span", {
50572
- className: classNames('Spreadsheet__data-viewer', {
50573
- 'Spreadsheet__data-viewer--preserve-breaks': hasLineBreaker(value)
50855
+ className: classNames('ff-spreadsheet-data-viewer', {
50856
+ 'ff-spreadsheet-data-viewer--preserve-breaks': hasLineBreaker(value)
50574
50857
  }),
50575
50858
  children: value
50576
50859
  });
@@ -50606,7 +50889,7 @@ const DataEditor = ({
50606
50889
  }, [inputRef]);
50607
50890
  const value = cell?.value ?? '';
50608
50891
  return jsxRuntime.jsx("div", {
50609
- className: "Spreadsheet__data-editor",
50892
+ className: "ff-spreadsheet-data-editor",
50610
50893
  children: jsxRuntime.jsx("input", {
50611
50894
  ref: inputRef,
50612
50895
  type: "text",
@@ -50676,7 +50959,7 @@ const ActiveCell = props => {
50676
50959
  const readOnly = cell && cell.readOnly;
50677
50960
  return hidden ? null : jsxRuntime.jsx("div", {
50678
50961
  ref: rootRef,
50679
- className: classNames('Spreadsheet__active-cell', `Spreadsheet__active-cell--${mode}`),
50962
+ className: classNames('ff-spreadsheet-active-cell', `ff-spreadsheet-active-cell--${mode}`),
50680
50963
  style: dimensions,
50681
50964
  onClick: mode === 'view' && !readOnly ? edit : undefined,
50682
50965
  tabIndex: 0,
@@ -50704,10 +50987,10 @@ const FloatingRect = ({
50704
50987
  left
50705
50988
  } = dimensions || {};
50706
50989
  return jsxRuntime.jsx("div", {
50707
- className: classNames('Spreadsheet__floating-rect', {
50708
- [`Spreadsheet__floating-rect--${variant}`]: variant,
50709
- 'Spreadsheet__floating-rect--dragging': dragging,
50710
- 'Spreadsheet__floating-rect--hidden': hidden
50990
+ className: classNames('ff-spreadsheet-floating-rect', {
50991
+ [`ff-spreadsheet-floating-rect--${variant}`]: variant,
50992
+ 'ff-spreadsheet-floating-rect--dragging': dragging,
50993
+ 'ff-spreadsheet-floating-rect--hidden': hidden
50711
50994
  }),
50712
50995
  style: {
50713
50996
  width,
@@ -50743,15 +51026,15 @@ const Copied = () => {
50743
51026
  });
50744
51027
  };
50745
51028
 
50746
- var css_248z$3 = ".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.Spreadsheet__active-cell {\n position: absolute;\n border: 2px solid var(--outline-color);\n box-sizing: border-box;\n}\n\n.Spreadsheet__active-cell--edit {\n background: var(--background-color);\n box-shadow: var(--elevation);\n}\n\n.Spreadsheet__table {\n border-collapse: collapse;\n table-layout: fixed;\n}\n\n.Spreadsheet__cell {\n outline: none;\n position: relative;\n}\n\n.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.Spreadsheet__cell--readonly {\n color: var(--readonly-text-color);\n}\n\n.Spreadsheet__cell,\n.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.Spreadsheet__header {\n background: var(--header-background-color);\n color: var(--readonly-text-color);\n text-align: center;\n}\n\n.Spreadsheet__header--selected {\n background: var(--brand-color);\n color: var(--tooltip-text-color);\n}\n\n.Spreadsheet__header,\n.Spreadsheet__data-viewer,\n.Spreadsheet__data-editor input {\n padding: 4px;\n box-sizing: border-box;\n}\n\n.Spreadsheet__data-viewer--preserve-breaks {\n white-space: pre-wrap;\n}\n\n.Spreadsheet__data-editor,\n.Spreadsheet__data-editor input {\n width: 100%;\n height: 100%;\n}\n\n.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.Spreadsheet__data-viewer--boolean {\n text-align: center;\n}\n\n.Spreadsheet__floating-rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n}\n\n.Spreadsheet__floating-rect--hidden {\n display: none;\n}\n\n.Spreadsheet__floating-rect--selected {\n background: var(--outline-background-color);\n border: 2px var(--outline-color) solid;\n}\n\n.Spreadsheet__floating-rect--dragging {\n border: none;\n}\n\n.Spreadsheet__floating-rect--copied {\n border: 2px var(--outline-color) dashed;\n}";
51029
+ var css_248z$4 = ".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 margin-top: 20px;\n border-collapse: collapse;\n table-layout: fixed;\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.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}";
51030
+ styleInject(css_248z$4);
51031
+
51032
+ var css_248z$3 = ".excel-row {\n height: 42px;\n align-items: center;\n}\n.excel-row .excel-toolbar {\n display: flex;\n align-items: center;\n justify-content: start;\n width: 100%;\n gap: 10px;\n}\n.excel-row .excel-toolbar-center {\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n width: 100%;\n gap: 10px;\n}\n.excel-row .excel-toolbar-center .menu-option {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n.excel-row .excel-toolbar-menu {\n display: flex;\n align-items: center;\n}\n.excel-row .excel-toolbar-hide {\n display: none;\n}";
50747
51033
  styleInject(css_248z$3);
50748
51034
 
50749
- var css_248z$2 = ".excel-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n padding: 5px 0;\n width: 100%;\n}\n.excel-toolbar .menu-option {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.excel-toolbar-hide {\n display: none;\n}";
51035
+ var css_248z$2 = ".color-bar {\n background-color: var(--error_light);\n width: 100%;\n height: 4px;\n}\n.color-bar .colorPicker {\n width: 100%;\n height: 0;\n padding: 0;\n visibility: hidden;\n}";
50750
51036
  styleInject(css_248z$2);
50751
51037
 
50752
- var css_248z$1 = ".color-bar {\n background-color: var(--error_light);\n width: 100%;\n height: 4px;\n}\n.color-bar .colorPicker {\n width: 100%;\n height: 0;\n padding: 0;\n visibility: hidden;\n}";
50753
- styleInject(css_248z$1);
50754
-
50755
51038
  const ColorBarSelector = ({
50756
51039
  getColorValue,
50757
51040
  disabled
@@ -50787,61 +51070,93 @@ const ExcelToolBar = ({
50787
51070
  data,
50788
51071
  onBold,
50789
51072
  onItalic,
50790
- onUnderline,
51073
+ setUnderlineType,
50791
51074
  setColor,
51075
+ setFontSize,
51076
+ setFontFamily,
51077
+ setTextAlign,
50792
51078
  setBackgroundColor,
51079
+ setBorderType,
50793
51080
  setFormatePainter
50794
51081
  }) => {
50795
- const [borderType, setBorderType] = React.useState('All Border');
50796
- const [textAlign, setTextAlign] = React.useState('Text Left');
51082
+ const [border, setBorder] = React.useState('border-all-sides');
51083
+ const [underLine, setUnderLine] = React.useState('underline');
50797
51084
  const [colorContainer, setColorPicker] = React.useState({
50798
51085
  color: 'var(--error-light)',
50799
51086
  backgroundColor: 'var(--error-light)',
50800
51087
  borderColor: 'var(--text-color)'
50801
51088
  });
50802
51089
  const [formatePainterState, setFormatePainterState] = React.useState(false);
50803
- const borderTypeIcon = () => {
50804
- return [{
50805
- value: 'border-all-sides',
50806
- label: 'All Border',
50807
- icon: 'all_borders'
50808
- }, {
50809
- value: 'border-bottom',
50810
- label: 'Border Bottom',
50811
- icon: 'border_bottom'
50812
- }, {
50813
- value: 'border-left',
50814
- label: 'Border Left',
50815
- icon: 'border_left'
50816
- }, {
50817
- value: 'border-right',
50818
- label: 'Border Right',
50819
- icon: 'border_right'
50820
- }, {
50821
- value: 'border-top',
50822
- label: 'Border Top',
50823
- icon: 'border_top'
50824
- }, {
50825
- value: 'border-none',
50826
- label: 'No Border',
50827
- icon: 'no_border'
50828
- }];
50829
- };
50830
- const TextAlignIcon = () => {
50831
- return [{
50832
- label: 'Text Left',
50833
- value: 'text-align-left',
50834
- icon: 'text_align_left'
50835
- }, {
50836
- label: 'Text Center',
50837
- value: 'text-align-center',
50838
- icon: 'text_align_center'
50839
- }, {
50840
- label: 'Text Right',
50841
- value: 'text-align-right',
50842
- icon: 'text_align_right'
50843
- }];
50844
- };
51090
+ const borderTypeIcon = [{
51091
+ value: 'border-all-sides',
51092
+ label: 'All Border',
51093
+ icon: 'all_borders'
51094
+ }, {
51095
+ value: 'border-bottom',
51096
+ label: 'Border Bottom',
51097
+ icon: 'border_bottom'
51098
+ }, {
51099
+ value: 'border-left',
51100
+ label: 'Border Left',
51101
+ icon: 'border_left'
51102
+ }, {
51103
+ value: 'border-right',
51104
+ label: 'Border Right',
51105
+ icon: 'border_right'
51106
+ }, {
51107
+ value: 'border-top',
51108
+ label: 'Border Top',
51109
+ icon: 'border_top'
51110
+ }, {
51111
+ value: 'border-none',
51112
+ label: 'No Border',
51113
+ icon: 'no_border'
51114
+ }];
51115
+ const underlineTypeIcon = [{
51116
+ value: 'underline',
51117
+ label: 'Underline',
51118
+ icon: 'underline'
51119
+ }, {
51120
+ value: 'double_border',
51121
+ label: 'Double Underline',
51122
+ icon: 'double_underline'
51123
+ }, {
51124
+ value: 'line-through',
51125
+ label: 'Strikethrough',
51126
+ icon: 'strike_through'
51127
+ }];
51128
+ const fontFamily = [{
51129
+ label: 'Times New Roman',
51130
+ value: '"Times New Roman"'
51131
+ }, {
51132
+ label: 'Arial',
51133
+ value: 'Arial'
51134
+ }, {
51135
+ label: 'Courier New',
51136
+ value: '"Courier New"'
51137
+ }];
51138
+ const fontSize = [{
51139
+ label: '5',
51140
+ value: '5'
51141
+ }, {
51142
+ label: '9',
51143
+ value: '9'
51144
+ }, {
51145
+ label: '11',
51146
+ value: '11'
51147
+ }, {
51148
+ label: '12',
51149
+ value: '12'
51150
+ }, {
51151
+ label: '14',
51152
+ value: '14'
51153
+ }, {
51154
+ label: '16',
51155
+ value: '16'
51156
+ }, {
51157
+ label: '18',
51158
+ value: '18'
51159
+ }];
50845
51160
  const getTextColor = color => {
50846
51161
  setColorPicker(prev => ({
50847
51162
  ...prev,
@@ -50856,7 +51171,6 @@ const ExcelToolBar = ({
50856
51171
  };
50857
51172
  React.useEffect(() => {
50858
51173
  let timeGap = setTimeout(() => {
50859
- console.log(colorContainer.color);
50860
51174
  setColor(data, colorContainer.color);
50861
51175
  }, 0);
50862
51176
  return () => {
@@ -50871,204 +51185,206 @@ const ExcelToolBar = ({
50871
51185
  clearTimeout(timeGap);
50872
51186
  };
50873
51187
  }, [colorContainer.backgroundColor]);
50874
- return jsxRuntime.jsxs("div", {
50875
- className: classNames('excel-toolbar', {
50876
- 'excel-toolbar-hide': toolbar === 'hide'
50877
- }),
50878
- children: [jsxRuntime.jsx(Tooltip, {
50879
- placement: "top",
50880
- title: 'Bold',
50881
- children: jsxRuntime.jsx(Icon, {
50882
- disabled: toolbar === 'disable',
50883
- onClick: () => {
50884
- onBold(data);
50885
- },
50886
- name: "bold"
51188
+ return jsxRuntime.jsxs(Row$1, {
51189
+ className: "excel-row",
51190
+ gap: "40px",
51191
+ children: [jsxRuntime.jsx(Col, {
51192
+ size: 3,
51193
+ children: jsxRuntime.jsxs("div", {
51194
+ className: "excel-toolbar",
51195
+ children: [jsxRuntime.jsx(Select$1, {
51196
+ className: "textType",
51197
+ onChange: e => {
51198
+ setFontFamily(data, e.value);
51199
+ },
51200
+ optionsList: fontFamily,
51201
+ selectedOption: {
51202
+ label: 'Times New Roman',
51203
+ value: '"Times New Roman"'
51204
+ }
51205
+ }), jsxRuntime.jsx(Select$1, {
51206
+ className: "selectTag",
51207
+ onChange: e => {
51208
+ setFontSize(data, e.value);
51209
+ },
51210
+ optionsList: fontSize,
51211
+ selectedOption: {
51212
+ label: '11',
51213
+ value: '11'
51214
+ }
51215
+ })]
50887
51216
  })
50888
- }), jsxRuntime.jsx(Tooltip, {
50889
- placement: "top",
50890
- title: 'Italic',
50891
- children: jsxRuntime.jsx(Icon, {
50892
- disabled: toolbar === 'disable',
50893
- onClick: () => {
50894
- onItalic(data);
50895
- },
50896
- name: "italic"
51217
+ }), jsxRuntime.jsx(Col, {
51218
+ size: 2,
51219
+ children: jsxRuntime.jsxs("div", {
51220
+ className: "excel-toolbar-center",
51221
+ children: [jsxRuntime.jsx(Icon, {
51222
+ hoverEffect: true,
51223
+ disabled: toolbar === 'disable',
51224
+ onClick: () => {
51225
+ setTextAlign(data, 'left');
51226
+ },
51227
+ name: "text_align_left"
51228
+ }), jsxRuntime.jsx(Icon, {
51229
+ hoverEffect: true,
51230
+ disabled: toolbar === 'disable',
51231
+ onClick: () => {
51232
+ setTextAlign(data, 'center');
51233
+ },
51234
+ name: "text_align_center"
51235
+ }), jsxRuntime.jsx(Icon, {
51236
+ hoverEffect: true,
51237
+ disabled: toolbar === 'disable',
51238
+ onClick: () => {
51239
+ setTextAlign(data, 'right');
51240
+ },
51241
+ name: "text_align_right"
51242
+ })]
50897
51243
  })
50898
- }), jsxRuntime.jsx(Select$1, {
50899
- className: "textType",
50900
- label: "Text type",
50901
- onChange: () => {},
50902
- optionsList: [{
50903
- label: 'Option 1',
50904
- value: '1'
50905
- }, {
50906
- label: 'Option 2',
50907
- value: '2'
50908
- }, {
50909
- label: 'Option 3',
50910
- value: '3'
50911
- }],
50912
- selectedOption: {
50913
- label: 'Option 2',
50914
- value: 'Arial'
50915
- }
50916
- }), jsxRuntime.jsx(Select$1, {
50917
- label: "Text Size",
50918
- onChange: () => {},
50919
- optionsList: [{
50920
- label: 'Option 1',
50921
- value: '1'
50922
- }, {
50923
- label: 'Option 2',
50924
- value: '2'
50925
- }, {
50926
- label: 'Option 3',
50927
- value: '3'
50928
- }],
50929
- selectedOption: {
50930
- label: 'Option 2',
50931
- value: '11'
50932
- }
50933
- }), jsxRuntime.jsxs("div", {
50934
- style: {
50935
- display: 'flex',
50936
- alignItems: 'center'
50937
- },
50938
- children: [jsxRuntime.jsx(Tooltip, {
50939
- placement: "top",
50940
- title: 'Formate Painter',
50941
- children: jsxRuntime.jsx("div", {
50942
- className: formatePainterState ? 'formate-painter-active' : '',
51244
+ }), jsxRuntime.jsx(Col, {
51245
+ size: 2,
51246
+ children: jsxRuntime.jsxs("div", {
51247
+ className: "excel-toolbar-center",
51248
+ children: [jsxRuntime.jsx(Tooltip, {
51249
+ placement: "top",
51250
+ title: 'Bold',
50943
51251
  children: jsxRuntime.jsx(Icon, {
51252
+ hoverEffect: true,
50944
51253
  disabled: toolbar === 'disable',
50945
51254
  onClick: () => {
50946
- setFormatePainterState(prev => !prev);
51255
+ onBold(data);
50947
51256
  },
50948
- name: "all_borders"
51257
+ name: "bold"
50949
51258
  })
50950
- })
50951
- }), jsxRuntime.jsx(MenuOption, {
50952
- iconName: "more",
50953
- options: borderTypeIcon(),
50954
- tooltipTitle: "Border Type",
50955
- tooltipPlacement: "top",
50956
- onOptionClick: () => {
50957
- setBorderType(borderType);
50958
- }
50959
- })]
50960
- }), jsxRuntime.jsxs("div", {
50961
- style: {
50962
- display: 'flex',
50963
- alignItems: 'center'
50964
- },
50965
- children: [jsxRuntime.jsx(Tooltip, {
50966
- placement: "top",
50967
- title: 'Formate Painter',
50968
- children: jsxRuntime.jsx("div", {
50969
- className: formatePainterState ? 'formate-painter-active' : '',
51259
+ }), jsxRuntime.jsx(Tooltip, {
51260
+ placement: "top",
51261
+ title: 'Italic',
50970
51262
  children: jsxRuntime.jsx(Icon, {
51263
+ hoverEffect: true,
50971
51264
  disabled: toolbar === 'disable',
50972
51265
  onClick: () => {
50973
- setFormatePainter(data);
50974
- setFormatePainterState(prev => !prev);
51266
+ onItalic(data);
50975
51267
  },
50976
- name: "text_align_left"
51268
+ name: "italic"
50977
51269
  })
50978
- })
50979
- }), jsxRuntime.jsx(MenuOption, {
50980
- iconName: "more",
50981
- options: TextAlignIcon(),
50982
- tooltipTitle: "Text Align",
50983
- tooltipPlacement: "top",
50984
- onOptionClick: () => {
50985
- setTextAlign(textAlign);
50986
- }
50987
- })]
50988
- }), jsxRuntime.jsx(Tooltip, {
50989
- placement: "top",
50990
- title: 'Formate Painter',
50991
- children: jsxRuntime.jsx("div", {
50992
- className: formatePainterState ? 'formate-painter-active' : '',
50993
- children: jsxRuntime.jsx(Icon, {
50994
- disabled: toolbar === 'disable',
50995
- onClick: () => {
50996
- setFormatePainterState(prev => !prev);
50997
- },
50998
- name: "formate_painter"
50999
- })
51000
- })
51001
- }), jsxRuntime.jsx(Tooltip, {
51002
- placement: "top",
51003
- title: 'Formate Painter',
51004
- children: jsxRuntime.jsx("div", {
51005
- className: formatePainterState ? 'formate-painter-active' : '',
51006
- children: jsxRuntime.jsx(Icon, {
51007
- disabled: toolbar === 'disable',
51008
- onClick: () => {
51009
- setFormatePainterState(prev => !prev);
51010
- // formatePaint();
51011
- },
51012
- name: "strike_through"
51013
- })
51014
- })
51015
- }), jsxRuntime.jsx(Tooltip, {
51016
- placement: "top",
51017
- title: 'Underline',
51018
- children: jsxRuntime.jsx("div", {
51019
- children: jsxRuntime.jsx(Icon, {
51020
- disabled: toolbar === 'disable',
51021
- onClick: () => {
51022
- onUnderline(data);
51023
- },
51024
- name: "underline"
51025
- })
51270
+ }), jsxRuntime.jsx(Tooltip, {
51271
+ placement: "top",
51272
+ title: 'Underline',
51273
+ children: jsxRuntime.jsxs("div", {
51274
+ className: "excel-toolbar-menu",
51275
+ children: [jsxRuntime.jsx(Tooltip, {
51276
+ placement: "top",
51277
+ title: 'Formate Painter',
51278
+ children: jsxRuntime.jsx("div", {
51279
+ className: formatePainterState ? 'formate-painter-active' : '',
51280
+ children: jsxRuntime.jsx(Icon, {
51281
+ hoverEffect: true,
51282
+ disabled: toolbar === 'disable',
51283
+ onClick: () => {
51284
+ setUnderlineType(data, underLine, true);
51285
+ },
51286
+ name: "underline"
51287
+ })
51288
+ })
51289
+ }), jsxRuntime.jsx(MenuOption, {
51290
+ iconName: "arrow_down",
51291
+ options: underlineTypeIcon,
51292
+ tooltipTitle: "Border Type",
51293
+ tooltipPlacement: "top",
51294
+ variant: "light",
51295
+ onOptionClick: e => {
51296
+ setUnderlineType(data, e.value, true);
51297
+ setUnderLine(e.value);
51298
+ }
51299
+ })]
51300
+ })
51301
+ })]
51026
51302
  })
51027
- }), jsxRuntime.jsx(Tooltip, {
51028
- placement: "top",
51029
- title: 'Formate Painter',
51030
- children: jsxRuntime.jsx("div", {
51031
- className: formatePainterState ? 'formate-painter-active' : '',
51032
- children: jsxRuntime.jsx(Icon, {
51033
- disabled: toolbar === 'disable',
51034
- onClick: () => {
51035
- setFormatePainterState(prev => !prev);
51036
- },
51037
- name: "double_underline"
51038
- })
51303
+ }), jsxRuntime.jsx(Col, {
51304
+ size: 2,
51305
+ children: jsxRuntime.jsxs("div", {
51306
+ className: "excel-toolbar-center",
51307
+ children: [jsxRuntime.jsx(Tooltip, {
51308
+ placement: "top",
51309
+ title: 'Formate Painter',
51310
+ children: jsxRuntime.jsx("div", {
51311
+ className: formatePainterState ? 'formate-painter-active' : '',
51312
+ children: jsxRuntime.jsx(Icon, {
51313
+ hoverEffect: true,
51314
+ disabled: toolbar === 'disable',
51315
+ onClick: () => {
51316
+ setFormatePainter(data);
51317
+ setFormatePainterState(prev => !prev);
51318
+ },
51319
+ name: "formate_painter"
51320
+ })
51321
+ })
51322
+ }), jsxRuntime.jsx("div", {
51323
+ className: "menu-option",
51324
+ children: jsxRuntime.jsxs(Tooltip, {
51325
+ placement: "top",
51326
+ title: 'Text Color',
51327
+ children: [jsxRuntime.jsx(Icon, {
51328
+ hoverEffect: true,
51329
+ disabled: toolbar === 'disable',
51330
+ onClick: () => {
51331
+ setColor(data, colorContainer.color);
51332
+ },
51333
+ name: "text_color"
51334
+ }), jsxRuntime.jsx(ColorBarSelector, {
51335
+ disabled: toolbar === 'disable',
51336
+ getColorValue: getTextColor
51337
+ })]
51338
+ })
51339
+ }), jsxRuntime.jsxs("div", {
51340
+ className: "menu-option",
51341
+ children: [jsxRuntime.jsx(Tooltip, {
51342
+ placement: "top",
51343
+ title: 'Background Color',
51344
+ children: jsxRuntime.jsx(Icon, {
51345
+ hoverEffect: true,
51346
+ disabled: toolbar === 'disable',
51347
+ onClick: () => {
51348
+ setBackgroundColor(data, colorContainer.backgroundColor);
51349
+ },
51350
+ name: "fill_color"
51351
+ })
51352
+ }), jsxRuntime.jsx(ColorBarSelector, {
51353
+ disabled: toolbar === 'disable',
51354
+ getColorValue: getBackgroundColor
51355
+ })]
51356
+ })]
51039
51357
  })
51040
- }), jsxRuntime.jsx("div", {
51041
- className: "menu-option",
51042
- children: jsxRuntime.jsxs(Tooltip, {
51043
- placement: "top",
51044
- title: 'Text Color',
51045
- children: [jsxRuntime.jsx(Icon, {
51046
- disabled: toolbar === 'disable',
51047
- onClick: () => {
51048
- setColor(data, colorContainer.color);
51049
- },
51050
- name: "text_color"
51051
- }), jsxRuntime.jsx(ColorBarSelector, {
51052
- disabled: toolbar === 'disable',
51053
- getColorValue: getTextColor
51358
+ }), jsxRuntime.jsx(Col, {
51359
+ size: 1,
51360
+ children: jsxRuntime.jsxs("div", {
51361
+ className: "excel-toolbar-menu",
51362
+ children: [jsxRuntime.jsx(Tooltip, {
51363
+ placement: "top",
51364
+ title: 'Formate Painter',
51365
+ children: jsxRuntime.jsx("div", {
51366
+ className: formatePainterState ? 'formate-painter-active' : '',
51367
+ children: jsxRuntime.jsx(Icon, {
51368
+ hoverEffect: true,
51369
+ disabled: toolbar === 'disable',
51370
+ onClick: () => {
51371
+ setBorderType(data, border, 'black');
51372
+ },
51373
+ name: "all_borders"
51374
+ })
51375
+ })
51376
+ }), jsxRuntime.jsx(MenuOption, {
51377
+ iconName: "arrow_down",
51378
+ options: borderTypeIcon,
51379
+ tooltipTitle: "Border Type",
51380
+ tooltipPlacement: "top",
51381
+ variant: "light",
51382
+ onOptionClick: e => {
51383
+ setBorder(e.value);
51384
+ setBorderType(data, e.value, 'black');
51385
+ }
51054
51386
  })]
51055
51387
  })
51056
- }), jsxRuntime.jsxs("div", {
51057
- className: "menu-option",
51058
- children: [jsxRuntime.jsx(Tooltip, {
51059
- placement: "top",
51060
- title: 'Background Color',
51061
- children: jsxRuntime.jsx(Icon, {
51062
- disabled: toolbar === 'disable',
51063
- onClick: () => {
51064
- setBackgroundColor(data, colorContainer.backgroundColor);
51065
- },
51066
- name: "fill_color"
51067
- })
51068
- }), jsxRuntime.jsx(ColorBarSelector, {
51069
- disabled: toolbar === 'disable',
51070
- getColorValue: getBackgroundColor
51071
- })]
51072
51388
  })]
51073
51389
  });
51074
51390
  };
@@ -51081,20 +51397,12 @@ const Spreadsheet = props => {
51081
51397
  className,
51082
51398
  columnLabels,
51083
51399
  rowLabels,
51084
- // hideColumnIndicators,
51085
- // hideRowIndicators,
51086
51400
  onKeyDown,
51087
51401
  Table: Table$1 = Table,
51088
51402
  Row: Row$1 = Row,
51089
51403
  HeaderRow: HeaderRow$1 = HeaderRow,
51090
51404
  DataEditor: DataEditor$1 = DataEditor,
51091
51405
  DataViewer: DataViewer$1 = DataViewer,
51092
- // onChange = () => {},
51093
- // onModeChange = () => {},
51094
- onSelect = () => {},
51095
- onActivate = () => {},
51096
- // onBlur = () => {},
51097
- // onCellCommit = () => {},
51098
51406
  onEvaluatedDataChange = () => {}
51099
51407
  } = props;
51100
51408
  const initialState = React__namespace.useMemo(() => {
@@ -51121,7 +51429,6 @@ const Spreadsheet = props => {
51121
51429
  const copy$1 = useAction(copy);
51122
51430
  const paste$1 = useAction(paste);
51123
51431
  const onKeyDownAction = useAction(keyDown);
51124
- const onKeyPress = useAction(keyPress);
51125
51432
  const onDragStart = useAction(dragStart);
51126
51433
  const onDragEnd = useAction(dragEnd);
51127
51434
  const setData$1 = useAction(setData);
@@ -51129,24 +51436,14 @@ const Spreadsheet = props => {
51129
51436
  const setSelection$1 = useAction(setSelection);
51130
51437
  const onBold = useAction(bold);
51131
51438
  const onItalic = useAction(italic);
51132
- const onUnderline = useAction(underline);
51439
+ const setUnderlineType = useAction(underlineType);
51440
+ const setTextAlign = useAction(textAlign);
51441
+ const setFontSize = useAction(fontSize);
51442
+ const setFontFamily = useAction(fontFamily);
51443
+ const setBorderType = useAction(borderType);
51133
51444
  const setColor = useAction(color);
51134
51445
  const setBackgroundColor = useAction(backgroundStyle);
51135
51446
  const setFormatePainter = useAction(formatePainter);
51136
- const prevActiveRef = React__namespace.useRef(state.active);
51137
- React__namespace.useEffect(() => {
51138
- if (state.active !== prevActiveRef.current) {
51139
- if (state.active) {
51140
- onActivate(state.active);
51141
- } else {
51142
- const root = rootRef.current;
51143
- if (root && isFocusedWithin(root) && document.activeElement) {
51144
- document.activeElement.blur();
51145
- }
51146
- }
51147
- }
51148
- prevActiveRef.current = state.active;
51149
- }, [onActivate, state.active]);
51150
51447
  const prevEvaluatedDataRef = React__namespace.useRef(state.model.evaluatedData);
51151
51448
  React__namespace.useEffect(() => {
51152
51449
  if (state?.model?.evaluatedData !== prevEvaluatedDataRef?.current) {
@@ -51154,16 +51451,6 @@ const Spreadsheet = props => {
51154
51451
  }
51155
51452
  prevEvaluatedDataRef.current = state.model.evaluatedData;
51156
51453
  }, [state?.model?.evaluatedData, onEvaluatedDataChange]);
51157
- const prevSelectedRef = React__namespace.useRef(state.selected);
51158
- React__namespace.useEffect(() => {
51159
- if (!state.selected.equals(prevSelectedRef.current)) {
51160
- // Call on select only if the selection change internal
51161
- if (!props.selected || !state.selected.equals(props.selected)) {
51162
- onSelect(state.selected);
51163
- }
51164
- }
51165
- prevSelectedRef.current = state.selected;
51166
- }, [state.selected, onSelect, props.selected]);
51167
51454
  // Update selection when props.selected changes
51168
51455
  const prevSelectedPropRef = React__namespace.useRef(props.selected);
51169
51456
  React__namespace.useEffect(() => {
@@ -51180,7 +51467,6 @@ const Spreadsheet = props => {
51180
51467
  }
51181
51468
  prevDataPropRef.current = props.data;
51182
51469
  }, [props.data, setData$1]);
51183
- // Update createFormulaParser when props.createFormulaParser changes
51184
51470
  const prevCreateFormulaParserPropRef = React__namespace.useRef(props.createFormulaParser);
51185
51471
  React__namespace.useEffect(() => {
51186
51472
  if (props.createFormulaParser !== prevCreateFormulaParserPropRef.current && props.createFormulaParser) setCreateFormulaParser$1(props.createFormulaParser);
@@ -51303,32 +51589,36 @@ const Spreadsheet = props => {
51303
51589
  data: props.data,
51304
51590
  onBold: onBold,
51305
51591
  onItalic: onItalic,
51306
- onUnderline: onUnderline,
51592
+ setUnderlineType: setUnderlineType,
51307
51593
  setColor: setColor,
51594
+ setBorderType: setBorderType,
51595
+ setFontSize: setFontSize,
51596
+ setFontFamily: setFontFamily,
51597
+ setTextAlign: setTextAlign,
51308
51598
  setBackgroundColor: setBackgroundColor,
51309
51599
  setFormatePainter: setFormatePainter
51310
51600
  }), jsxRuntime.jsxs("div", {
51311
51601
  ref: rootRef,
51312
- className: classNames('Spreadsheet', className),
51313
- onKeyPress: onKeyPress,
51602
+ className: classNames('ff-spreadsheet', className),
51314
51603
  onKeyDown: handleKeyDown,
51315
51604
  onMouseMove: handleMouseMove,
51316
51605
  children: [tableNode, activeCellNode, jsxRuntime.jsx(Selected, {}), jsxRuntime.jsx(Copied, {})]
51317
51606
  })]
51318
- }), [className, onKeyPress, handleKeyDown, handleMouseMove, tableNode, activeCellNode]);
51607
+ }), [className, handleKeyDown, handleMouseMove, tableNode, activeCellNode]);
51319
51608
  return jsxRuntime.jsx(context.Provider, {
51320
51609
  value: reducerElements,
51321
51610
  children: rootNode
51322
51611
  });
51323
51612
  };
51324
51613
 
51614
+ var css_248z$1 = ".excel-page {\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.excel-page .excel-book {\n position: relative;\n width: 100%;\n}\n.excel-page .excel-book .excel-sheet {\n overflow: auto;\n scrollbar-width: thin;\n}\n.excel-page .excel-book .sheet-bar {\n margin-top: 5px;\n padding: 0p 20px;\n align-items: center;\n}\n.excel-page .excel-book .sheet-bar .add-sheet-icon {\n display: flex;\n align-items: start;\n justify-content: center;\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container {\n display: flex;\n overflow-x: auto;\n align-items: center;\n scrollbar-width: thin;\n scrollbar-color: var(--hover-color) transparent;\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container::-webkit-scrollbar-thumb {\n border-radius: 5px;\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container .excel-tab-list {\n padding: 10px 20px;\n min-width: max-content;\n cursor: pointer;\n display: flex;\n font-weight: bold;\n background-color: var(--hover-color);\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container .excel-tab-list.active {\n background-color: var(--excel-sheet-button-color);\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container .excel-tab-list:focus {\n outline: none;\n text-decoration: none;\n}\n\n.menu-list {\n display: flex;\n align-items: center;\n}\n.menu-list .menu-title {\n padding-left: 5px;\n}";
51615
+ styleInject(css_248z$1);
51616
+
51325
51617
  const ExcelFile = ({
51326
51618
  excelData,
51327
51619
  onSave = () => {}
51328
51620
  }) => {
51329
- const [fileDetails, setFileDetails] = React.useState({
51330
- sheetNames: []
51331
- });
51621
+ const [sheetNames, setSheetNames] = React.useState([]);
51332
51622
  const EmptyRow = {
51333
51623
  value: '',
51334
51624
  style: {
@@ -51345,10 +51635,8 @@ const ExcelFile = ({
51345
51635
  defaultSheet: [[EmptyRow]]
51346
51636
  });
51347
51637
  const [selectedSheetData, setSelectedSheetData] = React.useState([[EmptyRow]]);
51638
+ let pageRef = React.useRef('');
51348
51639
  const sheetRef = React.useRef(null);
51349
- const excelDataCopy = React.useRef({
51350
- defaultSheet: [[]]
51351
- });
51352
51640
  let checkVal = val => {
51353
51641
  if (val === undefined || val === null) {
51354
51642
  return null;
@@ -51358,10 +51646,9 @@ const ExcelFile = ({
51358
51646
  React.useEffect(() => {
51359
51647
  const payload = excelData;
51360
51648
  const sheetNames = payload.sheets.map(e => e.sheetName);
51361
- setFileDetails({
51362
- sheetNames
51363
- });
51649
+ setSheetNames(sheetNames);
51364
51650
  if (sheetNames.length > 0) {
51651
+ pageRef.current = sheetNames[0] ? sheetNames[0] : '';
51365
51652
  setSelectedSheet({
51366
51653
  name: sheetNames[0] ? sheetNames[0] : '',
51367
51654
  index: 0
@@ -51371,8 +51658,8 @@ const ExcelFile = ({
51371
51658
  payload.sheets.forEach(sheet => {
51372
51659
  const sheetName = sheet.sheetName;
51373
51660
  const json = sheet.data;
51374
- const maxRows = Math.max(26, json.length + 2);
51375
- const maxCols = Math.max(26, Math.max(...json.map(row => row.length)) + 2);
51661
+ const maxRows = Math.max(15, json.length + 2);
51662
+ const maxCols = Math.max(15, Math.max(...json.map(row => row.length)) + 2);
51376
51663
  let spreadsheetData = Array.from({
51377
51664
  length: maxRows
51378
51665
  }, () => Array.from({
@@ -51394,63 +51681,187 @@ const ExcelFile = ({
51394
51681
  });
51395
51682
  newWorksheetsData[sheetName] = spreadsheetData;
51396
51683
  });
51397
- excelDataCopy.current = newWorksheetsData;
51398
51684
  setWorksheetsData(newWorksheetsData);
51399
51685
  const firstSheetName = Object.keys(newWorksheetsData)[0];
51400
51686
  if (firstSheetName && newWorksheetsData[firstSheetName] !== undefined) {
51401
51687
  setSelectedSheetData(newWorksheetsData[firstSheetName]);
51402
51688
  }
51403
51689
  }, []);
51404
- const handleSaveData = () => {
51405
- const dataToSave = {
51406
- sheets: fileDetails.sheetNames.map(sheetName => ({
51407
- sheetName: sheetName,
51408
- data: (worksheetsData[sheetName] ?? []).map(row => row.map(cell => ({
51409
- value: cell?.value,
51410
- style: cell?.style
51411
- })))
51412
- }))
51413
- };
51414
- onSave(dataToSave);
51415
- };
51416
- let handleSave = e => {
51417
- if (e.ctrlKey && e.key === 's') {
51418
- e.preventDefault();
51419
- handleSaveData();
51690
+ const onEvaluateChange = data => {
51691
+ setWorksheetsData(prev => ({
51692
+ ...prev,
51693
+ [pageRef.current]: data
51694
+ }));
51695
+ onSave();
51696
+ };
51697
+ const [editingSheet, setEditingSheet] = React.useState(null);
51698
+ const handleAddSheet = () => {
51699
+ const generateUniqueSheetName = (baseName, existingNames) => {
51700
+ let newName = baseName;
51701
+ let counter = 1;
51702
+ while (existingNames.includes(newName)) {
51703
+ newName = `${baseName}${counter}`;
51704
+ counter++;
51705
+ }
51706
+ return newName;
51707
+ };
51708
+ const baseName = 'NewSheet';
51709
+ const existingSheetNames = sheetNames;
51710
+ const newSheetName = generateUniqueSheetName(baseName, existingSheetNames);
51711
+ const newSheetData = Array.from({
51712
+ length: 15
51713
+ }, () => Array.from({
51714
+ length: 15
51715
+ }, () => EmptyRow));
51716
+ setSheetNames(prev => [...prev, newSheetName]);
51717
+ setSelectedSheet({
51718
+ index: sheetNames?.length,
51719
+ name: newSheetName
51720
+ });
51721
+ setWorksheetsData({
51722
+ ...worksheetsData,
51723
+ [newSheetName]: newSheetData
51724
+ });
51725
+ setSelectedSheetData(newSheetData);
51726
+ pageRef.current = newSheetName;
51727
+ };
51728
+ const handleNameChange = (event, index, name) => {
51729
+ const target = event.target;
51730
+ if (!target) {
51731
+ setEditingSheet(null);
51732
+ return;
51733
+ }
51734
+ const updatedSheetValue = target.textContent?.trim();
51735
+ if (!updatedSheetValue) {
51736
+ toast.warning('Sheet name cannot be empty.');
51737
+ target.textContent = selectedSheet.name;
51738
+ setEditingSheet(null);
51739
+ return;
51740
+ }
51741
+ if (updatedSheetValue.length > 30) {
51742
+ toast.warning('The sheet name cannot be greater than 30 characters');
51743
+ target.textContent = selectedSheet.name;
51744
+ setEditingSheet(null);
51745
+ return;
51746
+ }
51747
+ if (sheetNames.includes(updatedSheetValue) && sheetNames[index] !== updatedSheetValue) {
51748
+ toast.warning('Sheet name already exists');
51749
+ target.textContent = selectedSheet.name;
51750
+ setEditingSheet(null);
51751
+ return;
51420
51752
  }
51753
+ let updatedSheetNames = sheetNames;
51754
+ updatedSheetNames.splice(index, 1, updatedSheetValue);
51755
+ let remainingSheets = worksheetsData;
51756
+ let updatedData = replaceKeyValueByKeyName(remainingSheets, name, updatedSheetValue, selectedSheetData);
51757
+ pageRef.current = updatedSheetValue;
51758
+ setSelectedSheet(prev => ({
51759
+ ...prev,
51760
+ name: updatedSheetValue
51761
+ }));
51762
+ setWorksheetsData(updatedData);
51763
+ setEditingSheet(null);
51421
51764
  };
51422
- React.useEffect(() => {
51423
- document.addEventListener('keydown', handleSave);
51424
- return () => {
51425
- document.removeEventListener('keydown', handleSave);
51426
- };
51427
- }, [worksheetsData]);
51765
+ function replaceKeyValueByKeyName(obj, oldKey, newKey, newValue) {
51766
+ if (!(oldKey in obj)) {
51767
+ throw new Error(`Key "${oldKey}" not found in object`);
51768
+ }
51769
+ delete obj[oldKey];
51770
+ obj[newKey] = newValue;
51771
+ return obj;
51772
+ }
51428
51773
  const handleSheetChange = (name, index) => {
51429
51774
  setSelectedSheet({
51430
51775
  index,
51431
51776
  name
51432
51777
  });
51778
+ setSheetNames(prev => {
51779
+ const updatedSheetNames = [...prev];
51780
+ updatedSheetNames[index] = name;
51781
+ return updatedSheetNames;
51782
+ });
51783
+ const selectedSheetData = worksheetsData[name];
51784
+ if (selectedSheetData) {
51785
+ setSelectedSheetData(selectedSheetData);
51786
+ } else {
51787
+ setSelectedSheetData([[EmptyRow]]);
51788
+ }
51789
+ pageRef.current = name;
51433
51790
  };
51434
- return jsxRuntime.jsx("div", {
51791
+ const setCursorToEnd = element => {
51792
+ const range = document.createRange();
51793
+ const selection = window.getSelection();
51794
+ range.selectNodeContents(element);
51795
+ range.collapse(false);
51796
+ selection?.removeAllRanges();
51797
+ selection?.addRange(range);
51798
+ };
51799
+ return jsxRuntime.jsxs("div", {
51435
51800
  className: "excel-page",
51436
- children: fileDetails.sheetNames.length > 0 && jsxRuntime.jsxs("div", {
51801
+ children: [sheetNames.length > 0 && jsxRuntime.jsxs("div", {
51437
51802
  className: "excel-book",
51438
51803
  children: [jsxRuntime.jsx("div", {
51439
51804
  ref: sheetRef,
51440
51805
  className: "excel-sheet",
51441
51806
  children: jsxRuntime.jsx(Spreadsheet, {
51442
- data: selectedSheetData
51807
+ data: selectedSheetData,
51808
+ onEvaluatedDataChange: onEvaluateChange
51443
51809
  })
51444
- }), jsxRuntime.jsx(ExcelSheetBar, {
51445
- selectedSheet: selectedSheet,
51446
- fileDetails: fileDetails,
51447
- handleSheetChange: handleSheetChange
51810
+ }), jsxRuntime.jsxs(Row$1, {
51811
+ className: "sheet-bar",
51812
+ children: [jsxRuntime.jsx(Col, {
51813
+ size: 0,
51814
+ className: "add-sheet-icon",
51815
+ children: jsxRuntime.jsx(Tooltip, {
51816
+ title: "Add Sheet",
51817
+ placement: "top",
51818
+ children: jsxRuntime.jsx(Icon, {
51819
+ className: "cursor-pointer ml-1",
51820
+ hoverEffect: true,
51821
+ onClick: () => {
51822
+ handleAddSheet();
51823
+ },
51824
+ name: "plus_icon",
51825
+ height: 20,
51826
+ width: 20
51827
+ })
51828
+ })
51829
+ }), jsxRuntime.jsx(Col, {
51830
+ size: 10,
51831
+ children: jsxRuntime.jsx("div", {
51832
+ className: "excel-tab-container",
51833
+ children: sheetNames.map((name, index) => jsxRuntime.jsx("div", {
51834
+ className: `excel-tab-list ${name === selectedSheet.name ? 'active' : ''}`,
51835
+ onClick: () => {
51836
+ handleSheetChange(name, index);
51837
+ },
51838
+ suppressContentEditableWarning: editingSheet === index,
51839
+ onDoubleClick: e => {
51840
+ setEditingSheet(index);
51841
+ if (editingSheet === null) {
51842
+ setTimeout(() => setCursorToEnd(e.target), 0);
51843
+ }
51844
+ },
51845
+ contentEditable: editingSheet === index,
51846
+ onBlur: e => {
51847
+ handleNameChange(e, index, name);
51848
+ },
51849
+ onKeyDown: e => {
51850
+ if (e.key === 'Enter') {
51851
+ e.preventDefault();
51852
+ handleNameChange(e, index, name);
51853
+ }
51854
+ },
51855
+ children: name
51856
+ }, name))
51857
+ })
51858
+ })]
51448
51859
  })]
51449
- })
51860
+ }), jsxRuntime.jsx(Toastify, {})]
51450
51861
  });
51451
51862
  };
51452
51863
 
51453
- var css_248z = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\n}\n.fontXs {\n font-family: \"Poppins\", sans-serif;\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\", sans-serif;\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\", sans-serif;\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\", sans-serif;\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\", sans-serif;\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\", sans-serif;\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\", sans-serif;\n font-size: 8px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\", sans-serif;\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\", sans-serif;\n font-size: 80px;\n}\n\n.ff-expandable-chip-menu {\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-expandable-chip-menu .ff-label-chip--active {\n color: var(--ff-header-text-color);\n}\n.ff-expandable-chip-menu--active {\n background: var(--brand-color);\n}";
51864
+ var css_248z = "@font-face {\n font-family: \"Poppins\";\n font-weight: 400;\n src: local(\"Poppins-Regular\"), url(../../fonts/Poppins/Poppins-Regular.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 500;\n src: local(\"Poppins-Medium\"), url(../../fonts/Poppins/Poppins-Medium.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 600;\n src: local(\"Poppins-SemiBold\"), url(../../fonts/Poppins/Poppins-SemiBold.ttf) format(\"truetype\");\n}\n@font-face {\n font-family: \"Poppins\";\n font-weight: 700;\n src: local(\"Poppins-Bold\"), url(../../fonts/Poppins/Poppins-Bold.ttf) format(\"truetype\");\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-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}";
51454
51865
  styleInject(css_248z);
51455
51866
 
51456
51867
  const ModuleChip = ({
@@ -51459,13 +51870,13 @@ const ModuleChip = ({
51459
51870
  onClick = () => {}
51460
51871
  }) => {
51461
51872
  return jsxRuntime.jsx("div", {
51462
- className: classNames('ff-expandable-chip-menu', {
51463
- 'ff-expandable-chip-menu--active': isActive
51873
+ className: classNames('ff-Module-chip', {
51874
+ 'ff-Module-chip--active': isActive
51464
51875
  }),
51465
51876
  onClick: onClick,
51466
51877
  children: jsxRuntime.jsx("div", {
51467
- className: classNames(`ff-label-chip `, {
51468
- 'ff-label-chip--active': isActive
51878
+ className: classNames(`ff-Module-label-chip `, {
51879
+ 'ff-Module-label-chip--active': isActive
51469
51880
  }),
51470
51881
  children: jsxRuntime.jsx(Typography, {
51471
51882
  fontSize: '14px',
@@ -56824,6 +57235,24 @@ const throttle = (func, limit) => {
56824
57235
  return throttled;
56825
57236
  };
56826
57237
 
57238
+ const getSequentialPayload = (machineInstances = []) => {
57239
+ return machineInstances.flatMap(machineInstance => machineInstance.runLevelExecutionDataSets.map(runLevelExecutionDataSet => ({
57240
+ id: machineInstance.id,
57241
+ clientId: machineInstance.clientId,
57242
+ numberOfRuns: machineInstance.numberOfRuns,
57243
+ executionEnv: machineInstance.executionEnv,
57244
+ browserName: machineInstance.browserName,
57245
+ browserVersion: machineInstance.browserVersion,
57246
+ systemUrl: machineInstance.systemUrl,
57247
+ machineInfo: machineInstance.machineInfo,
57248
+ deviceInfo: machineInstance.deviceInfo,
57249
+ headless: machineInstance.headless,
57250
+ peVariableSetId: runLevelExecutionDataSet.peVariableSetId,
57251
+ globalVariableSetId: runLevelExecutionDataSet.globalVariableSetId,
57252
+ testDataSetId: runLevelExecutionDataSet.testDataSetId
57253
+ })));
57254
+ };
57255
+
56827
57256
  exports.Accordion = Accordion;
56828
57257
  exports.AddResourceButton = AddButton;
56829
57258
  exports.AllProjectsDropdown = AllProjectsDropdown;
@@ -56839,7 +57268,7 @@ exports.DatePicker = CustomDatePicker;
56839
57268
  exports.DonutChart = DonutChart;
56840
57269
  exports.DragAndDrop = DragAndDrop;
56841
57270
  exports.Drawer = Drawer;
56842
- exports.ExcelFile = ExcelFile;
57271
+ exports.Excel = ExcelFile;
56843
57272
  exports.ExpandableMenu = ExpandableMenu;
56844
57273
  exports.FileDropzone = FileDropzone;
56845
57274
  exports.Form = Forms;
@@ -56890,6 +57319,7 @@ exports.findAndInsert = findAndInsert;
56890
57319
  exports.getEncryptedData = getEncryptedData;
56891
57320
  exports.getExtension = getExtension;
56892
57321
  exports.getExtensionWithPeriod = getExtensionWithPeriod;
57322
+ exports.getSequentialPayload = getSequentialPayload;
56893
57323
  exports.throttle = throttle;
56894
57324
  exports.toast = toast;
56895
57325
  exports.truncateText = truncateText;