pixel-react 1.6.9 → 1.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (147) hide show
  1. package/lib/components/Charts/LineChart/types.d.ts +1 -0
  2. package/lib/components/Chip/types.d.ts +1 -1
  3. package/lib/components/ConditionalDropdown/ConditionalDropdown.d.ts +5 -0
  4. package/lib/components/ConditionalDropdown/OptionsDropdown.d.ts +5 -0
  5. package/lib/components/ConditionalDropdown/index.d.ts +1 -0
  6. package/lib/components/ConditionalDropdown/types.d.ts +145 -0
  7. package/lib/components/DownloadClient/type.d.ts +19 -27
  8. package/lib/components/Excel/ExcelFile/ExcelFileComponents/actions.d.ts +8 -1
  9. package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.d.ts +2 -0
  10. package/lib/components/Excel/ExcelFile/ExcelFileComponents/types.d.ts +13 -6
  11. package/lib/components/LabelEditTextField/types.d.ts +1 -0
  12. package/lib/components/MachineInputField/types.d.ts +1 -0
  13. package/lib/components/MenuOption/MenuOption.d.ts +1 -1
  14. package/lib/components/MenuOption/types.d.ts +2 -1
  15. package/lib/components/MiniModal/types.d.ts +1 -0
  16. package/lib/components/MultiSelect/MultiSelect.d.ts +1 -1
  17. package/lib/components/MultiSelect/MultiSelectTypes.d.ts +1 -0
  18. package/lib/components/MultiSelect/dropdownTypes.d.ts +1 -0
  19. package/lib/components/NLPInput/NlpInput.d.ts +2 -2
  20. package/lib/components/NLPInput/components/NlpDropDown/NlpDropDownType.d.ts +6 -3
  21. package/lib/components/NLPInput/components/NlpDropDown/NlpDropdown.d.ts +1 -1
  22. package/lib/components/NLPInput/sampleData.d.ts +104 -0
  23. package/lib/components/NLPInput/types.d.ts +80 -0
  24. package/lib/components/ProgressBar/ProgressBar.d.ts +5 -0
  25. package/lib/components/ProgressBar/index.d.ts +1 -0
  26. package/lib/components/ProgressBar/types.d.ts +12 -0
  27. package/lib/components/SequentialConnectingBranch/components/Branches/Branches.d.ts +1 -1
  28. package/lib/components/SequentialConnectingBranch/components/Branches/types.d.ts +4 -0
  29. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.d.ts +1 -1
  30. package/lib/components/SequentialConnectingBranch/components/ConnectingBranches/types.d.ts +4 -0
  31. package/lib/components/SequentialConnectingBranch/types.d.ts +7 -1
  32. package/lib/components/TableTree/TableTree.d.ts +2 -2
  33. package/lib/components/TableTree/Utils/getAllChildIds.d.ts +1 -0
  34. package/lib/components/TableTree/types.d.ts +1 -1
  35. package/lib/hooks/useIntersectionObserver.d.ts +9 -0
  36. package/lib/index.d.ts +112 -59
  37. package/lib/index.esm.js +1251 -662
  38. package/lib/index.esm.js.map +1 -1
  39. package/lib/index.js +1252 -662
  40. package/lib/index.js.map +1 -1
  41. package/lib/tsconfig.tsbuildinfo +1 -1
  42. package/lib/utils/functionCheck/functionCheck.d.ts +2 -0
  43. package/lib/utils/getSequentialPayload/types.d.ts +1 -0
  44. package/package.json +1 -1
  45. package/src/StyleGuide/ColorPalette/colorPaletteList.ts +5 -0
  46. package/src/assets/Themes/BaseTheme.scss +20 -2
  47. package/src/assets/Themes/DarkTheme.scss +19 -2
  48. package/src/assets/icons/ai_search.svg +9 -0
  49. package/src/assets/icons/help_icon.svg +10 -0
  50. package/src/assets/icons/ios_icon.svg +11 -0
  51. package/src/assets/icons/plus_round_icon.svg +38 -0
  52. package/src/assets/icons/tick_icon.svg +2 -2
  53. package/src/assets/styles/_colors.scss +1 -1
  54. package/src/components/AttachmentButton/AttachmentButton.tsx +1 -1
  55. package/src/components/Charts/LineChart/LineChart.stories.tsx +7 -3
  56. package/src/components/Charts/LineChart/LineChart.tsx +10 -1
  57. package/src/components/Charts/LineChart/types.ts +1 -0
  58. package/src/components/Checkbox/Checkbox.scss +3 -1
  59. package/src/components/Checkbox/Checkbox.stories.tsx +32 -77
  60. package/src/components/Checkbox/Checkbox.tsx +3 -4
  61. package/src/components/Chip/Chip.scss +15 -5
  62. package/src/components/Chip/Chip.stories.tsx +10 -1
  63. package/src/components/Chip/Chip.tsx +5 -1
  64. package/src/components/Chip/types.ts +1 -1
  65. package/src/components/{AddVariables/AddVariables.scss → ConditionalDropdown/ConditionalDropdown.scss} +4 -0
  66. package/src/components/{AddVariables/AddVariables.stories.tsx → ConditionalDropdown/ConditionalDropdown.stories.tsx} +75 -10
  67. package/src/components/{AddVariables/AddVariables.tsx → ConditionalDropdown/ConditionalDropdown.tsx} +63 -33
  68. package/src/components/ConditionalDropdown/OptionsDropdown.tsx +44 -0
  69. package/src/components/ConditionalDropdown/index.ts +1 -0
  70. package/src/components/{AddVariables → ConditionalDropdown}/types.ts +62 -5
  71. package/src/components/DownloadClient/DownloadClient.scss +51 -64
  72. package/src/components/DownloadClient/DownloadClient.stories.tsx +6 -6
  73. package/src/components/DownloadClient/DownloadClient.tsx +60 -51
  74. package/src/components/DownloadClient/type.ts +32 -40
  75. package/src/components/EditTextField/EditTextField.scss +1 -1
  76. package/src/components/EditTextField/EditTextField.tsx +14 -20
  77. package/src/components/Excel/ExcelFile/ExcelFile.scss +3 -2
  78. package/src/components/Excel/ExcelFile/ExcelFile.tsx +37 -21
  79. package/src/components/Excel/ExcelFile/ExcelFileComponents/ActiveCell.tsx +12 -0
  80. package/src/components/Excel/ExcelFile/ExcelFileComponents/Cell.tsx +2 -34
  81. package/src/components/Excel/ExcelFile/ExcelFileComponents/FloatingRect.tsx +26 -1
  82. package/src/components/Excel/ExcelFile/ExcelFileComponents/Spreadsheet.scss +7 -7
  83. package/src/components/Excel/ExcelFile/ExcelFileComponents/actions.ts +13 -0
  84. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducer.ts +53 -26
  85. package/src/components/Excel/ExcelFile/ExcelFileComponents/reducerFunctions.ts +81 -14
  86. package/src/components/Excel/ExcelFile/ExcelFileComponents/types.ts +17 -6
  87. package/src/components/Excel/ExcelFile.stories.tsx +4 -4
  88. package/src/components/Excel/ExcelToolBar/ExcelToolBar.tsx +36 -19
  89. package/src/components/Excel/dataConversion.ts +43 -20
  90. package/src/components/FileDropzone/FileDropzone.stories.tsx +5 -19
  91. package/src/components/FileDropzone/FileDropzone.tsx +24 -4
  92. package/src/components/Form/Forms.tsx +0 -2
  93. package/src/components/Icon/iconList.ts +9 -0
  94. package/src/components/LabelEditTextField/LabelEditTextField.scss +1 -1
  95. package/src/components/LabelEditTextField/LabelEditTextField.tsx +29 -36
  96. package/src/components/LabelEditTextField/types.ts +1 -0
  97. package/src/components/MachineInputField/MachineInputField.scss +1 -5
  98. package/src/components/MachineInputField/MachineInputField.stories.tsx +6 -5
  99. package/src/components/MachineInputField/MachineInputField.tsx +14 -14
  100. package/src/components/MachineInputField/types.ts +2 -0
  101. package/src/components/MenuOption/MenuOption.scss +7 -7
  102. package/src/components/MenuOption/MenuOption.stories.tsx +83 -28
  103. package/src/components/MenuOption/MenuOption.tsx +9 -13
  104. package/src/components/MenuOption/types.ts +3 -2
  105. package/src/components/MiniModal/MiniModal.scss +0 -1
  106. package/src/components/MiniModal/MiniModal.stories.tsx +6 -1
  107. package/src/components/MiniModal/MiniModal.tsx +3 -1
  108. package/src/components/MiniModal/types.ts +1 -0
  109. package/src/components/MultiSelect/Dropdown.scss +3 -4
  110. package/src/components/MultiSelect/Dropdown.tsx +34 -7
  111. package/src/components/MultiSelect/MultiSelect.scss +1 -0
  112. package/src/components/MultiSelect/MultiSelect.tsx +3 -0
  113. package/src/components/MultiSelect/MultiSelectTypes.ts +3 -1
  114. package/src/components/MultiSelect/dropdownTypes.ts +2 -0
  115. package/src/components/NLPInput/NLPInput.scss +77 -21
  116. package/src/components/NLPInput/NlpInput.stories.tsx +43 -109
  117. package/src/components/NLPInput/NlpInput.tsx +95 -59
  118. package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts +6 -4
  119. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss +86 -35
  120. package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.tsx +220 -80
  121. package/src/components/NLPInput/sampleData.ts +162 -0
  122. package/src/components/NLPInput/{type.tsx → types.tsx} +23 -11
  123. package/src/components/ProgressBar/ProgressBar.scss +46 -0
  124. package/src/components/ProgressBar/ProgressBar.stories.tsx +22 -0
  125. package/src/components/ProgressBar/ProgressBar.tsx +61 -0
  126. package/src/components/ProgressBar/index.ts +1 -0
  127. package/src/components/ProgressBar/types.ts +12 -0
  128. package/src/components/Search/Search.tsx +9 -1
  129. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.stories.tsx +13 -2
  130. package/src/components/SequentialConnectingBranch/SequentialConnectingBranch.tsx +36 -19
  131. package/src/components/SequentialConnectingBranch/components/Branches/Branches.tsx +120 -32
  132. package/src/components/SequentialConnectingBranch/components/Branches/types.ts +7 -0
  133. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/ConnectingBranches.tsx +8 -0
  134. package/src/components/SequentialConnectingBranch/components/ConnectingBranches/types.ts +7 -0
  135. package/src/components/SequentialConnectingBranch/types.ts +7 -5
  136. package/src/components/Table/Table.scss +1 -0
  137. package/src/components/TableTree/Components/TableBody.tsx +3 -1
  138. package/src/components/TableTree/TableTree.stories.tsx +4 -7
  139. package/src/components/TableTree/TableTree.tsx +27 -181
  140. package/src/components/TableTree/Utils/getAllChildIds.ts +2 -0
  141. package/src/components/TableTree/data.ts +45 -0
  142. package/src/components/TableTree/types.ts +4 -4
  143. package/src/hooks/useIntersectionObserver.tsx +56 -0
  144. package/src/index.ts +4 -2
  145. package/src/utils/functionCheck/functionCheck.ts +8 -0
  146. package/src/utils/getSequentialPayload/types.ts +1 -0
  147. package/src/components/AddVariables/index.ts +0 -1
package/lib/index.esm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
2
2
  import * as React from 'react';
3
- import React__default, { forwardRef, useRef, useEffect, useState, createContext as createContext$1, useContext, useMemo, useCallback, createElement, PureComponent, useImperativeHandle, useLayoutEffect, memo, useReducer, cloneElement, Component } from 'react';
3
+ import React__default, { forwardRef, useRef, useEffect, useState, createContext as createContext$1, useContext, useMemo, useCallback, createElement, PureComponent, useImperativeHandle, memo, useLayoutEffect, useReducer, cloneElement, Component } from 'react';
4
4
  import { createPortal, unstable_batchedUpdates } from 'react-dom';
5
5
 
6
6
  function styleInject(css, ref) {
@@ -28,11 +28,11 @@ function styleInject(css, ref) {
28
28
  }
29
29
  }
30
30
 
31
- var css_248z$1h = ":root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs, .ff-button, .ff-button--small, .ff-button--medium {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd, .ff-button--large {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-button {\n width: auto;\n background-color: var(--primary-button-text-color);\n border-radius: 4px;\n padding: 4px 8px;\n text-align: center;\n text-decoration: none;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n gap: 4px;\n justify-content: center;\n align-items: center;\n border: 2px solid transparent;\n}\n.ff-button--transparent {\n background-color: transparent;\n}\n.ff-button--primary, .ff-button--delete, .ff-button--secondary {\n position: relative;\n cursor: pointer;\n border-radius: 4px;\n z-index: 1;\n border: none;\n overflow: hidden;\n}\n.ff-button--primary:before, .ff-button--delete:before, .ff-button--secondary:before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 4px;\n padding: 0.6px;\n background: var(--primary-button-border);\n mask: linear-gradient(var(--primary-button-text-color) 0 0) content-box, linear-gradient(var(--primary-button-text-color) 0 0);\n mask-composite: exclude;\n -webkit-mask: linear-gradient(var(--primary-button-text-color) 0 0) content-box, linear-gradient(var(--primary-button-text-color) 0 0);\n -webkit-mask-composite: destination-out;\n z-index: -1;\n}\n.ff-button--primary:hover, .ff-button--delete:hover, .ff-button--secondary:hover {\n background: var(--primary-button-hover);\n}\n.ff-button--primary:disabled, .ff-button--delete:disabled, .ff-button--secondary:disabled {\n opacity: 50%;\n cursor: no-drop;\n}\n.ff-button--primary:disabled:before, .ff-button--delete:disabled:before, .ff-button--secondary:disabled:before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 4px;\n padding: 0.6px;\n -webkit-mask-composite: destination-out;\n mask-composite: exclude;\n z-index: -1;\n}\n.ff-button--primary {\n background: var(--primary-button-color);\n}\n.ff-button--primary:before {\n background: var(--primary-button-border);\n}\n.ff-button--primary:hover {\n background: var(--primary-button-hover);\n}\n.ff-button--delete {\n background: var(--delete-button-color);\n color: var(--primary-button-text-color);\n}\n.ff-button--delete:before {\n background: var(--delete-button-border);\n}\n.ff-button--delete:hover {\n background: var(--delete-button-hover);\n}\n.ff-button--warning {\n background: var(--warning-button-color);\n border: var(--warning-button-border);\n}\n.ff-button--secondary:before {\n background: var(--primary-button-border);\n}\n.ff-button--secondary:hover {\n background: var(--secondary-button-hover);\n}\n.ff-button--tertiary {\n border: none;\n background: var(--tertiary-button-color);\n}\n.ff-button--tertiary:hover {\n background: var(--tertiary-button-hover);\n}\n.ff-button--tertiary:disabled {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-button--small {\n font-weight: 500;\n padding: 4.5px 8px;\n line-height: 15px;\n}\n.ff-button--medium {\n font-weight: 500;\n padding: 6px 12px;\n}\n.ff-button--large {\n padding: 8px 16px;\n}\n.ff-button-primary--text {\n color: var(--primary-button-text-color);\n}\n.ff-button-secondary--text, .ff-button-tertiary--text {\n background: var(--secondary-button-color-text);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}";
32
- styleInject(css_248z$1h);
31
+ var css_248z$1i = ":root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs, .ff-button, .ff-button--small, .ff-button--medium {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd, .ff-button--large {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-button {\n width: auto;\n background-color: var(--primary-button-text-color);\n border-radius: 4px;\n padding: 4px 8px;\n text-align: center;\n text-decoration: none;\n font-weight: 500;\n cursor: pointer;\n display: flex;\n gap: 4px;\n justify-content: center;\n align-items: center;\n border: 2px solid transparent;\n}\n.ff-button--transparent {\n background-color: transparent;\n}\n.ff-button--primary, .ff-button--delete, .ff-button--secondary {\n position: relative;\n cursor: pointer;\n border-radius: 4px;\n z-index: 1;\n border: none;\n overflow: hidden;\n}\n.ff-button--primary:before, .ff-button--delete:before, .ff-button--secondary:before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 4px;\n padding: 0.6px;\n background: var(--primary-button-border);\n mask: linear-gradient(var(--primary-button-text-color) 0 0) content-box, linear-gradient(var(--primary-button-text-color) 0 0);\n mask-composite: exclude;\n -webkit-mask: linear-gradient(var(--primary-button-text-color) 0 0) content-box, linear-gradient(var(--primary-button-text-color) 0 0);\n -webkit-mask-composite: destination-out;\n z-index: -1;\n}\n.ff-button--primary:hover, .ff-button--delete:hover, .ff-button--secondary:hover {\n background: var(--primary-button-hover);\n}\n.ff-button--primary:disabled, .ff-button--delete:disabled, .ff-button--secondary:disabled {\n opacity: 50%;\n cursor: no-drop;\n}\n.ff-button--primary:disabled:before, .ff-button--delete:disabled:before, .ff-button--secondary:disabled:before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 4px;\n padding: 0.6px;\n -webkit-mask-composite: destination-out;\n mask-composite: exclude;\n z-index: -1;\n}\n.ff-button--primary {\n background: var(--primary-button-color);\n}\n.ff-button--primary:before {\n background: var(--primary-button-border);\n}\n.ff-button--primary:hover {\n background: var(--primary-button-hover);\n}\n.ff-button--delete {\n background: var(--delete-button-color);\n color: var(--primary-button-text-color);\n}\n.ff-button--delete:before {\n background: var(--delete-button-border);\n}\n.ff-button--delete:hover {\n background: var(--delete-button-hover);\n}\n.ff-button--warning {\n background: var(--warning-button-color);\n border: var(--warning-button-border);\n}\n.ff-button--secondary:before {\n background: var(--primary-button-border);\n}\n.ff-button--secondary:hover {\n background: var(--secondary-button-hover);\n}\n.ff-button--tertiary {\n border: none;\n background: var(--tertiary-button-color);\n}\n.ff-button--tertiary:hover {\n background: var(--tertiary-button-hover);\n}\n.ff-button--tertiary:disabled {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-button--small {\n font-weight: 500;\n padding: 4.5px 8px;\n line-height: 15px;\n}\n.ff-button--medium {\n font-weight: 500;\n padding: 6px 12px;\n}\n.ff-button--large {\n padding: 8px 16px;\n}\n.ff-button-primary--text {\n color: var(--primary-button-text-color);\n}\n.ff-button-secondary--text, .ff-button-tertiary--text {\n background: var(--secondary-button-color-text);\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n}";
32
+ styleInject(css_248z$1i);
33
33
 
34
- var css_248z$1g = ":root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --variable-dropdown-bg: #($variable-dropdown-bg);\n}";
35
- styleInject(css_248z$1g);
34
+ var css_248z$1h = ":root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --variable-dropdown-bg: #($variable-dropdown-bg);\n}";
35
+ styleInject(css_248z$1h);
36
36
 
37
37
  function getDefaultExportFromCjs (x) {
38
38
  return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -163,7 +163,7 @@ const SvgWrongMark = (props) => /* @__PURE__ */ React.createElement("svg", { wid
163
163
 
164
164
  const SvgFireflinkIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 22 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M8.30815 2.44586C8.00129 2.63411 7.75562 2.75272 7.509 2.87602C6.58748 3.36737 5.7272 3.79754 4.80568 4.28795C4.74167 4.32431 4.68966 4.37863 4.6562 4.44421C4.62274 4.5098 4.60923 4.58376 4.61736 4.65693V23.2755C4.61736 23.5212 4.55624 23.7057 4.31057 23.7669C3.85464 23.9552 3.36009 24.0312 2.86866 23.9884C2.37722 23.9457 1.90328 23.7854 1.48672 23.5212C1.18046 23.3059 0.919692 23.0323 0.7194 22.716C0.519108 22.3997 0.383245 22.047 0.319539 21.6782C0.16509 20.682 0.102006 19.6737 0.131213 18.666C0.0700298 13.7497 0.00884184 8.77315 0.00884184 3.85683C-0.0391441 3.07511 0.108741 2.29379 0.439038 1.58366C0.717224 0.990161 1.19816 0.515478 1.79523 0.245067C2.39231 -0.0253429 3.06627 -0.0737303 3.69584 0.108649C4.56928 0.371444 5.39798 0.764987 6.15361 1.27586C6.82945 1.64484 7.50528 2.01287 8.11994 2.38186C8.18583 2.32255 8.24697 2.38373 8.30815 2.44586Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M8.42587 21.3723V16.0258C8.42442 15.9536 8.44083 15.8821 8.47367 15.8177C8.50651 15.7533 8.55473 15.6981 8.61408 15.6569C10.7037 14.4887 12.7934 13.3215 14.8209 12.1543C15.3734 11.8465 15.9269 11.5397 16.5406 11.1707C16.1854 10.9425 15.8159 10.7372 15.4346 10.556C14.5131 10.0026 13.5917 9.51123 12.6701 8.95587C12.6247 8.92503 12.5711 8.90853 12.5162 8.90853C12.4613 8.90853 12.4077 8.92503 12.3623 8.95587C11.1951 9.6929 10.0891 10.3678 8.92098 11.1067C8.8598 11.1067 8.85982 11.1679 8.79769 11.1679V7.2352C8.79594 7.15413 8.81183 7.07365 8.84434 6.99937C8.87686 6.92508 8.92516 6.85876 8.9859 6.80504C10.0307 6.06801 11.0746 5.39311 12.0583 4.6542C12.1149 4.62396 12.1781 4.60815 12.2422 4.60815C12.3064 4.60815 12.3697 4.62396 12.4263 4.6542C13.8382 5.45335 15.3141 6.31368 16.7279 7.11188C17.7106 7.66442 18.6943 8.21789 19.7401 8.77042C20.488 9.15981 21.1072 9.75743 21.5228 10.4911C21.7846 10.9685 21.8898 11.5161 21.8236 12.0566C21.7574 12.5971 21.5232 13.1031 21.1539 13.5032C20.6682 14.0556 20.0849 14.5138 19.4332 14.8549C18.0213 15.654 16.6677 16.5144 15.2549 17.3126C13.473 18.3574 11.7524 19.3401 9.97051 20.3849C9.4095 20.7577 8.91722 21.0607 8.42587 21.3723Z", fill: "white" }));
165
165
 
166
- const SvgTickIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 8 6", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M7.56484 1.56558L3.56484 5.56558C3.40859 5.72183 3.20391 5.79995 2.99922 5.79995C2.79453 5.79995 2.58984 5.72183 2.43359 5.56558L0.433594 3.56558C0.121094 3.25308 0.121094 2.74683 0.433594 2.43433C0.746094 2.12183 1.25234 2.12183 1.56484 2.43433L2.99922 3.8687L6.43359 0.434326C6.74609 0.121826 7.25234 0.121826 7.56484 0.434326C7.87734 0.746826 7.87734 1.25308 7.56484 1.56558Z", fill: "currentColor" }));
166
+ const SvgTickIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 10 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M9.69161 2.11266L4.42845 7.37582C4.22286 7.58141 3.95354 7.68421 3.68421 7.68421C3.41488 7.68421 3.14556 7.58141 2.93997 7.37582L0.308388 4.74424C-0.102796 4.33306 -0.102796 3.66694 0.308388 3.25576C0.719572 2.84457 1.38569 2.84457 1.79687 3.25576L3.68421 5.14309L8.20312 0.624177C8.61431 0.212993 9.28043 0.212993 9.69161 0.624177C10.1028 1.03536 10.1028 1.70148 9.69161 2.11266Z", fill: "currentColor" }));
167
167
 
168
168
  const SvgSearch = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.38067 1.54839C4.1596 1.54839 1.54839 4.1596 1.54839 7.38067C1.54839 10.6017 4.15959 13.2129 7.38067 13.2129C10.6017 13.2129 13.2129 10.6017 13.2129 7.38067C13.2129 4.15959 10.6017 1.54839 7.38067 1.54839ZM0 7.38067C0 3.30445 3.30445 0 7.38067 0C11.4569 0 14.7613 3.30446 14.7613 7.38067C14.7613 11.4569 11.4569 14.7613 7.38067 14.7613C3.30446 14.7613 0 11.4569 0 7.38067ZM12.6139 12.6139C12.9162 12.3115 13.4064 12.3115 13.7087 12.6139L15.7732 14.6784C16.0756 14.9807 16.0756 15.4709 15.7732 15.7732C15.4709 16.0756 14.9807 16.0756 14.6784 15.7732L12.6139 13.7087C12.3115 13.4064 12.3115 12.9162 12.6139 12.6139Z", fill: "currentColor" }));
169
169
 
@@ -333,6 +333,10 @@ const SvgAddLocator = (props) => /* @__PURE__ */ React.createElement("svg", { wi
333
333
 
334
334
  const SvgPlusUserIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 12 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7 1C7 0.447715 6.55228 0 6 0C5.44772 0 5 0.447715 5 1V2.49994C5 3.88062 3.88074 4.99988 2.50006 4.99988H1C0.447715 4.99988 0 5.44759 0 5.99988C0 6.55216 0.447715 6.99988 1 6.99988H2.5C3.88071 6.99988 5 8.11917 5 9.49988V11C5 11.5523 5.44772 12 6 12C6.55228 12 7 11.5523 7 11V9.49988C7 8.11917 8.11929 6.99988 9.5 6.99988H11C11.5523 6.99988 12 6.55216 12 5.99988C12 5.44759 11.5523 4.99988 11 4.99988H9.49994C8.11926 4.99988 7 3.88062 7 2.49994V1Z", fill: "currentColor" }));
335
335
 
336
+ const SvgIosIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 9 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_613_49232)" }, /* @__PURE__ */ React.createElement("path", { d: "M5.8036 0.56958C5.3771 0.59908 4.8786 0.872078 4.58811 1.22758C4.32311 1.55007 4.10511 2.02907 4.19011 2.49457C4.65611 2.50907 5.1376 2.22957 5.4166 1.86807C5.6776 1.53157 5.8751 1.05558 5.8036 0.56958Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M7.4891 3.25363C7.07961 2.74014 6.50411 2.44214 5.96061 2.44214C5.24312 2.44214 4.93962 2.78564 4.44112 2.78564C3.92712 2.78564 3.53663 2.44314 2.91613 2.44314C2.30663 2.44314 1.65764 2.81564 1.24614 3.45263C0.667643 4.34963 0.766642 6.03612 1.70414 7.47261C2.03963 7.98661 2.48763 8.5646 3.07363 8.5696C3.59513 8.5746 3.74213 8.23511 4.44862 8.23161C5.15512 8.22761 5.28912 8.5741 5.80961 8.5686C6.39611 8.5641 6.86861 7.92361 7.2041 7.40961C7.4446 7.04111 7.5341 6.85561 7.7206 6.43962C6.36411 5.92312 6.14661 3.99413 7.4891 3.25363Z", fill: "currentColor" })), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_613_49232" }, /* @__PURE__ */ React.createElement("rect", { width: 8, height: 8, fill: "white", transform: "translate(0.303955 0.56958)" }))));
337
+
338
+ const SvgHelpIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_613_49273)" }, /* @__PURE__ */ React.createElement("path", { d: "M15.4386 7.15569L14 5.71702V4.56969C14 3.46702 13.1026 2.56969 12 2.56969H10.8526L9.41463 1.13169C8.65863 0.376352 7.3413 0.376352 6.58596 1.13169L5.14729 2.56969H3.99996C2.89729 2.56969 1.99996 3.46702 1.99996 4.56969V5.71702L0.561295 7.15569C-0.217372 7.93569 -0.217372 9.20369 0.561295 9.98369L1.99996 11.4224V12.5697C1.99996 13.6724 2.89729 14.5697 3.99996 14.5697H5.14729L6.5853 16.0077C6.9633 16.385 7.4653 16.5937 7.99996 16.5937C8.53463 16.5937 9.03663 16.3857 9.41396 16.0077L10.8526 14.5697H12C13.1026 14.5697 14 13.6724 14 12.5697V11.4224L15.4386 9.98369C16.2173 9.20369 16.2173 7.93569 15.4386 7.15569ZM9.96796 6.87969C10.1166 7.72769 9.7133 8.57502 8.96396 8.98902C8.83863 9.05769 8.66596 9.36435 8.66596 9.57302V9.90302C8.66596 10.2717 8.3673 10.5697 7.9993 10.5697C7.6313 10.5697 7.33263 10.2717 7.33263 9.90302V9.57302C7.33263 8.88435 7.75729 8.13102 8.31996 7.82102C8.5133 7.71502 8.71663 7.46435 8.65463 7.11035C8.60863 6.84902 8.38663 6.62702 8.12596 6.58169C7.92196 6.54369 7.72463 6.59569 7.5713 6.72569C7.4193 6.85235 7.33263 7.03902 7.33263 7.23702C7.33263 7.60569 7.03396 7.90369 6.66596 7.90369C6.29796 7.90369 5.9993 7.60569 5.9993 7.23702C5.9993 6.64435 6.25996 6.08569 6.71396 5.70435C7.1673 5.32302 7.76596 5.16169 8.35596 5.26902C9.16196 5.40969 9.82596 6.07169 9.96796 6.87969ZM8.9993 12.2364C8.9993 12.7884 8.5513 13.2364 7.9993 13.2364C7.4473 13.2364 6.9993 12.7884 6.9993 12.2364C6.9993 11.6844 7.4473 11.2364 7.9993 11.2364C8.5513 11.2364 8.9993 11.6844 8.9993 12.2364Z", fill: "currentColor" })), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_613_49273" }, /* @__PURE__ */ React.createElement("rect", { width: 16, height: 16, fill: "white", transform: "translate(0 0.56958)" }))));
339
+
336
340
  const SvgSwitchLicenseIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 159 159", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_464_6772)" }, /* @__PURE__ */ React.createElement("path", { d: "M159 121.603H0V121.682H159V121.603Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M143.068 124.63H114.162V124.71H143.068V124.63Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M105.328 123.769H97.413V123.848H105.328V123.769Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M123.419 127.584H111.147V127.664H123.419V127.584Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M23.8818 127.05H16.6823V127.13H23.8818V127.05Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M35.263 127.05H26.712V127.13H35.263V127.05Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M71.5977 125.708H56.7026V125.788H71.5977V125.708Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M75.366 107.42H13.9634C13.4823 107.419 13.0213 107.228 12.6815 106.887C12.3416 106.547 12.1508 106.085 12.1508 105.604V19.2896C12.1549 18.8114 12.3477 18.3541 12.687 18.0171C13.0264 17.6801 13.4851 17.4906 13.9634 17.4897H75.366C75.8476 17.4897 76.3094 17.6811 76.6499 18.0216C76.9905 18.3621 77.1818 18.824 77.1818 19.3055V105.604C77.1818 106.086 76.9905 106.548 76.6499 106.888C76.3094 107.229 75.8476 107.42 75.366 107.42ZM13.9634 17.5533C13.5034 17.5542 13.0626 17.7375 12.7377 18.063C12.4127 18.3885 12.2303 18.8297 12.2303 19.2896V105.604C12.2303 106.064 12.4127 106.505 12.7377 106.831C13.0626 107.156 13.5034 107.34 13.9634 107.341H75.366C75.8262 107.34 76.2674 107.157 76.5928 106.831C76.9182 106.506 77.1014 106.065 77.1023 105.604V19.2896C77.1014 18.8294 76.9182 18.3883 76.5928 18.0628C76.2674 17.7374 75.8262 17.5542 75.366 17.5533H13.9634Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M144.153 107.42H82.7468C82.2655 107.419 81.8041 107.228 81.4638 106.887C81.1235 106.547 80.9319 106.086 80.931 105.604V19.2896C80.936 18.8111 81.1295 18.3538 81.4694 18.0169C81.8093 17.6799 82.2682 17.4906 82.7468 17.4897H144.153C144.63 17.4914 145.088 17.6813 145.427 18.0182C145.766 18.3551 145.958 18.8119 145.962 19.2896V105.604C145.962 106.085 145.772 106.546 145.432 106.886C145.093 107.226 144.633 107.418 144.153 107.42ZM82.7468 17.5533C82.2866 17.5542 81.8454 17.7374 81.52 18.0628C81.1946 18.3883 81.0114 18.8294 81.0105 19.2896V105.604C81.0114 106.065 81.1946 106.506 81.52 106.831C81.8454 107.157 82.2866 107.34 82.7468 107.341H144.153C144.613 107.34 145.054 107.157 145.379 106.831C145.705 106.506 145.888 106.065 145.889 105.604V19.2896C145.888 18.8294 145.705 18.3883 145.379 18.0628C145.054 17.7374 144.613 17.5542 144.153 17.5533H82.7468Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M16.679 121.6H54.6991L54.6991 37.5175H16.679L16.679 121.6Z", fill: "#F0F0F0" }), /* @__PURE__ */ React.createElement("path", { d: "M16.6823 121.6H52.8994L52.8994 37.5175H16.6823L16.6823 121.6Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M50.9913 119.695L50.9913 39.4287H18.5903L18.5903 119.695H50.9913Z", fill: "#F0F0F0" }), /* @__PURE__ */ React.createElement("path", { d: "M29.0588 77.2738H22.454C22.2291 77.273 22.0136 77.1832 21.8545 77.0242C21.6955 76.8651 21.6058 76.6497 21.6049 76.4247C21.6058 76.1998 21.6955 75.9843 21.8545 75.8253C22.0136 75.6662 22.2291 75.5765 22.454 75.5757H29.0588C29.2838 75.5765 29.4992 75.6662 29.6583 75.8253C29.8173 75.9843 29.9071 76.1998 29.9079 76.4247C29.9071 76.6497 29.8173 76.8651 29.6583 77.0242C29.4992 77.1832 29.2838 77.273 29.0588 77.2738Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M19.0864 119.695L19.0864 39.4287H18.5903L18.5903 119.695H19.0864Z", fill: "#F0F0F0" }), /* @__PURE__ */ React.createElement("path", { d: "M72.5135 120.007H78.174V95.457H72.5135V120.007Z", fill: "#F0F0F0" }), /* @__PURE__ */ React.createElement("path", { d: "M49.1724 121.565H77.0864V120.01H49.1724V121.565Z", fill: "#F0F0F0" }), /* @__PURE__ */ React.createElement("path", { d: "M72.5135 95.4602H48.0848V120.01H72.5135V95.4602Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M70.2844 98.4812H50.3077V106.533H70.2844V98.4812Z", fill: "#F0F0F0" }), /* @__PURE__ */ React.createElement("path", { d: "M70.2844 108.934H50.3077V116.986H70.2844V108.934Z", fill: "#F0F0F0" }), /* @__PURE__ */ React.createElement("path", { d: "M58.0541 99.1585H62.5411C62.6867 99.1577 62.8262 99.0994 62.9292 98.9965C63.0322 98.8935 63.0904 98.754 63.0912 98.6084C63.0912 98.4622 63.0334 98.3219 62.9303 98.2182C62.8272 98.1146 62.6873 98.0559 62.5411 98.0551H58.0541C57.9079 98.0559 57.768 98.1146 57.6649 98.2182C57.5618 98.3219 57.504 98.4622 57.504 98.6084C57.5048 98.754 57.563 98.8935 57.666 98.9965C57.769 99.0994 57.9085 99.1577 58.0541 99.1585Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M58.0541 109.614H62.5411C62.6851 109.614 62.8231 109.557 62.9259 109.456C63.0286 109.355 63.0879 109.218 63.0912 109.074C63.0904 108.928 63.0322 108.789 62.9292 108.686C62.8262 108.583 62.6867 108.525 62.5411 108.524H58.0541C57.9085 108.525 57.769 108.583 57.666 108.686C57.563 108.789 57.5048 108.928 57.504 109.074C57.5073 109.218 57.5666 109.355 57.6693 109.456C57.772 109.557 57.9101 109.614 58.0541 109.614Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M62.1594 94.9768C62.0484 94.976 61.9421 94.9315 61.8635 94.853C61.785 94.7744 61.7405 94.6681 61.7397 94.5571V81.8021C61.7397 81.6908 61.7839 81.584 61.8626 81.5053C61.9414 81.4265 62.0481 81.3823 62.1594 81.3823C62.2705 81.3832 62.3768 81.4276 62.4553 81.5062C62.5339 81.5847 62.5784 81.691 62.5792 81.8021V94.5571C62.5784 94.6681 62.5339 94.7744 62.4553 94.853C62.3768 94.9315 62.2705 94.976 62.1594 94.9768Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M66.0868 94.4807H58.2322V95.4697H66.0868V94.4807Z", fill: "#F0F0F0" }), /* @__PURE__ */ React.createElement("path", { d: "M64.3346 87.3447C64.2795 87.3447 64.2266 87.323 64.1873 87.2844C64.148 87.2457 64.1255 87.1931 64.1247 87.138V80.7716C64.1255 80.7162 64.1479 80.6633 64.1871 80.6241C64.2263 80.585 64.2792 80.5626 64.3346 80.5618C64.39 80.5626 64.4429 80.585 64.4821 80.6241C64.5213 80.6633 64.5436 80.7162 64.5445 80.7716V87.1316C64.5449 87.1595 64.5398 87.1871 64.5294 87.2129C64.519 87.2388 64.5037 87.2623 64.4841 87.2821C64.4646 87.3019 64.4413 87.3177 64.4156 87.3284C64.39 87.3392 64.3624 87.3447 64.3346 87.3447Z", fill: "#F0F0F0" }), /* @__PURE__ */ React.createElement("path", { d: "M56.0506 82.966C56.0506 82.966 56.2064 76.9558 62.1594 76.9558C68.1123 76.9558 68.265 82.9597 68.265 82.9597L56.0506 82.966Z", fill: "#F0F0F0" }), /* @__PURE__ */ React.createElement("path", { d: "M107.583 91.4565C107.751 91.4565 107.923 91.4565 108.095 91.4724C109.853 91.5995 111.507 92.3579 112.751 93.6078C113.995 94.8577 114.746 96.515 114.865 98.2745C114.915 99.0738 114.836 99.876 114.629 100.65C113.832 103.754 113.447 106.95 113.485 110.155V119.485C113.485 119.647 113.454 119.807 113.392 119.956C113.33 120.105 113.239 120.241 113.125 120.355C113.011 120.469 112.875 120.56 112.725 120.621C112.576 120.682 112.416 120.713 112.254 120.713H82.6387V91.4565H107.583Z", fill: "#F0F0F0" }), /* @__PURE__ */ React.createElement("path", { d: "M75.3405 98.7546C75.3436 97.7172 75.568 96.6924 75.9986 95.7486C76.4292 94.8049 77.0561 93.9638 77.8376 93.2815C78.619 92.5992 79.537 92.0914 80.5302 91.7921C81.5234 91.4927 82.5691 91.4086 83.5974 91.5454C84.6257 91.6822 85.6131 92.0368 86.4935 92.5854C87.3739 93.134 88.1272 93.8641 88.7031 94.727C89.2789 95.5898 89.6642 96.5656 89.833 97.5891C90.0019 98.6127 89.9505 99.6605 89.6823 100.663C88.8877 103.767 88.5039 106.963 88.5407 110.168V119.498C88.5407 119.659 88.5089 119.818 88.4472 119.967C88.3855 120.116 88.295 120.251 88.181 120.365C88.067 120.478 87.9316 120.568 87.7827 120.63C87.6338 120.691 87.4743 120.722 87.3132 120.722H77.9608C77.8001 120.722 77.6409 120.69 77.4923 120.629C77.3438 120.567 77.2088 120.477 77.0951 120.363C76.9814 120.25 76.8913 120.115 76.8297 119.966C76.7682 119.818 76.7365 119.658 76.7365 119.498V109.608C76.7635 106.602 76.3827 103.607 75.6045 100.704C75.4291 100.069 75.3403 99.4133 75.3405 98.7546Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M92.6939 120.713H119.282V102.949H92.6939V120.713Z", fill: "#F0F0F0" }), /* @__PURE__ */ React.createElement("path", { d: "M141.256 106.969H105.668V79.7254C105.668 78.2613 106.25 76.8572 107.285 75.8219C108.32 74.7866 109.725 74.205 111.189 74.205H135.735C137.199 74.205 138.603 74.7866 139.639 75.8219C140.674 76.8572 141.256 78.2613 141.256 79.7254V106.969Z", fill: "#E0E0E0" }), /* @__PURE__ */ React.createElement("path", { d: "M134.301 106.969H98.7136V79.4583C98.7136 78.0642 99.2674 76.7272 100.253 75.7414C101.239 74.7556 102.576 74.2018 103.97 74.2018H129.032C130.426 74.2018 131.763 74.7556 132.749 75.7414C133.734 76.7272 134.288 78.0642 134.288 79.4583V106.969H134.301Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M117.545 108.562H93.0372C92.6155 108.562 92.2111 108.394 91.9129 108.096C91.6147 107.798 91.4472 107.393 91.4472 106.972V102.943C91.4472 102.521 91.6147 102.117 91.9129 101.818C92.2111 101.52 92.6155 101.353 93.0372 101.353H117.545C117.673 101.353 117.795 101.403 117.885 101.493C117.975 101.583 118.026 101.706 118.026 101.833V108.085C118.025 108.212 117.974 108.333 117.884 108.422C117.794 108.512 117.672 108.562 117.545 108.562Z", fill: "#E0E0E0" }), /* @__PURE__ */ React.createElement("path", { d: "M143.879 91.4565C144.048 91.4565 144.216 91.4565 144.391 91.4724C146.149 91.6003 147.802 92.3589 149.046 93.6088C150.289 94.8586 151.039 96.5155 151.158 98.2745C151.212 99.0738 151.132 99.8766 150.923 100.65C150.125 103.755 149.74 106.952 149.778 110.158V119.488C149.778 119.649 149.746 119.809 149.685 119.957C149.623 120.106 149.532 120.241 149.418 120.355C149.304 120.469 149.169 120.559 149.02 120.62C148.871 120.682 148.712 120.713 148.551 120.713H118.932V91.4565H143.879Z", fill: "#F0F0F0" }), /* @__PURE__ */ React.createElement("path", { d: "M111.637 98.7547C111.624 96.8528 112.355 95.0211 113.673 93.6499C114.991 92.2788 116.792 91.4766 118.693 91.4144C120.594 91.3522 122.444 92.0349 123.849 93.3169C125.254 94.599 126.103 96.379 126.214 98.2777C126.264 99.077 126.185 99.8792 125.979 100.653C125.182 103.757 124.797 106.953 124.834 110.158V119.488C124.834 119.813 124.705 120.124 124.476 120.354C124.246 120.584 123.935 120.713 123.61 120.713H114.254C114.093 120.713 113.934 120.681 113.786 120.619C113.637 120.558 113.502 120.468 113.389 120.354C113.275 120.24 113.185 120.105 113.123 119.957C113.062 119.808 113.03 119.649 113.03 119.488V109.608C113.056 106.603 112.677 103.608 111.901 100.704C111.726 100.069 111.637 99.4134 111.637 98.7547Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M83.157 121.603H143.358C143.474 121.603 143.59 121.58 143.698 121.535C143.806 121.49 143.904 121.425 143.986 121.342C144.068 121.259 144.134 121.161 144.178 121.053C144.223 120.945 144.245 120.829 144.245 120.713H82.2698C82.2694 120.829 82.292 120.945 82.3364 121.053C82.3808 121.161 82.4461 121.259 82.5285 121.342C82.6109 121.425 82.7089 121.49 82.8167 121.535C82.9246 121.58 83.0402 121.603 83.157 121.603Z", fill: "#E0E0E0" }), /* @__PURE__ */ React.createElement("path", { d: "M118.811 53.3824H138.174V32.2641H118.811V53.3824Z", fill: "#E0E0E0" }), /* @__PURE__ */ React.createElement("path", { d: "M117.657 53.3824H137.522V32.2641H117.657V53.3824Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M135.856 51.7192V33.9271H119.317V51.7192H135.856Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M127.588 38.3251L132.11 46.1606H123.066L127.588 38.3251Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M91.6475 65.7113H111.011V44.5929H91.6475V65.7113Z", fill: "#E0E0E0" }), /* @__PURE__ */ React.createElement("path", { d: "M90.4933 65.7113H110.359V44.5929H90.4933V65.7113Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M108.692 64.0481V46.256H92.1531V64.0481H108.692Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M98.402 58.3242L96.4399 54.9248C96.2358 54.5699 96.1286 54.1677 96.129 53.7583C96.1295 53.349 96.2376 52.9469 96.4425 52.5926C96.6474 52.2382 96.9419 51.9439 97.2964 51.7393C97.6509 51.5347 98.053 51.4269 98.4624 51.4268H102.396C102.805 51.4273 103.207 51.5353 103.562 51.7399C103.916 51.9445 104.211 52.2386 104.416 52.5928C104.621 52.9469 104.729 53.3487 104.73 53.7579C104.731 54.1672 104.625 54.5695 104.422 54.9248L102.46 58.3242C102.255 58.6817 101.96 58.9788 101.604 59.1855C101.247 59.3921 100.843 59.501 100.431 59.501C100.019 59.501 99.6144 59.3921 99.2581 59.1855C98.9018 58.9788 98.6065 58.6817 98.402 58.3242Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M79.5 135.964C113.552 135.964 141.157 134.352 141.157 132.364C141.157 130.376 113.552 128.765 79.5 128.765C45.4477 128.765 17.843 130.376 17.843 132.364C17.843 134.352 45.4477 135.964 79.5 135.964Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M100.647 31.5774H27.3414L32.1655 131.41H105.471L100.647 31.5774Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M100.647 31.5774H27.3414L32.1655 131.41H105.471L100.647 31.5774Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M101.324 31.5774H28.0187L32.846 131.41H106.151L101.324 31.5774Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M97.4541 34.9354H31.3705L35.9878 126.898L93.4504 126.822L103 118.356L97.4541 34.9354Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M97.9597 34.9324C98.6644 62.4732 100.888 89.9541 104.622 117.25C99.3854 120.854 94.1755 124.458 88.9921 128.062H39.5685C34.9036 97.2192 32.1656 66.1157 31.3705 34.9324H97.9597Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M104.622 117.25C99.3854 120.854 94.1755 124.458 88.9921 128.062C90.1242 123.292 91.304 118.522 92.5315 113.752L104.622 117.25Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M49.2898 43.3465C49.4148 46.7131 49.5611 50.0818 49.7286 53.4526H39.6257C39.4561 50.0818 39.3099 46.7131 39.1869 43.3465H49.2898ZM50.3201 42.2812H38.0834C38.2255 46.358 38.4025 50.4369 38.6145 54.5179H50.8543C50.6423 50.439 50.4653 46.3601 50.3233 42.2812H50.3201Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M90.5726 47.1403H55.9679C55.9361 46.3803 55.9075 45.6171 55.8788 44.8571H90.4804C90.509 45.6171 90.5408 46.3803 90.5726 47.1403Z", fill: "#E0E0E0" }), /* @__PURE__ */ React.createElement("path", { d: "M83.2617 51.9421H56.1808C56.1458 51.1789 56.1077 50.4188 56.0759 49.6588H83.1536C83.1896 50.4199 83.2256 51.181 83.2617 51.9421Z", fill: "#E0E0E0" }), /* @__PURE__ */ React.createElement("path", { d: "M50.2819 63.1388C50.4939 66.5096 50.7303 69.8804 50.991 73.2512H40.885C40.6242 69.8804 40.3878 66.5096 40.1758 63.1388H50.2819ZM51.2804 62.0735H39.0438C39.2939 66.1545 39.5791 70.2355 39.8992 74.3165H52.1517C51.8337 70.2376 51.5475 66.1566 51.2931 62.0735H51.2804Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M69.769 66.9357H57.049C56.9981 66.1725 56.9441 65.4125 56.8964 64.6493H69.6164C69.6641 65.4125 69.7149 66.1725 69.769 66.9357Z", fill: "#E0E0E0" }), /* @__PURE__ */ React.createElement("path", { d: "M81.8117 66.9357H72.4593C72.4084 66.1725 72.3543 65.4125 72.3066 64.6493H81.659C81.7067 65.4125 81.7576 66.1725 81.8117 66.9357Z", fill: "#E0E0E0" }), /* @__PURE__ */ React.createElement("path", { d: "M87.682 71.7406H57.3989C57.3416 70.9774 57.2876 70.2174 57.2303 69.4542H87.5135C87.5707 70.2174 87.6248 70.9774 87.682 71.7406Z", fill: "#E0E0E0" }), /* @__PURE__ */ React.createElement("path", { d: "M51.7988 82.9407C52.102 86.3115 52.4285 89.6823 52.7783 93.0531H42.6722C42.3224 89.6823 41.996 86.3115 41.6928 82.9407H51.7988ZM52.7719 81.8754H40.5321C40.8925 85.9585 41.2868 90.0406 41.7151 94.1215H53.9549C53.5309 90.0384 53.1366 85.9564 52.7719 81.8754Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M93.5237 89.2594H58.9157L59.1447 91.5426H93.7526L93.5237 89.2594Z", fill: "#E0E0E0" }), /* @__PURE__ */ React.createElement("path", { d: "M85.5418 84.4545H58.4609C58.5308 85.2145 58.6008 85.9777 58.6739 86.7377H85.7516C85.6817 85.9777 85.6085 85.224 85.5418 84.4545Z", fill: "#E0E0E0" }), /* @__PURE__ */ React.createElement("path", { d: "M53.8435 102.743C54.2378 106.113 54.6544 109.483 55.0933 112.852H44.9872C44.5484 109.485 44.1318 106.115 43.7375 102.743H53.8435ZM54.7975 101.677H42.5482C43.0146 105.76 43.5181 109.84 44.0587 113.917H56.2858C55.7494 109.84 55.2459 105.76 54.7753 101.677H54.7975Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M95.4284 106.53H60.8205C60.7283 105.767 60.636 105.007 60.547 104.244H95.1518C95.244 105.016 95.333 105.776 95.4284 106.53Z", fill: "#E0E0E0" }), /* @__PURE__ */ React.createElement("path", { d: "M77.1752 111.341H61.4215C61.3229 110.581 61.2275 109.818 61.1321 109.058H76.8858C76.9812 109.818 77.0766 110.581 77.1752 111.341Z", fill: "#E0E0E0" }), /* @__PURE__ */ React.createElement("path", { d: "M86.5816 111.341H79.7796C79.681 110.581 79.5856 109.818 79.4902 109.058H86.2922C86.3876 109.818 86.4957 110.581 86.5816 111.341Z", fill: "#E0E0E0" }), /* @__PURE__ */ React.createElement("path", { d: "M44.8378 52.0088L44.3894 51.2965C43.41 49.7383 41.413 48.3486 40.7229 47.9416L41.2381 47.0289C42.5919 47.851 43.8015 48.8899 44.8187 50.104C46.3579 48.0084 48.6347 45.8428 51.7511 43.515L52.4094 44.3736C49.0831 46.8636 46.7554 49.1436 45.2862 51.3378L44.8378 52.0088Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M46.0462 71.8076L45.5787 71.0953C44.5611 69.5371 42.5259 68.1443 41.8263 67.7372L42.3128 66.8246C43.6925 67.647 44.9305 68.6864 45.9794 69.9028C47.4613 67.804 49.6777 65.6384 52.7337 63.3075C52.9595 63.5937 53.1884 63.8799 53.4142 64.1693C50.1547 66.6624 47.8874 68.9393 46.4786 71.1367C46.3324 71.3593 46.1893 71.585 46.0462 71.8076Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M47.8016 91.6603L47.3151 90.948C46.253 89.3898 44.1796 87.9969 43.4705 87.5931C43.6231 87.2751 43.7885 86.9825 43.9347 86.6804C45.3359 87.5042 46.5998 88.5417 47.6808 89.7555C49.1086 87.6567 51.2678 85.4943 54.257 83.1602L54.963 84.0219C51.783 86.5151 49.557 88.7919 48.2118 90.9893L47.8016 91.6603Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M79.8592 122.576C77.983 122.576 76.9018 121.883 75.9478 121.272C74.9938 120.662 74.1733 120.134 72.5897 120.134C71.006 120.134 70.3001 120.687 69.5528 121.272C68.8055 121.858 67.8896 122.576 66.0134 122.576C64.1372 122.576 63.056 121.883 62.1052 121.272C61.1544 120.662 60.334 120.134 58.7471 120.134C57.1603 120.134 56.4575 120.687 55.7102 121.272C54.9629 121.858 54.0471 122.576 52.1741 122.576C50.3011 122.576 49.2167 121.883 48.2627 121.272C47.3087 120.662 46.4914 120.134 44.9046 120.134C44.8633 119.816 44.8187 119.523 44.7774 119.218C46.6536 119.218 47.7316 119.911 48.6856 120.522C49.6396 121.133 50.4569 121.66 52.0405 121.66C53.6242 121.66 54.3301 121.107 55.0774 120.522C55.8247 119.937 56.7437 119.218 58.6199 119.218C60.4961 119.218 61.571 119.911 62.525 120.522C63.479 121.133 64.2994 121.66 65.8831 121.66C67.4667 121.66 68.1727 121.107 68.92 120.522C69.6673 119.937 70.5863 119.218 72.4625 119.218C74.3387 119.218 75.4167 119.911 76.3707 120.522C77.3247 121.133 78.142 121.66 79.7288 121.66C79.7701 121.966 79.8178 122.271 79.8592 122.576Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M82.5495 34.0482C81.4746 31.1862 78.991 29.3068 76.3198 29.3068H70.8757C70.4704 29.3033 70.0751 29.1809 69.7388 28.9548C69.4024 28.7287 69.1398 28.4088 68.9836 28.0348C68.5987 27.1208 67.9552 26.3392 67.132 25.7861C66.3088 25.233 65.342 24.9325 64.3503 24.9216C63.391 24.9119 62.4536 25.2086 61.6746 25.7685C60.8956 26.3285 60.3157 27.1224 60.0192 28.0348C59.8984 28.4082 59.6613 28.733 59.3425 28.9619C59.0238 29.1908 58.6402 29.3116 58.2479 29.3068H52.8069C50.1325 29.3068 47.8302 31.1958 47.0352 34.0482L46.7172 35.1835H82.9692L82.5495 34.0482Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M82.7434 36.3028H47.0638C46.7629 36.2993 46.4745 36.1819 46.2568 35.9742C46.039 35.7664 45.9081 35.4839 45.8904 35.1835C45.8826 35.0391 45.9044 34.8947 45.9545 34.7591C46.0046 34.6235 46.082 34.4997 46.1818 34.3951C46.2816 34.2905 46.4017 34.2075 46.5348 34.1511C46.6679 34.0947 46.8112 34.0662 46.9557 34.0673H82.6353C82.9357 34.0707 83.2237 34.1877 83.4413 34.3948C83.659 34.6019 83.7903 34.8836 83.8087 35.1835C83.817 35.3281 83.7955 35.4728 83.7456 35.6088C83.6957 35.7448 83.6184 35.869 83.5186 35.974C83.4187 36.0789 83.2984 36.1622 83.1651 36.2188C83.0318 36.2753 82.8883 36.3039 82.7434 36.3028Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M82.7434 36.3028H47.0638C46.7629 36.2993 46.4745 36.1819 46.2568 35.9742C46.039 35.7664 45.9081 35.4839 45.8904 35.1835C45.8826 35.0391 45.9044 34.8947 45.9545 34.7591C46.0046 34.6235 46.082 34.4997 46.1818 34.3951C46.2816 34.2905 46.4017 34.2075 46.5348 34.1511C46.6679 34.0947 46.8112 34.0662 46.9557 34.0673H82.6353C82.9357 34.0707 83.2237 34.1877 83.4413 34.3948C83.659 34.6019 83.7903 34.8836 83.8087 35.1835C83.817 35.3281 83.7955 35.4728 83.7456 35.6088C83.6957 35.7448 83.6184 35.869 83.5186 35.974C83.4187 36.0789 83.2984 36.1622 83.1651 36.2188C83.0318 36.2753 82.8883 36.3039 82.7434 36.3028Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M114.773 130.453H112.442L112.21 125.057H114.541L114.773 130.453Z", fill: "#FFC3BD" }), /* @__PURE__ */ React.createElement("path", { d: "M128.761 130.453H126.431L125.26 125.057H127.588L128.761 130.453Z", fill: "#FFC3BD" }), /* @__PURE__ */ React.createElement("path", { d: "M126.265 130.183H128.882C128.929 130.183 128.973 130.198 129.009 130.227C129.045 130.256 129.07 130.297 129.08 130.342L129.541 132.415C129.551 132.466 129.55 132.518 129.538 132.567C129.526 132.617 129.502 132.664 129.47 132.703C129.437 132.743 129.396 132.775 129.349 132.797C129.303 132.818 129.252 132.829 129.2 132.829C128.288 132.813 127.843 132.759 126.691 132.759C125.982 132.759 124.523 132.832 123.546 132.832C122.57 132.832 122.44 131.878 122.84 131.779C124.637 131.385 125.311 130.844 125.887 130.326C125.991 130.234 126.126 130.183 126.265 130.183Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M112.458 130.183H115.002C115.048 130.183 115.093 130.198 115.129 130.227C115.164 130.256 115.189 130.297 115.199 130.342L115.66 132.415C115.671 132.464 115.672 132.514 115.661 132.563C115.651 132.612 115.629 132.658 115.599 132.697C115.568 132.737 115.53 132.769 115.485 132.792C115.441 132.815 115.392 132.827 115.342 132.829C114.423 132.813 113.097 132.759 111.943 132.759C110.594 132.759 109.43 132.832 107.847 132.832C106.893 132.832 106.626 131.878 107.026 131.779C108.848 131.379 110.337 131.337 111.911 130.364C112.074 130.256 112.262 130.193 112.458 130.183Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M117.024 45.4485C116.706 47.153 116.522 49.2645 117.714 50.4029C117.714 50.4029 117.03 52.1328 113.863 52.1328C110.969 52.1328 112.419 50.4029 112.419 50.4029C114.327 49.9482 114.219 47.5982 113.889 46.2689L117.024 45.4485Z", fill: "#FFC3BD" }), /* @__PURE__ */ React.createElement("path", { d: "M111.51 50.6415C111.574 50.2186 112.318 49.7257 113.164 49.5412C114.01 49.3568 117.26 48.9466 118.252 49.3568C119.244 49.767 118.08 50.9818 118.08 50.9818L111.51 50.6415Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.4, d: "M111.51 50.6415C111.574 50.2186 112.318 49.7257 113.164 49.5412C114.01 49.3568 117.26 48.9466 118.252 49.3568C119.244 49.767 118.08 50.9818 118.08 50.9818L111.51 50.6415Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M112.21 125.06L112.331 127.839H114.662L114.541 125.06H112.21Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M127.591 125.06H125.26L125.865 127.839H128.195L127.591 125.06Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M122.541 52.5018L119.734 54.378C119.734 54.378 123.766 61.5489 123.429 62.6969C122.968 64.2615 122.325 67.68 121.451 69.4162C121.565 69.7915 122.147 70.6469 122.472 70.7932C124.698 69.1014 126.946 63.7972 126.863 62.3121C126.669 58.9445 122.541 52.5018 122.541 52.5018Z", fill: "#FFC3BD" }), /* @__PURE__ */ React.createElement("path", { d: "M121.451 69.4226L119.225 69.2509L120.392 71.7026C120.392 71.7026 122.335 71.7885 122.659 70.3034L121.451 69.4226Z", fill: "#B55B52" }), /* @__PURE__ */ React.createElement("path", { d: "M132.454 81.3794L132.266 81.7323L131.007 84.1142L86.3022 60.4772L87.7459 57.7424L132.454 81.3794Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M135.344 75.9194L134.422 77.6621L133.9 78.6479L89.1927 55.0109L90.6365 52.2761L135.344 75.9194Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M89.2076 55.0028L87.7608 57.7343L132.45 81.406L133.897 78.6746L89.2076 55.0028Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M89.2076 55.0028L87.7608 57.7343L132.45 81.406L133.897 78.6746L89.2076 55.0028Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M84.3751 52.6385L83.0745 55.0998L86.3022 60.4772L90.6366 52.2792L84.3751 52.6385Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.8, d: "M84.3751 52.6385L83.0745 55.0998L86.3022 60.4772L90.6366 52.2792L84.3751 52.6385Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M81.6912 52.7945L83.0745 55.1L84.3751 52.6387L81.6912 52.7945Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M117.434 70.367L118.598 72.5358L120.401 71.7026L119.234 69.2509L117.434 70.367Z", fill: "#B55B52" }), /* @__PURE__ */ React.createElement("path", { d: "M121.874 50.9309C124.077 51.2489 126.602 58.8809 126.602 58.8809L121.972 61.4948C121.972 61.4948 119.934 57.876 118.932 55.173C117.876 52.3459 119.511 50.5874 121.874 50.9309Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M120.592 53.5482C119.59 52.6323 120.204 56.5532 120.681 59.0623C120.926 59.552 121.158 59.9972 121.355 60.3692C122.471 58.3976 121.972 54.8106 120.592 53.5482Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M108.823 51.0518C108.823 51.0518 106.072 58.0859 108.683 71.1875H121.158C121.244 69.2795 120.042 59.943 121.886 50.9309C120.509 50.6649 119.115 50.4886 117.714 50.403C115.951 50.3012 114.183 50.3012 112.42 50.403C111.205 50.5244 110.003 50.7413 108.823 51.0518Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M110.74 54.3208L107.599 53.0774C107.599 53.0774 103.98 60.4645 102.829 60.8366C101.28 61.3454 98.1 62.7446 96.1729 63.0181C95.9312 63.3361 95.556 64.2901 95.6164 64.6399C98.2717 65.508 103.923 64.3569 105.093 63.4474C107.777 61.374 110.74 54.3208 110.74 54.3208Z", fill: "#FFC3BD" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M111.094 53.4811C110.575 52.2855 109.583 51.7862 108.55 51.9611C108.149 53.4271 107.471 56.6484 107.596 61.5011L108.336 61.8573C108.336 61.8573 111.981 55.5259 111.094 53.4811Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M111.59 52.6449C112.372 54.731 108.41 60.8684 108.41 60.8684L103.748 58.3244C104.448 56.4155 105.351 54.5872 106.441 52.8707C108.079 50.4253 110.728 50.3585 111.59 52.6449Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M96.2874 63.0117L93.5145 63.6L94.92 66.1663C95.6951 65.7807 96.3993 65.2668 97.0029 64.6462L96.2874 63.0117Z", fill: "#FFC3BD" }), /* @__PURE__ */ React.createElement("path", { d: "M92.2043 64.182L93.3109 65.7148L94.92 66.1791L93.5144 63.6128L92.2043 64.182Z", fill: "#FFC3BD" }), /* @__PURE__ */ React.createElement("path", { d: "M111.739 42.9968C111.739 43.1844 111.621 43.3148 111.497 43.3148C111.373 43.3148 111.284 43.1494 111.297 42.9618C111.31 42.7742 111.415 42.6438 111.539 42.6438C111.663 42.6438 111.752 42.8092 111.739 42.9968Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M111.904 43.0128C111.648 43.5731 111.315 44.0953 110.915 44.5647C111.038 44.664 111.181 44.7351 111.335 44.773C111.488 44.811 111.648 44.8147 111.803 44.7841L111.904 43.0128Z", fill: "#ED847E" }), /* @__PURE__ */ React.createElement("path", { d: "M111.501 42.3481C111.484 42.3446 111.468 42.3381 111.453 42.3291C111.441 42.3213 111.43 42.3112 111.422 42.2992C111.413 42.2873 111.407 42.2738 111.404 42.2595C111.401 42.2453 111.401 42.2306 111.404 42.2163C111.407 42.202 111.413 42.1884 111.421 42.1764C111.513 42.0275 111.639 41.9026 111.789 41.8119C111.939 41.7213 112.108 41.6675 112.283 41.6549C112.312 41.6564 112.339 41.6687 112.36 41.6892C112.38 41.7098 112.393 41.7372 112.394 41.7662C112.394 41.7957 112.382 41.824 112.362 41.8449C112.341 41.8658 112.312 41.8775 112.283 41.8775C112.147 41.8902 112.016 41.9344 111.901 42.0068C111.786 42.0791 111.689 42.1775 111.618 42.2941C111.607 42.3142 111.589 42.3303 111.568 42.34C111.547 42.3497 111.523 42.3525 111.501 42.3481Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M118.061 42.8345C117.787 45.1305 117.743 46.4852 116.512 47.6045C114.658 49.2836 111.876 48.0656 111.456 45.7315C111.081 43.6327 111.593 40.2333 113.901 39.4446C114.409 39.2689 114.954 39.2258 115.483 39.3196C116.012 39.4134 116.509 39.6409 116.926 39.9805C117.342 40.3201 117.665 40.7605 117.864 41.26C118.063 41.7595 118.13 42.3015 118.061 42.8345Z", fill: "#FFC3BD" }), /* @__PURE__ */ React.createElement("path", { d: "M113.434 43.2829C112.629 43.4419 111.345 41.6548 112.394 40.1379C111.863 39.874 110.13 40.917 109.478 39.9439C108.826 38.9709 110.636 38.4525 110.289 37.6289C111.516 37.8801 109.494 39.4129 110.661 39.2634C111.828 39.114 113.173 36.9579 114.477 37.842C116.783 39.3906 119.924 36.8085 118.643 40.0425C120.214 39.7245 121.289 41.5816 119.791 42.8695C116.805 45.4294 118.643 45.7665 116.751 45.8969C115.803 45.9669 113.599 44.838 113.434 43.2829Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M114.626 43.884C114.516 44.1135 114.361 44.3187 114.171 44.4875C113.98 44.6562 113.758 44.7851 113.517 44.8666C112.881 45.086 112.515 44.5168 112.664 43.8903C112.798 43.3243 113.3 42.5293 113.959 42.5865C114.103 42.6007 114.242 42.6508 114.362 42.7323C114.482 42.8138 114.58 42.9242 114.646 43.0533C114.713 43.1823 114.746 43.326 114.742 43.4711C114.739 43.6163 114.699 43.7582 114.626 43.884Z", fill: "#FFC3BD" }), /* @__PURE__ */ React.createElement("path", { d: "M113.103 71.1874C113.103 71.1874 115.749 88.9954 117.199 95.6734C118.789 102.987 124.777 127.311 124.777 127.311H129.044C129.044 127.311 125.098 103.569 124.189 96.3348C123.206 88.4866 121.145 71.1969 121.145 71.1969L113.103 71.1874Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M113.103 71.1874C113.103 71.1874 115.749 88.9954 117.199 95.6734C118.789 102.987 124.777 127.311 124.777 127.311H129.044C129.044 127.311 125.098 103.569 124.189 96.3348C123.206 88.4866 121.145 71.1969 121.145 71.1969L113.103 71.1874Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M116.245 77.414C116.048 77.1341 115.87 77.0387 115.705 77.096H115.67C115.632 77.1124 115.597 77.1338 115.565 77.1596C115.531 77.1871 115.5 77.218 115.472 77.2518L115.421 77.3154L115.355 77.4203C115.299 77.5129 115.252 77.6096 115.212 77.7097C115.186 77.7701 115.161 77.8337 115.138 77.8973C115.116 77.9609 115.081 78.0595 115.056 78.1486C115.03 78.2376 114.983 78.3902 114.948 78.5206C114.948 78.5556 114.932 78.5874 114.922 78.6224C114.913 78.6574 114.887 78.7687 114.871 78.8418C114.855 78.9149 114.843 78.969 114.83 79.0326C114.801 79.1566 114.776 79.287 114.751 79.4206C114.725 79.5541 114.696 79.7099 114.671 79.8594C114.671 79.9103 114.655 79.9612 114.646 80.0152C114.614 80.206 114.585 80.4 114.557 80.6003C115.262 85.0333 116.102 90.1149 116.783 93.6606C116.814 93.5461 116.849 93.4253 116.878 93.2949C117.017 92.7034 117.123 92.1046 117.196 91.5014C117.797 86.9317 117.52 79.2361 116.245 77.414Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M108.683 71.1874C108.683 71.1874 108.365 88.6074 108.616 95.7147C108.88 103.105 111.462 127.302 111.462 127.302H115.409C115.409 127.302 115.552 103.534 115.727 96.2776C115.918 88.3657 116.872 71.1874 116.872 71.1874H108.683Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M108.683 71.1874C108.683 71.1874 108.365 88.6074 108.616 95.7147C108.88 103.105 111.462 127.302 111.462 127.302H115.409C115.409 127.302 115.552 103.534 115.727 96.2776C115.918 88.3657 116.872 71.1874 116.872 71.1874H108.683Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M115.669 126.093C115.685 126.093 115.669 127.381 115.669 127.381H111.119L110.928 125.934L115.669 126.093Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M129.045 126.189C129.064 126.189 129.258 127.381 129.258 127.381H124.567L124.154 126.014L129.045 126.189Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M125.496 130.59C125.337 130.603 125.179 130.561 125.047 130.472C125.005 130.438 124.972 130.392 124.951 130.341C124.931 130.29 124.925 130.234 124.933 130.18C124.933 130.148 124.942 130.117 124.958 130.089C124.974 130.062 124.997 130.039 125.025 130.024C125.283 129.894 126.036 130.342 126.122 130.405C126.131 130.412 126.138 130.421 126.142 130.431C126.146 130.441 126.147 130.452 126.144 130.463C126.143 130.473 126.138 130.483 126.131 130.491C126.123 130.499 126.114 130.505 126.103 130.507C125.904 130.557 125.701 130.585 125.496 130.59ZM125.149 130.11C125.125 130.104 125.1 130.104 125.076 130.11C125.065 130.116 125.056 130.125 125.05 130.137C125.043 130.148 125.04 130.161 125.041 130.173C125.036 130.21 125.041 130.248 125.054 130.283C125.067 130.318 125.089 130.349 125.117 130.374C125.377 130.494 125.673 130.51 125.944 130.418C125.701 130.265 125.431 130.16 125.149 130.11Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M126.09 130.51C126.082 130.513 126.073 130.513 126.065 130.51C125.823 130.38 125.359 129.874 125.407 129.611C125.415 129.57 125.437 129.534 125.469 129.508C125.5 129.482 125.54 129.467 125.582 129.467C125.624 129.461 125.666 129.464 125.707 129.476C125.748 129.488 125.785 129.509 125.817 129.537C126.087 129.757 126.135 130.431 126.135 130.46C126.135 130.469 126.132 130.479 126.128 130.488C126.124 130.497 126.117 130.504 126.11 130.51C126.103 130.512 126.097 130.512 126.09 130.51ZM125.62 129.556H125.61C125.537 129.556 125.531 129.598 125.528 129.614C125.499 129.766 125.795 130.151 126.036 130.332C126.02 130.067 125.923 129.813 125.76 129.604C125.739 129.587 125.715 129.574 125.69 129.567C125.664 129.56 125.637 129.558 125.61 129.563L125.62 129.556Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M111.488 130.59C111.288 130.608 111.088 130.558 110.922 130.447C110.885 130.413 110.857 130.372 110.839 130.325C110.821 130.279 110.815 130.229 110.82 130.18C110.82 130.149 110.828 130.12 110.844 130.094C110.86 130.068 110.882 130.047 110.909 130.033C111.192 129.874 112.13 130.351 112.235 130.405C112.246 130.41 112.254 130.419 112.259 130.429C112.265 130.439 112.266 130.451 112.264 130.463C112.262 130.474 112.257 130.485 112.249 130.493C112.241 130.501 112.231 130.506 112.219 130.507C111.979 130.559 111.734 130.586 111.488 130.59ZM111.065 130.11C111.03 130.108 110.995 130.115 110.963 130.129C110.952 130.135 110.944 130.144 110.937 130.154C110.931 130.165 110.928 130.177 110.928 130.189C110.924 130.222 110.927 130.255 110.939 130.285C110.951 130.316 110.97 130.343 110.995 130.364C111.138 130.491 111.523 130.514 112.038 130.428C111.734 130.268 111.405 130.16 111.065 130.11Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M112.21 130.51H112.187C111.904 130.383 111.348 129.874 111.392 129.617C111.392 129.556 111.446 129.477 111.596 129.464C111.652 129.456 111.71 129.46 111.765 129.476C111.82 129.491 111.871 129.519 111.914 129.556C112.21 129.801 112.27 130.428 112.273 130.456C112.275 130.466 112.273 130.475 112.269 130.484C112.265 130.492 112.259 130.499 112.251 130.504C112.239 130.511 112.224 130.514 112.21 130.51ZM111.64 129.556H111.618C111.52 129.556 111.513 129.604 111.51 129.62C111.485 129.776 111.863 130.173 112.146 130.345C112.119 130.078 112.007 129.826 111.828 129.626C111.774 129.586 111.708 129.563 111.64 129.563V129.556Z", fill: "#BA68C8" })), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_464_6772" }, /* @__PURE__ */ React.createElement("rect", { width: 159, height: 159, fill: "white" }))));
337
341
 
338
342
  const SvgFireflinkLogo = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 238 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M61.4537 17.8485V22.8928H71.6263V27.9317H61.4537V35.7966H54.8828V12.8096H72.9844V17.8485H61.4537Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M76.4541 12.8095H83.025V35.6658H76.4541V12.8095Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M97.9099 29.6458H94.3082V35.6685H87.7373V12.8095H98.2755C104.599 12.8095 108.566 16.0035 108.566 21.2876C108.631 22.7986 108.242 24.2947 107.447 25.5858C106.653 26.877 105.489 27.905 104.104 28.5394L109.053 35.6658H102.119L97.9099 29.6458ZM98.0336 17.8484H94.4319V24.4843H98.0281C100.755 24.4843 102.119 23.2552 102.119 21.165C101.995 19.2001 100.755 17.8484 98.0281 17.8484H98.0336Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M131.006 30.6296V35.6685H112.533V12.8095H130.635V17.8484H118.98V21.6637H129.271V26.4573H118.98V30.6351L131.006 30.6296Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M141.421 17.8484V22.8928H151.593V27.9317H141.421V35.7966H134.85V12.8095H152.951V17.8484H141.421Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M156.298 12.8095H162.869V30.507H173.894V35.6685H156.413V12.8095H156.298Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M176.752 12.8095H183.323V35.6658H176.752V12.8095Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M210.104 12.8095V35.6658H204.773L194.601 23.5005V35.6658H188.159V12.8095H193.49L203.663 24.9748V12.8095H210.104Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M223.866 27.4329L221.391 30.0137V35.7884H214.938V12.8095H221.386V22.2714L230.313 12.8095H237.502L228.08 22.8928L238 35.6739H230.436L223.866 27.4329Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M16.7502 4.88842C16.1316 5.25632 15.6341 5.50162 15.1392 5.74961C13.2807 6.7334 11.5431 7.59181 9.68453 8.5756C9.5558 8.64839 9.45159 8.75748 9.3855 8.88897C9.31942 9.02047 9.29442 9.16842 9.31335 9.31412V46.5486C9.31335 47.0391 9.18969 47.4097 8.69481 47.5323C7.77434 47.9098 6.7758 48.0623 5.78338 47.9769C4.79096 47.8916 3.83353 47.5709 2.99243 47.0418C2.37431 46.6111 1.84823 46.0636 1.44391 45.4309C1.0396 44.7982 0.765171 44.0926 0.636432 43.3546C0.327663 41.3625 0.203398 39.3465 0.265245 37.3319C0.141525 27.4994 0.0178993 17.547 0.0178993 7.7145C-0.0791099 6.15032 0.219297 4.58688 0.886463 3.16613C1.44789 1.9794 2.41841 1.03032 3.62304 0.489747C4.82768 -0.050828 6.18734 -0.147392 7.45741 0.217461C9.21628 0.744425 10.8848 1.5318 12.4063 2.55294C13.781 3.29147 15.1337 4.0273 16.3736 4.76583C16.5028 4.64047 16.6265 4.76306 16.7502 4.88842Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M16.9984 42.736V32.0423C16.9942 31.8984 17.026 31.7558 17.0907 31.6269C17.1555 31.4981 17.2512 31.3871 17.3696 31.3038C21.5843 28.9683 25.7989 26.6328 29.8926 24.3001C31.0089 23.6869 32.1253 23.071 33.3625 22.3324C32.6455 21.8761 31.8998 21.4656 31.13 21.1034C29.2715 19.997 27.41 19.0132 25.5515 17.9095C25.46 17.8474 25.3516 17.8141 25.2407 17.8141C25.1298 17.8141 25.0218 17.8474 24.9303 17.9095C22.5741 19.3838 20.3443 20.7354 17.9881 22.2098C17.8644 22.2098 17.8645 22.3324 17.7408 22.3324V14.4676C17.7361 14.3059 17.7667 14.1452 17.8307 13.9965C17.8948 13.8478 17.9909 13.7147 18.112 13.6064C20.2207 12.132 22.3267 10.7803 24.3117 9.306C24.4263 9.24517 24.5543 9.21335 24.6843 9.21335C24.8142 9.21335 24.9422 9.24517 25.0568 9.306C27.9079 10.903 30.8853 12.6253 33.7364 14.2113C35.7187 15.3177 37.7036 16.4242 39.8096 17.5279C41.3189 18.3064 42.568 19.502 43.4057 20.9698C43.934 21.9245 44.1462 23.0195 44.0125 24.1002C43.8788 25.1809 43.406 26.1927 42.6607 26.9925C41.681 28.0979 40.5036 29.0144 39.1881 29.6959C36.337 31.2929 33.6099 33.0152 30.7588 34.6013C27.1627 36.6915 23.6929 38.6563 20.0968 40.7466C18.9806 41.5069 17.9909 42.1255 16.9984 42.736Z", fill: "currentColor" }));
@@ -381,6 +385,8 @@ const SvgUpdateIcon = (props) => /* @__PURE__ */ React.createElement("svg", { wi
381
385
 
382
386
  const SvgAddFile = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M8 16C7.3995 16 6.91293 15.5134 6.91293 14.9129V1.08707C6.91293 0.486575 7.3995 0 8 0C8.6005 0 9.08707 0.486575 9.08707 1.08707V14.9129C9.08707 15.5134 8.6005 16 8 16Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M14.9129 9.08705H1.08707C0.486575 9.08705 0 8.60048 0 7.99998C0 7.39948 0.486575 6.9129 1.08707 6.9129H14.9129C15.5134 6.9129 16 7.39948 16 7.99998C16 8.60048 15.5134 9.08705 14.9129 9.08705Z", fill: "currentColor" }));
383
387
 
388
+ const SvgPlusRoundIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 26 27", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { filter: "url(#filter0_ddii_1383_25738)" }, /* @__PURE__ */ React.createElement("path", { d: "M22 13C22 18.5228 17.5228 23 12 23C6.47715 23 2 18.5228 2 13C2 7.47715 6.47715 3 12 3C17.5228 3 22 7.47715 22 13Z", fill: "url(#paint0_linear_1383_25738)" })), /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13 8C13 7.44772 12.5523 7 12 7C11.4477 7 11 7.44772 11 8V9.49994C11 10.8806 9.88074 11.9999 8.50006 11.9999H7C6.44772 11.9999 6 12.4476 6 12.9999C6 13.5522 6.44772 13.9999 7 13.9999H8.5C9.88071 13.9999 11 15.1192 11 16.4999V18C11 18.5523 11.4477 19 12 19C12.5523 19 13 18.5523 13 18V16.4999C13 15.1192 14.1193 13.9999 15.5 13.9999H17C17.5523 13.9999 18 13.5522 18 12.9999C18 12.4476 17.5523 11.9999 17 11.9999H15.4999C14.1193 11.9999 13 10.8806 13 9.49994V8Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", { id: "filter0_ddii_1383_25738", x: 0, y: 0, width: 26, height: 27, filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { floodOpacity: 0, result: "BackgroundImageFix" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dx: 1, dy: 1 }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: 1.5 }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.442507 0 0 0 0 0.202278 0 0 0 0 0.481615 0 0 0 0.2 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow_1383_25738" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dx: 1, dy: -1 }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: 1 }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.141176 0 0 0 0 0.0745098 0 0 0 0 0.196078 0 0 0 0.1 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "effect1_dropShadow_1383_25738", result: "effect2_dropShadow_1383_25738" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect2_dropShadow_1383_25738", result: "shape" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dx: -1, dy: -1 }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: 1 }), /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: -1, k3: 1 }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.941176 0 0 0 0 0.905882 0 0 0 0 0.956863 0 0 0 1 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "shape", result: "effect3_innerShadow_1383_25738" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dx: 1, dy: 1 }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: 1 }), /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "arithmetic", k2: -1, k3: 1 }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.556863 0 0 0 0 0.294118 0 0 0 0 0.776471 0 0 0 0.3 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "effect3_innerShadow_1383_25738", result: "effect4_innerShadow_1383_25738" })), /* @__PURE__ */ React.createElement("linearGradient", { id: "paint0_linear_1383_25738", x1: 2, y1: 3, x2: 22, y2: 23, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { offset: 1, stopColor: "#F0E7F4" }), /* @__PURE__ */ React.createElement("stop", { stopColor: "#F7EBFF" }))));
389
+
384
390
  const SvgEyeClosed = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.7651 6.07607C14.9992 6.22242 15.0704 6.5309 14.9241 6.76507C14.485 7.46755 13.9633 8.10658 13.3703 8.66318L14.5713 9.8642C14.7666 10.0595 14.7666 10.376 14.5713 10.5713C14.376 10.7666 14.0595 10.7666 13.8642 10.5713L12.6012 9.30831C11.8051 9.90297 10.909 10.3622 9.93383 10.6512L10.383 12.3278C10.4545 12.5946 10.2962 12.8687 10.0295 12.9402C9.76275 13.0116 9.48858 12.8534 9.41712 12.5866L8.95924 10.8777C8.4875 10.9581 8.00042 11.0001 7.50007 11.0001C6.9997 11.0001 6.51262 10.9581 6.04087 10.8777L5.58303 12.5866C5.51157 12.8533 5.23741 13.0116 4.97068 12.9402C4.70394 12.8687 4.54564 12.5946 4.6171 12.3278L5.06629 10.6512C4.09115 10.3622 3.19506 9.90296 2.39892 9.30829L1.13591 10.5713C0.940646 10.7666 0.624063 10.7666 0.428801 10.5713C0.233539 10.376 0.233539 10.0595 0.428801 9.86419L1.62984 8.66316C1.03683 8.10656 0.515117 7.46754 0.0760684 6.76507C-0.0702873 6.5309 0.000898553 6.22242 0.235066 6.07607C0.469234 5.92971 0.77771 6.0009 0.924065 6.23507C1.40355 7.00224 1.98901 7.68069 2.66235 8.24283C2.67317 8.25109 2.68373 8.25985 2.69399 8.26911C4.009 9.35541 5.65541 10.0001 7.50007 10.0001C10.3079 10.0001 12.6565 8.50643 14.0761 6.23507C14.2224 6.0009 14.5309 5.92971 14.7651 6.07607Z", fill: "currentColor" }));
385
391
 
386
392
  const SvgAttachmentIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 14 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M12.4416 8.46804L7.40855 13.5092C6.74872 14.0956 5.88979 14.4077 5.00744 14.3818C4.1251 14.3558 3.28601 13.9937 2.66183 13.3695C2.03764 12.7453 1.67553 11.9062 1.64956 11.0239C1.62358 10.1415 1.93571 9.2826 2.5221 8.62278L9.03736 2.10752C9.42634 1.73802 9.94236 1.532 10.4789 1.532C11.0154 1.532 11.5314 1.73802 11.9204 2.10752C12.2994 2.49158 12.5118 3.00945 12.5118 3.54902C12.5118 4.08859 12.2994 4.60645 11.9204 4.99052L6.30095 10.6018C6.24534 10.6617 6.17847 10.71 6.10417 10.7441C6.02987 10.7781 5.94959 10.7972 5.86792 10.8002C5.78624 10.8033 5.70477 10.7902 5.62816 10.7617C5.55154 10.7333 5.48128 10.69 5.42139 10.6344C5.3615 10.5788 5.31315 10.5119 5.2791 10.4376C5.24505 10.3633 5.22596 10.283 5.22294 10.2013C5.21991 10.1197 5.23301 10.0382 5.26147 9.96157C5.28993 9.88496 5.3332 9.8147 5.38881 9.75481L9.56673 5.58504C9.72008 5.43168 9.80624 5.22369 9.80624 5.00681C9.80624 4.78993 9.72008 4.58193 9.56673 4.42858C9.41337 4.27522 9.20538 4.18907 8.9885 4.18907C8.77162 4.18907 8.56362 4.27522 8.41027 4.42858L4.23235 8.61464C4.0233 8.82207 3.85737 9.06883 3.74414 9.3407C3.63091 9.61256 3.57262 9.90415 3.57262 10.1987C3.57262 10.4932 3.63091 10.7848 3.74414 11.0566C3.85737 11.3285 4.0233 11.5752 4.23235 11.7827C4.65941 12.1895 5.22659 12.4164 5.81638 12.4164C6.40617 12.4164 6.97335 12.1895 7.4004 11.7827L13.0117 6.16327C13.659 5.46854 14.0115 4.54966 13.9947 3.60022C13.978 2.65077 13.5933 1.7449 12.9219 1.07344C12.2504 0.401975 11.3445 0.0173533 10.3951 0.000601484C9.44565 -0.0161503 8.52677 0.336276 7.83204 0.983633L1.31677 7.4989C0.43819 8.47198 -0.0310478 9.74654 0.00682632 11.057C0.0447004 12.3675 0.586766 13.6128 1.52008 14.5336C2.4534 15.4543 3.70598 15.9794 5.01686 15.9994C6.32774 16.0195 7.59581 15.533 8.55686 14.6413L13.598 9.60821C13.674 9.53228 13.7342 9.44213 13.7753 9.34292C13.8164 9.24371 13.8376 9.13737 13.8376 9.02998C13.8376 8.9226 13.8164 8.81626 13.7753 8.71705C13.7342 8.61783 13.674 8.52769 13.598 8.45175C13.5221 8.37582 13.432 8.31559 13.3328 8.27449C13.2335 8.23339 13.1272 8.21224 13.0198 8.21224C12.9124 8.21224 12.8061 8.23339 12.7069 8.27449C12.6077 8.31559 12.5175 8.37582 12.4416 8.45175V8.46804Z", fill: "currentColor" }));
@@ -503,6 +509,8 @@ const SvgUserWarning = (props) => /* @__PURE__ */ React.createElement("svg", { w
503
509
 
504
510
  const SvgUserWithSystem = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 241 240", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_434_9692)" }, /* @__PURE__ */ React.createElement("path", { d: "M192.365 183.552H0.36499V183.672H192.365V183.552Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2771 187.627H25.5459V187.747H46.2771V187.627Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M53.5921 187.627H50.5537V187.747H53.5921V187.627Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M108.437 189.653H63.4707V189.773H108.437V189.653Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M114.125 162.144H21.4418C20.7157 162.143 20.0198 161.853 19.5069 161.34C18.9939 160.826 18.7058 160.129 18.7058 159.403V29.1168C18.7121 28.3949 19.003 27.7046 19.5153 27.1959C20.0276 26.6873 20.7199 26.4012 21.4418 26.4H114.125C114.852 26.4 115.549 26.6888 116.063 27.2028C116.577 27.7168 116.866 28.4139 116.866 29.1408V159.403C116.866 160.13 116.577 160.827 116.063 161.341C115.549 161.855 114.852 162.144 114.125 162.144ZM21.4418 26.496C20.7476 26.4973 20.0822 26.7739 19.5917 27.2653C19.1013 27.7567 18.8258 28.4225 18.8258 29.1168V159.403C18.8258 160.097 19.1013 160.763 19.5917 161.255C20.0822 161.746 20.7476 162.023 21.4418 162.024H114.125C114.82 162.023 115.486 161.746 115.977 161.255C116.468 160.764 116.745 160.098 116.746 159.403V29.1168C116.745 28.4221 116.468 27.7562 115.977 27.265C115.486 26.7738 114.82 26.4973 114.125 26.496H21.4418Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M119.818 49.2816H38.4482V140.443H119.818V49.2816Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M119.818 50.7552H40.0466V138.83H119.818V50.7552Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M42.9938 97.5024V91.3152H44.7602V87.1872H47.117V81H47.7074V87.1872H50.0642V91.3152H51.8306V97.5024H55.0754V99.2688H56.549V106.046H56.8418V96.3216H57.725V102.509H58.6082V87.7776H59.1986V93.9648H61.5554V91.9056H62.4386V83.3568H64.2098V74.8128H64.8002V75.9888H76.8818V72.456H78.941V58.9008H79.829V72.456H82.7762V75.9888H83.9522V93.672H90.1394V88.368H88.0802V87.4848H90.1394V86.0112H96.0338V72.456H97.5074V70.392H104.578V72.456H105.466V91.3152H108.706V99.8592H110.472V93.0816H111.946V91.3152H115.191V85.1232H116.957V81H119.016V74.8128H119.818V138.83H40.0466V97.5024H42.9938Z", fill: "#F0F0F0" }), /* @__PURE__ */ React.createElement("path", { d: "M72.3699 76.9152H71.5347V77.7504H72.3699V76.9152Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M72.3699 78.312H71.5347V79.1472H72.3699V78.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M72.3699 83.9136H71.5347V84.7488H72.3699V83.9136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M72.3699 85.3104H71.5347V86.1456H72.3699V85.3104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M72.3699 86.712H71.5347V87.5472H72.3699V86.712Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M72.3699 90.912H71.5347V91.7472H72.3699V90.912Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M72.3699 92.3088H71.5347V93.144H72.3699V92.3088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M73.6946 82.512H72.8594V83.3472H73.6946V82.512Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M73.6946 83.9136H72.8594V84.7488H73.6946V83.9136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M73.6946 85.3104H72.8594V86.1456H73.6946V85.3104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M73.6946 86.712H72.8594V87.5472H73.6946V86.712Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M73.6946 88.1136H72.8594V88.9488H73.6946V88.1136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M73.6946 90.912H72.8594V91.7472H73.6946V90.912Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M73.6946 92.3088H72.8594V93.144H73.6946V92.3088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M75.0193 76.9152H74.1841V77.7504H75.0193V76.9152Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M75.0193 78.312H74.1841V79.1472H75.0193V78.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M75.0193 79.7136H74.1841V80.5488H75.0193V79.7136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M75.0193 81.1152H74.1841V81.9504H75.0193V81.1152Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M75.0193 82.512H74.1841V83.3472H75.0193V82.512Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M75.0193 83.9136H74.1841V84.7488H75.0193V83.9136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M75.0193 85.3104H74.1841V86.1456H75.0193V85.3104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M75.0193 86.712H74.1841V87.5472H75.0193V86.712Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M75.0193 88.1136H74.1841V88.9488H75.0193V88.1136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M75.0193 89.5104H74.1841V90.3456H75.0193V89.5104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M75.0193 92.3088H74.1841V93.144H75.0193V92.3088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M76.3489 76.9152H75.5137V77.7504H76.3489V76.9152Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M76.3489 78.312H75.5137V79.1472H76.3489V78.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M76.3489 79.7136H75.5137V80.5488H76.3489V79.7136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M76.3489 81.1152H75.5137V81.9504H76.3489V81.1152Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M76.3489 82.512H75.5137V83.3472H76.3489V82.512Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M76.3489 83.9136H75.5137V84.7488H76.3489V83.9136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M76.3489 85.3104H75.5137V86.1456H76.3489V85.3104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M76.3489 97.9104H75.5137V98.7456H76.3489V97.9104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M77.6738 76.9152H76.8386V77.7504H77.6738V76.9152Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M77.6738 78.312H76.8386V79.1472H77.6738V78.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M77.6738 79.7136H76.8386V80.5488H77.6738V79.7136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M77.6738 81.1152H76.8386V81.9504H77.6738V81.1152Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M77.6738 82.512H76.8386V83.3472H77.6738V82.512Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M77.6738 83.9136H76.8386V84.7488H77.6738V83.9136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M77.6738 85.3104H76.8386V86.1456H77.6738V85.3104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M77.6738 86.712H76.8386V87.5472H77.6738V86.712Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M77.6738 95.112H76.8386V95.9472H77.6738V95.112Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M77.6738 96.5088H76.8386V97.344H77.6738V96.5088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M77.6738 97.9104H76.8386V98.7456H77.6738V97.9104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M77.6738 99.312H76.8386V100.147H77.6738V99.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M77.6738 104.909H76.8386V105.744H77.6738V104.909Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 76.9152H78.1633V77.7504H78.9985V76.9152Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 78.312H78.1633V79.1472H78.9985V78.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 79.7136H78.1633V80.5488H78.9985V79.7136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 81.1152H78.1633V81.9504H78.9985V81.1152Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 82.512H78.1633V83.3472H78.9985V82.512Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 83.9136H78.1633V84.7488H78.9985V83.9136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 85.3104H78.1633V86.1456H78.9985V85.3104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 86.712H78.1633V87.5472H78.9985V86.712Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 88.1136H78.1633V88.9488H78.9985V88.1136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 89.5104H78.1633V90.3456H78.9985V89.5104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 93.7104H78.1633V94.5456H78.9985V93.7104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 95.112H78.1633V95.9472H78.9985V95.112Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 96.5088H78.1633V97.344H78.9985V96.5088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 97.9104H78.1633V98.7456H78.9985V97.9104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 99.312H78.1633V100.147H78.9985V99.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M78.9985 104.909H78.1633V105.744H78.9985V104.909Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 76.9152H79.4883V77.7504H80.3235V76.9152Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 78.312H79.4883V79.1472H80.3235V78.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 79.7136H79.4883V80.5488H80.3235V79.7136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 81.1152H79.4883V81.9504H80.3235V81.1152Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 82.512H79.4883V83.3472H80.3235V82.512Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 83.9136H79.4883V84.7488H80.3235V83.9136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 85.3104H79.4883V86.1456H80.3235V85.3104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 86.712H79.4883V87.5472H80.3235V86.712Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 88.1136H79.4883V88.9488H80.3235V88.1136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 89.5104H79.4883V90.3456H80.3235V89.5104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 90.912H79.4883V91.7472H80.3235V90.912Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 92.3088H79.4883V93.144H80.3235V92.3088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 93.7104H79.4883V94.5456H80.3235V93.7104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 95.112H79.4883V95.9472H80.3235V95.112Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 96.5088H79.4883V97.344H80.3235V96.5088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 97.9104H79.4883V98.7456H80.3235V97.9104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 99.312H79.4883V100.147H80.3235V99.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M80.3235 100.709H79.4883V101.544H80.3235V100.709Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M81.6531 76.9152H80.8179V77.7504H81.6531V76.9152Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M81.6531 78.312H80.8179V79.1472H81.6531V78.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M81.6531 79.7136H80.8179V80.5488H81.6531V79.7136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M81.6531 81.1152H80.8179V81.9504H81.6531V81.1152Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M81.6531 82.512H80.8179V83.3472H81.6531V82.512Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M81.6531 83.9136H80.8179V84.7488H81.6531V83.9136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M81.6531 85.3104H80.8179V86.1456H81.6531V85.3104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M81.6531 86.712H80.8179V87.5472H81.6531V86.712Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M81.6531 88.1136H80.8179V88.9488H81.6531V88.1136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M81.6531 89.5104H80.8179V90.3456H81.6531V89.5104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M81.6531 93.7104H80.8179V94.5456H81.6531V93.7104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M81.6531 95.112H80.8179V95.9472H81.6531V95.112Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M81.6531 96.5088H80.8179V97.344H81.6531V96.5088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M81.6531 97.9104H80.8179V98.7456H81.6531V97.9104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M82.9778 76.9152H82.1426V77.7504H82.9778V76.9152Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M82.9778 78.312H82.1426V79.1472H82.9778V78.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M82.9778 79.7136H82.1426V80.5488H82.9778V79.7136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M82.9778 81.1152H82.1426V81.9504H82.9778V81.1152Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M82.9778 82.512H82.1426V83.3472H82.9778V82.512Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M82.9778 83.9136H82.1426V84.7488H82.9778V83.9136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M82.9778 85.3104H82.1426V86.1456H82.9778V85.3104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M82.9778 86.712H82.1426V87.5472H82.9778V86.712Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M82.9778 88.1136H82.1426V88.9488H82.9778V88.1136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M82.9778 89.5104H82.1426V90.3456H82.9778V89.5104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M82.9778 93.7104H82.1426V94.5456H82.9778V93.7104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M82.9778 95.112H82.1426V95.9472H82.9778V95.112Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M82.9778 96.5088H82.1426V97.344H82.9778V96.5088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M97.9058 73.2816H97.0706V74.1168H97.9058V73.2816Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M97.9058 74.6784H97.0706V75.5136H97.9058V74.6784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M97.9058 76.08H97.0706V76.9152H97.9058V76.08Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M97.9058 77.4768H97.0706V78.312H97.9058V77.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M97.9058 78.8784H97.0706V79.7136H97.9058V78.8784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M97.9058 80.28H97.0706V81.1152H97.9058V80.28Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M97.9058 81.6768H97.0706V82.512H97.9058V81.6768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M97.9058 83.0784H97.0706V83.9136H97.9058V83.0784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M97.9058 87.2784H97.0706V88.1136H97.9058V87.2784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M97.9058 88.6752H97.0706V89.5104H97.9058V88.6752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M99.2353 73.2816H98.4001V74.1168H99.2353V73.2816Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M99.2353 74.6784H98.4001V75.5136H99.2353V74.6784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M99.2353 76.08H98.4001V76.9152H99.2353V76.08Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M99.2353 77.4768H98.4001V78.312H99.2353V77.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M99.2353 78.8784H98.4001V79.7136H99.2353V78.8784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M99.2353 80.28H98.4001V81.1152H99.2353V80.28Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M99.2353 81.6768H98.4001V82.512H99.2353V81.6768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M99.2353 83.0784H98.4001V83.9136H99.2353V83.0784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M99.2353 88.6752H98.4001V89.5104H99.2353V88.6752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M100.56 73.2816H99.7251V74.1168H100.56V73.2816Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M100.56 74.6784H99.7251V75.5136H100.56V74.6784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M100.56 76.08H99.7251V76.9152H100.56V76.08Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M100.56 77.4768H99.7251V78.312H100.56V77.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M100.56 78.8784H99.7251V79.7136H100.56V78.8784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M100.56 80.28H99.7251V81.1152H100.56V80.28Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M100.56 81.6768H99.7251V82.512H100.56V81.6768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M100.56 83.0784H99.7251V83.9136H100.56V83.0784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M101.885 73.2816H101.05V74.1168H101.885V73.2816Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M101.885 74.6784H101.05V75.5136H101.885V74.6784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M101.885 76.08H101.05V76.9152H101.885V76.08Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M101.885 77.4768H101.05V78.312H101.885V77.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M101.885 78.8784H101.05V79.7136H101.885V78.8784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M101.885 80.28H101.05V81.1152H101.885V80.28Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M101.885 83.0784H101.05V83.9136H101.885V83.0784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M101.885 84.48H101.05V85.3152H101.885V84.48Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M101.885 88.6752H101.05V89.5104H101.885V88.6752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M101.885 90.0768H101.05V90.912H101.885V90.0768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M101.885 91.4784H101.05V92.3136H101.885V91.4784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M101.885 92.8752H101.05V93.7104H101.885V92.8752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M101.885 94.2768H101.05V95.112H101.885V94.2768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M101.885 95.6736H101.05V96.5088H101.885V95.6736Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M101.885 97.0752H101.05V97.9104H101.885V97.0752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 73.2816H102.375V74.1168H103.21V73.2816Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 74.6784H102.375V75.5136H103.21V74.6784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 76.08H102.375V76.9152H103.21V76.08Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 77.4768H102.375V78.312H103.21V77.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 78.8784H102.375V79.7136H103.21V78.8784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 80.28H102.375V81.1152H103.21V80.28Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 84.48H102.375V85.3152H103.21V84.48Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 85.8768H102.375V86.712H103.21V85.8768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 87.2784H102.375V88.1136H103.21V87.2784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 88.6752H102.375V89.5104H103.21V88.6752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 90.0768H102.375V90.912H103.21V90.0768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 91.4784H102.375V92.3136H103.21V91.4784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 92.8752H102.375V93.7104H103.21V92.8752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 94.2768H102.375V95.112H103.21V94.2768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 95.6736H102.375V96.5088H103.21V95.6736Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 97.0752H102.375V97.9104H103.21V97.0752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 98.4768H102.375V99.312H103.21V98.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M103.21 101.275H102.375V102.11H103.21V101.275Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 73.2816H103.704V74.1168H104.539V73.2816Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 74.6784H103.704V75.5136H104.539V74.6784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 76.08H103.704V76.9152H104.539V76.08Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 77.4768H103.704V78.312H104.539V77.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 78.8784H103.704V79.7136H104.539V78.8784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 80.28H103.704V81.1152H104.539V80.28Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 84.48H103.704V85.3152H104.539V84.48Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 85.8768H103.704V86.712H104.539V85.8768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 87.2784H103.704V88.1136H104.539V87.2784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 88.6752H103.704V89.5104H104.539V88.6752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 92.8752H103.704V93.7104H104.539V92.8752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 94.2768H103.704V95.112H104.539V94.2768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 95.6736H103.704V96.5088H104.539V95.6736Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 97.0752H103.704V97.9104H104.539V97.0752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 98.4768H103.704V99.312H104.539V98.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 101.275H103.704V102.11H104.539V101.275Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M104.539 102.672H103.704V103.507H104.539V102.672Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M116.568 86.2944H115.733V87.1296H116.568V86.2944Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M116.568 87.696H115.733V88.5312H116.568V87.696Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M116.568 89.0928H115.733V89.928H116.568V89.0928Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M116.568 90.4944H115.733V91.3296H116.568V90.4944Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M116.568 91.896H115.733V92.7312H116.568V91.896Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M116.568 93.2928H115.733V94.128H116.568V93.2928Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M116.568 94.6944H115.733V95.5296H116.568V94.6944Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M116.568 98.8944H115.733V99.7296H116.568V98.8944Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M116.568 100.291H115.733V101.126H116.568V100.291Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M116.568 101.693H115.733V102.528H116.568V101.693Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M117.898 86.2944H117.062V87.1296H117.898V86.2944Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M117.898 87.696H117.062V88.5312H117.898V87.696Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M117.898 89.0928H117.062V89.928H117.898V89.0928Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M117.898 90.4944H117.062V91.3296H117.898V90.4944Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M117.898 91.896H117.062V92.7312H117.898V91.896Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M117.898 93.2928H117.062V94.128H117.898V93.2928Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M117.898 94.6944H117.062V95.5296H117.898V94.6944Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M119.587 86.2944H118.387V87.1296H119.587V86.2944Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M119.587 87.696H118.387V88.5312H119.587V87.696Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M119.587 89.0928H118.387V89.928H119.587V89.0928Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M119.587 90.4944H118.387V91.3296H119.587V90.4944Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M119.587 91.896H118.387V92.7312H119.587V91.896Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M119.587 93.2928H118.387V94.128H119.587V93.2928Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M119.587 94.6944H118.387V95.5296H119.587V94.6944Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 88.1136H45.4563V88.9488H46.2915V88.1136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 89.5104H45.4563V90.3456H46.2915V89.5104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 90.912H45.4563V91.7472H46.2915V90.912Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 92.3088H45.4563V93.144H46.2915V92.3088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 93.7104H45.4563V94.5456H46.2915V93.7104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 95.112H45.4563V95.9472H46.2915V95.112Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 96.5088H45.4563V97.344H46.2915V96.5088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 97.9104H45.4563V98.7456H46.2915V97.9104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 99.312H45.4563V100.147H46.2915V99.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 100.709H45.4563V101.544H46.2915V100.709Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 102.11H45.4563V102.946H46.2915V102.11Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 103.507H45.4563V104.342H46.2915V103.507Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 104.909H45.4563V105.744H46.2915V104.909Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 106.31H45.4563V107.146H46.2915V106.31Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 107.707H45.4563V108.542H46.2915V107.707Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 109.109H45.4563V109.944H46.2915V109.109Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 110.506H45.4563V111.341H46.2915V110.506Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 111.907H45.4563V112.742H46.2915V111.907Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 113.309H45.4563V114.144H46.2915V113.309Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M46.2915 114.706H45.4563V115.541H46.2915V114.706Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 88.1136H46.781V88.9488H47.6162V88.1136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 89.5104H46.781V90.3456H47.6162V89.5104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 90.912H46.781V91.7472H47.6162V90.912Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 92.3088H46.781V93.144H47.6162V92.3088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 93.7104H46.781V94.5456H47.6162V93.7104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 95.112H46.781V95.9472H47.6162V95.112Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 96.5088H46.781V97.344H47.6162V96.5088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 97.9104H46.781V98.7456H47.6162V97.9104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 99.312H46.781V100.147H47.6162V99.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 100.709H46.781V101.544H47.6162V100.709Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 102.11H46.781V102.946H47.6162V102.11Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 103.507H46.781V104.342H47.6162V103.507Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 104.909H46.781V105.744H47.6162V104.909Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 106.31H46.781V107.146H47.6162V106.31Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 107.707H46.781V108.542H47.6162V107.707Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 109.109H46.781V109.944H47.6162V109.109Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 110.506H46.781V111.341H47.6162V110.506Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M47.6162 111.907H46.781V112.742H47.6162V111.907Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 88.1136H48.1057V88.9488H48.9409V88.1136Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 89.5104H48.1057V90.3456H48.9409V89.5104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 90.912H48.1057V91.7472H48.9409V90.912Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 92.3088H48.1057V93.144H48.9409V92.3088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 93.7104H48.1057V94.5456H48.9409V93.7104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 95.112H48.1057V95.9472H48.9409V95.112Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 96.5088H48.1057V97.344H48.9409V96.5088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 97.9104H48.1057V98.7456H48.9409V97.9104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 99.312H48.1057V100.147H48.9409V99.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 100.709H48.1057V101.544H48.9409V100.709Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 102.11H48.1057V102.946H48.9409V102.11Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 103.507H48.1057V104.342H48.9409V103.507Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 104.909H48.1057V105.744H48.9409V104.909Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 106.31H48.1057V107.146H48.9409V106.31Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 107.707H48.1057V108.542H48.9409V107.707Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 109.109H48.1057V109.944H48.9409V109.109Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 110.506H48.1057V111.341H48.9409V110.506Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M48.9409 111.907H48.1057V112.742H48.9409V111.907Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M41.3281 98.328H40.4929V99.1632H41.3281V98.328Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M41.3281 99.7296H40.4929V100.565H41.3281V99.7296Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M41.3281 101.126H40.4929V101.962H41.3281V101.126Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M41.3281 102.528H40.4929V103.363H41.3281V102.528Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M41.3281 103.925H40.4929V104.76H41.3281V103.925Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M41.3281 105.326H40.4929V106.162H41.3281V105.326Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M41.3281 106.728H40.4929V107.563H41.3281V106.728Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M41.3281 108.125H40.4929V108.96H41.3281V108.125Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M41.3281 109.526H40.4929V110.362H41.3281V109.526Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M41.3281 110.923H40.4929V111.758H41.3281V110.923Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M41.3281 112.325H40.4929V113.16H41.3281V112.325Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M41.3281 113.726H40.4929V114.562H41.3281V113.726Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M41.3281 115.123H40.4929V115.958H41.3281V115.123Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M42.6531 98.328H41.8179V99.1632H42.6531V98.328Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M42.6531 99.7296H41.8179V100.565H42.6531V99.7296Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M42.6531 101.126H41.8179V101.962H42.6531V101.126Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M42.6531 102.528H41.8179V103.363H42.6531V102.528Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M42.6531 103.925H41.8179V104.76H42.6531V103.925Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M42.6531 105.326H41.8179V106.162H42.6531V105.326Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M42.6531 106.728H41.8179V107.563H42.6531V106.728Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M42.6531 108.125H41.8179V108.96H42.6531V108.125Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M42.6531 109.526H41.8179V110.362H42.6531V109.526Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M42.6531 110.923H41.8179V111.758H42.6531V110.923Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M42.6531 112.325H41.8179V113.16H42.6531V112.325Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M42.6531 113.726H41.8179V114.562H42.6531V113.726Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M42.6531 115.123H41.8179V115.958H42.6531V115.123Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M43.9827 98.328H43.1475V99.1632H43.9827V98.328Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M43.9827 99.7296H43.1475V100.565H43.9827V99.7296Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M43.9827 101.126H43.1475V101.962H43.9827V101.126Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M43.9827 102.528H43.1475V103.363H43.9827V102.528Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M43.9827 103.925H43.1475V104.76H43.9827V103.925Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M43.9827 105.326H43.1475V106.162H43.9827V105.326Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M43.9827 106.728H43.1475V107.563H43.9827V106.728Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M43.9827 108.125H43.1475V108.96H43.9827V108.125Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M43.9827 109.526H43.1475V110.362H43.9827V109.526Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M43.9827 110.923H43.1475V111.758H43.9827V110.923Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M43.9827 112.325H43.1475V113.16H43.9827V112.325Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M43.9827 113.726H43.1475V114.562H43.9827V113.726Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M43.9827 115.123H43.1475V115.958H43.9827V115.123Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M43.9827 116.525H43.1475V117.36H43.9827V116.525Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M51.3506 98.7456H50.5154V99.5808H51.3506V98.7456Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M51.3506 100.142H50.5154V100.978H51.3506V100.142Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M51.3506 101.544H50.5154V102.379H51.3506V101.544Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M51.3506 102.946H50.5154V103.781H51.3506V102.946Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M51.3506 104.342H50.5154V105.178H51.3506V104.342Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M51.3506 105.744H50.5154V106.579H51.3506V105.744Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M51.3506 107.146H50.5154V107.981H51.3506V107.146Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M51.3506 108.542H50.5154V109.378H51.3506V108.542Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M51.3506 109.944H50.5154V110.779H51.3506V109.944Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M51.3506 111.341H50.5154V112.176H51.3506V111.341Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M51.3506 115.541H50.5154V116.376H51.3506V115.541Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M52.6753 98.7456H51.8401V99.5808H52.6753V98.7456Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M52.6753 100.142H51.8401V100.978H52.6753V100.142Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M52.6753 101.544H51.8401V102.379H52.6753V101.544Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M52.6753 102.946H51.8401V103.781H52.6753V102.946Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M52.6753 104.342H51.8401V105.178H52.6753V104.342Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M52.6753 105.744H51.8401V106.579H52.6753V105.744Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M52.6753 107.146H51.8401V107.981H52.6753V107.146Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M52.6753 108.542H51.8401V109.378H52.6753V108.542Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M52.6753 109.944H51.8401V110.779H52.6753V109.944Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M52.6753 114.144H51.8401V114.979H52.6753V114.144Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M52.6753 115.541H51.8401V116.376H52.6753V115.541Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M54.0002 98.7456H53.165V99.5808H54.0002V98.7456Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M54.0002 100.142H53.165V100.978H54.0002V100.142Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M54.0002 101.544H53.165V102.379H54.0002V101.544Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M54.0002 102.946H53.165V103.781H54.0002V102.946Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M54.0002 104.342H53.165V105.178H54.0002V104.342Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M54.0002 105.744H53.165V106.579H54.0002V105.744Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M54.0002 107.146H53.165V107.981H54.0002V107.146Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M54.0002 108.542H53.165V109.378H54.0002V108.542Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M54.0002 112.742H53.165V113.578H54.0002V112.742Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M54.0002 114.144H53.165V114.979H54.0002V114.144Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M54.0002 115.541H53.165V116.376H54.0002V115.541Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 77.4768H65.4915V78.312H66.3267V77.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 78.8784H65.4915V79.7136H66.3267V78.8784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 80.28H65.4915V81.1152H66.3267V80.28Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 81.6768H65.4915V82.512H66.3267V81.6768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 83.0784H65.4915V83.9136H66.3267V83.0784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 84.48H65.4915V85.3152H66.3267V84.48Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 85.8768H65.4915V86.712H66.3267V85.8768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 87.2784H65.4915V88.1136H66.3267V87.2784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 88.6752H65.4915V89.5104H66.3267V88.6752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 90.0768H65.4915V90.912H66.3267V90.0768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 91.4784H65.4915V92.3136H66.3267V91.4784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 92.8752H65.4915V93.7104H66.3267V92.8752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 94.2768H65.4915V95.112H66.3267V94.2768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 95.6736H65.4915V96.5088H66.3267V95.6736Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 97.0752H65.4915V97.9104H66.3267V97.0752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 98.4768H65.4915V99.312H66.3267V98.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 99.8736H65.4915V100.709H66.3267V99.8736Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 102.672H65.4915V103.507H66.3267V102.672Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 104.074H65.4915V104.909H66.3267V104.074Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 105.475H65.4915V106.31H66.3267V105.475Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 106.872H65.4915V107.707H66.3267V106.872Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M66.3267 108.274H65.4915V109.109H66.3267V108.274Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 77.4768H66.8162V78.312H67.6514V77.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 78.8784H66.8162V79.7136H67.6514V78.8784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 80.28H66.8162V81.1152H67.6514V80.28Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 81.6768H66.8162V82.512H67.6514V81.6768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 83.0784H66.8162V83.9136H67.6514V83.0784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 84.48H66.8162V85.3152H67.6514V84.48Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 85.8768H66.8162V86.712H67.6514V85.8768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 87.2784H66.8162V88.1136H67.6514V87.2784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 88.6752H66.8162V89.5104H67.6514V88.6752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 90.0768H66.8162V90.912H67.6514V90.0768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 91.4784H66.8162V92.3136H67.6514V91.4784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 92.8752H66.8162V93.7104H67.6514V92.8752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 94.2768H66.8162V95.112H67.6514V94.2768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 95.6736H66.8162V96.5088H67.6514V95.6736Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 97.0752H66.8162V97.9104H67.6514V97.0752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 98.4768H66.8162V99.312H67.6514V98.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 106.872H66.8162V107.707H67.6514V106.872Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M67.6514 108.274H66.8162V109.109H67.6514V108.274Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 77.4768H68.1458V78.312H68.9809V77.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 78.8784H68.1458V79.7136H68.9809V78.8784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 80.28H68.1458V81.1152H68.9809V80.28Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 81.6768H68.1458V82.512H68.9809V81.6768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 83.0784H68.1458V83.9136H68.9809V83.0784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 84.48H68.1458V85.3152H68.9809V84.48Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 85.8768H68.1458V86.712H68.9809V85.8768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 87.2784H68.1458V88.1136H68.9809V87.2784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 88.6752H68.1458V89.5104H68.9809V88.6752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 90.0768H68.1458V90.912H68.9809V90.0768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 91.4784H68.1458V92.3136H68.9809V91.4784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 92.8752H68.1458V93.7104H68.9809V92.8752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 94.2768H68.1458V95.112H68.9809V94.2768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 95.6736H68.1458V96.5088H68.9809V95.6736Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 97.0752H68.1458V97.9104H68.9809V97.0752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 98.4768H68.1458V99.312H68.9809V98.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 101.275H68.1458V102.11H68.9809V101.275Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 102.672H68.1458V103.507H68.9809V102.672Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 104.074H68.1458V104.909H68.9809V104.074Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 105.475H68.1458V106.31H68.9809V105.475Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M68.9809 108.274H68.1458V109.109H68.9809V108.274Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M61.5122 95.112H60.677V95.9472H61.5122V95.112Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M61.5122 96.5088H60.677V97.344H61.5122V96.5088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M61.5122 97.9104H60.677V98.7456H61.5122V97.9104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M61.5122 99.312H60.677V100.147H61.5122V99.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M61.5122 100.709H60.677V101.544H61.5122V100.709Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M61.5122 102.11H60.677V102.946H61.5122V102.11Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M61.5122 103.507H60.677V104.342H61.5122V103.507Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M61.5122 106.31H60.677V107.146H61.5122V106.31Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M61.5122 107.707H60.677V108.542H61.5122V107.707Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M61.5122 109.109H60.677V109.944H61.5122V109.109Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M61.5122 110.506H60.677V111.341H61.5122V110.506Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M61.5122 111.907H60.677V112.742H61.5122V111.907Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M61.5122 113.309H60.677V114.144H61.5122V113.309Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M61.5122 114.706H60.677V115.541H61.5122V114.706Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M61.5122 116.107H60.677V116.942H61.5122V116.107Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M62.8418 95.112H62.0066V95.9472H62.8418V95.112Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M62.8418 96.5088H62.0066V97.344H62.8418V96.5088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M62.8418 97.9104H62.0066V98.7456H62.8418V97.9104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M62.8418 99.312H62.0066V100.147H62.8418V99.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M62.8418 100.709H62.0066V101.544H62.8418V100.709Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M62.8418 102.11H62.0066V102.946H62.8418V102.11Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M62.8418 106.31H62.0066V107.146H62.8418V106.31Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M62.8418 107.707H62.0066V108.542H62.8418V107.707Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M62.8418 109.109H62.0066V109.944H62.8418V109.109Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M62.8418 110.506H62.0066V111.341H62.8418V110.506Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M62.8418 111.907H62.0066V112.742H62.8418V111.907Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M62.8418 113.309H62.0066V114.144H62.8418V113.309Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M62.8418 114.706H62.0066V115.541H62.8418V114.706Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M62.8418 116.107H62.0066V116.942H62.8418V116.107Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M64.1665 95.112H63.3313V95.9472H64.1665V95.112Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M64.1665 96.5088H63.3313V97.344H64.1665V96.5088Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M64.1665 97.9104H63.3313V98.7456H64.1665V97.9104Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M64.1665 99.312H63.3313V100.147H64.1665V99.312Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M64.1665 100.709H63.3313V101.544H64.1665V100.709Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M64.1665 102.11H63.3313V102.946H64.1665V102.11Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M64.1665 104.909H63.3313V105.744H64.1665V104.909Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M64.1665 106.31H63.3313V107.146H64.1665V106.31Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M64.1665 107.707H63.3313V108.542H64.1665V107.707Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M64.1665 109.109H63.3313V109.944H64.1665V109.109Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M64.1665 110.506H63.3313V111.341H64.1665V110.506Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M64.1665 111.907H63.3313V112.742H64.1665V111.907Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M64.1665 113.309H63.3313V114.144H64.1665V113.309Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M64.1665 114.706H63.3313V115.541H64.1665V114.706Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M64.1665 116.107H63.3313V116.942H64.1665V116.107Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 87.2784H91.2771V88.1136H92.1123V87.2784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 88.6752H91.2771V89.5104H92.1123V88.6752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 90.0768H91.2771V90.912H92.1123V90.0768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 91.4784H91.2771V92.3136H92.1123V91.4784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 92.8752H91.2771V93.7104H92.1123V92.8752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 94.2768H91.2771V95.112H92.1123V94.2768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 95.6736H91.2771V96.5088H92.1123V95.6736Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 97.0752H91.2771V97.9104H92.1123V97.0752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 98.4768H91.2771V99.312H92.1123V98.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 99.8736H91.2771V100.709H92.1123V99.8736Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 101.275H91.2771V102.11H92.1123V101.275Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 102.672H91.2771V103.507H92.1123V102.672Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 104.074H91.2771V104.909H92.1123V104.074Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 106.872H91.2771V107.707H92.1123V106.872Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 108.274H91.2771V109.109H92.1123V108.274Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 109.67H91.2771V110.506H92.1123V109.67Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 111.072H91.2771V111.907H92.1123V111.072Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 113.87H91.2771V114.706H92.1123V113.87Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 115.272H91.2771V116.107H92.1123V115.272Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M92.1123 116.669H91.2771V117.504H92.1123V116.669Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 87.2784H92.6018V88.1136H93.437V87.2784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 88.6752H92.6018V89.5104H93.437V88.6752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 90.0768H92.6018V90.912H93.437V90.0768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 91.4784H92.6018V92.3136H93.437V91.4784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 92.8752H92.6018V93.7104H93.437V92.8752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 94.2768H92.6018V95.112H93.437V94.2768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 95.6736H92.6018V96.5088H93.437V95.6736Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 97.0752H92.6018V97.9104H93.437V97.0752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 98.4768H92.6018V99.312H93.437V98.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 99.8736H92.6018V100.709H93.437V99.8736Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 101.275H92.6018V102.11H93.437V101.275Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 102.672H92.6018V103.507H93.437V102.672Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 104.074H92.6018V104.909H93.437V104.074Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 108.274H92.6018V109.109H93.437V108.274Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 109.67H92.6018V110.506H93.437V109.67Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 112.474H92.6018V113.309H93.437V112.474Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 113.87H92.6018V114.706H93.437V113.87Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 115.272H92.6018V116.107H93.437V115.272Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M93.437 116.669H92.6018V117.504H93.437V116.669Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 87.2784H93.9265V88.1136H94.7617V87.2784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 88.6752H93.9265V89.5104H94.7617V88.6752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 90.0768H93.9265V90.912H94.7617V90.0768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 91.4784H93.9265V92.3136H94.7617V91.4784Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 92.8752H93.9265V93.7104H94.7617V92.8752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 94.2768H93.9265V95.112H94.7617V94.2768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 95.6736H93.9265V96.5088H94.7617V95.6736Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 97.0752H93.9265V97.9104H94.7617V97.0752Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 98.4768H93.9265V99.312H94.7617V98.4768Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 99.8736H93.9265V100.709H94.7617V99.8736Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 101.275H93.9265V102.11H94.7617V101.275Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 102.672H93.9265V103.507H94.7617V102.672Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 104.074H93.9265V104.909H94.7617V104.074Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 105.475H93.9265V106.31H94.7617V105.475Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 108.274H93.9265V109.109H94.7617V108.274Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 111.072H93.9265V111.907H94.7617V111.072Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 112.474H93.9265V113.309H94.7617V112.474Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 113.87H93.9265V114.706H94.7617V113.87Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 115.272H93.9265V116.107H94.7617V115.272Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M94.7617 116.669H93.9265V117.504H94.7617V116.669Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M86.7073 95.256H85.8721V96.0912H86.7073V95.256Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M86.7073 96.6576H85.8721V97.4928H86.7073V96.6576Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M86.7073 98.0592H85.8721V98.8944H86.7073V98.0592Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M86.7073 99.456H85.8721V100.291H86.7073V99.456Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M86.7073 100.858H85.8721V101.693H86.7073V100.858Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M86.7073 102.254H85.8721V103.09H86.7073V102.254Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M86.7073 106.454H85.8721V107.29H86.7073V106.454Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M86.7073 107.856H85.8721V108.691H86.7073V107.856Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M86.7073 109.253H85.8721V110.088H86.7073V109.253Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M86.7073 110.654H85.8721V111.49H86.7073V110.654Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M86.7073 112.056H85.8721V112.891H86.7073V112.056Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M86.7073 113.453H85.8721V114.288H86.7073V113.453Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M86.7073 114.854H85.8721V115.69H86.7073V114.854Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M88.0371 95.256H87.2019V96.0912H88.0371V95.256Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M88.0371 96.6576H87.2019V97.4928H88.0371V96.6576Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M88.0371 98.0592H87.2019V98.8944H88.0371V98.0592Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M88.0371 99.456H87.2019V100.291H88.0371V99.456Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M88.0371 100.858H87.2019V101.693H88.0371V100.858Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M88.0371 102.254H87.2019V103.09H88.0371V102.254Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M88.0371 106.454H87.2019V107.29H88.0371V106.454Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M88.0371 107.856H87.2019V108.691H88.0371V107.856Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M88.0371 109.253H87.2019V110.088H88.0371V109.253Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M88.0371 110.654H87.2019V111.49H88.0371V110.654Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M88.0371 112.056H87.2019V112.891H88.0371V112.056Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M88.0371 113.453H87.2019V114.288H88.0371V113.453Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M88.0371 116.256H87.2019V117.091H88.0371V116.256Z", fill: "#FAFAFA" }), /* @__PURE__ */ React.createElement("path", { d: "M119.813 49.488H118.157V140.443H119.813V49.488Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M93.197 49.488H91.7954V140.443H93.197V49.488Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M66.8354 49.488H65.4338V140.443H66.8354V49.488Z", fill: "#EBEBEB" }), /* @__PURE__ */ React.createElement("path", { d: "M98.5987 205.229C137.977 205.229 169.9 202.796 169.9 199.795C169.9 196.794 137.977 194.362 98.5987 194.362C59.2202 194.362 27.2976 196.794 27.2976 199.795C27.2976 202.796 59.2202 205.229 98.5987 205.229Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M87.3795 71.1648H73.5891C72.4624 71.1648 71.3819 71.6124 70.5853 72.409C69.7886 73.2057 69.3411 74.2862 69.3411 75.4128V87.4128C69.3411 88.5395 69.7886 89.6199 70.5853 90.4166C71.3819 91.2133 72.4624 91.6608 73.5891 91.6608H77.6115L74.2515 98.328L80.4915 91.6608H87.3987C87.9563 91.6608 88.5085 91.5509 89.0236 91.3374C89.5387 91.1238 90.0067 90.8108 90.4008 90.4163C90.7948 90.0218 91.1073 89.5534 91.3203 89.0381C91.5332 88.5227 91.6425 87.9704 91.6419 87.4128V75.4128C91.6425 74.8536 91.5326 74.2997 91.3184 73.7831C91.1043 73.2665 90.7901 72.7973 90.394 72.4025C89.9979 72.0077 89.5276 71.6951 89.0103 71.4827C88.4929 71.2703 87.9387 71.1623 87.3795 71.1648Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.7, d: "M87.3795 71.1648H73.5891C72.4624 71.1648 71.3819 71.6124 70.5853 72.409C69.7886 73.2057 69.3411 74.2862 69.3411 75.4128V87.4128C69.3411 88.5395 69.7886 89.6199 70.5853 90.4166C71.3819 91.2133 72.4624 91.6608 73.5891 91.6608H77.6115L74.2515 98.328L80.4915 91.6608H87.3987C87.9563 91.6608 88.5085 91.5509 89.0236 91.3374C89.5387 91.1238 90.0067 90.8108 90.4008 90.4163C90.7948 90.0218 91.1073 89.5534 91.3203 89.0381C91.5332 88.5227 91.6425 87.9704 91.6419 87.4128V75.4128C91.6425 74.8536 91.5326 74.2997 91.3184 73.7831C91.1043 73.2665 90.7901 72.7973 90.394 72.4025C89.9979 72.0077 89.5276 71.6951 89.0103 71.4827C88.4929 71.2703 87.9387 71.1623 87.3795 71.1648Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M85.3208 86.2007C87.9939 83.5276 87.9939 79.1937 85.3208 76.5207C82.6477 73.8476 78.3138 73.8476 75.6408 76.5207C72.9677 79.1937 72.9677 83.5276 75.6408 86.2007C78.3138 88.8737 82.6477 88.8737 85.3208 86.2007Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M79.7667 84.4176C79.6755 84.4178 79.5853 84.3982 79.5024 84.3601C79.4195 84.3219 79.3459 84.2662 79.2867 84.1968L76.5987 81.0336C76.5451 80.9706 76.5045 80.8976 76.4791 80.8189C76.4537 80.7401 76.4441 80.6572 76.4508 80.5747C76.4575 80.4922 76.4803 80.4119 76.5181 80.3383C76.5558 80.2647 76.6077 80.1992 76.6707 80.1456C76.798 80.0374 76.9631 79.9842 77.1296 79.9977C77.2121 80.0044 77.2924 80.0272 77.366 80.065C77.4396 80.1027 77.5051 80.1546 77.5587 80.2176L79.7667 82.8192L83.4051 78.5232C83.4587 78.4602 83.5241 78.4083 83.5978 78.3706C83.6714 78.3328 83.7517 78.31 83.8342 78.3033C83.9166 78.2966 83.9996 78.3062 84.0784 78.3316C84.1571 78.357 84.2301 78.3976 84.2931 78.4512C84.3561 78.5048 84.408 78.5703 84.4457 78.6439C84.4835 78.7175 84.5063 78.7978 84.513 78.8803C84.5197 78.9628 84.5101 79.0457 84.4847 79.1245C84.4593 79.2032 84.4187 79.2762 84.3651 79.3392L80.2419 84.1968C80.1837 84.2661 80.1109 84.3218 80.0288 84.36C79.9467 84.3981 79.8572 84.4178 79.7667 84.4176Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M98.765 200.218H126.701C126.847 200.218 126.988 200.159 127.091 200.056C127.195 199.952 127.253 199.812 127.253 199.666V197.885C127.252 197.739 127.193 197.6 127.09 197.498C126.986 197.395 126.847 197.338 126.701 197.338H100.205V140.304H126.25C126.515 140.304 126.769 140.199 126.957 140.012C127.145 139.825 127.252 139.571 127.253 139.306V137.424H98.765C98.383 137.424 98.0168 137.576 97.7467 137.846C97.4767 138.116 97.325 138.482 97.325 138.864V198.778C97.325 199.16 97.4767 199.526 97.7467 199.796C98.0168 200.066 98.383 200.218 98.765 200.218Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("g", { opacity: 0.3 }, /* @__PURE__ */ React.createElement("path", { d: "M97.325 138.864V198.773C97.325 199.155 97.4767 199.521 97.7467 199.791C98.0168 200.061 98.383 200.213 98.765 200.213H126.701C126.846 200.213 126.985 200.155 127.088 200.053C127.191 199.95 127.248 199.811 127.248 199.666V197.885C127.248 197.739 127.191 197.6 127.088 197.496C126.986 197.393 126.847 197.334 126.701 197.333H100.205V140.304H126.25C126.515 140.303 126.769 140.196 126.956 140.008C127.143 139.82 127.248 139.566 127.248 139.301V137.424H98.765C98.383 137.424 98.0168 137.576 97.7467 137.846C97.4767 138.116 97.325 138.482 97.325 138.864Z", fill: "white" })), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M97.325 138.864V154.142C98.285 154.386 99.245 154.621 100.205 154.848V140.304H126.25C126.515 140.303 126.769 140.196 126.956 140.008C127.143 139.82 127.248 139.566 127.248 139.301V137.424H98.765C98.383 137.424 98.0168 137.576 97.7467 137.846C97.4767 138.116 97.325 138.482 97.325 138.864Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M46.8051 192.178L58.2579 191.179V176.16H62.2851V191.198L73.8051 192.178C74.294 192.225 74.7477 192.453 75.0777 192.817C75.4078 193.181 75.5907 193.654 75.5907 194.146V195.672H45.0051V194.146C45.0055 193.652 45.1904 193.177 45.5235 192.813C45.8565 192.448 46.3137 192.222 46.8051 192.178Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.1, d: "M46.8051 192.178L58.2579 191.179V176.16H62.2851V191.198L73.8051 192.178C74.294 192.225 74.7477 192.453 75.0777 192.817C75.4078 193.181 75.5907 193.654 75.5907 194.146V195.672H45.0051V194.146C45.0055 193.652 45.1904 193.177 45.5235 192.813C45.8565 192.448 46.3137 192.222 46.8051 192.178Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M71.8562 197.568C71.8562 198.089 72.0108 198.599 72.3003 199.032C72.5899 199.465 73.0014 199.803 73.483 200.003C73.9645 200.202 74.4943 200.254 75.0055 200.153C75.5167 200.051 75.9862 199.8 76.3548 199.431C76.7233 199.063 76.9743 198.593 77.076 198.082C77.1777 197.571 77.1255 197.041 76.926 196.56C76.7266 196.078 76.3888 195.666 75.9554 195.377C75.5221 195.087 75.0126 194.933 74.4914 194.933C74.1452 194.932 73.8022 195 73.4822 195.132C73.1622 195.264 72.8715 195.458 72.6266 195.703C72.3818 195.948 72.1877 196.239 72.0555 196.559C71.9233 196.879 71.8556 197.222 71.8562 197.568Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M48.725 197.568C48.725 198.089 48.5703 198.599 48.2805 199.033C47.9908 199.466 47.5789 199.804 47.0971 200.003C46.6153 200.202 46.0852 200.254 45.5739 200.152C45.0626 200.05 44.5931 199.799 44.2247 199.43C43.8564 199.061 43.6058 198.591 43.5046 198.079C43.4035 197.568 43.4564 197.038 43.6566 196.556C43.8568 196.075 44.1953 195.664 44.6292 195.375C45.0632 195.086 45.5732 194.932 46.0946 194.933C46.4404 194.933 46.7829 195.001 47.1023 195.133C47.4218 195.266 47.7119 195.46 47.9563 195.705C48.2006 195.95 48.3942 196.24 48.5261 196.56C48.658 196.88 48.7256 197.222 48.725 197.568Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M61.1955 179.208H59.3475C58.8752 179.208 58.4223 179.02 58.0883 178.686C57.7543 178.352 57.5667 177.9 57.5667 177.427V164.467H62.9763V177.427C62.9763 177.9 62.7887 178.352 62.4547 178.686C62.1208 179.02 61.6678 179.208 61.1955 179.208Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M61.1955 179.208H59.3475C58.8752 179.208 58.4223 179.02 58.0883 178.686C57.7543 178.352 57.5667 177.9 57.5667 177.427V164.467H62.9763V177.427C62.9763 177.9 62.7887 178.352 62.4547 178.686C62.1208 179.02 61.6678 179.208 61.1955 179.208Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M48.3939 134.717C48.3939 134.717 49.6323 159.595 54.9891 163.877H49.2579C49.2579 163.877 44.1507 155.4 43.7715 134.717H48.3939Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.1, d: "M48.3939 134.717C48.3939 134.717 49.6323 159.595 54.9891 163.877H49.2579C49.2579 163.877 44.1507 155.4 43.7715 134.717H48.3939Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M47.9283 161.813H73.3251C73.8967 161.813 74.4449 162.04 74.8491 162.444C75.2532 162.848 75.4803 163.396 75.4803 163.968V165.936H45.7683V163.968C45.7683 163.685 45.8242 163.404 45.9328 163.142C46.0414 162.88 46.2006 162.643 46.4013 162.442C46.6019 162.242 46.84 162.084 47.1021 161.975C47.3641 161.867 47.6449 161.812 47.9283 161.813Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M75.7489 163.877H45.5089C45.0291 163.877 44.6401 164.266 44.6401 164.746V165.067C44.6401 165.547 45.0291 165.936 45.5089 165.936H75.7489C76.2288 165.936 76.6177 165.547 76.6177 165.067V164.746C76.6177 164.266 76.2288 163.877 75.7489 163.877Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.6, d: "M75.7489 163.877H45.5089C45.0291 163.877 44.6401 164.266 44.6401 164.746V165.067C44.6401 165.547 45.0291 165.936 45.5089 165.936H75.7489C76.2288 165.936 76.6177 165.547 76.6177 165.067V164.746C76.6177 164.266 76.2288 163.877 75.7489 163.877Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M42.7634 140.16H51.9458C54.6338 140.16 56.573 137.76 56.2658 134.76L55.877 130.786C55.5794 127.805 53.165 125.386 50.477 125.386H41.309C38.621 125.386 36.6818 127.786 36.989 130.786L37.3778 134.76C37.6562 137.76 40.0754 140.16 42.7634 140.16Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M73.066 118.699C73.6372 120.509 74.3092 122.395 75.0484 124.123C75.6724 125.563 76.5604 127.397 77.5732 128.362C78.4948 129.182 80.6884 129.494 82.114 129.682C84.034 129.926 86.0788 130.018 88.0708 130.099L88.426 132.787C86.3143 133.354 84.1487 133.697 81.9652 133.81C79.5268 133.896 76.6852 133.81 74.5732 132.312C71.506 129.912 70.1716 126.715 68.8132 123.341C68.4292 122.27 68.0836 121.291 67.7908 120.168L73.0708 118.699H73.066Z", fill: "#B65B52" }), /* @__PURE__ */ React.createElement("path", { d: "M70.7091 116.16C72.2211 116.678 73.5891 118.853 77.3955 127.574C77.3955 127.574 78.0147 128.64 81.1011 129.307L80.8179 134.203C80.8179 134.203 76.4115 134.011 75.3891 133.306C74.3667 132.6 68.2371 122.515 68.2371 122.515L70.7091 116.16Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M81.1012 129.317L80.818 134.213C80.818 134.213 77.2852 134.059 75.8116 133.517C75.6631 133.467 75.5213 133.399 75.3892 133.315C74.7988 132.902 72.5092 129.355 70.6612 126.437C69.322 124.315 68.2612 122.525 68.2612 122.525L70.7092 116.16C72.2212 116.678 73.5892 118.853 77.4004 127.57C77.4004 127.579 78.0148 128.64 81.1012 129.317Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M75.8115 133.517C75.663 133.467 75.5212 133.399 75.3891 133.315C74.7987 132.902 72.5091 129.355 70.6611 126.437C71.1422 124.782 71.711 123.154 72.3651 121.56C72.3651 121.56 75.8787 128.602 75.8115 133.517Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M87.0243 130.344L90.4659 129.106L90.0435 133.714C90.0435 133.714 86.8851 134.117 86.4963 132.456L87.0243 130.344Z", fill: "#B55B52" }), /* @__PURE__ */ React.createElement("path", { d: "M93.3171 130.037L92.7891 133.834L90.0435 133.714L90.4659 129.106L93.3171 130.037Z", fill: "#B55B52" }), /* @__PURE__ */ React.createElement("path", { d: "M81.1251 129.106L82.8819 129.634L82.2387 134.395L80.4819 134.698L81.1251 129.106Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M73.2004 146.443C73.2004 146.443 96.4276 155.606 101.828 159.437C107.228 163.267 120.845 189.091 120.845 189.091L115.215 193.411C115.215 193.411 98.9716 169.824 96.9748 168.226C94.978 166.627 69.1348 158.693 69.1348 158.693L73.2004 146.443Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.4, d: "M120.845 189.091L115.215 193.411C115.215 193.411 111.423 187.906 107.28 182.035C102.85 175.752 98.0164 169.075 96.9892 168.226C95.5492 167.054 81.3172 162.494 73.7764 160.133C71.002 159.259 69.1348 158.693 69.1348 158.693L73.1956 146.429C73.1956 146.429 96.418 155.592 101.823 159.422C107.228 163.253 120.845 189.091 120.845 189.091Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M121.877 198.331L124.589 195.605L120.154 188.746L117.447 191.472L121.877 198.331Z", fill: "#B55B52" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M117.447 191.472L120.154 188.75L122.688 192.672L119.885 195.254L117.447 191.472Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M125.059 195.307C125.059 195.307 125.059 195.307 125.093 195.307C125.412 195.19 125.718 195.039 126.005 194.856C126.229 194.736 126.4 194.538 126.485 194.299C126.503 194.21 126.494 194.117 126.461 194.032C126.428 193.947 126.371 193.873 126.298 193.819C126.258 193.778 126.209 193.748 126.154 193.731C126.1 193.714 126.042 193.711 125.986 193.723C125.722 193.786 125.463 194.16 125.266 194.52C125.307 194.184 125.229 193.844 125.045 193.56C124.991 193.506 124.921 193.471 124.845 193.463C124.769 193.454 124.692 193.471 124.627 193.512C124.567 193.54 124.514 193.582 124.474 193.635C124.433 193.688 124.405 193.749 124.392 193.814C124.282 194.333 124.978 195.168 125.011 195.216L125.059 195.168L125.016 195.221C125.016 195.221 124.983 195.274 124.983 195.278C124.99 195.292 125.002 195.302 125.016 195.307C125.03 195.312 125.045 195.312 125.059 195.307ZM125.083 194.952C125.083 194.981 125.059 195.01 125.05 195.034C124.839 194.736 124.527 194.213 124.594 193.906C124.599 193.87 124.613 193.835 124.632 193.804C124.652 193.774 124.678 193.748 124.709 193.728H124.743C124.858 193.67 124.92 193.704 124.959 193.728C125.142 194.109 125.186 194.542 125.083 194.952ZM125.247 195.067C125.458 194.587 125.808 193.963 126.072 193.906C126.1 193.899 126.129 193.899 126.156 193.908C126.183 193.916 126.207 193.932 126.226 193.954C126.271 193.988 126.306 194.034 126.328 194.086C126.349 194.138 126.357 194.195 126.351 194.251C126.298 194.501 125.89 194.798 125.247 195.067Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M124.536 195.062L120.956 197.462C120.925 197.481 120.898 197.505 120.876 197.534C120.855 197.563 120.839 197.595 120.831 197.63C120.822 197.665 120.821 197.701 120.827 197.737C120.832 197.772 120.845 197.806 120.864 197.837L122.592 200.789C122.691 200.938 122.845 201.042 123.021 201.078C123.196 201.114 123.379 201.079 123.528 200.981C124.762 200.122 125.309 199.651 126.888 198.581C128.326 197.697 129.701 196.713 131.002 195.638C132.183 194.539 131.064 193.402 130.469 193.762C129.029 194.611 126.591 194.976 125.218 194.875C124.976 194.856 124.735 194.922 124.536 195.062Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M115.479 195.317L122.511 190.637L120.888 187.33L113.271 192.614L115.479 195.317Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M115.479 195.317L122.511 190.637L120.888 187.33L113.271 192.614L115.479 195.317Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M107.29 182.054C102.859 175.771 98.0259 169.094 96.9987 168.245C95.5587 167.074 81.3267 162.514 73.7859 160.152L72.9075 151.032L75.6627 150.552L75.9747 151.253C75.9747 151.253 93.1875 155.155 98.0547 157.594C101.189 159.134 105.399 174.533 107.29 182.054Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M106.258 196.219C106.263 196.221 106.269 196.223 106.275 196.223C106.281 196.223 106.286 196.221 106.292 196.219C106.632 196.215 106.972 196.175 107.304 196.099C107.559 196.063 107.79 195.933 107.952 195.734C108 195.658 108.025 195.57 108.025 195.48C108.025 195.39 108 195.302 107.952 195.226C107.929 195.173 107.892 195.128 107.846 195.093C107.8 195.059 107.745 195.037 107.688 195.029C107.42 194.995 107.05 195.269 106.728 195.542C106.875 195.245 106.911 194.904 106.829 194.582C106.797 194.513 106.743 194.457 106.675 194.423C106.607 194.389 106.529 194.379 106.455 194.395C106.389 194.405 106.326 194.429 106.27 194.464C106.214 194.5 106.166 194.546 106.128 194.602C105.855 195.058 106.234 196.075 106.253 196.133L106.311 196.099L106.253 196.138C106.253 196.138 106.2 196.176 106.205 196.181L106.258 196.219ZM106.402 195.888L106.34 195.955C106.191 195.565 106.17 195.138 106.282 194.736C106.3 194.705 106.324 194.678 106.353 194.656C106.382 194.635 106.415 194.619 106.45 194.611H106.493C106.618 194.611 106.666 194.65 106.685 194.698C106.734 195.115 106.633 195.537 106.402 195.888ZM106.512 196.051C106.872 195.667 107.41 195.197 107.679 195.23C107.707 195.233 107.734 195.244 107.757 195.261C107.78 195.278 107.797 195.3 107.808 195.326C107.835 195.376 107.849 195.431 107.849 195.487C107.849 195.543 107.835 195.599 107.808 195.648C107.693 195.864 107.213 196.013 106.512 196.051Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { d: "M102.255 198.014L105.715 196.339L103.656 188.093L100.2 189.768L102.255 198.014Z", fill: "#B55B52" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M100.2 189.768L103.656 188.098L104.832 192.811L101.328 194.314L100.2 189.768Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M105.845 195.811L101.669 196.891C101.634 196.898 101.6 196.912 101.571 196.932C101.541 196.952 101.515 196.978 101.496 197.008C101.476 197.037 101.463 197.071 101.456 197.106C101.45 197.142 101.45 197.178 101.458 197.213L102.111 200.573C102.158 200.744 102.27 200.89 102.424 200.98C102.577 201.069 102.759 201.095 102.932 201.053C104.372 200.65 105.053 200.386 106.887 199.896C108.53 199.545 110.147 199.078 111.725 198.499C113.204 197.856 112.527 196.411 111.845 196.555C110.223 196.886 107.78 196.411 106.522 195.859C106.307 195.771 106.07 195.754 105.845 195.811Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M105.341 189.658C105.341 189.658 99.4851 160.277 98.2851 158.53C96.3363 155.65 72.9027 151.008 72.9027 151.008L75.6531 150.528L72.4755 142.08L51.6099 142.901C51.6099 142.901 52.0467 156.686 54.1683 160.382C56.2899 164.078 87.6771 165.778 89.7171 166.622C91.7571 167.467 97.9827 190.512 97.9827 190.512L105.341 189.658Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.4, d: "M105.341 189.658C105.341 189.658 99.4851 160.277 98.2851 158.53C96.3363 155.65 72.9027 151.008 72.9027 151.008L75.6531 150.528L72.4755 142.08L51.6099 142.901C51.6099 142.901 52.0467 156.686 54.1683 160.382C56.2899 164.078 87.6771 165.778 89.7171 166.622C91.7571 167.467 97.9827 190.512 97.9827 190.512L105.341 189.658Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M98.1075 193.114L106.296 191.03L105.859 187.373L96.9219 189.835L98.1075 193.114Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M98.1075 193.114L106.296 191.03L105.859 187.373L96.9219 189.835L98.1075 193.114Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M58.2147 143.222L52.1667 143.122L52.0371 144.95L58.4739 145.104L58.2147 143.222Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M59.146 143.189L59.41 145.09L72.9076 144.898L72.4708 143.165L59.146 143.189Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M65.645 143.52L65.8178 144.773C65.843 144.926 65.9223 145.065 66.0412 145.164C66.1601 145.264 66.3108 145.317 66.4658 145.315L68.6258 145.248C68.6973 145.249 68.7682 145.235 68.8333 145.205C68.8984 145.175 68.956 145.132 69.002 145.077C69.048 145.022 69.0812 144.958 69.0992 144.889C69.1171 144.819 69.1194 144.747 69.1058 144.677L68.9282 143.419C68.9028 143.267 68.8234 143.128 68.7044 143.03C68.5854 142.931 68.4348 142.878 68.2802 142.882L66.125 142.949C66.0535 142.947 65.9826 142.962 65.9175 142.992C65.8524 143.021 65.7948 143.065 65.7488 143.12C65.7027 143.175 65.6696 143.239 65.6516 143.308C65.6337 143.377 65.6314 143.45 65.645 143.52Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M52.138 142.853H71.962C72.1993 142.854 72.4288 142.768 72.6061 142.61C72.7833 142.452 72.8959 142.234 72.922 141.998C75.37 122.798 70.6948 116.17 70.6948 116.17C68.9147 115.661 67.0981 115.291 65.2612 115.061C62.5771 114.85 59.8831 114.792 57.1924 114.888C55.3593 114.937 53.5322 115.119 51.7252 115.43C50.7652 115.848 49.7716 120.125 50.7652 133.45C51.0244 136.939 51.0628 139.954 51.0388 141.72C51.0349 142.016 51.1484 142.301 51.3545 142.513C51.5605 142.726 51.8422 142.848 52.138 142.853Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M67.9299 122.962H71.7507L72.0387 127.522L69.9891 128.851L67.9299 127.834V122.962Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M72.9362 141.998C72.9101 142.234 72.7976 142.452 72.6203 142.61C72.443 142.768 72.2136 142.854 71.9762 142.853H52.1522C52.0037 142.853 51.8566 142.825 51.7194 142.768C51.5822 142.711 51.4577 142.627 51.3532 142.522C51.2486 142.416 51.1661 142.291 51.1104 142.154C51.0548 142.016 51.0271 141.868 51.029 141.72C51.029 139.954 51.029 136.92 50.7602 133.45C50.6226 131.53 50.5218 129.795 50.4578 128.246C50.3013 125.413 50.3173 122.572 50.5058 119.741C50.7458 116.861 51.2402 115.646 51.7394 115.421C53.5528 115.108 55.3864 114.927 57.2258 114.878C59.9149 114.782 62.6073 114.84 65.2898 115.051C67.1219 115.282 68.9336 115.652 70.709 116.16C70.709 116.16 75.3842 122.818 72.9362 141.998Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M57.3892 114.691L63.7924 116.875L64.0516 115.042C63.4276 113.947 63.2692 113.256 63.7972 111.984L59.5252 107.074C59.6356 109.589 59.1796 113.026 57.3892 114.691Z", fill: "#B55B52" }), /* @__PURE__ */ React.createElement("path", { d: "M61.4404 117.826L62.698 118.349L63.7924 119.035C63.7924 119.035 65.2564 127.416 64.8484 134.491L66.0772 135.499L67.3732 134.458C67.3732 134.458 65.7604 121.464 65.1796 118.934L65.434 118.325L66.0244 117.067L64.9348 116.496L63.202 116.875H61.9924L61.4404 117.826Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M61.2627 109.075L63.7923 111.984C63.6024 112.43 63.4499 112.891 63.3363 113.362C62.2659 113.04 60.9363 111.614 60.9987 110.453C61.0022 109.981 61.0917 109.515 61.2627 109.075Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M57.7876 113.53C59.5947 114.733 61.5258 115.739 63.5476 116.53C63.7684 115.636 63.7684 114.702 63.5476 113.808L66.3748 115.219C66.3748 115.219 66.61 117.413 65.962 118.579L63.8836 117.058L61.5508 118.978C61.5508 118.978 57.1348 117.274 56.4436 114.96L57.7876 113.53Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M72.1924 130.56L65.6452 135.84C56.2468 137.933 52.114 132.072 50.4532 128.232C50.2966 125.398 50.3127 122.558 50.5012 119.726C52.7572 119.621 55.5652 119.621 56.3236 120.206C57.6436 121.219 62.242 128.318 62.9284 128.846C63.6148 129.374 72.1924 130.56 72.1924 130.56Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M75.9172 130.31L79.3588 129.067L78.9364 133.675C78.9364 133.675 75.778 134.078 75.3892 132.418L75.9172 130.31Z", fill: "#B55B52" }), /* @__PURE__ */ React.createElement("path", { d: "M82.2051 129.998L81.6819 133.795L78.9363 133.675L79.3587 129.067L82.2051 129.998Z", fill: "#B55B52" }), /* @__PURE__ */ React.createElement("path", { d: "M55.8964 121.013C56.9116 123.018 58.0332 124.968 59.2564 126.854C60.0088 128.088 60.9517 129.194 62.05 130.133C62.1329 130.205 62.2291 130.26 62.3332 130.296C63.5353 130.614 64.7765 130.759 66.0196 130.728C69.5044 130.762 73.0516 130.44 76.5508 130.142L77.122 132.792C74.7778 133.556 72.3874 134.17 69.9652 134.63C67.3396 135.11 64.9444 135.47 62.1508 135.202C61.2496 135.107 60.3747 134.842 59.5732 134.419C56.4628 132.6 54.5572 129.658 52.7524 126.739C52.1044 125.606 51.514 124.55 50.9668 123.341L55.9108 121.003L55.8964 121.013Z", fill: "#B65B52" }), /* @__PURE__ */ React.createElement("path", { d: "M51.7251 115.43C45.5331 117.662 53.5635 133.09 56.9427 134.818C60.3219 136.546 66.0243 135.84 66.0243 135.84L66.4275 130.478C66.4275 130.478 63.4707 130.118 62.5875 129.907C61.1811 129.571 58.3395 123.36 56.4243 119.986C55.3673 118.017 53.7253 116.426 51.7251 115.43Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M51.7251 115.43C45.5331 117.662 53.5635 133.09 56.9427 134.818C60.3219 136.546 66.0243 135.84 66.0243 135.84L66.4275 130.478C66.4275 130.478 63.4707 130.118 62.5875 129.907C61.1811 129.571 58.3395 123.36 56.4243 119.986C55.3673 118.017 53.7253 116.426 51.7251 115.43Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M65.6308 130.075L65.1316 136.301L66.9076 135.97L67.3732 130.406L65.6308 130.075Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M70.5315 102.014C70.7763 103.454 70.1571 106.248 68.3571 105.067C66.5571 103.886 70.1043 99.5472 70.5315 102.014Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M60.365 102.528C59.6738 106.042 59.0882 108.062 60.365 110.28C62.285 113.611 67.0034 113.102 68.7362 109.862C70.2962 106.939 71.165 101.702 68.1266 99.4608C67.4537 98.9702 66.6676 98.6578 65.8416 98.5525C65.0155 98.4472 64.1762 98.5524 63.4017 98.8585C62.6273 99.1646 61.9428 99.6615 61.4118 100.303C60.8809 100.945 60.5208 101.71 60.365 102.528Z", fill: "#B55B52" }), /* @__PURE__ */ React.createElement("path", { d: "M58.6755 98.6544L62.6547 98.472L62.7603 100.757L62.5251 100.627C62.5251 100.627 62.2755 103.987 60.3699 105.106C57.7923 103.138 57.0339 99.9168 58.6755 98.6544Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M58.2628 105.062C58.2877 105.506 58.4002 105.94 58.5938 106.339C58.7874 106.739 59.0583 107.096 59.3908 107.39C60.2884 108.173 61.258 107.496 61.4452 106.382C61.6132 105.379 61.3492 103.762 60.2404 103.406C59.9956 103.335 59.7368 103.324 59.4871 103.376C59.2373 103.429 59.0043 103.542 58.8087 103.705C58.6131 103.869 58.4609 104.079 58.3657 104.316C58.2705 104.552 58.2351 104.809 58.2628 105.062Z", fill: "#B55B52" }), /* @__PURE__ */ React.createElement("path", { d: "M65.3667 104.818C65.2899 105.101 65.3667 105.365 65.5683 105.413C65.7699 105.461 65.9619 105.269 66.0483 104.986C66.1347 104.702 66.0483 104.438 65.8467 104.395C65.6451 104.352 65.4387 104.539 65.3667 104.818Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M68.5587 105.624C68.4867 105.902 68.5587 106.171 68.7603 106.214C68.9619 106.258 69.1587 106.07 69.2403 105.792C69.3219 105.514 69.2403 105.245 69.0387 105.197C68.8371 105.149 68.6355 105.341 68.5587 105.624Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M67.5075 105.509C67.6377 106.428 67.8962 107.325 68.2755 108.173C68.0465 108.254 67.8029 108.286 67.5606 108.267C67.3183 108.248 67.0827 108.178 66.8691 108.062L67.5075 105.509Z", fill: "#A02724" }), /* @__PURE__ */ React.createElement("path", { d: "M65.074 108.758C65.1907 108.808 65.311 108.848 65.434 108.878C65.4562 108.883 65.4793 108.879 65.4988 108.868C65.5183 108.856 65.5329 108.838 65.5396 108.816C65.5424 108.805 65.5431 108.793 65.5415 108.782C65.54 108.771 65.5362 108.76 65.5304 108.75C65.5246 108.74 65.5169 108.732 65.5077 108.725C65.4986 108.718 65.4882 108.713 65.4772 108.71C65.1248 108.632 64.7964 108.47 64.5192 108.239C64.242 108.008 64.024 107.713 63.8836 107.381C63.875 107.36 63.8589 107.343 63.8385 107.333C63.8181 107.323 63.7948 107.322 63.7732 107.328C63.762 107.331 63.7517 107.337 63.7429 107.344C63.734 107.352 63.7268 107.361 63.7219 107.371C63.7169 107.382 63.7141 107.393 63.7139 107.405C63.7136 107.416 63.7158 107.428 63.7204 107.438C63.8424 107.74 64.0257 108.013 64.2587 108.24C64.4917 108.468 64.7693 108.644 65.074 108.758Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M64.6515 103.546C64.6795 103.556 64.7099 103.559 64.7394 103.554C64.7689 103.549 64.7966 103.536 64.8195 103.517C64.9852 103.379 65.1808 103.281 65.3908 103.232C65.6008 103.183 65.8193 103.184 66.0291 103.234C66.0505 103.241 66.0732 103.244 66.0958 103.242C66.1184 103.241 66.1405 103.235 66.1606 103.224C66.1808 103.214 66.1987 103.2 66.2132 103.182C66.2277 103.165 66.2386 103.145 66.2451 103.123C66.2526 103.102 66.2557 103.08 66.2544 103.058C66.2531 103.036 66.2473 103.015 66.2375 102.995C66.2276 102.975 66.2138 102.958 66.197 102.943C66.1801 102.929 66.1606 102.918 66.1395 102.912C65.8757 102.842 65.5987 102.836 65.3322 102.895C65.0657 102.954 64.8173 103.077 64.6083 103.253C64.5903 103.266 64.5753 103.284 64.564 103.303C64.5528 103.323 64.5456 103.344 64.5429 103.367C64.5403 103.389 64.5421 103.412 64.5484 103.433C64.5547 103.455 64.5652 103.475 64.5795 103.493C64.5992 103.516 64.6238 103.534 64.6515 103.546Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M70.2242 104.875C70.2534 104.886 70.2848 104.888 70.3154 104.883C70.3459 104.878 70.3745 104.864 70.3983 104.844C70.4221 104.824 70.4402 104.799 70.451 104.769C70.4617 104.74 70.4646 104.709 70.4594 104.678C70.4087 104.412 70.2952 104.161 70.1282 103.948C69.9612 103.734 69.7457 103.563 69.4994 103.45C69.4567 103.434 69.4094 103.435 69.3674 103.452C69.3254 103.47 69.2919 103.504 69.2738 103.546C69.2579 103.588 69.2591 103.634 69.277 103.675C69.2949 103.717 69.3282 103.749 69.3698 103.766C69.561 103.855 69.7279 103.989 69.8565 104.156C69.9852 104.323 70.0718 104.519 70.109 104.726C70.1129 104.759 70.1256 104.791 70.1459 104.817C70.1662 104.843 70.1933 104.863 70.2242 104.875Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M61.2964 101.482C61.3728 101.546 61.4547 101.604 61.5412 101.654C61.7717 101.792 62.033 101.87 62.3013 101.881C62.5696 101.892 62.8363 101.835 63.0772 101.717C64.066 101.237 64.378 98.4144 67.1908 99.8496C67.4998 99.7751 67.8238 99.7917 68.1237 99.8973C68.4235 100.003 68.6863 100.193 68.8804 100.445C69.6052 101.333 69.106 104.573 70.6516 104.126C72.1972 103.68 71.9284 103.2 71.9284 103.2C71.9284 103.2 71.4964 103.474 71.242 103.258C71.4712 103.065 71.6345 102.805 71.7094 102.516C71.7842 102.226 71.7668 101.92 71.6596 101.64C71.6596 101.64 71.2852 102.086 71.0356 102C71.2934 100.689 71.1443 99.3309 70.6084 98.1072C69.7108 95.8704 64.2196 96.3696 64.2196 96.3696C64.2196 96.3696 63.5284 95.2128 61.0468 96.0192C58.5652 96.8256 57.4324 99.816 57.826 101.117", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { d: "M94.0609 133.315L93.7057 131.976H79.1473L72.4465 132.643L72.1921 133.315H94.0609Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.5, d: "M94.0609 133.315L93.7057 131.976H79.1473L72.4465 132.643L72.1921 133.315H94.0609Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M79.1475 131.976V133.315H94.0611L93.7059 131.976H79.1475Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M84.0721 125.563C84.053 125.726 84.0687 125.89 84.1183 126.046C84.1679 126.202 84.2503 126.345 84.3598 126.466C84.4694 126.588 84.6036 126.684 84.7535 126.75C84.9034 126.815 85.0655 126.847 85.2289 126.845H107.53C107.878 126.836 108.212 126.702 108.469 126.466C108.726 126.231 108.888 125.91 108.927 125.563L110.251 111.288C110.264 111.15 110.254 111.01 110.223 110.875C110.161 110.624 110.016 110.4 109.811 110.243C109.606 110.085 109.353 110.001 109.095 110.006H86.7937C86.4452 110.015 86.1116 110.149 85.8547 110.385C85.5978 110.621 85.4352 110.941 85.3969 111.288L84.0721 125.563Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.5, d: "M84.0721 125.563C84.053 125.726 84.0687 125.89 84.1183 126.046C84.1679 126.202 84.2503 126.345 84.3598 126.466C84.4694 126.588 84.6036 126.684 84.7535 126.75C84.9034 126.815 85.0655 126.847 85.2289 126.845H107.53C107.878 126.836 108.212 126.702 108.469 126.466C108.726 126.231 108.888 125.91 108.927 125.563L110.251 111.288C110.264 111.15 110.254 111.01 110.223 110.875C110.161 110.624 110.016 110.4 109.811 110.243C109.606 110.085 109.353 110.001 109.095 110.006H86.7937C86.4452 110.015 86.1116 110.149 85.8547 110.385C85.5978 110.621 85.4352 110.941 85.3969 111.288L84.0721 125.563Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.1, d: "M85.325 126.845H107.544C107.893 126.836 108.226 126.702 108.483 126.466C108.74 126.231 108.903 125.91 108.941 125.563L110.266 111.288C110.278 111.15 110.269 111.01 110.237 110.875H88.013C87.6653 110.885 87.3328 111.02 87.0769 111.255C86.8211 111.491 86.6591 111.811 86.621 112.157L85.2962 126.432C85.2811 126.57 85.2909 126.71 85.325 126.845Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M100.627 118.09H96.0146L97.2434 131.299L89.9521 132.394V133.315H105.317V132.394L102.168 131.299L100.627 118.09Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.5, d: "M100.627 118.09H96.0146L97.2434 131.299L89.9521 132.394V133.315H105.317V132.394L102.168 131.299L100.627 118.09Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M96.0146 118.09L99.4322 133.104L102.168 133.022L100.627 118.09H96.0146Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M57.9363 200.218H85.8723C85.9446 200.218 86.0162 200.203 86.0829 200.175C86.1496 200.148 86.2101 200.107 86.261 200.056C86.3118 200.004 86.3521 199.943 86.3793 199.876C86.4065 199.81 86.4202 199.738 86.4195 199.666V197.885C86.4195 197.74 86.3619 197.6 86.2593 197.498C86.1566 197.395 86.0175 197.338 85.8723 197.338H59.3763V140.304H85.4211C85.6859 140.304 85.9399 140.199 86.1271 140.012C86.3143 139.824 86.4195 139.57 86.4195 139.306V137.424H57.9363C57.5544 137.424 57.1882 137.576 56.9181 137.846C56.6481 138.116 56.4963 138.482 56.4963 138.864V198.778C56.4963 199.16 56.6481 199.526 56.9181 199.796C57.1882 200.066 57.5544 200.218 57.9363 200.218Z", fill: "#263238" }), /* @__PURE__ */ React.createElement("g", { opacity: 0.4 }, /* @__PURE__ */ React.createElement("path", { d: "M57.9363 200.218H85.8723C85.9446 200.218 86.0162 200.203 86.0829 200.175C86.1496 200.148 86.2101 200.107 86.261 200.056C86.3118 200.004 86.3521 199.943 86.3793 199.876C86.4065 199.81 86.4202 199.738 86.4195 199.666V197.885C86.4195 197.74 86.3619 197.6 86.2593 197.498C86.1566 197.395 86.0175 197.338 85.8723 197.338H59.3763V140.304H85.4211C85.6859 140.304 85.9399 140.199 86.1271 140.012C86.3143 139.824 86.4195 139.57 86.4195 139.306V137.424H57.9363C57.5544 137.424 57.1882 137.576 56.9181 137.846C56.6481 138.116 56.4963 138.482 56.4963 138.864V198.778C56.4963 199.16 56.6481 199.526 56.9181 199.796C57.1882 200.066 57.5544 200.218 57.9363 200.218Z", fill: "white" })), /* @__PURE__ */ React.createElement("path", { d: "M127.997 137.904H54.3554C54.1085 137.904 53.8716 137.806 53.697 137.631C53.5223 137.457 53.4242 137.22 53.4242 136.973V134.707H128.928V136.978C128.927 137.224 128.828 137.459 128.654 137.633C128.479 137.807 128.243 137.904 127.997 137.904Z", fill: "#BA68C8" }), /* @__PURE__ */ React.createElement("path", { opacity: 0.2, d: "M53.4242 136.301H128.928V134.702H53.4242V136.301Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M51.845 135.115H130.517C130.756 135.115 130.984 135.021 131.153 134.853C131.323 134.684 131.418 134.456 131.419 134.218C131.419 133.978 131.324 133.749 131.155 133.58C130.986 133.41 130.756 133.315 130.517 133.315H51.845C51.6057 133.315 51.3762 133.41 51.2069 133.58C51.0377 133.749 50.9426 133.978 50.9426 134.218C50.9439 134.456 51.0395 134.684 51.2086 134.853C51.3777 135.021 51.6065 135.115 51.845 135.115Z", fill: "#BA68C8" })), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_434_9692" }, /* @__PURE__ */ React.createElement("rect", { width: 240, height: 240, fill: "white", transform: "translate(0.36499)" }))));
505
511
 
512
+ const SvgAiSearch = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.3333 7.33319C15.5101 7.33319 15.6797 7.26298 15.8047 7.138C15.9297 7.01298 15.9999 6.84344 15.9999 6.66667C15.9999 6.48989 15.9297 6.32035 15.8047 6.19533L14.2 4.59067C14.5033 4.11545 14.6652 3.56376 14.6667 3C14.6667 2.40666 14.4907 1.82664 14.1611 1.33329C13.8314 0.839943 13.3629 0.455426 12.8147 0.228363C12.2666 0.00129984 11.6634 -0.0581102 11.0814 0.0576455C10.4995 0.173401 9.96492 0.459124 9.54536 0.878682C9.1258 1.29824 8.84008 1.83279 8.72432 2.41473C8.60857 2.99667 8.66798 3.59987 8.89504 4.14805C9.1221 4.69623 9.50662 5.16477 9.99997 5.49441C10.4933 5.82405 11.0733 6 11.6667 6C12.2304 5.9985 12.7821 5.83664 13.2573 5.53333L14.862 7.138C14.987 7.26298 15.1566 7.33319 15.3333 7.33319ZM12.5926 4.38578C12.3185 4.56892 11.9963 4.66667 11.6667 4.66667C11.2247 4.66667 10.8007 4.49107 10.4882 4.17851C10.1756 3.86595 10 3.44203 10 3C10 2.67037 10.0978 2.34813 10.2809 2.07405C10.464 1.79997 10.7243 1.58635 11.0289 1.4602C11.3334 1.33406 11.6685 1.30105 11.9918 1.36536C12.3151 1.42967 12.6121 1.5884 12.8452 1.82149C13.0783 2.05458 13.237 2.35155 13.3013 2.67485C13.3656 2.99815 13.3326 3.33326 13.2065 3.63781C13.0803 3.94235 12.8667 4.20265 12.5926 4.38578ZM12.6667 12V8C12.6667 7.632 12.368 7.33333 12 7.33333C11.632 7.33333 11.3333 7.632 11.3333 8V12C11.3333 12.368 11.632 12.6667 12 12.6667C12.368 12.6667 12.6667 12.368 12.6667 12ZM9.76733 11.8307L7.72 4.478C7.60867 3.99933 7.30933 3.61933 6.918 3.45533C6.50533 3.282 6.07067 3.294 5.692 3.48867C5.32067 3.67867 5.054 4.02 4.96 4.42533L2.89933 11.8307C2.78267 12.2507 3.09867 12.6667 3.53467 12.6667C3.83 12.6667 4.08933 12.4707 4.16933 12.1867L4.598 10.6667H8.06867L8.49733 12.1867C8.578 12.4707 8.83667 12.6667 9.132 12.6667C9.56867 12.6667 9.884 12.2507 9.76733 11.8307ZM6.40667 4.77667L7.69267 9.33333H4.97467L6.26067 4.77667C6.27933 4.70067 6.38733 4.70067 6.40667 4.77667ZM14.6673 8.81352C14.6673 8.44552 14.966 8.14685 15.334 8.14685C15.702 8.14685 16 8.44552 16 8.81352V12.6667C16 14.5047 14.5047 16 12.6667 16H3.33333C1.49533 16 0 14.5047 0 12.6667V3.33333C0 1.49533 1.49533 1.78835e-10 3.33333 1.78835e-10H7.66667C8.03467 1.78835e-10 8.33333 0.298667 8.33333 0.666667C8.33333 1.03467 8.03467 1.33333 7.66667 1.33333H3.33333C2.23067 1.33333 1.33333 2.23067 1.33333 3.33333V12.6667C1.33333 13.7693 2.23067 14.6667 3.33333 14.6667H12.6673C13.77 14.6667 14.6673 13.7693 14.6673 12.6667V8.81352Z", fill: "url(#paint0_linear_3689_48586)" }), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "paint0_linear_3689_48586", x1: 11.9232, y1: -1.40302, x2: 11.9232, y2: 16, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { stopColor: "#592F7C" }), /* @__PURE__ */ React.createElement("stop", { offset: 1, stopColor: "#E22BD3" }))));
513
+
506
514
  const SvgImport = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.3145 4.21158H7.23353C7.09525 4.21158 6.98337 4.0997 6.98337 3.96158C6.98337 3.82389 7.09525 3.71173 7.23353 3.71173H12.3144C12.4526 3.71173 12.5644 3.82392 12.5644 3.96158C12.5645 4.0997 12.4526 4.21158 12.3145 4.21158ZM14.5616 14.3913C14.5616 14.5295 14.4494 14.6414 14.3116 14.6414H7.23353C7.09525 14.6414 6.98337 14.5295 6.98337 14.3913C6.98337 14.2536 7.09525 14.1413 7.23353 14.1413H14.3116C14.4494 14.1413 14.5616 14.2536 14.5616 14.3913ZM14.5616 12.3054C14.5616 12.4435 14.4494 12.5554 14.3116 12.5554H8.68625C8.54812 12.5554 8.43625 12.4435 8.43625 12.3054C8.43625 12.1676 8.54812 12.0554 8.68625 12.0554H14.3116C14.4494 12.0554 14.5616 12.1676 14.5616 12.3054ZM14.5616 8.13343C14.5616 8.27171 14.4494 8.38359 14.3116 8.38359H11.2879C11.1498 8.38359 11.0379 8.27171 11.0379 8.13343C11.0379 7.99574 11.1498 7.88355 11.2879 7.88355H14.3116C14.4494 7.88355 14.5616 7.99574 14.5616 8.13343ZM14.5616 10.2194C14.5616 10.3575 14.4494 10.4694 14.3116 10.4694H11.2879C11.1498 10.4694 11.0379 10.3575 11.0379 10.2194C11.0379 10.0817 11.1498 9.9694 11.2879 9.9694H14.3116C14.4494 9.9694 14.5616 10.0817 14.5616 10.2194ZM14.5616 6.04758C14.5616 6.18571 14.4494 6.29758 14.3116 6.29758H8.68625C8.54812 6.29758 8.43625 6.18571 8.43625 6.04758C8.43625 5.90974 8.54812 5.79758 8.68625 5.79758H14.3116C14.4494 5.79755 14.5616 5.90974 14.5616 6.04758ZM5.04287 16.501H16.5019V3.43842H14.8144C14.6763 3.43842 14.5644 3.3267 14.5644 3.18858V1.50101H5.04287V6.92158H6.31356V5.5007C6.31356 5.40295 6.37062 5.3138 6.45978 5.27324C6.54881 5.23255 6.65346 5.24789 6.72718 5.3123L10.955 8.98796C11.0097 9.03543 11.041 9.10412 11.041 9.17665C11.041 9.24887 11.0097 9.31787 10.955 9.36549L6.72718 13.041C6.6809 13.0814 6.62253 13.1026 6.56312 13.1026C6.52818 13.1026 6.49281 13.0951 6.45978 13.0801C6.37059 13.0395 6.31356 12.9503 6.31356 12.8526V11.4316H5.04287V16.501ZM1.50195 7.42158V10.9317H6.56343C6.70125 10.9317 6.81343 11.0436 6.81343 11.1817V12.3038L10.4101 9.17665L6.81343 6.04949V7.17158C6.81343 7.30986 6.70125 7.42158 6.56343 7.42158H1.50195ZM15.0644 1.85448L16.1485 2.93851H15.0644V1.85448ZM16.9288 3.01195L14.991 1.0741C14.9441 1.02723 14.8806 1.00098 14.8144 1.00098H4.79287C4.65474 1.00098 4.54287 1.11285 4.54287 1.25098V6.92155H1.25195C1.11383 6.92155 1.00195 7.03343 1.00195 7.17155V11.1817C1.00195 11.3198 1.11383 11.4315 1.25195 11.4315H4.54287V16.751C4.54287 16.8891 4.65474 17.001 4.79287 17.001H16.752C16.8901 17.001 17.002 16.8891 17.002 16.751V3.18854C17.002 3.12223 16.9757 3.05882 16.9288 3.01195Z", fill: "currentColor", stroke: "currentColor", strokeWidth: 0.2 }));
507
515
 
508
516
  const SvgDashboardWebIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 17 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.0317 16.5C3.62048 16.5 0.0317001 12.9112 0.0317001 8.5C0.0317001 4.08878 3.62048 0.5 8.0317 0.5C12.4429 0.5 16.0317 4.08878 16.0317 8.5C16.0317 12.9112 12.4429 16.5 8.0317 16.5ZM9.50242 12.7529C10.6395 12.3586 11.571 11.5207 12.0884 10.4469H10.2561C10.1533 11.0646 10.0012 11.6342 9.80473 12.1255C9.71211 12.357 9.61092 12.5663 9.50242 12.7529ZM3.97504 10.4469C4.49245 11.5206 5.42395 12.3586 6.56098 12.753C6.45251 12.5663 6.35129 12.357 6.25867 12.1255C6.06214 11.6342 5.91008 11.0646 5.80733 10.4469H3.97504ZM6.56098 4.24706C5.42395 4.64138 4.49245 5.47937 3.97504 6.55312H5.80733C5.91008 5.93541 6.06214 5.36578 6.25867 4.8745C6.35129 4.64297 6.45248 4.43366 6.56098 4.24706ZM8.0317 4C7.70364 4 7.31867 4.45291 7.02708 5.18188C6.8662 5.58409 6.73867 6.04831 6.64708 6.55312H9.41636C9.32476 6.04834 9.19726 5.58409 9.03636 5.18188C8.74473 4.45291 8.35976 4 8.0317 4ZM3.5317 8.5C3.5317 8.88628 3.58067 9.26131 3.67264 9.61931H5.70254C5.66967 9.25525 5.65223 8.88069 5.65223 8.5C5.65223 8.11931 5.66967 7.74475 5.70254 7.38069H3.67264C3.58067 7.73869 3.5317 8.11372 3.5317 8.5ZM6.53301 9.61931H9.53042C9.56536 9.25756 9.58361 8.88253 9.58361 8.5C9.58361 8.11747 9.56539 7.74244 9.53042 7.38069H6.53301C6.49808 7.74244 6.47983 8.11747 6.47983 8.5C6.47983 8.88253 6.49804 9.25756 6.53301 9.61931ZM8.0317 13C8.35976 13 8.74473 12.5471 9.03633 11.8181C9.19723 11.4159 9.32473 10.9517 9.41633 10.4469H6.64704C6.73864 10.9517 6.86617 11.4159 7.02704 11.8181C7.31867 12.5471 7.70364 13 8.0317 13ZM12.5317 8.5C12.5317 8.11372 12.4827 7.73869 12.3908 7.38069H10.3608C10.3937 7.74475 10.4111 8.11931 10.4111 8.5C10.4111 8.88069 10.3937 9.25525 10.3608 9.61931H12.3908C12.4827 9.26131 12.5317 8.88628 12.5317 8.5ZM12.0884 6.55309C11.571 5.47934 10.6395 4.64134 9.50239 4.24703C9.61086 4.43366 9.71208 4.64297 9.8047 4.8745C10.0012 5.36578 10.1533 5.93537 10.256 6.55312L12.0884 6.55309ZM13.3593 8.5C13.3593 11.4376 10.9693 13.8276 8.0317 13.8276C5.09404 13.8276 2.70411 11.4376 2.70411 8.5C2.70411 5.56238 5.09404 3.17241 8.0317 3.17241C10.9694 3.17241 13.3593 5.56238 13.3593 8.5Z", fill: "url(#paint0_linear_290_14902)" }), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("linearGradient", { id: "paint0_linear_290_14902", x1: 8.0317, y1: 0.5, x2: 8.0317, y2: 16.5, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React.createElement("stop", { stopColor: "#01F1FE" }), /* @__PURE__ */ React.createElement("stop", { offset: 1, stopColor: "#4FADFE" }))));
@@ -714,6 +722,8 @@ Components['android_icon'] = SvgAndroidIcon;
714
722
  Components['plus_user_icon'] = SvgPlusUserIcon;
715
723
  Components['label_plus'] = SvgLabelPlus;
716
724
  Components['manual_locator'] = SvgManualLocator;
725
+ Components['ios_icon'] = SvgIosIcon;
726
+ Components['help_icon'] = SvgHelpIcon;
717
727
  Components['select_license'] = SvgSwitchLicenseIcon;
718
728
  Components['fireflink-logo'] = SvgFireflinkLogo;
719
729
  Components['wswb_delete_icon'] = SvgWswbDeleteIcon;
@@ -745,6 +755,7 @@ Components['notification_icon'] = SvgNotificationIcon;
745
755
  Components['nlp_help_icon'] = SvgNlpHelpIcon;
746
756
  Components['update_icon'] = SvgUpdateIcon;
747
757
  Components['add_file'] = SvgAddFile;
758
+ Components['plus_round_icon'] = SvgPlusRoundIcon;
748
759
  Components['clone_icon'] = SvgCloneIcon;
749
760
  Components['move_icon'] = SvgMoveIcon;
750
761
  Components['jira'] = SvgJira;
@@ -757,6 +768,7 @@ Components['hide_access_icon'] = SvgHideAccessIcon;
757
768
  Components['eye_closed'] = SvgEyeClosed;
758
769
  Components['attachment_icon'] = SvgAttachmentIcon;
759
770
  Components['authorization_icon'] = SvgAuthorizationIcon;
771
+ Components['ai_search'] = SvgAiSearch;
760
772
  Components['fireflink_platform_logo'] = SvgFireflinkPlatform;
761
773
  Components['fireflink_finder_logo'] = SvgFireflinkFinderLogo;
762
774
  Components['client_profile'] = SvgClientProfile;
@@ -851,8 +863,8 @@ Components['executions_icon'] = SvgExecutionsIcon;
851
863
  Components['suites_icon'] = SvgSuitesIcon;
852
864
  Components['import_icon'] = SvgImportIcon;
853
865
 
854
- var css_248z$1f = ".ff-icon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 4px;\n box-sizing: content-box;\n}\n.ff-icon-container.ff-icon-danger:hover {\n background-color: var(--ff-icon-color-danger-variant);\n}\n.ff-icon-container.ff-icon-dark {\n background-color: var(--brand-color);\n border-radius: 4px;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover {\n background-color: white;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n\n.ff-icon-click {\n cursor: pointer;\n box-sizing: content-box;\n}\n.ff-icon-click:hover {\n border-radius: 4px;\n background-color: var(--ff-icon-hover-fill-color);\n}\n.ff-icon-click:hover > svg {\n color: var(--brand-color);\n}\n\n.ff-icon-disabled {\n cursor: no-drop;\n}\n.ff-icon-disabled > svg {\n color: var(--toggle-strip-color);\n}\n.ff-icon-disabled:hover {\n box-shadow: none;\n}\n.ff-icon-disabled:hover > svg {\n color: var(--toggle-strip-color);\n}";
855
- styleInject(css_248z$1f);
866
+ var css_248z$1g = ".ff-icon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 4px;\n box-sizing: content-box;\n}\n.ff-icon-container.ff-icon-danger:hover {\n background-color: var(--ff-icon-color-danger-variant);\n}\n.ff-icon-container.ff-icon-dark {\n background-color: var(--brand-color);\n border-radius: 4px;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover {\n background-color: white;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n\n.ff-icon-click {\n cursor: pointer;\n box-sizing: content-box;\n}\n.ff-icon-click:hover {\n border-radius: 4px;\n background-color: var(--ff-icon-hover-fill-color);\n}\n.ff-icon-click:hover > svg {\n color: var(--brand-color);\n}\n\n.ff-icon-disabled {\n cursor: no-drop;\n}\n.ff-icon-disabled > svg {\n color: var(--toggle-strip-color);\n}\n.ff-icon-disabled:hover {\n box-shadow: none;\n}\n.ff-icon-disabled:hover > svg {\n color: var(--toggle-strip-color);\n}";
867
+ styleInject(css_248z$1g);
856
868
 
857
869
  const Icon = /*#__PURE__*/forwardRef(({
858
870
  name,
@@ -928,8 +940,8 @@ const Icon = /*#__PURE__*/forwardRef(({
928
940
  });
929
941
  });
930
942
 
931
- var css_248z$1e = ".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}";
932
- styleInject(css_248z$1e);
943
+ var css_248z$1f = ".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}";
944
+ styleInject(css_248z$1f);
933
945
 
934
946
  const Typography = ({
935
947
  fontWeight = 'regular',
@@ -1009,8 +1021,8 @@ const Button$1 = /*#__PURE__*/forwardRef(({
1009
1021
  });
1010
1022
  });
1011
1023
 
1012
- var css_248z$1d = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-drawer-container .ff-overlay {\n position: fixed;\n inset: 0;\n background-color: var(--drawer-title-color);\n opacity: 0.5;\n z-index: 999;\n}\n.ff-drawer-container .child-drawer-overlay {\n z-index: 999;\n}\n.ff-drawer-container .ff-drawer {\n margin-bottom: 4px;\n position: fixed;\n right: 0;\n bottom: 0;\n top: 87px;\n background-color: var(--primary-button-text-color);\n z-index: 999;\n transform: translateX(100%);\n opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n transform: translateX(0);\n opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n transition: all 0.4s ease-in-out;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n padding: 4px 8px 4px 8px;\n display: flex;\n gap: 10px;\n border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-weight: 600;\n color: var(--drawer-title-color);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n height: 16px;\n width: 16px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n cursor: pointer;\n background-color: var(--button-bg-color);\n outline: none;\n border: none;\n margin: 0;\n border: 1px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-custom-header {\n background-color: var(--drawer-footer-bg);\n padding: 4px 8px;\n width: 100%;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-body {\n background-color: var(--drawer-footer-bg);\n overflow-y: auto;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 4px 8px 4px 8px;\n display: flex;\n justify-content: space-between;\n border-top: 1px solid var(--drawer-footer-border);\n z-index: 1000;\n background-color: var(--base-bg-color);\n transform: translateY(3px);\n border-radius: 0 0 4px 4px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .button-container {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .ff-custom-footer {\n background-color: var(--drawer-footer-bg);\n padding: 4px 8px;\n}";
1013
- styleInject(css_248z$1d);
1024
+ var css_248z$1e = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-drawer-container .ff-overlay {\n position: fixed;\n inset: 0;\n background-color: var(--drawer-title-color);\n opacity: 0.5;\n z-index: 999;\n}\n.ff-drawer-container .child-drawer-overlay {\n z-index: 999;\n}\n.ff-drawer-container .ff-drawer {\n margin-bottom: 4px;\n position: fixed;\n right: 0;\n bottom: 0;\n top: 87px;\n background-color: var(--primary-button-text-color);\n z-index: 999;\n transform: translateX(100%);\n opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n transform: translateX(0);\n opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n transition: all 0.4s ease-in-out;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n padding: 4px 8px 4px 8px;\n display: flex;\n gap: 10px;\n border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n font-weight: 600;\n color: var(--drawer-title-color);\n display: flex;\n align-items: center;\n gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n height: 16px;\n width: 16px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n cursor: pointer;\n background-color: var(--button-bg-color);\n outline: none;\n border: none;\n margin: 0;\n border: 1px solid transparent;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-custom-header {\n background-color: var(--drawer-footer-bg);\n padding: 4px 8px;\n width: 100%;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-body {\n background-color: var(--drawer-footer-bg);\n overflow-y: auto;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n padding: 4px 8px 4px 8px;\n display: flex;\n justify-content: space-between;\n border-top: 1px solid var(--drawer-footer-border);\n z-index: 1000;\n background-color: var(--base-bg-color);\n transform: translateY(3px);\n border-radius: 0 0 4px 4px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .button-container {\n display: flex;\n justify-content: flex-end;\n gap: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .ff-custom-footer {\n background-color: var(--drawer-footer-bg);\n padding: 4px 8px;\n}";
1025
+ styleInject(css_248z$1e);
1014
1026
 
1015
1027
  function useEscapeKey(key) {
1016
1028
  return callBack => {
@@ -1028,8 +1040,8 @@ function useEscapeKey(key) {
1028
1040
  };
1029
1041
  }
1030
1042
 
1031
- var css_248z$1c = ":root {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #71347b;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}\n\n:root {\n --base-bg-color: #1e1a22;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n --file-details-bg: #0d0d0d;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347b;\n --avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #333234;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-search-field-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-active-status-color: #4caf50;\n --ff-machine-running-status-color: #2055de;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}\n\n.ff-light-theme {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #71347b;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}\n\n.ff-dark-theme {\n --base-bg-color: #1e1a22;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n --file-details-bg: #0d0d0d;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: #575757;\n --ff-chip-bg: #ffffff;\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347b;\n --avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #333234;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n --icon-hover-color: #f7ecf8;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-search-field-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-active-status-color: #4caf50;\n --ff-machine-running-status-color: #2055de;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}";
1032
- styleInject(css_248z$1c);
1043
+ var css_248z$1d = ":root {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --nlp-border-color: #efefef;\n --nlp-input-placeholder-color: #9a90a1;\n --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n --nlp-color: #592f7c;\n --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n --nlp-pe-color: #2e9ee8;\n --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n --nlp-step-group-color: #ee670d;\n --nlp-hover-color: #f7ebff;\n --nlp-button-color: #efe1f9;\n --nlp-option-color: #3C3838;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #71347b;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --ff-progress-bar-bg-color: #F0F0F0;\n --ff-machine-partial-public-status-color: #ea850e;\n --excel-sheet-button-color: #e9b5ff;\n --excel-sheet-border: rgba(10, 13, 39, 0.1647058824);\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}\n\n:root {\n --base-bg-color: #1e1a22;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n --file-details-bg: #0d0d0d;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\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 --ff-progress-bar-bg-color: #F0F0F0;\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 --nlp-border-color: #efefef;\n --nlp-input-placeholder-color: #9a90a1;\n --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n --nlp-color: #592f7c;\n --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n --nlp-pe-color: #2e9ee8;\n --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n --nlp-step-group-color: #ee670d;\n --nlp-hover-color: #f7ebff;\n --nlp-button-color: #efe1f9;\n --nlp-option-color: #3C3838;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347b;\n --avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #333234;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n --excel-sheet-border: rgba(207, 209, 226, 0.4431372549);\n --icon-hover-color: #f7ecf8;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-search-field-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-active-status-color: #4caf50;\n --ff-machine-running-status-color: #2055de;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}\n\n.ff-light-theme {\n --base-bg-color: #ffffff;\n --button-bg-color: #f6ebff;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #1e161f;\n --description-text: #7a7a7a;\n --click-able-text-color: #71347b;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #71347b;\n --border-color: #f0e7f4;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n --drawer-footer-bg: #ffffff;\n --drawer-footer-border: #f0e7f4;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #1e161f;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --default-icon-color: #a3a3a3;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-text-color: #46164d;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --error: #e42525;\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n --ff-chip-text-color: #1e161f;\n --ff-mini-modal-footer-background: #aeb0c0;\n --input-default-border-color: #a3a3a3;\n --input-hover-border-color: #1e161f;\n --input-default-label-color: #747474;\n --input-label-bg-color: #ffffff;\n --input-active-text-color: #71347b;\n --input-error-text-color: #e42525;\n --tabs-label-default-color: #7a7a7a;\n --tabs-label-active-color: #71347b;\n --tabs-border-color: #f1ebf2;\n --tabs-bg-color: #ede6f2;\n --tab-bg-color: #ffffff;\n --toast-close-icon-wrapper-bg: #fafafa;\n --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n --option-card-border-color: #ded1e5;\n --option-card-bg-color: #ffffff;\n --checkbox-bg-color: #fbfdff;\n --checkbox-border-color: #b5b5b5;\n --checkbox-partial-color: #ffffff;\n --checkbox-hover-color: #f7edff;\n --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n --multi-select-label-bg: #ffffff;\n --text-color-light: rgba(30, 22, 31, 0.5019607843);\n --radio-button-border: #b5b5b5;\n --radio-button-hover: #d3d3d3;\n --menu-variant-dark-icon-color: #ffffff;\n --menu-option-icon-color: #ffffff;\n --menu-option-icon-clicked: #71347b;\n --delete-text-color: #c50303;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --status-success-bg-color: #c6efcd;\n --status-success-text-color: #016102;\n --status-warning-bg-color: #ffe380;\n --status-warning-text-color: #ff8b00;\n --status-rejected-bg-color: #f7d9d9;\n --status-rejected-text-color: #c60202;\n --status-skipped-bg-color: #c4c3c3;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --status-button-bg-passed: #c6efcd;\n --status-button-bg-failed: #f7d9d9;\n --status-button-bg-running: #ecedf8;\n --status-button-bg-skipped: #c4c3c3;\n --status-button-bg-warning: #ffb803;\n --status-button-bg-terminated: #f7d9d9;\n --status-button-bg-partiallyExecuted: #dee7f1;\n --status-button-bg-aborted: #f7d9d9;\n --status-button-bg-notExecuted: #f7d9d9;\n --status-button-text-passed: #016102;\n --status-button-text-failed: #c50303;\n --status-button-text-running: #434db8;\n --status-button-text-skipped: #3c3838;\n --status-button-text-warning: #ffffff;\n --status-button-text-terminated: #c50303;\n --status-button-text-partiallyExecuted: #0d69d4;\n --status-button-text-aborted: #c50303;\n --status-button-text-notExecuted: #c50303;\n --ff-select-option-border-color: #ded1e5;\n --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n --ff-select-background-color: #ffffff;\n --ff-select-scroll-thumb-color: #d9d9d9;\n --ff-select-scroll-track-bg: #f1f1f1;\n --ff-select-scroll-thumb-hover: #b8b8b8;\n --ff-select-text-color: #14041c;\n --ff-select-option-hover-color: #f7ebff;\n --ff-select-default-color: #747474;\n --ff-select-border-color: #a3a3a3;\n --ff-select-brand-color: #71347b;\n --ff-select-text-hover-color: #1e161f;\n --ff-search-filed-clear-text: #71347b;\n --ff-search-filed-placeholder-text: #a3a3a3;\n --ff-search-filed-close-Icon: #14041c;\n --ff-paper-background-color: #f5f5f5;\n --ff-paper-dark-background-color: #d1c4e9;\n --sub-header-primary: #301349;\n --nlp-border-color: #efefef;\n --nlp-input-placeholder-color: #9a90a1;\n --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n --nlp-color: #592f7c;\n --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n --nlp-pe-color: #2e9ee8;\n --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n --nlp-step-group-color: #ee670d;\n --nlp-hover-color: #f7ebff;\n --nlp-button-color: #efe1f9;\n --nlp-option-color: #3C3838;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --pie-chart-border-color: #b6b6b6;\n --variable-dropdown-bg: #ffffff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-machine-input-field-border-color: #f1ebf2;\n --ff-machine-input-field-text-color: #1e161f;\n --ff-connecting-branch-color: #71347b;\n --ff-connecting-branch-modal-header: #71347b;\n --ff-connecting-branch-modal-border: #e0e0e0;\n --ff-connecting-branch-scope-color: #079455;\n --ff-connecting-branch-delete-color: #e42525;\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-dark-variant: #ffffff;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-avatar-background-color: #71347b;\n --ff-avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #f0e7f4;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-running-status-color: #2055de;\n --ff-machine-active-status-color: #4caf50;\n --ff-progress-bar-bg-color: #F0F0F0;\n --ff-machine-partial-public-status-color: #ea850e;\n --excel-sheet-button-color: #e9b5ff;\n --excel-sheet-border: rgba(10, 13, 39, 0.1647058824);\n --icon-hover-color: #f7ecf8;\n --ff-search-icon-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}\n\n.ff-dark-theme {\n --base-bg-color: #1e1a22;\n --brand-color: #71347b;\n --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n --text-color: #e8e0e9;\n --description-text: #d9d9d9;\n --click-able-text-color: #e8e0e9;\n --custom-table-header-bg-color: #efe1f9;\n --icons-default-color: #e8e0e9;\n --border-color: #333234;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --hover-color: #f7ebff;\n --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n --slider-table-color: #272428;\n --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n --drawer-footer-border: #333234;\n --text-bg-highlight: #f5fb00;\n --tooltip-bg-color: #2a2a2a;\n --tooltip-text-color: #ffffff;\n --toggle-strip-color: #cfd1e2;\n --toggle-strip-active-color: #71347b;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-button-bg-color: #ffffff;\n --toggle-disable-icon-color: #767994;\n --text-area-default-color: #747474;\n --add-icon-hover-color: #431b4a;\n --arrow-button-bg-color: #ffffff;\n --arrows-button-border-color: #ded1e5;\n --overlay-bg: rgba(18, 18, 18, 0.6);\n --chip-fill-color: #f9d5ff;\n --chip-text-color: #1e161f;\n --icon-color: #71347b;\n --tree-connecting-lines-color: #d7b5e3;\n --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n --primary-button-text-color: #ffffff;\n --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n --secondary-button-text-color: #71347b;\n --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n --drawer-title-color: #252c37;\n --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n --error_light: #e42525;\n --ff-success: #079455;\n --ff-warning: #f79009;\n --ff-header-text-color: #fdfaff;\n --ff-header-submenu-text-color: #666468;\n --ff-header-submenu-highlight-text-color: #170328;\n --default-icon-color: #a3a3a3;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n --file-details-bg: #0d0d0d;\n --ff-mini-modal-border: #ffffff;\n --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n --ff-error-light: #e42525;\n --ff-chips-fill-color: #f9d5ff;\n --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\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 --ff-progress-bar-bg-color: #F0F0F0;\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 --nlp-border-color: #efefef;\n --nlp-input-placeholder-color: #9a90a1;\n --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n --nlp-color: #592f7c;\n --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n --nlp-pe-color: #2e9ee8;\n --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n --nlp-step-group-color: #ee670d;\n --nlp-hover-color: #f7ebff;\n --nlp-button-color: #efe1f9;\n --nlp-option-color: #3C3838;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --disabled-primary-color: #f9f9f9;\n --license_expireSoon_color: #ba7422;\n --license_active_color: #268735;\n --license_expired_color: #e34242;\n --license_header_text_color: #592f7c;\n --license_active_status_color: #518e18;\n --license_expired_status_color: #ab3425;\n --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n --pie-chart-border-color: #b6b6b6;\n --button-bg-color: #f6ebff;\n --modal-header-text-color: #ffc600;\n --switch-license-text-color: #61296a;\n --switch-license-header-text-color: #610b86;\n --dotted-border-color: #000000;\n --select-license-header-text-color: #5f2868;\n --in-active-button-color: #808080;\n --button-background-gradient-color: #9c1ebb;\n --details-page-value-color: #808080;\n --label-edit-text-label-color: #71347b;\n --label-edit-text-background-color: #ffffff;\n --label-edit-error-text: #e42525;\n --label-edit-confirm-icon: #0dad66;\n --label-edit-cancel-icon: #e42525;\n --delete-icon-color: #e42525;\n --confirm-tick-icon-color: #5ca700;\n --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n --ff-app-header-menu-border-bottom-color: #ffffff;\n --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n --table-header-text-color: #252c37;\n --table-column-text-color: #200624;\n --ff-delete-button-attachment: #a91224;\n --email-table-border-color: #959595;\n --ff-icon-hover-fill-color: #f7ecf8;\n --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n --ff-icon-color-dark-variant: #ffffff;\n --avatar-background-color: #71347b;\n --avatar-icon-color: #ffffff;\n --ff-editor-line-bg: #333234;\n --ff-editor-gutter-color: #ded5e5;\n --ff-line-number-bg: #592f7c;\n --ff-line-number-color: #ffffff;\n --excel-sheet-button-color: #e9b5ff;\n --excel-sheet-border: rgba(207, 209, 226, 0.4431372549);\n --icon-hover-color: #f7ecf8;\n --ff-editor-border-color: #f0e7f4;\n --ff-icon-hover-bg-color: #f7ecf8;\n --modal-background-color: rgba(18, 18, 18, 0.2);\n --modal-alert-header-color: #db1919;\n --ff-status-card-text-color: #ffffff;\n --ff-card-status-text-color: #8a8a8a;\n --ff-card-passed-status-bg-color: #179c5f;\n --ff-card-failed-status-bg-color: #9c1732;\n --ff-card-warning-status-bg-color: #e2750f;\n --ff-card-skipped-status-bg-color: #a83fc4;\n --ff-card-flaky-status-bg-color: #3f5ac4;\n --ff-comment-input-border-color: #71347b;\n --ff-comment-avatar-text-color: #ffffff;\n --ff-comment-border-color: #d9d9d9;\n --ff-comment-text-color: #727272;\n --download-client-border-color: #f0e7f4;\n --download-client-header-bg-color: #ede6f2;\n --download-client-content-text-color: #592f7c;\n --ff-toggle-switch-off-color: #4b494c;\n --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n --ff-search-field-hover-color: #f7ecf8;\n --ff-search-filed-bg-color: #ffffff;\n --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n --ff-machine-inactive-status-color: #c50303;\n --ff-machine-active-status-color: #4caf50;\n --ff-machine-running-status-color: #2055de;\n --download-client-choose-os-text-color: #000000;\n --download-client-icon-container-border-color: #f0e7f4;\n --download-client-icon-container-bg-color: #ffffff;\n --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n --public-chip-bg-color: #f9d5ff;\n --partial-public-chip-bg-color: #fcc27d;\n --private-chip-bg-color: #dbc3ef;\n --disabled-chip-bg-color: #c4c3c3;\n --impact-list-text-color: #14041c;\n --impact-list-chip-text-color: #3d3c3e;\n --impact-list-chip-bg-color: #e3ccf5;\n --dynamic-card-border-color: #eeeaf2;\n --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n --table-with-accordion-icon-color: #1e161f;\n}";
1044
+ styleInject(css_248z$1d);
1033
1045
 
1034
1046
  const ThemeContext = /*#__PURE__*/createContext$1(undefined);
1035
1047
  const ThemeProvider = ({
@@ -1229,15 +1241,15 @@ const Drawer = ({
1229
1241
  }), document.body);
1230
1242
  };
1231
1243
 
1232
- var css_248z$1b = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-accordion {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n min-width: fit-content;\n}\n.ff-accordion .accordion-header {\n display: flex;\n justify-content: space-between;\n min-height: 32px;\n align-items: center;\n cursor: pointer;\n}\n.ff-accordion .accordion-header .header-title {\n padding: 8px;\n}\n.ff-accordion .accordion-header .accordion-arrow {\n display: flex;\n padding: 8px;\n align-items: center;\n transition: transform 0.3s ease;\n}\n.ff-accordion .accordion-header .accordion-arrow.expanded {\n transform: rotate(180deg);\n}\n.ff-accordion .accordion-header .accordion-arrow:hover {\n color: var(--tooltip-bg-color);\n}\n.ff-accordion .accordion-header.expanded {\n background-color: var(--hover-color);\n border-bottom: 1px solid var(--hover-color);\n}\n.ff-accordion .accordion-header:hover {\n background-color: var(--hover-color);\n}\n.ff-accordion .accordion-content {\n padding: 8px;\n}";
1244
+ var css_248z$1c = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-accordion {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n min-width: fit-content;\n}\n.ff-accordion .accordion-header {\n display: flex;\n justify-content: space-between;\n min-height: 32px;\n align-items: center;\n cursor: pointer;\n}\n.ff-accordion .accordion-header .header-title {\n padding: 8px;\n}\n.ff-accordion .accordion-header .accordion-arrow {\n display: flex;\n padding: 8px;\n align-items: center;\n transition: transform 0.3s ease;\n}\n.ff-accordion .accordion-header .accordion-arrow.expanded {\n transform: rotate(180deg);\n}\n.ff-accordion .accordion-header .accordion-arrow:hover {\n color: var(--tooltip-bg-color);\n}\n.ff-accordion .accordion-header.expanded {\n background-color: var(--hover-color);\n border-bottom: 1px solid var(--hover-color);\n}\n.ff-accordion .accordion-header:hover {\n background-color: var(--hover-color);\n}\n.ff-accordion .accordion-content {\n padding: 8px;\n}";
1245
+ styleInject(css_248z$1c);
1246
+
1247
+ var css_248z$1b = "/* global.css or component CSS */\nbody {\n font-family: \"Poppins\", sans-serif;\n}";
1233
1248
  styleInject(css_248z$1b);
1234
1249
 
1235
- var css_248z$1a = "/* global.css or component CSS */\nbody {\n font-family: \"Poppins\", sans-serif;\n}";
1250
+ var css_248z$1a = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-tooltip {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-tooltip-container {\n cursor: pointer;\n display: inline-block;\n}\n\n.ff-tooltip {\n position: fixed;\n width: max-content;\n max-width: 60vw;\n word-wrap: break-word;\n background-color: var(--tooltip-bg-color);\n line-height: 18px;\n color: var(--tooltip-text-color);\n text-align: center;\n border-radius: 5px;\n padding: 4px 8px;\n opacity: 0;\n z-index: 10000;\n}\n.ff-tooltip--visible {\n opacity: 1;\n transition: opacity 0.3s;\n}";
1236
1251
  styleInject(css_248z$1a);
1237
1252
 
1238
- var css_248z$19 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-tooltip {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-tooltip-container {\n cursor: pointer;\n display: inline-block;\n}\n\n.ff-tooltip {\n position: fixed;\n width: max-content;\n max-width: 60vw;\n word-wrap: break-word;\n background-color: var(--tooltip-bg-color);\n line-height: 18px;\n color: var(--tooltip-text-color);\n text-align: center;\n border-radius: 5px;\n padding: 4px 8px;\n opacity: 0;\n z-index: 10000;\n}\n.ff-tooltip--visible {\n opacity: 1;\n transition: opacity 0.3s;\n}";
1239
- styleInject(css_248z$19);
1240
-
1241
1253
  const checkEmpty = value => {
1242
1254
  // Check for null or undefined
1243
1255
  if (value == null) return true;
@@ -1465,8 +1477,8 @@ const Accordion = ({
1465
1477
  });
1466
1478
  };
1467
1479
 
1468
- var css_248z$18 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .default-label {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .active-default-label, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .error-text {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-multiselect-container-with-icon {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n width: 100%;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper {\n flex-grow: 1;\n box-sizing: border-box;\n transition: all 0.3s ease;\n cursor: pointer;\n position: relative;\n border: 1px solid var(--default-icon-color);\n border-radius: 4px;\n background: var(--drawer-footer-bg);\n min-width: 150px;\n height: 32px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect {\n position: relative;\n padding: 6px 3px;\n border: none;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main {\n display: flex;\n flex: 1;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .default-label {\n font-family: Poppins;\n font-weight: 400;\n letter-spacing: 0.5px;\n transition: all 0.3s ease;\n color: var(--default-icon-color);\n line-height: 18px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .active-default-label {\n font-size: 8px !important;\n height: 8px;\n font-family: Poppins;\n font-weight: 400;\n letter-spacing: 0.5px;\n transition: all 0.3s ease;\n background-color: var(--multi-select-label-bg);\n line-height: 12px;\n color: var(--default-icon-color);\n padding: 0 4px;\n position: absolute;\n left: 8px;\n top: -6px;\n pointer-events: none;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n overflow-y: auto;\n max-height: 64px;\n gap: 5px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container::-webkit-scrollbar {\n width: 4px;\n height: 40px;\n border-radius: 12px 0px 0px 0px;\n background: var(--description-text);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container::-webkit-scrollbar-track {\n background: var(--ff-select-scroll-track-bg);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container::-webkit-scrollbar-thumb {\n background: var(--ff-select-scroll-thumb-color);\n border-radius: 10px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container::-webkit-scrollbar-thumb:hover {\n background: var(--ff-select-scroll-thumb-hover);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip {\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n border: 0.5px solid var(--tabs-border-color);\n padding-left: 4px;\n gap: 4px;\n height: 16px;\n border-radius: 15px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n line-height: 14px;\n color: var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label.label-padding {\n padding-right: 3px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-close-icon {\n color: var(--brand-color);\n cursor: pointer;\n padding: 0px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container {\n flex: 1;\n min-width: 20px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input {\n width: 100%;\n min-width: 30px;\n max-width: calc(100% - 0px);\n padding: 2px;\n box-sizing: border-box;\n border: none;\n font-size: 12px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input:focus {\n outline: none;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect .ff-multiselect-more-chip {\n display: flex;\n align-items: center;\n width: 16px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow {\n transition: transform 0.3s ease;\n transform: rotate(360deg);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow svg path {\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow--opened-dropdown {\n transform: rotate(180deg);\n transition: transform 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover {\n border: 1px solid var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-select-arrow svg path {\n fill: var(--tooltip-bg-color);\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--with-options {\n height: fit-content;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown {\n border: 1px solid var(--brand-color);\n height: fit-content;\n cursor: default;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover {\n border: 1px solid var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error {\n border: 1px solid var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover {\n border: 1px solid var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled {\n pointer-events: none;\n border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover {\n border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-select-arrow svg path {\n fill: var(--multi-select-border);\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-select-arrow svg path {\n fill: var(--multi-select-border);\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n color: var(--text-color-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .error-text {\n position: absolute;\n margin-top: 4px;\n left: 12px;\n color: var(--error-light);\n letter-spacing: 0.5px;\n}\n.ff-multiselect-container-with-icon .ff-manage-labels-text {\n position: absolute;\n right: 0;\n margin-top: 4px;\n}\n.ff-multiselect-container-with-icon .ff-label-plus-icon {\n cursor: pointer;\n}";
1469
- styleInject(css_248z$18);
1480
+ var css_248z$19 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .default-label {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .active-default-label, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .error-text {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-multiselect-container-with-icon {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 8px;\n width: 100%;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper {\n flex-grow: 1;\n box-sizing: border-box;\n transition: all 0.3s ease;\n cursor: pointer;\n position: relative;\n border: 1px solid var(--default-icon-color);\n border-radius: 4px;\n background: var(--drawer-footer-bg);\n min-width: 150px;\n height: 32px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect {\n position: relative;\n padding: 6px 3px;\n border: none;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main {\n display: flex;\n flex: 1;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .default-label {\n font-family: Poppins;\n font-weight: 400;\n letter-spacing: 0.5px;\n transition: all 0.3s ease;\n color: var(--default-icon-color);\n line-height: 18px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .active-default-label {\n font-size: 8px !important;\n height: 8px;\n font-family: Poppins;\n font-weight: 400;\n letter-spacing: 0.5px;\n transition: all 0.3s ease;\n background-color: var(--multi-select-label-bg);\n line-height: 12px;\n color: var(--default-icon-color);\n padding: 0 4px;\n position: absolute;\n left: 8px;\n top: -6px;\n pointer-events: none;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n overflow-y: auto;\n max-height: 64px;\n gap: 5px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container::-webkit-scrollbar {\n width: 4px;\n height: 40px;\n border-radius: 12px 0px 0px 0px;\n background: var(--description-text);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container::-webkit-scrollbar-track {\n background: var(--ff-select-scroll-track-bg);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container::-webkit-scrollbar-thumb {\n background: var(--ff-select-scroll-thumb-color);\n border-radius: 10px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container::-webkit-scrollbar-thumb:hover {\n background: var(--ff-select-scroll-thumb-hover);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip {\n display: flex;\n align-items: center;\n justify-content: space-between;\n box-sizing: border-box;\n border: 0.5px solid var(--tabs-border-color);\n padding-left: 4px;\n gap: 4px;\n height: 16px;\n border-radius: 15px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n line-height: 14px;\n color: var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label.label-padding {\n padding-right: 3px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-close-icon {\n color: var(--brand-color);\n cursor: pointer;\n padding: 0px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container {\n flex: 1;\n min-width: 20px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input {\n width: 100%;\n min-width: 30px;\n max-width: calc(100% - 0px);\n padding: 2px;\n box-sizing: border-box;\n border: none;\n font-size: 12px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input:focus {\n outline: none;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect .ff-multiselect-more-chip {\n display: flex;\n align-items: center;\n width: 16px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle {\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow {\n transition: transform 0.3s ease;\n transform: rotate(360deg);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow svg path {\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow--opened-dropdown {\n transform: rotate(180deg);\n transition: transform 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover {\n border: 1px solid var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-select-arrow svg path {\n fill: var(--tooltip-bg-color);\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--with-options {\n height: fit-content;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown {\n border: 1px solid var(--brand-color);\n height: fit-content;\n cursor: default;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover {\n border: 1px solid var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error {\n border: 1px solid var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover {\n border: 1px solid var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled {\n opacity: 0.5;\n pointer-events: none;\n border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover {\n border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n color: var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-select-arrow svg path {\n fill: var(--multi-select-border);\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-select-arrow svg path {\n fill: var(--multi-select-border);\n transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n color: var(--text-color-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .error-text {\n position: absolute;\n margin-top: 4px;\n left: 12px;\n color: var(--error-light);\n letter-spacing: 0.5px;\n}\n.ff-multiselect-container-with-icon .ff-manage-labels-text {\n position: absolute;\n right: 0;\n margin-top: 4px;\n}\n.ff-multiselect-container-with-icon .ff-label-plus-icon {\n cursor: pointer;\n}";
1481
+ styleInject(css_248z$19);
1470
1482
 
1471
1483
  const dropdownDefaultCSSData$1 = {
1472
1484
  verticalMargin: 4,
@@ -1474,11 +1486,11 @@ const dropdownDefaultCSSData$1 = {
1474
1486
  maxDropdownHeight: 160
1475
1487
  };
1476
1488
 
1477
- var css_248z$17 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd, .ff-multiselect-dropdown-container .no-options, .ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-multiselect-dropdown-container {\n position: absolute;\n background: var(--drawer-footer-bg);\n z-index: 1000;\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n border: 0.5px solid var(--ff-select-option-border-color);\n border-radius: 4px;\n box-sizing: border-box;\n margin-block: 4px;\n max-height: 160px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper {\n max-height: 128px;\n overflow-y: auto;\n border-radius: 2px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 40px;\n border-radius: 12px 0px 0px 0px;\n background: var(--description-text);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-track {\n background: var(--ff-select-scroll-track-bg);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb {\n background: var(--ff-select-scroll-thumb-color);\n border-radius: 10px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb:hover {\n background: var(--ff-select-scroll-thumb-hover);\n}\n.ff-multiselect-dropdown-container .no-options {\n color: var(--pop-up-background-blur);\n text-align: center;\n margin: 0;\n padding: 10px;\n line-height: 12px;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n height: 32px;\n padding: 4px 8px;\n gap: 4px;\n border-radius: 4px 0px 0px 0px;\n background-color: white;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n color: var(--ff-select-text-color);\n}\n.ff-multiselect-dropdown-container .dropdown-option-container:hover {\n background-color: var(--hover-color);\n}\n.ff-multiselect-dropdown-container:focus {\n outline: none;\n}\n.ff-multiselect-dropdown-container .select-button-container {\n box-sizing: border-box;\n width: 100%;\n border-top: 1px solid var(--slider-table-color);\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n}";
1478
- styleInject(css_248z$17);
1489
+ var css_248z$18 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd, .ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-multiselect-dropdown-container {\n position: absolute;\n background: var(--drawer-footer-bg);\n z-index: 1000;\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n border: 0.5px solid var(--ff-select-option-border-color);\n border-radius: 4px;\n box-sizing: border-box;\n margin-block: 4px;\n max-height: 160px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper {\n max-height: 128px;\n overflow-y: auto;\n border-radius: 2px;\n overflow-x: hidden;\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(--ff-select-text-color);\n text-align: center;\n margin: 0;\n padding: 7px;\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}";
1490
+ styleInject(css_248z$18);
1479
1491
 
1480
- var css_248z$16 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-checkbox--overlay {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n cursor: pointer;\n position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n width: 16px;\n height: 16px;\n border: 1px solid var(--checkbox-border-color);\n box-sizing: border-box;\n border-radius: 2px;\n margin-right: 4px;\n background-color: var(--checkbox-bg-color);\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::before {\n content: \"\";\n width: 9px;\n height: 2px;\n background-color: var(--checkbox-partial-color);\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(180deg);\n opacity: 0;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::after {\n content: \"\";\n width: 16px;\n height: 16px;\n border: 4px solid var(--checkbox-hover-color);\n border-radius: 4px;\n position: absolute;\n opacity: 0;\n background-color: var(--checkbox-hover-color);\n z-index: -1;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover {\n border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom {\n background: var(--brand-color);\n border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--passed {\n background-color: var(--ff-card-passed-status-bg-color);\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--failed {\n background-color: var(--ff-card-failed-status-bg-color);\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--warning {\n background-color: var(--ff-card-warning-status-bg-color);\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--skipped {\n background-color: var(--ff-card-skipped-status-bg-color);\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--flaky {\n background-color: var(-- ff-card-flaky-status-bg-color);\n border-color: var(-- ff-card-flaky-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom {\n background: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--passed {\n background: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--failed {\n background: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--warning {\n background: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--skipped {\n background: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--flaky {\n background: var(-- ff-card-flaky-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom {\n opacity: 0.5;\n cursor: not-allowed;\n border: 1px solid var(--checkbox-border-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom::after {\n opacity: 0;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial {\n background-color: var(--brand-color);\n border: none;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial::before {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover {\n background-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox--passed {\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--failed {\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--warning {\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--skipped {\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--flaky {\n border-color: var(-- ff-card-flaky-status-bg-color);\n}";
1481
- styleInject(css_248z$16);
1492
+ var css_248z$17 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-checkbox--overlay {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n cursor: pointer;\n position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n width: 16px;\n height: 16px;\n border: 1px solid var(--checkbox-border-color);\n box-sizing: border-box;\n border-radius: 2px;\n margin-right: 4px;\n background-color: var(--checkbox-bg-color);\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom .ff-tick-icon {\n padding: 2px !important;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::before {\n content: \"\";\n width: 9px;\n height: 2px;\n background-color: var(--checkbox-partial-color);\n border-radius: 2px;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(180deg);\n opacity: 0;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::after {\n content: \"\";\n width: 16px;\n height: 16px;\n border: 4px solid var(--checkbox-hover-color);\n border-radius: 4px;\n position: absolute;\n opacity: 0;\n background-color: var(--checkbox-hover-color);\n z-index: -1;\n transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover {\n border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom {\n background: var(--brand-color);\n border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--passed {\n background-color: var(--ff-card-passed-status-bg-color);\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--failed {\n background-color: var(--ff-card-failed-status-bg-color);\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--warning {\n background-color: var(--ff-card-warning-status-bg-color);\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--skipped {\n background-color: var(--ff-card-skipped-status-bg-color);\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--flaky {\n background-color: var(-- ff-card-flaky-status-bg-color);\n border-color: var(-- ff-card-flaky-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom {\n background: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--passed {\n background: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--failed {\n background: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--warning {\n background: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--skipped {\n background: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--flaky {\n background: var(-- ff-card-flaky-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom {\n opacity: 0.5;\n cursor: not-allowed;\n border: 1px solid var(--checkbox-border-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom::after {\n opacity: 0;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial {\n background-color: var(--brand-color);\n border: none;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial::before {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover {\n background-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover::after {\n opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox--passed {\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--failed {\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--warning {\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--skipped {\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--flaky {\n border-color: var(-- ff-card-flaky-status-bg-color);\n}";
1493
+ styleInject(css_248z$17);
1482
1494
 
1483
1495
  const Checkbox = ({
1484
1496
  id,
@@ -1514,9 +1526,8 @@ const Checkbox = ({
1514
1526
  }),
1515
1527
  children: checked && jsx(Icon, {
1516
1528
  name: "tick",
1517
- height: 6,
1518
- width: 8,
1519
- color: "var(--primary-icon-color)"
1529
+ color: "var(--primary-icon-color)",
1530
+ className: "ff-tick-icon"
1520
1531
  })
1521
1532
  }), jsx(Typography, {
1522
1533
  as: "span",
@@ -1547,6 +1558,38 @@ const getValue$1 = (option, accessor = '') => {
1547
1558
  return option[accessor];
1548
1559
  };
1549
1560
 
1561
+ function useIntersectionObserver(elements,
1562
+ // Accepts Element or id strings
1563
+ options) {
1564
+ const observerRef = useRef(null);
1565
+ useEffect(() => {
1566
+ if (!elements || elements.length === 0) return;
1567
+ const {
1568
+ root = null,
1569
+ rootMargin = '0px',
1570
+ threshold = 0,
1571
+ onIntersect
1572
+ } = options;
1573
+ // Resolve elements: convert ids to DOM elements
1574
+ const resolvedElements = elements.map(element => typeof element === 'string' ? document.getElementById(element) : element).filter(el => el !== null); // Ensure valid elements
1575
+ if (resolvedElements.length === 0) {
1576
+ console.warn('No valid elements to observe.');
1577
+ return;
1578
+ }
1579
+ observerRef.current = new IntersectionObserver((entries, observer) => {
1580
+ entries.forEach(entry => onIntersect(entry, observer));
1581
+ }, {
1582
+ root,
1583
+ rootMargin,
1584
+ threshold
1585
+ });
1586
+ resolvedElements.forEach(element => observerRef.current?.observe(element));
1587
+ return () => {
1588
+ observerRef.current?.disconnect();
1589
+ };
1590
+ }, [elements, options]);
1591
+ }
1592
+
1550
1593
  const Dropdown$2 = /*#__PURE__*/forwardRef(({
1551
1594
  options,
1552
1595
  handleOptionChange,
@@ -1555,7 +1598,8 @@ const Dropdown$2 = /*#__PURE__*/forwardRef(({
1555
1598
  zIndex,
1556
1599
  withSelectButton,
1557
1600
  labelAccessor = 'label',
1558
- valueAccessor = 'value'
1601
+ valueAccessor = 'value',
1602
+ loadMoreOptions
1559
1603
  }, ref) => {
1560
1604
  const filteredOptions = options ? options.filter(option => getValue$1(option, valueAccessor)?.toLowerCase().includes(searchedKeyword.toLowerCase())) : [];
1561
1605
  const {
@@ -1584,6 +1628,18 @@ const Dropdown$2 = /*#__PURE__*/forwardRef(({
1584
1628
  }, [filteredOptions.length, withSelectButton, dropdownPosition]);
1585
1629
  const themeContext = useContext(ThemeContext);
1586
1630
  const currentTheme = themeContext?.currentTheme;
1631
+ useIntersectionObserver(['ff-multiselect-pagination'], {
1632
+ root: document.getElementById('ff-multiselect-options-wrapper'),
1633
+ rootMargin: '0px',
1634
+ threshold: 0.1,
1635
+ onIntersect: (entry, _observer) => {
1636
+ if (entry.isIntersecting) {
1637
+ if (loadMoreOptions) {
1638
+ loadMoreOptions();
1639
+ }
1640
+ }
1641
+ }
1642
+ });
1587
1643
  return jsxs("div", {
1588
1644
  role: "listbox",
1589
1645
  ref: ref,
@@ -1601,34 +1657,38 @@ const Dropdown$2 = /*#__PURE__*/forwardRef(({
1601
1657
  style: {
1602
1658
  maxHeight: withSelectButton ? '128px' : '160px'
1603
1659
  },
1604
- children: filteredOptions.length === 0 ? jsx("div", {
1605
- className: "dropdown-option-container ",
1606
- children: jsx("p", {
1607
- className: "no-options",
1608
- children: "No Option"
1609
- })
1610
- }) : filteredOptions.map(info => jsxs("div", {
1611
- role: "option",
1612
- className: `dropdown-option-container`,
1613
- onClick: e => {
1614
- const target = e.target;
1615
- if (target.type === 'checkbox') {
1616
- return;
1617
- }
1618
- !info?.isDisabled && handleOptionChange(info, !info.isChecked);
1619
- },
1620
- children: [jsx(Checkbox, {
1621
- checked: info.isChecked,
1622
- disabled: info?.isDisabled
1623
- }), jsx(Tooltip, {
1624
- zIndex: zIndex + 1,
1625
- title: typeof info[labelAccessor] === 'string' && getLabel(info, labelAccessor)?.length > 25 ? getLabel(info, labelAccessor) : '',
1626
- children: jsx(Typography, {
1627
- className: "dropdown-option-label",
1628
- children: renderOption(info, labelAccessor)
1629
- })
1660
+ id: "ff-multiselect-options-wrapper",
1661
+ children: filteredOptions.length === 0 ? jsx(Typography, {
1662
+ textAlign: 'center',
1663
+ as: 'p',
1664
+ className: 'no-options',
1665
+ children: "No Result Found"
1666
+ }) : jsxs(Fragment, {
1667
+ children: [filteredOptions.map(info => jsxs("div", {
1668
+ role: "option",
1669
+ className: `dropdown-option-container`,
1670
+ onClick: e => {
1671
+ const target = e.target;
1672
+ if (target.type === 'checkbox') {
1673
+ return;
1674
+ }
1675
+ !info?.isDisabled && handleOptionChange(info, !info.isChecked);
1676
+ },
1677
+ children: [jsx(Checkbox, {
1678
+ checked: info.isChecked,
1679
+ disabled: info?.isDisabled
1680
+ }), jsx(Tooltip, {
1681
+ zIndex: zIndex + 1,
1682
+ title: typeof info[labelAccessor] === 'string' && getLabel(info, labelAccessor)?.length > 25 ? getLabel(info, labelAccessor) : '',
1683
+ children: jsx(Typography, {
1684
+ className: "dropdown-option-label",
1685
+ children: renderOption(info, labelAccessor)
1686
+ })
1687
+ })]
1688
+ }, getLabel(info, labelAccessor))), jsx("div", {
1689
+ id: "ff-multiselect-pagination"
1630
1690
  })]
1631
- }, getLabel(info, labelAccessor)))
1691
+ })
1632
1692
  }), withSelectButton && filteredOptions.length > 0 && jsx("div", {
1633
1693
  className: "select-button-container",
1634
1694
  children: jsx(Button$1, {
@@ -1694,6 +1754,7 @@ const MultiSelect = ({
1694
1754
  labelAccessor = 'label',
1695
1755
  valueAccessor = 'value',
1696
1756
  withSelectButton = variant === 'machines' ? true : false,
1757
+ loadMoreOptions = () => {},
1697
1758
  onEnter = () => {}
1698
1759
  }) => {
1699
1760
  const [isOpen, setIsOpen] = useState(false);
@@ -1993,7 +2054,9 @@ const MultiSelect = ({
1993
2054
  dropdownPosition: dropdownPosition,
1994
2055
  zIndex: zIndex,
1995
2056
  withSelectButton: withSelectButton,
1996
- labelAccessor: labelAccessor
2057
+ labelAccessor: labelAccessor,
2058
+ valueAccessor: valueAccessor,
2059
+ loadMoreOptions: loadMoreOptions
1997
2060
  }), document.body)]
1998
2061
  })]
1999
2062
  }), variant === 'labels' && displayIcon && jsx(Icon, {
@@ -2004,8 +2067,8 @@ const MultiSelect = ({
2004
2067
  });
2005
2068
  };
2006
2069
 
2007
- var css_248z$15 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-toaster-overlay {\n position: fixed;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100%;\n display: flex;\n pointer-events: none;\n justify-content: flex-end;\n align-items: flex-end;\n}\n.ff-toaster-overlay .ff-toaster {\n background-color: var(--drawer-footer-bg);\n display: flex;\n border-radius: 10px;\n margin: 16px;\n pointer-events: auto;\n min-width: 320px;\n max-width: 600px;\n gap: 8px;\n box-shadow: 0px 1px 4px 0px var(--toaster-boxshadow);\n animation: slideInToasterBottomRight 0.5s forwards;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container {\n padding: 8px;\n display: flex;\n border-radius: 10px;\n gap: 8px;\n width: 100%;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container::before {\n content: \"\";\n position: absolute;\n inset: 0;\n border-radius: 8px;\n padding: 1px;\n -webkit-mask: linear-gradient(var(--drawer-footer-bg) 0 0) content-box, linear-gradient(var(--drawer-footer-bg) 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n z-index: -1;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n gap: 4px;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__title {\n max-width: 500px;\n word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__message {\n max-width: 500px;\n word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__prompt {\n margin-top: 4px;\n display: flex;\n gap: 10px;\n}\n.ff-toaster-overlay .ff-toaster--success::before {\n background: var(--toaster-success-border);\n}\n.ff-toaster-overlay .ff-toaster--warning::before {\n background: var(--toaster-warning-border);\n}\n.ff-toaster-overlay .ff-toaster--info::before {\n background: var(--toaster-info-border);\n}\n.ff-toaster-overlay .ff-toaster--danger::before, .ff-toaster-overlay .ff-toaster--confirm::before {\n background: var(--toaster-danger_confirm-border);\n}\n.ff-toaster-overlay .ff-toaster .ff-close-icon-wrapper {\n box-sizing: border-box;\n cursor: pointer;\n height: fit-content;\n width: fit-content;\n border-radius: 8px;\n padding: 8px;\n background: var(--toast-close-icon-wrapper-bg);\n margin-left: auto;\n}\n.ff-toaster-overlay.exiting {\n animation: slideOutToasterBottomRight 0.5s forwards;\n}\n\n@keyframes slideOutToasterBottomRight {\n from {\n transform: translateX(0%);\n }\n to {\n transform: translateX(100%);\n }\n}\n@keyframes slideInToasterBottomRight {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0%);\n }\n}\n.fireflink-stories-toaster-container .fireflink-stories-toaster-container-row {\n display: flex;\n gap: 5px;\n margin: 15px;\n}";
2008
- styleInject(css_248z$15);
2070
+ var css_248z$16 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-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}";
2071
+ styleInject(css_248z$16);
2009
2072
 
2010
2073
  const Toaster = ({
2011
2074
  isOpen = false,
@@ -2114,8 +2177,8 @@ const Toaster = ({
2114
2177
  }), document.body);
2115
2178
  };
2116
2179
 
2117
- var css_248z$14 = "/* Container */\n.ff-container {\n margin-right: auto;\n margin-left: auto;\n width: 90%;\n display: grid;\n}\n\n.ff-container-fluid {\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n display: grid;\n}\n\n/* Row */\n.ff-row {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n}\n\n/* Column sizes based on a 12-column layout */\n.ff-col {\n grid-column: span 12;\n}\n\n.ff-col-1 {\n grid-column: span 1;\n}\n\n.ff-col-2 {\n grid-column: span 2;\n}\n\n.ff-col-3 {\n grid-column: span 3;\n}\n\n.ff-col-4 {\n grid-column: span 4;\n}\n\n.ff-col-5 {\n grid-column: span 5;\n}\n\n.ff-col-6 {\n grid-column: span 6;\n}\n\n.ff-col-7 {\n grid-column: span 7;\n}\n\n.ff-col-8 {\n grid-column: span 8;\n}\n\n.ff-col-9 {\n grid-column: span 9;\n}\n\n.ff-col-10 {\n grid-column: span 10;\n}\n\n.ff-col-11 {\n grid-column: span 11;\n}\n\n.ff-col-12 {\n grid-column: span 12;\n}\n\n@media (max-width: 768px) {\n /* Stacking columns on small screens */\n .ff-col {\n grid-column: span 12;\n }\n}";
2118
- styleInject(css_248z$14);
2180
+ var css_248z$15 = "/* Container */\n.ff-container {\n margin-right: auto;\n margin-left: auto;\n width: 90%;\n display: grid;\n}\n\n.ff-container-fluid {\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n display: grid;\n}\n\n/* Row */\n.ff-row {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n}\n\n/* Column sizes based on a 12-column layout */\n.ff-col {\n grid-column: span 12;\n}\n\n.ff-col-1 {\n grid-column: span 1;\n}\n\n.ff-col-2 {\n grid-column: span 2;\n}\n\n.ff-col-3 {\n grid-column: span 3;\n}\n\n.ff-col-4 {\n grid-column: span 4;\n}\n\n.ff-col-5 {\n grid-column: span 5;\n}\n\n.ff-col-6 {\n grid-column: span 6;\n}\n\n.ff-col-7 {\n grid-column: span 7;\n}\n\n.ff-col-8 {\n grid-column: span 8;\n}\n\n.ff-col-9 {\n grid-column: span 9;\n}\n\n.ff-col-10 {\n grid-column: span 10;\n}\n\n.ff-col-11 {\n grid-column: span 11;\n}\n\n.ff-col-12 {\n grid-column: span 12;\n}\n\n@media (max-width: 768px) {\n /* Stacking columns on small screens */\n .ff-col {\n grid-column: span 12;\n }\n}";
2181
+ styleInject(css_248z$15);
2119
2182
 
2120
2183
  const Container = ({
2121
2184
  children,
@@ -2157,8 +2220,8 @@ const Col = ({
2157
2220
  });
2158
2221
  };
2159
2222
 
2160
- var css_248z$13 = ".ff--switch-container {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff--switch-container .ff--switch-checkbox {\n height: 0;\n width: 0;\n display: none;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button {\n right: -1px;\n border: 1px solid var(--brand-color);\n background: var(--toggle-button-bg-color);\n transition: all 0.3s;\n box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button .ff-checked-icon--primary svg path {\n fill: var(--brand-color);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label--primary {\n background: var(--brand-color);\n transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label:disabled {\n cursor: default;\n color: var(--disable-color);\n background: var(--disable-color);\n}\n.ff--switch-container .ff--switch-checkbox:disabled {\n cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n border-radius: 8px;\n position: relative;\n background: var(--toggle-strip-color);\n transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-label--disabled {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button {\n position: absolute;\n left: 0;\n border: 1px solid var(--toggle-strip-color);\n display: flex;\n background: var(--toggle-button-bg-color);\n border-radius: 50%;\n box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n transition: all 0.3s;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button .ff-unchecked-icon--primary svg path {\n fill: var(--toggle-disable-icon-color);\n}\n.ff--switch-container .default--small {\n width: 24px;\n height: 10px;\n}\n.ff--switch-container .default--small .ff--switch-button {\n width: 16px;\n height: 16px;\n transform: translateX(0);\n}\n.ff--switch-container .default--small .ff--switch-button.checked {\n transform: translateX(10px);\n}\n.ff--switch-container .default--medium {\n width: 32px;\n height: 14px;\n}\n.ff--switch-container .default--medium .ff--switch-button {\n width: 20px;\n height: 20px;\n transform: translateX(0);\n}\n.ff--switch-container .default--medium .ff--switch-button.checked {\n transform: translateX(14px);\n}\n.ff--switch-container .default--large {\n width: 40px;\n height: 16px;\n}\n.ff--switch-container .default--large .ff--switch-button {\n width: 24px;\n height: 24px;\n transform: translateX(0);\n}\n.ff--switch-container .default--large .ff--switch-button.checked {\n transform: translateX(16px);\n}";
2161
- styleInject(css_248z$13);
2223
+ var css_248z$14 = ".ff--switch-container {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff--switch-container .ff--switch-checkbox {\n height: 0;\n width: 0;\n display: none;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button {\n right: -1px;\n border: 1px solid var(--brand-color);\n background: var(--toggle-button-bg-color);\n transition: all 0.3s;\n box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button .ff-checked-icon--primary svg path {\n fill: var(--brand-color);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label--primary {\n background: var(--brand-color);\n transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label:disabled {\n cursor: default;\n color: var(--disable-color);\n background: var(--disable-color);\n}\n.ff--switch-container .ff--switch-checkbox:disabled {\n cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label {\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n border-radius: 8px;\n position: relative;\n background: var(--toggle-strip-color);\n transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-label--disabled {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button {\n position: absolute;\n left: 0;\n border: 1px solid var(--toggle-strip-color);\n display: flex;\n background: var(--toggle-button-bg-color);\n border-radius: 50%;\n box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n transition: all 0.3s;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button .ff-unchecked-icon--primary svg path {\n fill: var(--toggle-disable-icon-color);\n}\n.ff--switch-container .default--small {\n width: 24px;\n height: 10px;\n}\n.ff--switch-container .default--small .ff--switch-button {\n width: 16px;\n height: 16px;\n transform: translateX(0);\n}\n.ff--switch-container .default--small .ff--switch-button.checked {\n transform: translateX(10px);\n}\n.ff--switch-container .default--medium {\n width: 32px;\n height: 14px;\n}\n.ff--switch-container .default--medium .ff--switch-button {\n width: 20px;\n height: 20px;\n transform: translateX(0);\n}\n.ff--switch-container .default--medium .ff--switch-button.checked {\n transform: translateX(14px);\n}\n.ff--switch-container .default--large {\n width: 40px;\n height: 16px;\n}\n.ff--switch-container .default--large .ff--switch-button {\n width: 24px;\n height: 24px;\n transform: translateX(0);\n}\n.ff--switch-container .default--large .ff--switch-button.checked {\n transform: translateX(16px);\n}";
2224
+ styleInject(css_248z$14);
2162
2225
 
2163
2226
  const Toggle = ({
2164
2227
  onChange,
@@ -2236,8 +2299,8 @@ const Toggle = ({
2236
2299
  });
2237
2300
  };
2238
2301
 
2239
- var css_248z$12 = ".fontXs, .ff-chip-wrapper .ff-default-chip-style {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-chip-wrapper .ff-default-chip-style--custom {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-chip-wrapper {\n display: inline-flex;\n margin: 5px;\n justify-content: center;\n align-items: center;\n}\n.ff-chip-wrapper .ff-default-chip-style {\n display: flex;\n align-items: center;\n justify-content: space-around;\n width: fit-content;\n gap: 5px;\n height: 17px;\n border-radius: 25px;\n padding: 1px 6px;\n line-height: 15px;\n border: none;\n transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;\n box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--fullText:hover {\n box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n padding-right: 12px;\n}\n.ff-chip-wrapper .ff-default-chip-style--primary {\n background-color: var(--ff-chips-fill-color);\n color: var(--ff-chip-bg);\n color: var(--ff-chip-text-color);\n}\n.ff-chip-wrapper .ff-default-chip-style--success {\n background-color: var(--ff-success);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--error {\n background-color: var(--ff-error-light);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--warning {\n background-color: var(--ff-warning);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--custom {\n background: rgba(97, 11, 134, 0.1019607843);\n color: #610b86;\n padding: 2px 8px;\n border-radius: 12px;\n cursor: pointer;\n white-space: nowrap;\n box-shadow: none;\n transition: background-color 0.3s ease, color 0.3s ease;\n}\n.ff-chip-wrapper .ff-default-chip-style--custom:hover {\n background-color: #610b86;\n color: #fdfaff;\n}\n.ff-chip-wrapper .ff-default-chip-style--public {\n background-color: var(--public-chip-bg-color);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--partial-public {\n background-color: var(--partial-public-chip-bg-color);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--private {\n background-color: var(--private-chip-bg-color);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--disabled {\n background-color: var(--disabled-chip-bg-color);\n color: var(--ff-chip-bg);\n}";
2240
- styleInject(css_248z$12);
2302
+ var css_248z$13 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-chip-wrapper .ff-default-chip-style--custom {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-chip-wrapper {\n display: inline-flex;\n margin: 5px;\n justify-content: center;\n align-items: center;\n}\n.ff-chip-wrapper .ff-default-chip-style {\n display: flex;\n align-items: center;\n justify-content: space-around;\n width: fit-content;\n gap: 5px;\n height: 17px;\n border-radius: 25px;\n padding: 1px 6px;\n line-height: 15px;\n border: none;\n transition: transform 0.4s ease-in-out, box-shadow 0.4s ease-in-out, padding 0.4s ease-in-out;\n box-shadow: 1px 1px 3px 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-chips-blur-color), 1px 1px 2px 0px var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--fullText:hover {\n box-shadow: 1px 1px 3px 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-chips-blur-color), 1px 1px 2px 0px var(--ff-chip-bg);\n padding-right: 7px;\n}\n.ff-chip-wrapper .ff-default-chip-style--primary {\n background-color: var(--ff-chips-fill-color);\n color: var(--ff-chip-bg);\n color: var(--ff-chip-text-color);\n}\n.ff-chip-wrapper .ff-default-chip-style--success {\n background-color: var(--ff-success);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--error {\n background-color: var(--ff-error-light);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--warning {\n background-color: var(--ff-warning);\n color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--custom {\n background: rgba(97, 11, 134, 0.1019607843);\n color: #610b86;\n padding: 2px 8px;\n border-radius: 12px;\n cursor: pointer;\n white-space: nowrap;\n box-shadow: none;\n transition: background-color 0.3s ease, color 0.3s ease;\n}\n.ff-chip-wrapper .ff-default-chip-style--custom:hover {\n background-color: #610b86;\n color: #fdfaff;\n}\n.ff-chip-wrapper .ff-default-chip-style--public {\n background-color: var(--public-chip-bg-color);\n color: var(--ff-chip-bg);\n color: var(--license_header_text_color);\n}\n.ff-chip-wrapper .ff-default-chip-style--partial-public {\n background-color: var(--partial-public-chip-bg-color);\n color: var(--ff-chip-bg);\n color: var(--license_header_text_color);\n}\n.ff-chip-wrapper .ff-default-chip-style--private {\n background-color: var(--private-chip-bg-color);\n color: var(--ff-chip-bg);\n color: var(--license_header_text_color);\n}\n.ff-chip-wrapper .ff-default-chip-style--disabled {\n background-color: var(--disabled-chip-bg-color);\n color: var(--ff-chip-bg);\n color: var(--table-column-text-color);\n}\n.ff-chip-wrapper .ff-default-chip-style--count {\n background-color: var(--impact-list-chip-bg-color);\n color: var(--ff-chip-bg);\n color: var(--ff-chip-text-color);\n}";
2303
+ styleInject(css_248z$13);
2241
2304
 
2242
2305
  const Chip = ({
2243
2306
  label = '',
@@ -2260,14 +2323,16 @@ const Chip = ({
2260
2323
  }),
2261
2324
  children: labelText && jsx(Typography, {
2262
2325
  as: "p",
2326
+ fontSize: 10,
2327
+ fontWeight: "semi-bold",
2263
2328
  children: labelText
2264
2329
  })
2265
2330
  })
2266
2331
  });
2267
2332
  };
2268
2333
 
2269
- var css_248z$11 = ".fontXs, .ff-input-fieldset .ff-input-container .ff-input::placeholder, .ff-input-fieldset .ff-input-container .ff-input-label-container::placeholder, .ff-input-fieldset .ff-input-container:focus-within .ff-input-label-container, .ff-input-fieldset .ff-input-container .ff-input-message {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-input-fieldset .ff-input-container .ff-input, .ff-input-fieldset .ff-input-container .ff-input-label-container {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-input-fieldset {\n display: inline-block;\n border: none;\n padding: 0;\n margin: 0;\n width: 100%;\n}\n.ff-input-fieldset--disabled {\n border: 1px solid var(--input-default-border-color);\n background: var(--input-disabled-background-color);\n border-radius: 4px;\n opacity: 0.5;\n}\n.ff-input-fieldset .ff-input-container {\n display: flex;\n flex-direction: column;\n position: relative;\n}\n.ff-input-fieldset .ff-input-container .ff-input, .ff-input-fieldset .ff-input-container .ff-input-label-container {\n padding: 6px 8px;\n border: 1px solid var(--input-default-border-color);\n border-radius: 4px;\n outline: none;\n line-height: 18px;\n}\n.ff-input-fieldset .ff-input-container .ff-input--medium {\n padding: 10px 9px;\n}\n.ff-input-fieldset .ff-input-container .ff-input:disabled, .ff-input-fieldset .ff-input-container .ff-input-label-container:disabled {\n cursor: not-allowed;\n border: none;\n background: transparent;\n}\n.ff-input-fieldset .ff-input-container .ff-input::placeholder, .ff-input-fieldset .ff-input-container .ff-input-label-container::placeholder {\n opacity: 0;\n line-height: 15px;\n}\n.ff-input-fieldset .ff-input-container .ff-input--danger {\n border-color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container .ff-input--transparentBackground {\n background: transparent;\n}\n.ff-input-fieldset .ff-input-container .ff-input--no-border {\n border: none;\n}\n.ff-input-fieldset .ff-input-container .ff-input--placeholder::placeholder {\n opacity: 1;\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container {\n display: flex;\n gap: 2px;\n position: absolute;\n border: none;\n outline: none;\n line-height: 18px;\n margin-top: 1px;\n transition: all 0.3s ease-in-out;\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container--medium {\n line-height: 25px;\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container .ff-input-label {\n color: var(--input-default-label-color);\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container .ff-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container .ff-input-label--disabled {\n color: var(--input-default-border-color);\n background-color: var(--input-label-bg-color);\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container .required-asterisk {\n color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input-label {\n color: var(--input-default-label-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input-label--no-hover {\n color: var(--input-default-label-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input-label--disabled {\n color: var(--input-default-border-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input, .ff-input-fieldset .ff-input-container:hover .ff-input-label-container {\n border-color: var(--brand-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input--no-hover {\n border-color: var(--input-default-border-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input--disabled {\n background: transparent;\n border-color: var(--input-default-border-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input--danger {\n border-color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input-label-container {\n top: -9px;\n background-color: var(--input-label-bg-color);\n line-height: 15px;\n padding: 0px 2px;\n margin-left: 10px;\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input-label--primary {\n color: var(--brand-color);\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input, .ff-input-fieldset .ff-input-container:focus-within .ff-input-label-container {\n border-color: var(--brand-color);\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input--danger {\n border-color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input::placeholder, .ff-input-fieldset .ff-input-container:focus-within .ff-input-label-container::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-input-fieldset .ff-input-container .ff-input-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 15px;\n}\n.ff-input-fieldset .ff-input-container .ff-input-message--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container--float .ff-input-label-container {\n top: -9px;\n font-size: 10px;\n background-color: var(--input-label-bg-color);\n line-height: 15px;\n padding: 0px 2px;\n margin-left: 10px;\n}\n.ff-input-fieldset .ff-input-container--float--disabled {\n cursor: not-allowed;\n}\n.ff-input-fieldset .ff-input-container--float--disabled .ff-input-label-container {\n cursor: not-allowed;\n}";
2270
- styleInject(css_248z$11);
2334
+ var css_248z$12 = ".fontXs, .ff-input-fieldset .ff-input-container .ff-input::placeholder, .ff-input-fieldset .ff-input-container .ff-input-label-container::placeholder, .ff-input-fieldset .ff-input-container:focus-within .ff-input-label-container, .ff-input-fieldset .ff-input-container .ff-input-message {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-input-fieldset .ff-input-container .ff-input, .ff-input-fieldset .ff-input-container .ff-input-label-container {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-input-fieldset {\n display: inline-block;\n border: none;\n padding: 0;\n margin: 0;\n width: 100%;\n}\n.ff-input-fieldset--disabled {\n border: 1px solid var(--input-default-border-color);\n background: var(--input-disabled-background-color);\n border-radius: 4px;\n opacity: 0.5;\n}\n.ff-input-fieldset .ff-input-container {\n display: flex;\n flex-direction: column;\n position: relative;\n}\n.ff-input-fieldset .ff-input-container .ff-input, .ff-input-fieldset .ff-input-container .ff-input-label-container {\n padding: 6px 8px;\n border: 1px solid var(--input-default-border-color);\n border-radius: 4px;\n outline: none;\n line-height: 18px;\n}\n.ff-input-fieldset .ff-input-container .ff-input--medium {\n padding: 10px 9px;\n}\n.ff-input-fieldset .ff-input-container .ff-input:disabled, .ff-input-fieldset .ff-input-container .ff-input-label-container:disabled {\n cursor: not-allowed;\n border: none;\n background: transparent;\n}\n.ff-input-fieldset .ff-input-container .ff-input::placeholder, .ff-input-fieldset .ff-input-container .ff-input-label-container::placeholder {\n opacity: 0;\n line-height: 15px;\n}\n.ff-input-fieldset .ff-input-container .ff-input--danger {\n border-color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container .ff-input--transparentBackground {\n background: transparent;\n}\n.ff-input-fieldset .ff-input-container .ff-input--no-border {\n border: none;\n}\n.ff-input-fieldset .ff-input-container .ff-input--placeholder::placeholder {\n opacity: 1;\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container {\n display: flex;\n gap: 2px;\n position: absolute;\n border: none;\n outline: none;\n line-height: 18px;\n margin-top: 1px;\n transition: all 0.3s ease-in-out;\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container--medium {\n line-height: 25px;\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container .ff-input-label {\n color: var(--input-default-label-color);\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container .ff-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container .ff-input-label--disabled {\n color: var(--input-default-border-color);\n background-color: var(--input-label-bg-color);\n}\n.ff-input-fieldset .ff-input-container .ff-input-label-container .required-asterisk {\n color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input-label {\n color: var(--input-default-label-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input-label--no-hover {\n color: var(--input-default-label-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input-label--disabled {\n color: var(--input-default-border-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input, .ff-input-fieldset .ff-input-container:hover .ff-input-label-container {\n border-color: var(--brand-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input--no-hover {\n border-color: var(--input-default-border-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input--disabled {\n background: transparent;\n border-color: var(--input-default-border-color);\n}\n.ff-input-fieldset .ff-input-container:hover .ff-input--danger {\n border-color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input-label-container {\n top: -9px;\n background-color: var(--input-label-bg-color);\n line-height: 15px;\n padding: 0px 2px;\n margin-left: 10px;\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input-label--primary {\n color: var(--brand-color);\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input, .ff-input-fieldset .ff-input-container:focus-within .ff-input-label-container {\n border-color: var(--brand-color);\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input--danger {\n border-color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container:focus-within .ff-input::placeholder, .ff-input-fieldset .ff-input-container:focus-within .ff-input-label-container::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-input-fieldset .ff-input-container .ff-input-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 15px;\n}\n.ff-input-fieldset .ff-input-container .ff-input-message--danger {\n color: var(--input-error-text-color);\n}\n.ff-input-fieldset .ff-input-container--float .ff-input-label-container {\n top: -9px;\n font-size: 10px;\n background-color: var(--input-label-bg-color);\n line-height: 15px;\n padding: 0px 2px;\n margin-left: 10px;\n}\n.ff-input-fieldset .ff-input-container--float--disabled {\n cursor: not-allowed;\n}\n.ff-input-fieldset .ff-input-container--float--disabled .ff-input-label-container {\n cursor: not-allowed;\n}";
2335
+ styleInject(css_248z$12);
2271
2336
 
2272
2337
  const Input = /*#__PURE__*/forwardRef(({
2273
2338
  type = 'text',
@@ -2353,8 +2418,8 @@ const Input = /*#__PURE__*/forwardRef(({
2353
2418
  });
2354
2419
  });
2355
2420
 
2356
- var css_248z$10 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-radial-chart-container svg text {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-radial-chart-container {\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.ff-radial-chart-container svg {\n vertical-align: middle;\n}\n.ff-radial-chart-container svg text {\n font-size: var(--fontSize) !important;\n font-weight: 400;\n}";
2357
- styleInject(css_248z$10);
2421
+ var css_248z$11 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-radial-chart-container svg text {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-radial-chart-container {\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n.ff-radial-chart-container svg {\n vertical-align: middle;\n}\n.ff-radial-chart-container svg text {\n font-size: var(--fontSize) !important;\n font-weight: 400;\n}";
2422
+ styleInject(css_248z$11);
2358
2423
 
2359
2424
  const useColorMappings$1 = () => useMemo(() => {
2360
2425
  return {
@@ -2500,8 +2565,8 @@ const RadialChart = ({
2500
2565
  });
2501
2566
  };
2502
2567
 
2503
- var css_248z$$ = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-expandable-chip-menu--medium, .ff-expandable-chip-menu .ff-sub-chip--medium {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-expandable-chip-menu {\n display: inline-flex;\n gap: 16px;\n align-items: center;\n border-radius: 16px;\n cursor: pointer;\n overflow: hidden;\n width: auto;\n padding: 4px 8px;\n transition: all 0.3s ease;\n}\n.ff-expandable-chip-menu--primary {\n border: 0.5px solid var(--brand-color);\n background-color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-label-chip {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 4px;\n white-space: nowrap;\n padding: 2px 0;\n}\n.ff-expandable-chip-menu .ff-label-chip .arrow-icon {\n height: 14px;\n width: 14px;\n display: grid;\n place-items: center;\n}\n.ff-expandable-chip-menu .ff-label-chip--primary {\n color: var(--brand-color);\n}\n.ff-expandable-chip-menu--disabled {\n opacity: 0.5;\n}\n.ff-expandable-chip-menu--disabled:disabled {\n pointer-events: none;\n}\n.ff-expandable-chip-menu--medium {\n line-height: 18px;\n}\n.ff-expandable-chip-menu .ff-sub-chips {\n display: flex;\n gap: 8px;\n max-width: 500px;\n overflow-x: auto;\n -ms-overflow-style: none;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.3s ease, opacity 0.3s ease;\n opacity: 0;\n}\n.ff-expandable-chip-menu .ff-sub-chips::-webkit-scrollbar {\n display: none;\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chips {\n transform: scaleX(1);\n opacity: 1;\n}\n.ff-expandable-chip-menu .ff-sub-chip {\n padding: 2px 8px;\n border-radius: 12px;\n white-space: nowrap;\n transition: background-color 0.3s ease, color 0.3s ease;\n opacity: 0;\n transform: translateX(-10px);\n animation: fadeIn 0.5s ease forwards;\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary {\n background: var(--expandable-menu-option-bg);\n color: var(--brand-color);\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary:hover, .ff-expandable-chip-menu .ff-sub-chip--primary.selected {\n background-color: var(--brand-color);\n color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-sub-chip--medium {\n line-height: 18px;\n}\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n transform: translateX(-10px);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chip {\n animation: fadeIn 0.5s ease forwards;\n}";
2504
- styleInject(css_248z$$);
2568
+ var css_248z$10 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-expandable-chip-menu--medium, .ff-expandable-chip-menu .ff-sub-chip--medium {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-expandable-chip-menu {\n display: inline-flex;\n gap: 16px;\n align-items: center;\n border-radius: 16px;\n cursor: pointer;\n overflow: hidden;\n width: auto;\n padding: 4px 8px;\n transition: all 0.3s ease;\n}\n.ff-expandable-chip-menu--primary {\n border: 0.5px solid var(--brand-color);\n background-color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-label-chip {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 4px;\n white-space: nowrap;\n padding: 2px 0;\n}\n.ff-expandable-chip-menu .ff-label-chip .arrow-icon {\n height: 14px;\n width: 14px;\n display: grid;\n place-items: center;\n}\n.ff-expandable-chip-menu .ff-label-chip--primary {\n color: var(--brand-color);\n}\n.ff-expandable-chip-menu--disabled {\n opacity: 0.5;\n}\n.ff-expandable-chip-menu--disabled:disabled {\n pointer-events: none;\n}\n.ff-expandable-chip-menu--medium {\n line-height: 18px;\n}\n.ff-expandable-chip-menu .ff-sub-chips {\n display: flex;\n gap: 8px;\n max-width: 500px;\n overflow-x: auto;\n -ms-overflow-style: none;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.3s ease, opacity 0.3s ease;\n opacity: 0;\n}\n.ff-expandable-chip-menu .ff-sub-chips::-webkit-scrollbar {\n display: none;\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chips {\n transform: scaleX(1);\n opacity: 1;\n}\n.ff-expandable-chip-menu .ff-sub-chip {\n padding: 2px 8px;\n border-radius: 12px;\n white-space: nowrap;\n transition: background-color 0.3s ease, color 0.3s ease;\n opacity: 0;\n transform: translateX(-10px);\n animation: fadeIn 0.5s ease forwards;\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary {\n background: var(--expandable-menu-option-bg);\n color: var(--brand-color);\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary:hover, .ff-expandable-chip-menu .ff-sub-chip--primary.selected {\n background-color: var(--brand-color);\n color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-sub-chip--medium {\n line-height: 18px;\n}\n@keyframes fadeIn {\n 0% {\n opacity: 0;\n transform: translateX(-10px);\n }\n 100% {\n opacity: 1;\n transform: translateX(0);\n }\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chip {\n animation: fadeIn 0.5s ease forwards;\n}";
2569
+ styleInject(css_248z$10);
2505
2570
 
2506
2571
  const ExpandableMenu = ({
2507
2572
  label = '',
@@ -2568,8 +2633,8 @@ const ExpandableMenu = ({
2568
2633
  });
2569
2634
  };
2570
2635
 
2571
- var css_248z$_ = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-select-wrapper .ff-select .ff-select-inputField, .ff-select-wrapper .ff-select .ff-select-labels {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-select-wrapper .ff-select__focus .ff-select-labels, .ff-select-wrapper .ff-select__error .ff-select-labels {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-select-wrapper {\n min-height: 24px;\n min-width: 50px;\n}\n.ff-select-wrapper .ff-select {\n height: 100%;\n border: 1px solid var(--ff-select-border-color);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n position: relative;\n box-sizing: border-box;\n}\n.ff-select-wrapper .ff-select:hover {\n border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-labels {\n color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-text-hover-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-input-icon {\n margin-left: 6px;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField {\n width: calc(100% - 8px);\n height: 100%;\n padding: 0 0 0 8px;\n border: none;\n outline: none;\n letter-spacing: 0.5px;\n z-index: 10;\n background: transparent;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__disabled {\n cursor: not-allowed;\n color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__readonly {\n cursor: pointer;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__icon {\n width: calc(100% - 36px);\n padding: 4;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper {\n cursor: pointer;\n height: 100%;\n padding: 0 8px 0 0;\n display: flex;\n align-items: center;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-border-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper__disabled {\n cursor: not-allowed;\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-labels {\n position: absolute;\n left: 8px;\n color: var(--ff-select-border-color);\n letter-spacing: 0.5px;\n line-height: 18px;\n transition: 0.18s ease all;\n border-radius: 4px;\n}\n.ff-select-wrapper .ff-select .ff-select-labels__icon {\n left: 24px;\n}\n.ff-select-wrapper .ff-select .ff-select-labels__active {\n transform: translateY(-16px);\n transition: 0.18s ease all;\n background-color: var(--ff-select-background-color);\n padding: 0 2px;\n z-index: 100000;\n left: 8px;\n}\n.ff-select-wrapper .ff-select__focus {\n border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover {\n border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-labels {\n color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-brand-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-labels {\n transform: translateY(-16px);\n transition: 0.18s ease all;\n color: var(--ff-select-brand-color);\n background-color: var(--ff-select-background-color);\n padding: 0 2px;\n line-height: 18px;\n z-index: 100000;\n left: 8px;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows {\n transform: rotate(180deg);\n transition: 0.18s ease all;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-brand-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__disabled {\n cursor: not-allowed;\n}\n.ff-select-wrapper .ff-select__disabled:hover {\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-labels {\n color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-border-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error {\n border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover {\n border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-labels {\n color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-default-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error__focused:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-brand-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error .ff-select-labels {\n transform: translateY(-16px);\n transition: 0.3s ease all;\n color: var(--error_light);\n background-color: var(--ff-select-background-color);\n padding: 0 2px;\n line-height: 18px;\n left: 8px;\n}\n.ff-select-wrapper .ff-select__no_border {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select__no_border:hover {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-error-msg {\n padding-left: 8px;\n letter-spacing: 0.5px;\n}";
2572
- styleInject(css_248z$_);
2636
+ var css_248z$$ = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-select-wrapper .ff-select .ff-select-inputField, .ff-select-wrapper .ff-select .ff-select-labels {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-select-wrapper .ff-select__focus .ff-select-labels, .ff-select-wrapper .ff-select__error .ff-select-labels {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-select-wrapper {\n min-height: 24px;\n min-width: 50px;\n}\n.ff-select-wrapper .ff-select {\n height: 100%;\n border: 1px solid var(--ff-select-border-color);\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n position: relative;\n box-sizing: border-box;\n}\n.ff-select-wrapper .ff-select:hover {\n border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-labels {\n color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-text-hover-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-input-icon {\n margin-left: 6px;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField {\n width: calc(100% - 8px);\n height: 100%;\n padding: 0 0 0 8px;\n border: none;\n outline: none;\n letter-spacing: 0.5px;\n z-index: 10;\n background: transparent;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__disabled {\n cursor: not-allowed;\n color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__readonly {\n cursor: pointer;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__icon {\n width: calc(100% - 36px);\n padding: 4;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper {\n cursor: pointer;\n height: 100%;\n padding: 0 8px 0 0;\n display: flex;\n align-items: center;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-border-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper__disabled {\n cursor: not-allowed;\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-labels {\n position: absolute;\n left: 8px;\n color: var(--ff-select-border-color);\n letter-spacing: 0.5px;\n line-height: 18px;\n transition: 0.18s ease all;\n border-radius: 4px;\n}\n.ff-select-wrapper .ff-select .ff-select-labels__icon {\n left: 24px;\n}\n.ff-select-wrapper .ff-select .ff-select-labels__active {\n transform: translateY(-16px);\n transition: 0.18s ease all;\n background-color: var(--ff-select-background-color);\n padding: 0 2px;\n z-index: 100000;\n left: 8px;\n}\n.ff-select-wrapper .ff-select__focus {\n border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover {\n border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-labels {\n color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-brand-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-labels {\n transform: translateY(-16px);\n transition: 0.18s ease all;\n color: var(--ff-select-brand-color);\n background-color: var(--ff-select-background-color);\n padding: 0 2px;\n line-height: 18px;\n z-index: 100000;\n left: 8px;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows {\n transform: rotate(180deg);\n transition: 0.18s ease all;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-brand-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__disabled {\n cursor: not-allowed;\n}\n.ff-select-wrapper .ff-select__disabled:hover {\n border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-labels {\n color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-border-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error {\n border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover {\n border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-labels {\n color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-default-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error__focused:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n fill: var(--ff-select-brand-color);\n transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error .ff-select-labels {\n transform: translateY(-16px);\n transition: 0.3s ease all;\n color: var(--error_light);\n background-color: var(--ff-select-background-color);\n padding: 0 2px;\n line-height: 18px;\n left: 8px;\n}\n.ff-select-wrapper .ff-select__no_border {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select__no_border:hover {\n border-color: transparent;\n}\n.ff-select-wrapper .ff-select-error-msg {\n padding-left: 8px;\n letter-spacing: 0.5px;\n}";
2637
+ styleInject(css_248z$$);
2573
2638
 
2574
2639
  const dropdownDefaultCSSData = {
2575
2640
  margin: 6,
@@ -2578,8 +2643,8 @@ const dropdownDefaultCSSData = {
2578
2643
  dropDownWrapperPadding: 0
2579
2644
  };
2580
2645
 
2581
- var css_248z$Z = ".ff-select-dropdown-wrapper {\n max-height: 160px;\n z-index: 999999;\n position: absolute;\n min-width: 50px;\n border-radius: 4px;\n border: 1px solid var(--ff-select-option-border-color);\n margin-top: 4px;\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n background-color: var(--ff-select-background-color);\n overflow: hidden auto;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-track {\n background: var(--ff-select-scroll-track-bg);\n border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option {\n box-sizing: border-box;\n cursor: pointer;\n padding: 0px 8px;\n border-radius: 4px;\n min-height: 32px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container {\n display: flex;\n align-items: center;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container__icon {\n margin-right: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option__selected, .ff-select-dropdown-wrapper .ff-select-dropdown-option:hover {\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-no-option {\n box-sizing: border-box;\n padding: 0px 8px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: not-allowed;\n}";
2582
- styleInject(css_248z$Z);
2646
+ var css_248z$_ = ".ff-select-dropdown-wrapper {\n max-height: 160px;\n z-index: 999999;\n position: absolute;\n min-width: 50px;\n border-radius: 4px;\n border: 1px solid var(--ff-select-option-border-color);\n margin-top: 4px;\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n background-color: var(--ff-select-background-color);\n overflow: hidden auto;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-track {\n background: var(--ff-select-scroll-track-bg);\n border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option {\n box-sizing: border-box;\n cursor: pointer;\n padding: 0px 8px;\n border-radius: 4px;\n min-height: 32px;\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container {\n display: flex;\n align-items: center;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container__icon {\n margin-right: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option__selected, .ff-select-dropdown-wrapper .ff-select-dropdown-option:hover {\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-no-option {\n box-sizing: border-box;\n padding: 0px 8px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: not-allowed;\n}";
2647
+ styleInject(css_248z$_);
2583
2648
 
2584
2649
  const ffid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => ((char === 'x' ? Math.random() * 16 : Math.random() * 16 & 0x3 | 0x8) | 0).toString(16));
2585
2650
 
@@ -2965,8 +3030,8 @@ const Select$1 = ({
2965
3030
  });
2966
3031
  };
2967
3032
 
2968
- var css_248z$Y = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-textarea-container {\n display: flex;\n flex-direction: column;\n position: relative;\n gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n display: flex;\n color: var(--text-area-default-color);\n justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n padding: 8px;\n width: 100%;\n min-height: 80px;\n gap: 0px;\n border: 1px solid var(--default-icon-color);\n border-radius: 4px;\n outline: none;\n line-height: 18px;\n font-weight: 400;\n}\n.ff-textarea-container .ff-textarea--resize {\n resize: none;\n}\n.ff-textarea-container .ff-textarea:disabled, .ff-textarea-container .ff-textarea-label-container:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.ff-textarea-container .ff-textarea:disabled:hover, .ff-textarea-container .ff-textarea-label-container:disabled:hover {\n border-color: var(--default-icon-color);\n color: inherit;\n}\n.ff-textarea-container .ff-textarea::placeholder, .ff-textarea-container .ff-textarea-label-container::placeholder {\n opacity: 0;\n}\n.ff-textarea-container .ff-textarea--danger {\n border-color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea--transparentBackground {\n background: transparent;\n}\n.ff-textarea-container .ff-textarea-label-container {\n display: flex;\n position: absolute;\n border: none;\n outline: none;\n margin-top: 1px;\n transition: all 0.3s ease-in-out;\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label {\n padding: 1px;\n height: 10px;\n width: auto;\n background-color: var(--drawer-footer-bg);\n color: var(--text-area-default-color);\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label--danger {\n color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea-label-container .required-asterisk {\n color: var(--error_light);\n}\n.ff-textarea-container:hover .ff-textarea-label {\n color: var(--text-color);\n}\n.ff-textarea-container:hover .ff-textarea, .ff-textarea-container:hover .ff-textarea-label-container {\n border-color: var(--text-color);\n}\n.ff-textarea-container:focus-within .ff-textarea-label-container {\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.5px;\n text-align: left;\n top: -6px;\n background-color: transparent;\n padding: 0px 2px;\n margin-left: 7px;\n}\n.ff-textarea-container:focus-within .ff-textarea-label--primary {\n color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea--primary {\n border-color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-textarea-container .ff-textarea-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 12px;\n}\n.ff-textarea-container .ff-textarea-message--danger {\n color: var(--error_light);\n}\n.ff-textarea-container--float .ff-textarea-label-container {\n letter-spacing: 0.5px;\n top: -6px;\n background-color: transparent;\n line-height: 12px;\n padding: 0px 2px;\n margin-left: 7px;\n}\n.ff-textarea-container--disabled {\n cursor: not-allowed;\n}\n.ff-textarea-container--disabled:hover .ff-textarea-label {\n color: var(--text-area-default-color);\n}\n.ff-textarea-container--disabled:hover .ff-textarea, .ff-textarea-container--disabled:hover .ff-textarea-container .ff-textarea-label-container, .ff-textarea-container .ff-textarea-container--disabled:hover .ff-textarea-label-container {\n border-color: var(--default-icon-color);\n}\n.ff-textarea-container--disabled .ff-textarea-label-container {\n cursor: not-allowed;\n}";
2969
- styleInject(css_248z$Y);
3033
+ var css_248z$Z = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-textarea-container {\n display: flex;\n flex-direction: column;\n position: relative;\n gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n display: flex;\n color: var(--text-area-default-color);\n justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n padding: 8px;\n width: 100%;\n min-height: 80px;\n gap: 0px;\n border: 1px solid var(--default-icon-color);\n border-radius: 4px;\n outline: none;\n line-height: 18px;\n font-weight: 400;\n}\n.ff-textarea-container .ff-textarea--resize {\n resize: none;\n}\n.ff-textarea-container .ff-textarea:disabled, .ff-textarea-container .ff-textarea-label-container:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.ff-textarea-container .ff-textarea:disabled:hover, .ff-textarea-container .ff-textarea-label-container:disabled:hover {\n border-color: var(--default-icon-color);\n color: inherit;\n}\n.ff-textarea-container .ff-textarea::placeholder, .ff-textarea-container .ff-textarea-label-container::placeholder {\n opacity: 0;\n}\n.ff-textarea-container .ff-textarea--danger {\n border-color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea--transparentBackground {\n background: transparent;\n}\n.ff-textarea-container .ff-textarea-label-container {\n display: flex;\n position: absolute;\n border: none;\n outline: none;\n margin-top: 1px;\n transition: all 0.3s ease-in-out;\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label {\n padding: 1px;\n height: 10px;\n width: auto;\n background-color: var(--drawer-footer-bg);\n color: var(--text-area-default-color);\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label--danger {\n color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea-label-container .required-asterisk {\n color: var(--error_light);\n}\n.ff-textarea-container:hover .ff-textarea-label {\n color: var(--text-color);\n}\n.ff-textarea-container:hover .ff-textarea, .ff-textarea-container:hover .ff-textarea-label-container {\n border-color: var(--text-color);\n}\n.ff-textarea-container:focus-within .ff-textarea-label-container {\n font-weight: 400;\n line-height: 12px;\n letter-spacing: 0.5px;\n text-align: left;\n top: -6px;\n background-color: transparent;\n padding: 0px 2px;\n margin-left: 7px;\n}\n.ff-textarea-container:focus-within .ff-textarea-label--primary {\n color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea--primary {\n border-color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-textarea-container .ff-textarea-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 12px;\n}\n.ff-textarea-container .ff-textarea-message--danger {\n color: var(--error_light);\n}\n.ff-textarea-container--float .ff-textarea-label-container {\n letter-spacing: 0.5px;\n top: -6px;\n background-color: transparent;\n line-height: 12px;\n padding: 0px 2px;\n margin-left: 7px;\n}\n.ff-textarea-container--disabled {\n cursor: not-allowed;\n}\n.ff-textarea-container--disabled:hover .ff-textarea-label {\n color: var(--text-area-default-color);\n}\n.ff-textarea-container--disabled:hover .ff-textarea, .ff-textarea-container--disabled:hover .ff-textarea-container .ff-textarea-label-container, .ff-textarea-container .ff-textarea-container--disabled:hover .ff-textarea-label-container {\n border-color: var(--default-icon-color);\n}\n.ff-textarea-container--disabled .ff-textarea-label-container {\n cursor: not-allowed;\n}";
3034
+ styleInject(css_248z$Z);
2970
3035
 
2971
3036
  const Textarea = ({
2972
3037
  capacity = 200,
@@ -3036,8 +3101,8 @@ const Textarea = ({
3036
3101
  });
3037
3102
  };
3038
3103
 
3039
- var css_248z$X = ".ff-status-button {\n border: none;\n border-radius: 4px;\n padding: 0 4px;\n cursor: pointer;\n width: 80px;\n height: 16px;\n}\n.ff-status-button__text {\n color: inherit;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 76px;\n text-transform: capitalize;\n}\n.ff-status-button--passed {\n background-color: var(--status-button-bg-passed);\n color: var(--status-button-text-passed);\n}\n.ff-status-button--failed {\n background-color: var(--status-button-bg-failed);\n color: var(--status-button-text-failed);\n}\n.ff-status-button--running {\n background-color: var(--status-button-bg-running);\n color: var(--status-button-text-running);\n}\n.ff-status-button--skipped {\n background-color: var(--status-button-bg-skipped);\n color: var(--status-button-text-skipped);\n}\n.ff-status-button--warning {\n background-color: var(--status-button-bg-warning);\n color: var(--status-button-text-warning);\n}\n.ff-status-button--terminated {\n background-color: var(--status-button-bg-terminated);\n color: var(--status-button-text-terminated);\n}\n.ff-status-button--partially-executed {\n background-color: var(--status-button-bg-partiallyExecuted);\n color: var(--status-button-text-partiallyExecuted);\n}\n.ff-status-button--aborted {\n background-color: var(--status-button-bg-aborted);\n color: var(--status-button-text-aborted);\n}\n.ff-status-button--not-executed {\n background-color: var(--status-button-bg-notExecuted);\n color: var(--status-button-text-notExecuted);\n}\n.ff-status-button:disabled {\n opacity: 50%;\n cursor: not-allowed;\n}";
3040
- styleInject(css_248z$X);
3104
+ var css_248z$Y = ".ff-status-button {\n border: none;\n border-radius: 4px;\n padding: 0 4px;\n cursor: pointer;\n width: 80px;\n height: 16px;\n}\n.ff-status-button__text {\n color: inherit;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 76px;\n text-transform: capitalize;\n}\n.ff-status-button--passed {\n background-color: var(--status-button-bg-passed);\n color: var(--status-button-text-passed);\n}\n.ff-status-button--failed {\n background-color: var(--status-button-bg-failed);\n color: var(--status-button-text-failed);\n}\n.ff-status-button--running {\n background-color: var(--status-button-bg-running);\n color: var(--status-button-text-running);\n}\n.ff-status-button--skipped {\n background-color: var(--status-button-bg-skipped);\n color: var(--status-button-text-skipped);\n}\n.ff-status-button--warning {\n background-color: var(--status-button-bg-warning);\n color: var(--status-button-text-warning);\n}\n.ff-status-button--terminated {\n background-color: var(--status-button-bg-terminated);\n color: var(--status-button-text-terminated);\n}\n.ff-status-button--partially-executed {\n background-color: var(--status-button-bg-partiallyExecuted);\n color: var(--status-button-text-partiallyExecuted);\n}\n.ff-status-button--aborted {\n background-color: var(--status-button-bg-aborted);\n color: var(--status-button-text-aborted);\n}\n.ff-status-button--not-executed {\n background-color: var(--status-button-bg-notExecuted);\n color: var(--status-button-text-notExecuted);\n}\n.ff-status-button:disabled {\n opacity: 50%;\n cursor: not-allowed;\n}";
3105
+ styleInject(css_248z$Y);
3041
3106
 
3042
3107
  const StatusButton = ({
3043
3108
  status = 'passed',
@@ -3070,8 +3135,8 @@ const StatusButton = ({
3070
3135
  });
3071
3136
  };
3072
3137
 
3073
- var css_248z$W = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-option-card .ff-options {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-menu-option-container {\n cursor: pointer;\n position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--brand-color);\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n background-color: var(--menu-variant-dark-icon-color);\n}\n\n.ff-option-card {\n position: fixed;\n margin: 4px;\n border: 1px solid var(--option-card-border-color);\n background: var(--option-card-bg-color);\n overflow: hidden;\n min-height: 32px;\n min-width: 110px;\n width: max-content;\n border-radius: 4px;\n}\n.ff-option-card--primary {\n background: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-option-card--primary svg path {\n fill: var(--primary-icon-color);\n}\n.ff-option-card--primary :hover {\n color: var(--brand-color);\n}\n.ff-option-card--primary :hover svg path {\n fill: var(--brand-color);\n}\n.ff-option-card .ff-options {\n cursor: pointer;\n border-radius: 3px;\n display: flex;\n align-items: center;\n padding: 4px;\n gap: 8px;\n}\n.ff-option-card .ff-options:hover {\n background-color: var(--hover-color);\n}\n.ff-option-card .ff-options label {\n cursor: pointer;\n}\n.ff-option-card .ff-disable-option {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-option-card .ff-disable-option label {\n cursor: no-drop;\n}";
3074
- styleInject(css_248z$W);
3138
+ var css_248z$X = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-option-card .ff-options {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-menu-option-container {\n cursor: pointer;\n position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: var(--brand-color);\n cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n background-color: var(--menu-variant-dark-icon-color);\n}\n\n.ff-option-card {\n position: absolute;\n margin: 4px;\n border: 1px solid var(--option-card-border-color);\n background: var(--option-card-bg-color);\n overflow: hidden;\n min-height: 32px;\n min-width: 110px;\n width: max-content;\n border-radius: 4px;\n}\n.ff-option-card--primary {\n background: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-option-card--primary svg path {\n fill: var(--primary-icon-color);\n}\n.ff-option-card--primary :hover {\n color: var(--brand-color);\n}\n.ff-option-card--primary :hover svg path {\n fill: var(--brand-color);\n}\n.ff-option-card .ff-options {\n cursor: pointer;\n border-radius: 3px;\n display: flex;\n align-items: center;\n padding: 4px;\n gap: 8px;\n}\n.ff-option-card .ff-options:hover {\n background-color: var(--hover-color);\n}\n.ff-option-card .ff-options label {\n cursor: pointer;\n}\n.ff-option-card .ff-disable-option {\n opacity: 0.5;\n cursor: no-drop;\n}\n.ff-option-card .ff-disable-option label {\n cursor: no-drop;\n}";
3139
+ styleInject(css_248z$X);
3075
3140
 
3076
3141
  const Option$1 = ({
3077
3142
  option,
@@ -3088,7 +3153,7 @@ const Option$1 = ({
3088
3153
  width: 16
3089
3154
  }), jsx(Typography, {
3090
3155
  as: "label",
3091
- lineHeight: '18px',
3156
+ lineHeight: "18px",
3092
3157
  color: option.icon === 'delete' ? 'var(--delete-text-color)' : '',
3093
3158
  children: option.label
3094
3159
  })]
@@ -3125,13 +3190,13 @@ const OptionCard = ({
3125
3190
  };
3126
3191
  case 'down':
3127
3192
  return {
3128
- top: menuPosition.top + 18,
3193
+ top: menuPosition.top + 20,
3129
3194
  left: menuPosition.left - 4
3130
3195
  };
3131
3196
  case 'left':
3132
3197
  return {
3133
3198
  top: menuPosition.top - 4,
3134
- left: menuPosition.left - optionsWidth - 7
3199
+ left: menuPosition.left - optionsWidth - 8
3135
3200
  };
3136
3201
  case 'right':
3137
3202
  return {
@@ -3174,7 +3239,8 @@ const MenuOption = ({
3174
3239
  variant = 'light',
3175
3240
  zIndex = 99,
3176
3241
  dropdownPlacement = 'down',
3177
- optionCardVariant
3242
+ optionCardVariant,
3243
+ targetRef
3178
3244
  }) => {
3179
3245
  const [isClicked, setIsClicked] = useState(false);
3180
3246
  const menuRef = useRef(null);
@@ -3182,9 +3248,7 @@ const MenuOption = ({
3182
3248
  top: 0,
3183
3249
  left: 0,
3184
3250
  height: 0,
3185
- right: 0,
3186
- rightSpaceAvailable: 0,
3187
- bottomSpaceAvailable: 0
3251
+ right: 0
3188
3252
  });
3189
3253
  const closeDropDown = () => setIsClicked(false);
3190
3254
  const onIconClickHandler = () => {
@@ -3197,15 +3261,13 @@ const MenuOption = ({
3197
3261
  closeDropDown();
3198
3262
  };
3199
3263
  const calculateDims = () => {
3200
- if (menuRef?.current) {
3201
- const rect = menuRef.current.getBoundingClientRect();
3264
+ if (targetRef?.current) {
3265
+ const rect = targetRef.current.getBoundingClientRect();
3202
3266
  setMenuPosition({
3203
- top: rect.top,
3204
- left: rect.left,
3267
+ top: rect.top + window.scrollY,
3268
+ left: rect.left + window.scrollX,
3205
3269
  height: rect.height,
3206
- right: rect.right,
3207
- rightSpaceAvailable: document.body.clientWidth - rect.right,
3208
- bottomSpaceAvailable: window.innerHeight - menuRef.current.offsetTop
3270
+ right: rect.right
3209
3271
  });
3210
3272
  }
3211
3273
  };
@@ -3254,8 +3316,8 @@ const MenuOption = ({
3254
3316
  });
3255
3317
  };
3256
3318
 
3257
- var css_248z$V = ".ff-fixed-header-table {\n overflow-y: auto;\n}\n\n.ff-table-icon {\n position: absolute;\n top: 10px;\n right: 0;\n margin-right: 10px;\n z-index: 100;\n cursor: pointer;\n}\n\n.ff-table {\n width: 100%;\n}\n.ff-table th,\n.ff-table td {\n text-align: left;\n font-size: 12px;\n padding: 9px 8px;\n}\n.ff-table thead tr th {\n border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-table thead tr th .ff-label-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table thead tr th .ff-label-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table tbody tr .action-column {\n opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n padding-left: 10px;\n opacity: 0;\n display: flex;\n justify-content: flex-end;\n transition: opacity 0.3s ease, transform 0.3s ease;\n transform: translateX(20px);\n}\n.ff-table tbody tr:hover {\n background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container {\n opacity: 1;\n transform: translateX(0);\n}\n.ff-table tbody tr td {\n position: relative;\n color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n cursor: pointer;\n}\n.ff-table tbody tr td .ff-data-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table tbody tr td .ff-data-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table .primary-bg {\n background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n background-color: var(--slider-table-color);\n}\n.ff-table .tertiary-bg {\n background-color: var(--custom-table-header-bg-color);\n}\n.ff-table .default-bg {\n background-color: transparent;\n}\n.ff-table .default-color {\n color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n color: var(--brand-color);\n}\n\n.border-borderRadius {\n border: 1px solid var(--slider-table-color);\n border-radius: 5px;\n border-collapse: none !important;\n}\n\n.ff-fixed-header {\n position: sticky !important;\n top: 0;\n z-index: 99;\n background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\ntbody tr.disabled-row {\n opacity: 0.5;\n cursor: not-allowed;\n}";
3258
- styleInject(css_248z$V);
3319
+ var css_248z$W = ".ff-fixed-header-table {\n overflow-y: auto;\n}\n\n.ff-table-icon {\n position: absolute;\n top: 10px;\n right: 0;\n margin-right: 10px;\n z-index: 100;\n cursor: pointer;\n}\n\n.ff-table {\n width: 100%;\n}\n.ff-table th,\n.ff-table td {\n text-align: left;\n font-size: 12px;\n padding: 9px 8px;\n}\n.ff-table thead tr th {\n border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-table thead tr th .ff-label-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table thead tr th .ff-label-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table tbody tr .action-column {\n opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n padding-left: 10px;\n opacity: 0;\n display: flex;\n justify-content: flex-end;\n transition: opacity 0.3s ease, transform 0.3s ease;\n transform: translateX(20px);\n}\n.ff-table tbody tr:hover {\n background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container {\n opacity: 1;\n transform: translateX(0);\n}\n.ff-table tbody tr td {\n position: relative;\n color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n cursor: pointer;\n}\n.ff-table tbody tr td .ff-data-checkbox-container {\n display: flex;\n align-items: center;\n}\n.ff-table tbody tr td .ff-data-checkbox-container .ff-table-checkbox {\n padding-right: 8px;\n}\n.ff-table .primary-bg {\n background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n background-color: var(--slider-table-color);\n}\n.ff-table .tertiary-bg {\n background-color: var(--custom-table-header-bg-color);\n}\n.ff-table .default-bg {\n background-color: transparent;\n}\n.ff-table .default-color {\n color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n color: var(--brand-color);\n}\n\n.border-borderRadius {\n border: 1px solid var(--slider-table-color);\n border-radius: 5px;\n border-collapse: none !important;\n}\n\n.ff-fixed-header {\n position: sticky !important;\n top: 0;\n z-index: 99;\n background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n}\n\ntbody tr.disabled-row {\n opacity: 0.5;\n cursor: not-allowed;\n}";
3320
+ styleInject(css_248z$W);
3259
3321
 
3260
3322
  const isFunction$2 = functionToCheck => {
3261
3323
  return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
@@ -3473,11 +3535,11 @@ const Table$1 = ({
3473
3535
  });
3474
3536
  };
3475
3537
 
3476
- var css_248z$U = ".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}";
3477
- styleInject(css_248z$U);
3538
+ var css_248z$V = ".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}";
3539
+ styleInject(css_248z$V);
3478
3540
 
3479
- var css_248z$T = ".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}";
3480
- styleInject(css_248z$T);
3541
+ var css_248z$U = ".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}";
3542
+ styleInject(css_248z$U);
3481
3543
 
3482
3544
  const ArrowsButton = ({
3483
3545
  direction,
@@ -3614,8 +3676,8 @@ const AddButton = ({
3614
3676
  });
3615
3677
  };
3616
3678
 
3617
- var css_248z$S = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-donut-chart-svg-container svg text:nth-of-type(1), .ff-status-item {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL, .ff-donut-chart-svg-container svg text:nth-of-type(2) {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-donut-chart-svg-container svg text:nth-of-type(3) {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-donut-chart-section {\n display: flex;\n align-items: center;\n padding: 8px;\n}\n\n.ff-donut-chart-svg-container {\n display: flex;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(1) {\n font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(2) {\n font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(3) {\n font-weight: 500;\n}\n\n.ff-status-container {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.ff-status-item {\n display: flex;\n gap: 40px;\n justify-content: space-between;\n opacity: 1;\n}\n.ff-status-item.ff-highlighted {\n opacity: 1;\n}\n.ff-status-item.ff-fade {\n opacity: 10%;\n}\n.ff-status-item .ff-status-text {\n font-weight: 500;\n color: var(--status-skipped-text-color);\n}\n.ff-status-item .ff-status-details-script-count {\n display: flex;\n gap: 4px;\n font-weight: 600;\n}\n.ff-status-item .ff-status-details-script-percentage {\n font-weight: 400;\n color: var(--brand2-color);\n}\n\n.ff-status-label {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.ff-status-details {\n display: flex;\n gap: 4px;\n}\n\n.ff-status-color {\n width: 16px;\n height: 16px;\n border-radius: 4px;\n opacity: 80%;\n}";
3618
- styleInject(css_248z$S);
3679
+ var css_248z$T = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-donut-chart-svg-container svg text:nth-of-type(1), .ff-status-item {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL, .ff-donut-chart-svg-container svg text:nth-of-type(2) {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-donut-chart-svg-container svg text:nth-of-type(3) {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-donut-chart-section {\n display: flex;\n align-items: center;\n padding: 8px;\n}\n\n.ff-donut-chart-svg-container {\n display: flex;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(1) {\n font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(2) {\n font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(3) {\n font-weight: 500;\n}\n\n.ff-status-container {\n display: flex;\n flex-direction: column;\n gap: 20px;\n}\n\n.ff-status-item {\n display: flex;\n gap: 40px;\n justify-content: space-between;\n opacity: 1;\n}\n.ff-status-item.ff-highlighted {\n opacity: 1;\n}\n.ff-status-item.ff-fade {\n opacity: 10%;\n}\n.ff-status-item .ff-status-text {\n font-weight: 500;\n color: var(--status-skipped-text-color);\n}\n.ff-status-item .ff-status-details-script-count {\n display: flex;\n gap: 4px;\n font-weight: 600;\n}\n.ff-status-item .ff-status-details-script-percentage {\n font-weight: 400;\n color: var(--brand2-color);\n}\n\n.ff-status-label {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n\n.ff-status-details {\n display: flex;\n gap: 4px;\n}\n\n.ff-status-color {\n width: 16px;\n height: 16px;\n border-radius: 4px;\n opacity: 80%;\n}";
3680
+ styleInject(css_248z$T);
3619
3681
 
3620
3682
  const calculateArc$4 = (x, y, radius, startAngle, endAngle) => {
3621
3683
  const startX = x + radius * Math.cos(startAngle);
@@ -3971,11 +4033,11 @@ const useFileDropzone = options => {
3971
4033
  };
3972
4034
  };
3973
4035
 
3974
- var css_248z$R = ".ff-file-dropzone-wrapper {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n padding: 16px 0;\n border-radius: 8px;\n background: var(--file-dropzone-default-color);\n border: 1px dashed var(--brand-color);\n display: flex;\n align-items: center;\n flex-direction: column;\n text-align: center;\n gap: 8px;\n transition: background-color 0.2s ease;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone .ff-radio-group-wrapper {\n position: relative;\n bottom: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone:hover, .ff-file-dropzone-wrapper .ff-file-dropzone--active {\n background-color: var(--file-dropzone-selected-color);\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone--webservice-file {\n display: grid;\n place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone--webservice-container {\n display: grid;\n place-items: center;\n padding: 16px 0 40px 0;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__icon {\n height: 80px;\n width: 80px;\n display: grid;\n place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn {\n margin: 0 auto;\n position: relative;\n font-weight: 600;\n line-height: 15px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__webservice-file {\n padding: 4px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper {\n display: flex;\n flex-direction: column;\n gap: 10px;\n max-height: 300px;\n overflow-y: auto;\n scroll-behavior: smooth;\n padding: 2px;\n -ms-overflow-style: none;\n scrollbar-width: thin;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper ::-webkit-scrollbar {\n width: 2px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px;\n border-radius: 4px;\n background-color: var(--file-details-bg);\n box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);\n overflow: hidden;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info {\n display: flex;\n align-items: center;\n gap: 4px;\n width: 87%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info .ff-file-info__icon {\n display: grid;\n place-items: center;\n height: 24px;\n width: 24px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper {\n display: flex;\n flex-direction: column;\n gap: 2px;\n justify-content: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper__name {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: block;\n color: var(--text-color);\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-replace, .ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-remove {\n height: 24px;\n width: 24px;\n display: grid;\n place-items: center;\n cursor: pointer;\n}\n\n.ff-webservice-file-wrapper {\n display: flex;\n gap: 8px;\n}\n.ff-webservice-file-wrapper .ff-webservice-file-name {\n position: relative;\n bottom: 2px;\n}\n\n.ff-input-ref {\n display: none;\n}\n\n.ff-disable-file-dropzone-wrapper {\n opacity: 0.5;\n cursor: not-allowed;\n}";
3975
- styleInject(css_248z$R);
4036
+ var css_248z$S = ".ff-file-dropzone-wrapper {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n padding: 16px 0;\n border-radius: 8px;\n background: var(--file-dropzone-default-color);\n border: 1px dashed var(--brand-color);\n display: flex;\n align-items: center;\n flex-direction: column;\n text-align: center;\n gap: 8px;\n transition: background-color 0.2s ease;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone .ff-radio-group-wrapper {\n position: relative;\n bottom: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone:hover, .ff-file-dropzone-wrapper .ff-file-dropzone--active {\n background-color: var(--file-dropzone-selected-color);\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone--webservice-file {\n display: grid;\n place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone--webservice-container {\n display: grid;\n place-items: center;\n padding: 16px 0 40px 0;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__icon {\n height: 80px;\n width: 80px;\n display: grid;\n place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn {\n margin: 0 auto;\n position: relative;\n font-weight: 600;\n line-height: 15px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn input {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__webservice-file {\n padding: 4px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper {\n display: flex;\n flex-direction: column;\n gap: 10px;\n max-height: 300px;\n overflow-y: auto;\n scroll-behavior: smooth;\n padding: 2px;\n -ms-overflow-style: none;\n scrollbar-width: thin;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper ::-webkit-scrollbar {\n width: 2px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px;\n border-radius: 4px;\n background-color: var(--file-details-bg);\n box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);\n overflow: hidden;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info {\n display: flex;\n align-items: center;\n gap: 4px;\n width: 87%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info .ff-file-info__icon {\n display: grid;\n place-items: center;\n height: 24px;\n width: 24px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper {\n display: flex;\n flex-direction: column;\n gap: 2px;\n justify-content: center;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 100%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper__name {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n display: block;\n color: var(--text-color);\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-replace, .ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-remove {\n height: 24px;\n width: 24px;\n display: grid;\n place-items: center;\n cursor: pointer;\n}\n\n.ff-webservice-file-wrapper {\n display: flex;\n gap: 8px;\n}\n.ff-webservice-file-wrapper .ff-webservice-file-name {\n position: relative;\n bottom: 2px;\n}\n\n.ff-input-ref {\n display: none;\n}\n\n.ff-disable-file-dropzone-wrapper {\n opacity: 0.5;\n cursor: not-allowed;\n}";
4037
+ styleInject(css_248z$S);
3976
4038
 
3977
- var css_248z$Q = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-radio-wrapper .ff-radio {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-radio-wrapper {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-radio-wrapper .ff-radio {\n position: relative;\n color: var(--text-color);\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input {\n display: none;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom {\n box-sizing: content-box;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n border: 1px solid var(--radio-button-border);\n position: relative;\n margin-right: 8px;\n transition: border-color background-color;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::before {\n content: \"\";\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: #fbfdff;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: background-color 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::after {\n content: \"\";\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 4px solid #f7edff;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom {\n border: 1px solid var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::before {\n background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::after {\n opacity: 1;\n transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom {\n border-color: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom::before {\n background: var(--brand-color);\n height: 12px;\n width: 12px;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom {\n border: 1px solid var(--radio-button-border);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::before {\n background: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::after {\n border: 4px solid var(--radio-button-hover);\n opacity: 0;\n transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom {\n border-color: var(--brand-color);\n background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom::before {\n background: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio--disabled {\n cursor: default;\n}\n.ff-radio-wrapper .ff-radio--disabled .ff-radio-custom {\n opacity: 0.5;\n}";
3978
- styleInject(css_248z$Q);
4039
+ var css_248z$R = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-radio-wrapper .ff-radio {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-radio-wrapper {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n.ff-radio-wrapper .ff-radio {\n position: relative;\n color: var(--text-color);\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input {\n display: none;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom {\n box-sizing: content-box;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n border: 1px solid var(--radio-button-border);\n position: relative;\n margin-right: 8px;\n transition: border-color background-color;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::before {\n content: \"\";\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: #fbfdff;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n transition: background-color 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::after {\n content: \"\";\n width: 16px;\n height: 16px;\n border-radius: 50%;\n border: 4px solid #f7edff;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n opacity: 0;\n transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom {\n border: 1px solid var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::before {\n background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::after {\n opacity: 1;\n transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom {\n border-color: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom::before {\n background: var(--brand-color);\n height: 12px;\n width: 12px;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom {\n border: 1px solid var(--radio-button-border);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::before {\n background: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::after {\n border: 4px solid var(--radio-button-hover);\n opacity: 0;\n transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom {\n border-color: var(--brand-color);\n background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom::before {\n background: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio--disabled {\n cursor: default;\n}\n.ff-radio-wrapper .ff-radio--disabled .ff-radio-custom {\n opacity: 0.5;\n}";
4040
+ styleInject(css_248z$R);
3979
4041
 
3980
4042
  const RadioButton = ({
3981
4043
  label,
@@ -4015,8 +4077,8 @@ const RadioButton = ({
4015
4077
  });
4016
4078
  };
4017
4079
 
4018
- var css_248z$P = ".ff-radio-group {\n display: flex;\n flex-direction: row;\n gap: 12px;\n}\n\n.ff-radio-label-wrapper {\n position: relative;\n top: 2px;\n}\n\n.ff-required-asterisk {\n color: var(--input-error-text-color);\n}";
4019
- styleInject(css_248z$P);
4080
+ var css_248z$Q = ".ff-radio-group {\n display: flex;\n flex-direction: row;\n gap: 12px;\n}\n\n.ff-radio-label-wrapper {\n position: relative;\n top: 2px;\n}\n\n.ff-required-asterisk {\n color: var(--input-error-text-color);\n}";
4081
+ styleInject(css_248z$Q);
4020
4082
 
4021
4083
  const RadioGroup = ({
4022
4084
  options,
@@ -4307,6 +4369,7 @@ const FileDropzone = ({
4307
4369
  isApiResponseError = false,
4308
4370
  isDisable = false
4309
4371
  }) => {
4372
+ const fileInputRef = useRef(null);
4310
4373
  const {
4311
4374
  getRootProps,
4312
4375
  getInputProps,
@@ -4335,6 +4398,11 @@ const FileDropzone = ({
4335
4398
  onRemoveClick: handleRemoveClick,
4336
4399
  onReplaceClick: handleReplaceClick
4337
4400
  }, file.name)), [acceptedFiles, handleRemoveClick, handleReplaceClick]);
4401
+ useEffect(() => {
4402
+ if (selectedRadioOption?.value === 'Local File' && fileInputRef.current) {
4403
+ fileInputRef.current.click();
4404
+ }
4405
+ }, [selectedRadioOption]);
4338
4406
  useEffect(() => {
4339
4407
  if (!checkEmpty(acceptedFiles) && setSelectedFile) {
4340
4408
  setSelectedFile(acceptedFiles[0] || null);
@@ -4374,6 +4442,12 @@ const FileDropzone = ({
4374
4442
  handleRemoveFile: handleRemoveFile,
4375
4443
  setSelectedFile: setSelectedFile,
4376
4444
  isDisable: isDisable
4445
+ }), isWebServiceFileDropZone && jsx("input", {
4446
+ ref: fileInputRef,
4447
+ type: "file",
4448
+ className: "ff-input-ref",
4449
+ onChange: handleFileChange,
4450
+ accept: accept.join(',')
4377
4451
  }), isWebServiceFileDropZone ? null : jsxs("div", {
4378
4452
  className: 'ff-file-details-wrapper',
4379
4453
  style: {
@@ -8990,8 +9064,8 @@ const Forms = ({
8990
9064
  };
8991
9065
  const ForwardedForms = /*#__PURE__*/forwardRef(Forms);
8992
9066
 
8993
- var css_248z$O = ".fontXs, .ff-input-with-dropdown-container .ff-helper-text {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-input-with-dropdown-container {\n display: flex;\n flex-direction: column;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown {\n display: flex;\n border: 1px solid var(--input-default-border-color);\n border-radius: 4px;\n padding: 0;\n position: relative;\n justify-content: space-between;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-input-with-dropdown--left {\n display: flex;\n flex-direction: row-reverse;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-input-with-dropdown--right {\n display: flex;\n flex-direction: row;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-input--left-dropdown {\n width: 698px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container {\n display: flex;\n flex: 1;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n position: absolute;\n z-index: 9;\n color: var(--input-default-border-color);\n top: 6px;\n left: 7px;\n transition: all 0.3s ease-in-out;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label .ff-required-asterisk {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--filled {\n color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--no-hover {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--error {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n width: 100%;\n padding: 6px 7px;\n line-height: 18px;\n border: none;\n outline: none;\n border-right: 1px solid var(--input-default-border-color);\n border-radius: 4px 0 0 4px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-outer-spin-button, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::placeholder {\n opacity: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input:disabled {\n cursor: not-allowed;\n background: transparent;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input--left-dropdown::placeholder {\n opacity: 1;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--no-hover {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown {\n width: 100%;\n border: none;\n outline: none;\n margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown:disabled {\n cursor: not-allowed;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown:hover {\n background-color: var(--dropdown-bg-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown--left {\n min-width: 94px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .seperatorline {\n height: 26px;\n margin-top: 3px;\n border-right: 0.5px solid var(--brand-color);\n flex-shrink: 0;\n border-radius: 2px;\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown {\n border-color: var(--brand-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--filled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--disabled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label {\n color: var(--input-hover-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--filled {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--disabled {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--error {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input {\n border-color: var(--brand-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--filled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--disabled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown {\n border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label {\n top: -9px;\n background-color: var(--input-label-bg-color);\n padding: 0px 2px;\n color: var(--input-active-text-color);\n line-height: 15px;\n font-size: 10px !important;\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label--error {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input {\n border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input::placeholder {\n opacity: 1;\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container {\n border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n top: -9px;\n background-color: var(--input-label-bg-color);\n padding: 0px 2px;\n line-height: 15px;\n font-size: 10px !important;\n}\n.ff-input-with-dropdown-container--filled span {\n font-size: 8px;\n}\n.ff-input-with-dropdown-container--filled .required-asterisk {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-helper-text {\n color: var(--input-error-text-color);\n padding: 0 11px;\n}";
8994
- styleInject(css_248z$O);
9067
+ var css_248z$P = ".fontXs, .ff-input-with-dropdown-container .ff-helper-text {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-input-with-dropdown-container {\n display: flex;\n flex-direction: column;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown {\n display: flex;\n border: 1px solid var(--input-default-border-color);\n border-radius: 4px;\n padding: 0;\n position: relative;\n justify-content: space-between;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-input-with-dropdown--left {\n display: flex;\n flex-direction: row-reverse;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-input-with-dropdown--right {\n display: flex;\n flex-direction: row;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-input--left-dropdown {\n width: 698px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container {\n display: flex;\n flex: 1;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n position: absolute;\n z-index: 9;\n color: var(--input-default-border-color);\n top: 6px;\n left: 7px;\n transition: all 0.3s ease-in-out;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label .ff-required-asterisk {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--filled {\n color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--no-hover {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--error {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n width: 100%;\n padding: 6px 7px;\n line-height: 18px;\n border: none;\n outline: none;\n border-right: 1px solid var(--input-default-border-color);\n border-radius: 4px 0 0 4px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-outer-spin-button, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::placeholder {\n opacity: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input:disabled {\n cursor: not-allowed;\n background: transparent;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input--left-dropdown::placeholder {\n opacity: 1;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--no-hover {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--disabled {\n cursor: not-allowed;\n opacity: 0.5;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown {\n width: 100%;\n border: none;\n outline: none;\n margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown:disabled {\n cursor: not-allowed;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown:hover {\n background-color: var(--dropdown-bg-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown--left {\n min-width: 94px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .seperatorline {\n height: 26px;\n margin-top: 3px;\n border-right: 0.5px solid var(--brand-color);\n flex-shrink: 0;\n border-radius: 2px;\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown {\n border-color: var(--brand-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--filled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--disabled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label {\n color: var(--input-hover-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--filled {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--disabled {\n color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--error {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input {\n border-color: var(--brand-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--filled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--disabled {\n border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown {\n border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label {\n top: -9px;\n background-color: var(--input-label-bg-color);\n padding: 0px 2px;\n color: var(--input-active-text-color);\n line-height: 15px;\n font-size: 10px !important;\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label--error {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input {\n border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input--error {\n border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input::placeholder {\n opacity: 1;\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container {\n border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n top: -9px;\n background-color: var(--input-label-bg-color);\n padding: 0px 2px;\n line-height: 15px;\n font-size: 10px !important;\n}\n.ff-input-with-dropdown-container--filled span {\n font-size: 8px;\n}\n.ff-input-with-dropdown-container--filled .required-asterisk {\n color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-helper-text {\n color: var(--input-error-text-color);\n padding: 0 11px;\n}";
9068
+ styleInject(css_248z$P);
8995
9069
 
8996
9070
  const InputWithDropdown = /*#__PURE__*/forwardRef(({
8997
9071
  name = '',
@@ -9097,8 +9171,8 @@ const InputWithDropdown = /*#__PURE__*/forwardRef(({
9097
9171
  });
9098
9172
  });
9099
9173
 
9100
- var css_248z$N = ".ff-mini-modal-overlay {\n position: fixed;\n inset: 0;\n width: 100vw;\n height: 100vh;\n}\n\n.ff-mini-edit-modal-container {\n width: fit-content;\n padding: 0;\n position: absolute;\n visibility: hidden;\n}\n.ff-mini-edit-modal-container.modalVisible {\n visibility: visible;\n}\n.ff-mini-edit-modal-container.animatedModal {\n animation: slideDown 0.5s ease, opacity 0.5s ease;\n}\n.ff-mini-edit-modal-container .popover-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n z-index: 102;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top {\n bottom: 100%;\n left: 30px;\n padding: 0 3px 0 0;\n border-color: transparent transparent var(--ff-mini-modal-border) transparent;\n filter: drop-shadow(0 -1px 1px var(--ff-mini-modal-arrow-shadow));\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 4px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: -0.5px;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left {\n left: -15px;\n border-color: transparent var(--ff-mini-modal-border) transparent transparent;\n filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));\n padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left::before {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: 0;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom {\n top: 100%;\n left: 30px;\n border-color: var(--ff-mini-modal-border) transparent transparent transparent;\n filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));\n padding: 0 3px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: -2px;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right {\n right: -10px;\n top: 66px;\n border-color: transparent transparent transparent var(--ff-mini-modal-border);\n filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));\n padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: 0;\n left: -2px;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-top-arrow {\n top: 10%;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-middle-arrow {\n top: 45%;\n}\n.ff-mini-edit-modal-container .wrapped-div {\n height: 35px;\n background-color: transparent;\n outline: 8px solid var(--ff-mini-modal-border);\n outline-offset: -8px;\n position: absolute;\n top: -34px;\n border-radius: 7px 7px 0 0;\n}\n.ff-mini-edit-modal-container .wrapped-div::before, .ff-mini-edit-modal-container .wrapped-div::after {\n position: absolute;\n content: \"\";\n width: 13px;\n height: 13px;\n background: transparent;\n border-radius: 50%;\n bottom: 0;\n box-shadow: 8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .wrapped-div::before {\n left: -13px;\n clip-path: polygon(100% 100%, 110% 45%, 0% 70%, 0% 100%);\n}\n.ff-mini-edit-modal-container .wrapped-div::after {\n right: -13px;\n clip-path: polygon(-5% 100%, 0% 40%, 100% 70%, 100% 100%);\n box-shadow: -8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .mini-edit-modal {\n background: var(--ff-mini-modal-border);\n position: relative;\n max-height: fit-content;\n padding: 4px;\n width: 100%;\n margin: 0 0 0 -5px;\n height: 100%;\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-wrapper-shadow {\n box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-arrow-shadow {\n box-shadow: 0px 0px 16px 0px var(--ff-mini-modal-arrow-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal header {\n border-radius: 4px 4px 0 0;\n}\n.ff-mini-edit-modal-container .mini-edit-modal footer {\n border-radius: 0 0 4px 4px;\n}\n.ff-mini-edit-modal-container .mini-edit-modal .modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 5px;\n background-color: var(--ff-mini-modal-footer-background);\n height: 24px;\n padding: 0 10px 0 0;\n transition: transform 0.3s ease-in-out;\n}\n@keyframes slideDown {\n 0% {\n transform: translateY(-50px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n.ff-mini-modal-buttons-flex {\n display: flex;\n}\n\n.ff-mini-modal-gap-10 {\n gap: 10px;\n}\n\n.ff-mini-edit-model-icon {\n color: var(--ff-mini-modal-box-shadow);\n border: 2px solid var(--ff-mini-modal-box-shadow);\n border-radius: 4px;\n}";
9101
- styleInject(css_248z$N);
9174
+ var css_248z$O = ".ff-mini-modal-overlay {\n position: fixed;\n inset: 0;\n width: 100vw;\n height: 100vh;\n}\n\n.ff-mini-edit-modal-container {\n width: fit-content;\n padding: 0;\n position: absolute;\n visibility: hidden;\n}\n.ff-mini-edit-modal-container.modalVisible {\n visibility: visible;\n}\n.ff-mini-edit-modal-container.animatedModal {\n animation: slideDown 0.5s ease, opacity 0.5s ease;\n}\n.ff-mini-edit-modal-container .popover-arrow {\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n z-index: 102;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top {\n bottom: 100%;\n left: 30px;\n padding: 0 3px 0 0;\n border-color: transparent transparent var(--ff-mini-modal-border) transparent;\n filter: drop-shadow(0 -1px 1px var(--ff-mini-modal-arrow-shadow));\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 4px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: -0.5px;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left {\n left: -15px;\n border-color: transparent var(--ff-mini-modal-border) transparent transparent;\n filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));\n padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left::before {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: 0;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom {\n top: 100%;\n left: 30px;\n border-color: var(--ff-mini-modal-border) transparent transparent transparent;\n filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));\n padding: 0 3px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: -2px;\n left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right {\n right: -10px;\n top: 66px;\n border-color: transparent transparent transparent var(--ff-mini-modal-border);\n filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));\n padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right::before {\n content: \"\";\n position: absolute;\n width: 3px;\n height: 3px;\n border-radius: 50px;\n background-color: var(--ff-mini-modal-border);\n top: 0;\n left: -2px;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-top-arrow {\n top: 10%;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-middle-arrow {\n top: 45%;\n}\n.ff-mini-edit-modal-container .wrapped-div {\n height: 35px;\n background-color: transparent;\n outline: 8px solid var(--ff-mini-modal-border);\n outline-offset: -8px;\n position: absolute;\n top: -34px;\n border-radius: 7px 7px 0 0;\n}\n.ff-mini-edit-modal-container .wrapped-div::before, .ff-mini-edit-modal-container .wrapped-div::after {\n position: absolute;\n content: \"\";\n width: 13px;\n height: 13px;\n background: transparent;\n border-radius: 50%;\n bottom: 0;\n box-shadow: 8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .wrapped-div::before {\n left: -13px;\n clip-path: polygon(100% 100%, 110% 45%, 0% 70%, 0% 100%);\n}\n.ff-mini-edit-modal-container .wrapped-div::after {\n right: -13px;\n clip-path: polygon(-5% 100%, 0% 40%, 100% 70%, 100% 100%);\n box-shadow: -8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .mini-edit-modal {\n background: var(--ff-mini-modal-border);\n position: relative;\n max-height: fit-content;\n width: 100%;\n margin: 0 0 0 -5px;\n height: 100%;\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-wrapper-shadow {\n box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-arrow-shadow {\n box-shadow: 0px 0px 16px 0px var(--ff-mini-modal-arrow-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal header {\n border-radius: 4px 4px 0 0;\n}\n.ff-mini-edit-modal-container .mini-edit-modal footer {\n border-radius: 0 0 4px 4px;\n}\n.ff-mini-edit-modal-container .mini-edit-modal .modal-footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 5px;\n background-color: var(--ff-mini-modal-footer-background);\n height: 24px;\n padding: 0 10px 0 0;\n transition: transform 0.3s ease-in-out;\n}\n@keyframes slideDown {\n 0% {\n transform: translateY(-50px);\n opacity: 0;\n }\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n.ff-mini-modal-buttons-flex {\n display: flex;\n}\n\n.ff-mini-modal-gap-10 {\n gap: 10px;\n}\n\n.ff-mini-edit-model-icon {\n color: var(--ff-mini-modal-box-shadow);\n border: 2px solid var(--ff-mini-modal-box-shadow);\n border-radius: 4px;\n}";
9175
+ styleInject(css_248z$O);
9102
9176
 
9103
9177
  const MiniModal = /*#__PURE__*/forwardRef(({
9104
9178
  anchorRef,
@@ -9139,7 +9213,8 @@ const MiniModal = /*#__PURE__*/forwardRef(({
9139
9213
  zIndex: modalZIndex = 99,
9140
9214
  boxShadow: modalBoxShadow,
9141
9215
  left: modalLeft,
9142
- top: modalTop
9216
+ top: modalTop,
9217
+ padding: modalPadding
9143
9218
  } = modalProperties || {};
9144
9219
  const {
9145
9220
  left: popOverLeft,
@@ -9337,7 +9412,8 @@ const MiniModal = /*#__PURE__*/forwardRef(({
9337
9412
  height: `${modalHeight}px`,
9338
9413
  borderRadius: `${modalBorderRadius}px`,
9339
9414
  zIndex: `${modalZIndex}`,
9340
- boxShadow: `${modalBoxShadow ?? '0px 4px 8px var(--ff-mini-modal-arrow-shadow)'}`
9415
+ boxShadow: `${modalBoxShadow ?? '0px 4px 8px var(--ff-mini-modal-arrow-shadow)'}`,
9416
+ padding: `${modalPadding ?? 4}px`
9341
9417
  },
9342
9418
  children: [headerProps ? jsx(Typography, {
9343
9419
  as: "div",
@@ -9348,9 +9424,7 @@ const MiniModal = /*#__PURE__*/forwardRef(({
9348
9424
  as: "h2",
9349
9425
  children: "Header text"
9350
9426
  }), jsx("hr", {})]
9351
- }), jsx("div", {
9352
- children: childContent
9353
- }), footerContent ? jsx(Typography, {
9427
+ }), childContent, footerContent ? jsx(Typography, {
9354
9428
  as: "footer",
9355
9429
  children: footerContent
9356
9430
  }) : isIconModel ? jsx(Fragment, {}) : jsxs("footer", {
@@ -9372,29 +9446,44 @@ const MiniModal = /*#__PURE__*/forwardRef(({
9372
9446
  }), document.body);
9373
9447
  });
9374
9448
 
9375
- var css_248z$M = ".tree-table-space-block {\n display: inline-block;\n width: 20px;\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n display: table-row;\n}\n\n.btn-toggle.expand {\n cursor: pointer;\n}\n.btn-toggle.is-close {\n background: #f1f1f1;\n border: 1px solid transparent;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before {\n display: none;\n}\n.btn-toggle::after {\n display: none;\n}\n\n.tree-table-wrap {\n width: 100%;\n}\n\nthead {\n position: sticky;\n top: 12px;\n}\n\ntbody {\n overflow: scroll;\n}\n\n.tree-table {\n border: 1px solid #f1f1f1;\n table-layout: fixed;\n width: 100%;\n border-collapse: collapse;\n overflow: scroll;\n}\n.tree-table tr .table-tree-row-action {\n display: none;\n}\n.tree-table tr:hover {\n background-color: var(--hover-color);\n}\n.tree-table tr:hover .table-tree-row-action {\n display: inline-flex;\n align-items: center;\n}\n.tree-table th {\n color: var(--brand-color);\n text-align: center;\n padding: 10px 0;\n background: var(--slider-table-color);\n font-size: 13px;\n width: 400px;\n text-align: left;\n}\n.tree-table th:first-child {\n width: 400px;\n position: sticky;\n left: 0;\n}\n.tree-table td {\n font-size: 14px;\n color: var(--brand-color);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: left;\n height: 32px;\n}\n.tree-table td:first-child {\n overflow: initial;\n width: 400px;\n position: sticky;\n left: 0;\n background-color: white;\n}\n.tree-table td:first-child:hover {\n background-color: var(--hover-color);\n}\n.tree-table td .tree-table-space-block {\n border: 1px solid transparent;\n display: inline-block;\n width: 20px;\n height: 20px;\n line-height: 16px;\n text-align: center;\n vertical-align: top;\n font-size: 19px;\n position: relative;\n box-sizing: border-box;\n margin-top: 7px;\n border-radius: 50%;\n}\n.tree-table td .tree-table-space-block:first-child {\n margin-left: 7px;\n}\n.tree-table td .tree-table-space-block.btn-toggle {\n position: relative;\n cursor: pointer;\n width: 22px;\n height: 22px;\n z-index: 12;\n}\n.tree-table td .tree-table-space-block.btn-toggle::before {\n display: none;\n}\n.tree-table td .tree-table-space-block.last-block::before {\n display: none;\n}\n.tree-table td .tree-table-space-block.last-block::after {\n position: absolute;\n content: \"\";\n width: 12px;\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n left: -10px;\n}\n.tree-table td .tree-table-space-block.no-folder {\n width: 8px;\n}\n.tree-table td .tree-table-space-block.no-folder::after {\n position: absolute;\n content: \"\";\n width: 18px;\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n left: -10px;\n}\n.tree-table td .tree-table-space-block:not(.last-block)::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 40px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -12px;\n z-index: -1;\n}\n\n.tree-table-td-content {\n display: inline-flex;\n align-items: center;\n padding: 7px;\n font-size: 12px;\n font-family: \"Poppins\";\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n visibility: visible;\n}\n\n.tree-row-expanded svg,\n.tree-row-collapsed svg {\n height: 12px;\n width: 12px;\n}\n.tree-row-expanded svg path,\n.tree-row-collapsed svg path {\n fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n transform: rotate(-90deg);\n transition: all;\n}";
9376
- styleInject(css_248z$M);
9449
+ var css_248z$N = ".tree-table-space-block {\n display: inline-block;\n width: 20px;\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n display: table-row;\n}\n\n.btn-toggle.expand {\n cursor: pointer;\n}\n.btn-toggle.is-close {\n background: #f1f1f1;\n border: 1px solid transparent;\n box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before {\n display: none;\n}\n.btn-toggle::after {\n display: none;\n}\n\n.tree-table-wrap {\n width: 100%;\n}\n\nthead {\n position: sticky;\n top: 12px;\n}\n\ntbody {\n overflow: scroll;\n}\n\n.tree-table {\n border: 1px solid #f1f1f1;\n table-layout: fixed;\n width: 100%;\n border-collapse: collapse;\n overflow: scroll;\n}\n.tree-table tr .table-tree-row-action {\n display: none;\n}\n.tree-table tr:hover {\n background-color: var(--hover-color);\n}\n.tree-table tr:hover .table-tree-row-action {\n display: inline-flex;\n align-items: center;\n}\n.tree-table th {\n color: var(--brand-color);\n text-align: center;\n padding: 10px 0;\n background: var(--slider-table-color);\n font-size: 13px;\n width: 400px;\n text-align: left;\n}\n.tree-table th:first-child {\n width: 400px;\n position: sticky;\n left: 0;\n}\n.tree-table td {\n font-size: 14px;\n color: var(--brand-color);\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n text-align: left;\n height: 32px;\n}\n.tree-table td:first-child {\n overflow: initial;\n width: 400px;\n position: sticky;\n left: 0;\n background-color: white;\n}\n.tree-table td:first-child:hover {\n background-color: var(--hover-color);\n}\n.tree-table td .tree-table-space-block {\n border: 1px solid transparent;\n display: inline-block;\n width: 20px;\n height: 20px;\n line-height: 16px;\n text-align: center;\n vertical-align: top;\n font-size: 19px;\n position: relative;\n box-sizing: border-box;\n margin-top: 7px;\n border-radius: 50%;\n}\n.tree-table td .tree-table-space-block:first-child {\n margin-left: 7px;\n}\n.tree-table td .tree-table-space-block.btn-toggle {\n position: relative;\n cursor: pointer;\n width: 22px;\n height: 22px;\n z-index: 12;\n}\n.tree-table td .tree-table-space-block.btn-toggle::before {\n display: none;\n}\n.tree-table td .tree-table-space-block.last-block::before {\n display: none;\n}\n.tree-table td .tree-table-space-block.last-block::after {\n position: absolute;\n content: \"\";\n width: 12px;\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n left: -10px;\n}\n.tree-table td .tree-table-space-block.no-folder {\n width: 8px;\n}\n.tree-table td .tree-table-space-block.no-folder::after {\n position: absolute;\n content: \"\";\n width: 18px;\n height: 1px;\n background: var(--tree-connecting-lines-color);\n top: 50%;\n margin-top: -1px;\n left: -10px;\n}\n.tree-table td .tree-table-space-block:not(.last-block)::before {\n position: absolute;\n content: \"\";\n width: 1px;\n height: 40px;\n background: var(--tree-connecting-lines-color);\n left: 50%;\n top: -12px;\n z-index: -1;\n}\n\n.tree-table-td-content {\n display: inline-flex;\n align-items: center;\n padding: 7px;\n font-size: 12px;\n font-family: \"Poppins\";\n}\n\n.hidden {\n display: none;\n}\n\n.show {\n visibility: visible;\n}\n\n.tree-row-expanded svg,\n.tree-row-collapsed svg {\n height: 12px;\n width: 12px;\n}\n.tree-row-expanded svg path,\n.tree-row-collapsed svg path {\n fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n transform: rotate(-90deg);\n transition: all;\n}";
9450
+ styleInject(css_248z$N);
9451
+
9452
+ const TableHead = /*#__PURE__*/React__default.memo(({
9453
+ columnsData
9454
+ }) => {
9455
+ const hasDefaultValues = useMemo(() => columnsData.some(({
9456
+ defaultValue
9457
+ }) => !!defaultValue), [columnsData]);
9458
+ return jsxs("thead", {
9459
+ children: [jsx("tr", {
9460
+ children: columnsData.map(({
9461
+ name
9462
+ }) => jsx("th", {
9463
+ children: name
9464
+ }, name))
9465
+ }), hasDefaultValues && jsx("tr", {
9466
+ children: columnsData.map(({
9467
+ defaultValue,
9468
+ defaultActions
9469
+ }, index) => jsx("td", {
9470
+ children: defaultValue && jsxs("span", {
9471
+ className: "",
9472
+ children: [defaultValue, defaultActions && jsx("div", {
9473
+ className: "table-tree-row-action",
9474
+ children: defaultActions()
9475
+ })]
9476
+ })
9477
+ }, index))
9478
+ })]
9479
+ });
9480
+ });
9377
9481
 
9378
- // Helper to render spaces for levels
9379
9482
  const renderSpaces = level => Array.from({
9380
9483
  length: level
9381
9484
  }).map((_, i) => jsx("span", {
9382
9485
  className: "tree-table-space-block"
9383
9486
  }, i));
9384
- // Recursive function to get all child node IDs (including nested children)
9385
- const getAllChildIds = (nodeId, data) => {
9386
- let result = [nodeId];
9387
- // Traverse the tree and find children based on parentId
9388
- data.forEach(({
9389
- node
9390
- }) => {
9391
- if (node.parentId === nodeId) {
9392
- result = result.concat(getAllChildIds(node.id, data)); // Add children recursively
9393
- }
9394
- });
9395
- return result;
9396
- };
9397
- // Component: TableCell
9398
9487
  const TableCell = /*#__PURE__*/React__default.memo(({
9399
9488
  col,
9400
9489
  node,
@@ -9424,7 +9513,7 @@ const TableCell = /*#__PURE__*/React__default.memo(({
9424
9513
  children: col.actions(node)
9425
9514
  })]
9426
9515
  }));
9427
- // Component: TableRow
9516
+
9428
9517
  const TableRow = /*#__PURE__*/React__default.memo(({
9429
9518
  node,
9430
9519
  level,
@@ -9448,37 +9537,7 @@ const TableRow = /*#__PURE__*/React__default.memo(({
9448
9537
  onToggleExpand: onToggleExpand
9449
9538
  }, col.name))
9450
9539
  }));
9451
- // Component: TableHead
9452
- const TableHead = /*#__PURE__*/React__default.memo(({
9453
- columnsData
9454
- }) => {
9455
- const hasDefaultValues = useMemo(() => columnsData.some(({
9456
- defaultValue
9457
- }) => !!defaultValue), [columnsData]);
9458
- return jsxs("thead", {
9459
- children: [jsx("tr", {
9460
- children: columnsData.map(({
9461
- name
9462
- }) => jsx("th", {
9463
- children: name
9464
- }, name))
9465
- }), hasDefaultValues && jsx("tr", {
9466
- children: columnsData.map(({
9467
- defaultValue,
9468
- defaultActions
9469
- }, index) => jsx("td", {
9470
- children: defaultValue && jsxs("span", {
9471
- className: "",
9472
- children: [defaultValue, defaultActions && jsx("div", {
9473
- className: "table-tree-row-action",
9474
- children: defaultActions()
9475
- })]
9476
- })
9477
- }, index))
9478
- })]
9479
- });
9480
- });
9481
- // Component: TableBody
9540
+
9482
9541
  const TableBody = /*#__PURE__*/React__default.memo(({
9483
9542
  flattenedTreeData,
9484
9543
  columnsData,
@@ -9487,8 +9546,10 @@ const TableBody = /*#__PURE__*/React__default.memo(({
9487
9546
  onRowClick,
9488
9547
  onToggleExpand,
9489
9548
  onCheckBoxChange
9490
- }) => jsx("tbody", {
9491
- children: flattenedTreeData.map(({
9549
+ }) => jsxs("tbody", {
9550
+ children: [jsx("tr", {
9551
+ id: "ff-table-tree-first-node"
9552
+ }), flattenedTreeData?.map(({
9492
9553
  node,
9493
9554
  level
9494
9555
  }) => {
@@ -9502,9 +9563,26 @@ const TableBody = /*#__PURE__*/React__default.memo(({
9502
9563
  onToggleExpand: onToggleExpand,
9503
9564
  onCheckBoxChange: onCheckBoxChange
9504
9565
  }, node.id);
9505
- })
9566
+ }), jsx("tr", {
9567
+ id: "ff-table-tree-last-node"
9568
+ })]
9506
9569
  }));
9507
- // Component: TreeTable
9570
+
9571
+ const getAllChildIds = (nodeId, data) => {
9572
+ let result = [nodeId];
9573
+ // Traverse the tree and find children based on parentId
9574
+ data.forEach(({
9575
+ node
9576
+ }) => {
9577
+ if (node.parentId === nodeId) {
9578
+ result = result.concat(getAllChildIds(node.id, data)); // Add children recursively
9579
+ }
9580
+ });
9581
+ return result;
9582
+ };
9583
+
9584
+ const functionCheck = functionToCheck => !checkEmpty(functionToCheck) && functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
9585
+
9508
9586
  const TreeTable = ({
9509
9587
  treeData,
9510
9588
  columnsData,
@@ -9512,8 +9590,26 @@ const TreeTable = ({
9512
9590
  select = null,
9513
9591
  onChange,
9514
9592
  onClick,
9515
- onExpand
9593
+ onExpand,
9594
+ loadMore = () => {}
9516
9595
  }) => {
9596
+ useIntersectionObserver(['ff-table-tree-last-node'], {
9597
+ root: null,
9598
+ rootMargin: '0px',
9599
+ threshold: 0.1,
9600
+ onIntersect: entry => {
9601
+ if (entry.isIntersecting) {
9602
+ if (functionCheck(loadMore)) {
9603
+ let direction = 'up';
9604
+ if (entry.target.id === 'ff-table-tree-last-node') {
9605
+ direction = 'down';
9606
+ }
9607
+ loadMore(direction);
9608
+ }
9609
+ console.log('Element in view:', entry.target.id);
9610
+ }
9611
+ }
9612
+ });
9517
9613
  const handleToggleExpand = useCallback(node => onExpand?.(true, node?.id), [onExpand]);
9518
9614
  const handleCheckBoxChange = useCallback((type, node) => {
9519
9615
  const nodeId = node.id;
@@ -9550,9 +9646,10 @@ const TreeTable = ({
9550
9646
  })
9551
9647
  });
9552
9648
  };
9649
+ var TableTree = /*#__PURE__*/memo(TreeTable);
9553
9650
 
9554
- var css_248z$L = ":root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-tabs-container {\n box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row--default {\n display: flex;\n gap: 8px;\n border-radius: 8px 8px 0 0;\n padding: 6px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n border: none;\n background: none;\n padding: 0 4px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count {\n background-color: var(--input-default-label-color);\n color: var(--tab-bg-color);\n height: 12px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n font-weight: 600;\n padding: 0 2px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count--active {\n background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar {\n width: 100%;\n border-radius: 2px 2px 0 0;\n border-color: var(--input-default-label-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar--active {\n border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar {\n border-top: 2px solid var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar--active {\n border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count {\n background-color: var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count--active {\n background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.ff-tabs-container .ff-tab-row--capsule {\n display: flex;\n gap: 8px;\n border: 1px solid var(--tabs-border-color);\n border-radius: 8px;\n padding: 3px 4px;\n background-color: var(--tabs-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule {\n background: transparent;\n border: none;\n padding: 3px 4px;\n border-radius: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule.active {\n background-color: var(--tab-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule .ff-tab-bar {\n display: none;\n}\n.ff-tabs-container .ff-tab-row--no-border {\n border: none;\n}\n.ff-tabs-container .ff-tab-content {\n width: inherit;\n}";
9555
- styleInject(css_248z$L);
9651
+ var css_248z$M = ":root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-tabs-container {\n box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row--default {\n display: flex;\n gap: 8px;\n border-radius: 8px 8px 0 0;\n padding: 6px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n border: none;\n background: none;\n padding: 0 4px;\n display: flex;\n flex-direction: column;\n gap: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count {\n background-color: var(--input-default-label-color);\n color: var(--tab-bg-color);\n height: 12px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n font-weight: 600;\n padding: 0 2px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count--active {\n background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar {\n width: 100%;\n border-radius: 2px 2px 0 0;\n border-color: var(--input-default-label-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar--active {\n border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar {\n border-top: 2px solid var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar--active {\n border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count {\n background-color: var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count--active {\n background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default.disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.ff-tabs-container .ff-tab-row--capsule {\n display: flex;\n gap: 8px;\n border: 1px solid var(--tabs-border-color);\n border-radius: 8px;\n padding: 3px 4px;\n background-color: var(--tabs-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule {\n background: transparent;\n border: none;\n padding: 3px 4px;\n border-radius: 4px;\n cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label {\n color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label--active {\n color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule.active {\n background-color: var(--tab-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule .ff-tab-bar {\n display: none;\n}\n.ff-tabs-container .ff-tab-row--no-border {\n border: none;\n}\n.ff-tabs-container .ff-tab-content {\n width: inherit;\n}";
9652
+ styleInject(css_248z$M);
9556
9653
 
9557
9654
  const Tabs = ({
9558
9655
  variant = 'default',
@@ -9603,8 +9700,8 @@ const Tabs = ({
9603
9700
  });
9604
9701
  };
9605
9702
 
9606
- var css_248z$K = ".ff-highlight-bg {\n background-color: var(--text-bg-highlight);\n}";
9607
- styleInject(css_248z$K);
9703
+ var css_248z$L = ".ff-highlight-bg {\n background-color: var(--text-bg-highlight);\n}";
9704
+ styleInject(css_248z$L);
9608
9705
 
9609
9706
  // Function to escape special characters in the search term
9610
9707
  const escapeRegExp = text => {
@@ -9627,8 +9724,8 @@ const HighlightText = ({
9627
9724
  });
9628
9725
  };
9629
9726
 
9630
- var css_248z$J = ".fontXs, .ff-search-container .ff-search-input {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-search-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-search-container .ff-search-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 4px;\n}\n.ff-search-container .ff-search-icon:hover {\n background-color: var(--ff-search-field-hover-color);\n}\n.ff-search-container .ff-search-icon .ff-icon-container svg path {\n fill: var(--brand-color);\n}\n.ff-search-container .ff-search-input {\n border: none;\n color: var(--tooltip-bg-color);\n line-height: 12px;\n visibility: hidden;\n transition: width 0.4s ease;\n}\n.ff-search-container .ff-search-input:focus {\n outline: none;\n border: none;\n}\n.ff-search-container .ff-search-input:hover {\n border: none;\n}\n.ff-search-container.disabled {\n opacity: 0.5;\n}\n.ff-search-container.expanded {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-search-icon:hover {\n background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-vertical-line {\n height: 8px;\n width: 1px;\n border-radius: 1px;\n background-color: var(--border-color);\n}\n.ff-search-container.expanded .ff-search-input {\n visibility: visible;\n margin-left: 4px;\n}\n.ff-search-container.expanded .ff-search-input::placeholder {\n color: var(--ff-search-filed-placeholder-text);\n}\n.ff-search-container.expanded .ff-search-icon {\n border: none;\n cursor: default;\n margin-right: 4px;\n}\n.ff-search-container.expanded .ff-search-clear-button {\n display: grid;\n place-items: center;\n cursor: pointer;\n width: 22px;\n padding-top: 1px;\n}\n.ff-search-container.expanded .ff-search-close-icon {\n margin: 4px;\n cursor: pointer;\n}\n.ff-search-container.expanded .ff-search-close-icon .ff-icon-container svg path {\n fill: var(--ff-search-filed-close-Icon);\n}";
9631
- styleInject(css_248z$J);
9727
+ var css_248z$K = ".fontXs, .ff-search-container .ff-search-input {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-search-container {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-search-container .ff-search-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border-radius: 4px;\n}\n.ff-search-container .ff-search-icon:hover {\n background-color: var(--ff-search-field-hover-color);\n}\n.ff-search-container .ff-search-icon .ff-icon-container svg path {\n fill: var(--brand-color);\n}\n.ff-search-container .ff-search-input {\n border: none;\n color: var(--tooltip-bg-color);\n line-height: 12px;\n visibility: hidden;\n transition: width 0.4s ease;\n}\n.ff-search-container .ff-search-input:focus {\n outline: none;\n border: none;\n}\n.ff-search-container .ff-search-input:hover {\n border: none;\n}\n.ff-search-container.disabled {\n opacity: 0.5;\n}\n.ff-search-container.expanded {\n border: 1px solid var(--border-color);\n border-radius: 4px;\n background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-search-icon:hover {\n background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-vertical-line {\n height: 8px;\n width: 1px;\n border-radius: 1px;\n background-color: var(--border-color);\n}\n.ff-search-container.expanded .ff-search-input {\n visibility: visible;\n margin-left: 4px;\n}\n.ff-search-container.expanded .ff-search-input::placeholder {\n color: var(--ff-search-filed-placeholder-text);\n}\n.ff-search-container.expanded .ff-search-icon {\n border: none;\n cursor: default;\n margin-right: 4px;\n}\n.ff-search-container.expanded .ff-search-clear-button {\n display: grid;\n place-items: center;\n cursor: pointer;\n width: 22px;\n padding-top: 1px;\n}\n.ff-search-container.expanded .ff-search-close-icon {\n margin: 4px;\n cursor: pointer;\n}\n.ff-search-container.expanded .ff-search-close-icon .ff-icon-container svg path {\n fill: var(--ff-search-filed-close-Icon);\n}";
9728
+ styleInject(css_248z$K);
9632
9729
 
9633
9730
  const Search = ({
9634
9731
  placeholder = 'Search',
@@ -9673,6 +9770,12 @@ const Search = ({
9673
9770
  onExpand?.(!isExpand);
9674
9771
  }
9675
9772
  };
9773
+ const handleChange = data => {
9774
+ setSearchValue(data);
9775
+ if (data === '') {
9776
+ onSearch('');
9777
+ }
9778
+ };
9676
9779
  return jsxs("div", {
9677
9780
  className: classNames('ff-search-container', {
9678
9781
  expanded: isExpand,
@@ -9707,7 +9810,9 @@ const Search = ({
9707
9810
  disabled: disabled,
9708
9811
  ref: inputRef,
9709
9812
  autoComplete: "off",
9710
- onChange: e => setSearchValue(e.target.value),
9813
+ onChange: e => {
9814
+ handleChange(e.target.value);
9815
+ },
9711
9816
  onKeyDown: handleKeyDown
9712
9817
  }), isExpand && jsxs(Fragment, {
9713
9818
  children: [jsx("div", {
@@ -17649,8 +17754,8 @@ const TimePicker = ({
17649
17754
  });
17650
17755
  };
17651
17756
 
17652
- var css_248z$I = "@import 'react-day-picker/style.css';\n.fontXs, .ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n/* Custom date picker styling */\n.ff-date-picker {\n position: relative;\n}\n.ff-date-picker .rdp-root {\n --rdp-accent-color: var(--brand-color);\n --rdp-day-height: 24px;\n --rdp-day-width: 36px;\n --rdp-day_button-height: 24px;\n --rdp-day_button-width: 36px;\n font-family: \"Poppins\";\n font-size: 12px;\n --rdp-font-family: \"Poppins\", sans-serif;\n}\n.ff-date-picker .ff-cursor-pointer {\n cursor: pointer;\n}\n.ff-date-picker .ff-datepicker-input-container {\n display: flex;\n gap: 10px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n padding: 4px 8px;\n padding-left: 2rem;\n height: 32px;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n color: var(--status-skipped-text-color);\n line-height: 15px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input:focus,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input:focus {\n outline: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-calendar-icon,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-clock-icon {\n position: absolute;\n top: 50%;\n transform: translate(25%, -50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field {\n flex: 1;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input {\n width: 100%;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 12px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field {\n flex: 0 0 120px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field .ff-time-input {\n width: 100%;\n}\n.ff-date-picker .ff-date-picker-container {\n display: flex;\n flex-direction: column;\n position: absolute;\n border-radius: 8px;\n padding: 4px;\n box-sizing: border-box;\n background-color: var(--tab-bg-color);\n box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);\n gap: 8px;\n z-index: 10;\n}\n.ff-date-picker .ff-date-picker-container .ff-calendar-container {\n display: flex;\n align-items: flex-start;\n gap: 4px;\n height: 240px;\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls {\n padding: 4px;\n display: flex;\n justify-content: end;\n gap: 8px;\n border-top: 1px solid var(--border-color);\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls .ff-date-picker-button {\n font-weight: 600;\n line-height: 15px;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button {\n margin: 0 5px;\n border: 1px solid var(--border-color);\n background-color: var(--toggle-button-bg-color);\n box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);\n padding: 0px;\n border-radius: 30%;\n cursor: pointer;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button:disabled {\n cursor: auto;\n opacity: 0.5;\n}\n.ff-date-picker .ff-calendar .ff-calendar-haeder {\n display: flex;\n align-items: center;\n gap: 5px;\n color: var(--text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid,\n.ff-date-picker .ff-calendar .ff-custom-month_grid {\n width: calc((var(--rdp-day-width) + 4px) * 7);\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n padding: 5px;\n max-width: 100%;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month {\n padding: 10px 0;\n text-align: center;\n cursor: pointer;\n border-radius: 8px;\n background-color: #f9f9f9;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--selected {\n background-color: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--disabled,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--disabled,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--disabled {\n color: var(--text-color-light);\n cursor: default;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-month--selected, .ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-year--selected {\n background-color: var(--disable-color);\n}\n.ff-date-picker .ff-calendar .rdp-weekdays th {\n color: #6f7c8e;\n font-weight: 400;\n}\n.ff-date-picker .ff-calendar .rdp-day {\n padding: 2px;\n font-weight: 500;\n}\n.ff-date-picker .ff-calendar .rdp-day_button {\n border-radius: 4px;\n padding: 3px 9px;\n}\n.ff-date-picker .ff-calendar .rdp-day_button:hover {\n background-color: var(--hover-color);\n}\n.ff-date-picker .ff-calendar .rdp-selected {\n font: inherit;\n}\n.ff-date-picker .ff-calendar .rdp-selected .rdp-day_button {\n background: var(--rdp-accent-color);\n color: var(--drawer-footer-bg);\n border: none;\n}\n.ff-date-picker .ff-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n border: 2px solid var(--rdp-accent-color);\n}\n.ff-date-picker .ff-time-picker-container {\n position: relative;\n width: 150px;\n height: 100%;\n overflow-y: hidden;\n border-left: 1px solid #ccc;\n padding: 10px 5px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container::-webkit-scrollbar {\n display: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields {\n display: flex;\n height: 14%;\n width: 100%;\n margin-bottom: 5px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container {\n display: flex;\n border: 1px solid var(--border-color);\n border-right: 0;\n border-radius: 4px 0 0 4px;\n width: 55%;\n position: relative;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n border: none;\n padding: 5px;\n width: 100%;\n text-align: center;\n border-radius: 4px 0 0 4px;\n font-weight: 400;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input::placeholder {\n opacity: 0;\n line-height: 18px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input-label {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n transition: 0.2s ease all;\n color: var(--input-default-label-color);\n pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n border-color: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n border-color: var(--input-error-text-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n outline: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container {\n position: relative;\n width: 45%;\n display: flex;\n border: 1px solid var(--border-color);\n border-radius: 0 4px 4px 0;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-select {\n display: flex;\n align-items: center;\n padding: 0 5px;\n width: 100%;\n border-radius: 4px;\n background-color: white;\n cursor: pointer;\n border: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n border-color: var(--brand-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon {\n margin-left: auto;\n pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon svg path {\n fill: var(--default-icon-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover svg path {\n fill: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n position: fixed;\n z-index: 100;\n min-width: 60px;\n margin: 4px 0 0;\n padding: 0;\n list-style: none;\n border: 1px solid var(--ff-select-background-color);\n border-radius: 4px;\n background-color: var(--primary-button-text-color);\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item {\n padding: 8px;\n color: var(--text-color);\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item:hover {\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options {\n height: 86%;\n overflow-y: auto;\n padding-right: 5px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n background-color: var(--hover-color);\n border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options .ff-time-option {\n padding: 10px 12px;\n cursor: pointer;\n text-align: center;\n border-radius: 8px;\n background-color: rgb(249, 249, 249);\n margin: 10px 0;\n}";
17653
- styleInject(css_248z$I);
17757
+ var css_248z$J = "@import 'react-day-picker/style.css';\n.fontXs, .ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n/* Custom date picker styling */\n.ff-date-picker {\n position: relative;\n}\n.ff-date-picker .rdp-root {\n --rdp-accent-color: var(--brand-color);\n --rdp-day-height: 24px;\n --rdp-day-width: 36px;\n --rdp-day_button-height: 24px;\n --rdp-day_button-width: 36px;\n font-family: \"Poppins\";\n font-size: 12px;\n --rdp-font-family: \"Poppins\", sans-serif;\n}\n.ff-date-picker .ff-cursor-pointer {\n cursor: pointer;\n}\n.ff-date-picker .ff-datepicker-input-container {\n display: flex;\n gap: 10px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n padding: 4px 8px;\n padding-left: 2rem;\n height: 32px;\n border-radius: 5px;\n border: 1px solid var(--border-color);\n color: var(--status-skipped-text-color);\n line-height: 15px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input:focus,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input:focus {\n outline: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-calendar-icon,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-clock-icon {\n position: absolute;\n top: 50%;\n transform: translate(25%, -50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field {\n flex: 1;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input {\n width: 100%;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n padding: 0px 4px;\n margin-left: 8px;\n line-height: 12px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field {\n flex: 0 0 120px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field .ff-time-input {\n width: 100%;\n}\n.ff-date-picker .ff-date-picker-container {\n display: flex;\n flex-direction: column;\n position: absolute;\n border-radius: 8px;\n padding: 4px;\n box-sizing: border-box;\n background-color: var(--tab-bg-color);\n box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);\n gap: 8px;\n z-index: 10;\n}\n.ff-date-picker .ff-date-picker-container .ff-calendar-container {\n display: flex;\n align-items: flex-start;\n gap: 4px;\n height: 240px;\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls {\n padding: 4px;\n display: flex;\n justify-content: end;\n gap: 8px;\n border-top: 1px solid var(--border-color);\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls .ff-date-picker-button {\n font-weight: 600;\n line-height: 15px;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button {\n margin: 0 5px;\n border: 1px solid var(--border-color);\n background-color: var(--toggle-button-bg-color);\n box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);\n padding: 0px;\n border-radius: 30%;\n cursor: pointer;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button:disabled {\n cursor: auto;\n opacity: 0.5;\n}\n.ff-date-picker .ff-calendar .ff-calendar-haeder {\n display: flex;\n align-items: center;\n gap: 5px;\n color: var(--text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid,\n.ff-date-picker .ff-calendar .ff-custom-month_grid {\n width: calc((var(--rdp-day-width) + 4px) * 7);\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n padding: 5px;\n max-width: 100%;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month {\n padding: 10px 0;\n text-align: center;\n cursor: pointer;\n border-radius: 8px;\n background-color: #f9f9f9;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--selected {\n background-color: var(--brand-color);\n color: var(--primary-button-text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--disabled,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--disabled,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--disabled {\n color: var(--text-color-light);\n cursor: default;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-month--selected, .ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-year--selected {\n background-color: var(--disable-color);\n}\n.ff-date-picker .ff-calendar .rdp-weekdays th {\n color: #6f7c8e;\n font-weight: 400;\n}\n.ff-date-picker .ff-calendar .rdp-day {\n padding: 2px;\n font-weight: 500;\n}\n.ff-date-picker .ff-calendar .rdp-day_button {\n border-radius: 4px;\n padding: 3px 9px;\n}\n.ff-date-picker .ff-calendar .rdp-day_button:hover {\n background-color: var(--hover-color);\n}\n.ff-date-picker .ff-calendar .rdp-selected {\n font: inherit;\n}\n.ff-date-picker .ff-calendar .rdp-selected .rdp-day_button {\n background: var(--rdp-accent-color);\n color: var(--drawer-footer-bg);\n border: none;\n}\n.ff-date-picker .ff-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n border: 2px solid var(--rdp-accent-color);\n}\n.ff-date-picker .ff-time-picker-container {\n position: relative;\n width: 150px;\n height: 100%;\n overflow-y: hidden;\n border-left: 1px solid #ccc;\n padding: 10px 5px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container::-webkit-scrollbar {\n display: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields {\n display: flex;\n height: 14%;\n width: 100%;\n margin-bottom: 5px;\n box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container {\n display: flex;\n border: 1px solid var(--border-color);\n border-right: 0;\n border-radius: 4px 0 0 4px;\n width: 55%;\n position: relative;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n border: none;\n padding: 5px;\n width: 100%;\n text-align: center;\n border-radius: 4px 0 0 4px;\n font-weight: 400;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input::placeholder {\n opacity: 0;\n line-height: 18px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input-label {\n position: absolute;\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n transition: 0.2s ease all;\n color: var(--input-default-label-color);\n pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n border-color: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label {\n top: 0;\n left: 5px;\n color: var(--brand-color);\n background-color: var(--input-label-bg-color);\n line-height: 12px;\n padding: 0 2px;\n font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label--danger {\n color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input::placeholder {\n opacity: 1;\n margin-bottom: 1px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n border-color: var(--input-error-text-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n outline: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container {\n position: relative;\n width: 45%;\n display: flex;\n border: 1px solid var(--border-color);\n border-radius: 0 4px 4px 0;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-select {\n display: flex;\n align-items: center;\n padding: 0 5px;\n width: 100%;\n border-radius: 4px;\n background-color: white;\n cursor: pointer;\n border: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n border-color: var(--brand-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon {\n margin-left: auto;\n pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon svg path {\n fill: var(--default-icon-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover svg path {\n fill: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n position: fixed;\n z-index: 100;\n min-width: 60px;\n margin: 4px 0 0;\n padding: 0;\n list-style: none;\n border: 1px solid var(--ff-select-background-color);\n border-radius: 4px;\n background-color: var(--primary-button-text-color);\n box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item {\n padding: 8px;\n color: var(--text-color);\n border-radius: 4px;\n cursor: pointer;\n transition: background-color 0.2s ease;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item:hover {\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options {\n height: 86%;\n overflow-y: auto;\n padding-right: 5px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n background-color: var(--hover-color);\n border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options .ff-time-option {\n padding: 10px 12px;\n cursor: pointer;\n text-align: center;\n border-radius: 8px;\n background-color: rgb(249, 249, 249);\n margin: 10px 0;\n}";
17758
+ styleInject(css_248z$J);
17654
17759
 
17655
17760
  const CustomDatePicker = ({
17656
17761
  minDate,
@@ -18225,8 +18330,8 @@ const StateDropdown = ({
18225
18330
  });
18226
18331
  };
18227
18332
 
18228
- var css_248z$H = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-plus-icon {\n border-radius: 16px;\n border-style: none;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 8px;\n background-color: var(--hover-color);\n padding: 2px 8px 2px 2px;\n border: 1px solid var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon {\n width: 20px;\n height: 20px;\n border: 1px solid var(--primary-icon-color);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon .ff-icon-color path {\n color: var(--primary-icon-color);\n}\n.ff-plus-icon .icon-name {\n color: var(--secondary-icon-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-plus-icon:hover {\n border: 1px solid transparent;\n background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon:hover .icon-name {\n font-weight: 600;\n color: var(--primary-icon-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-plus-icon:hover .button-icon {\n width: 20px;\n height: 20px;\n border: 1px solid transparent;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n background-color: var(--hover-color);\n}\n.ff-plus-icon:hover .button-icon .ff-icon-color path {\n color: var(--secondary-icon-color);\n}";
18229
- styleInject(css_248z$H);
18333
+ var css_248z$I = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-plus-icon {\n border-radius: 16px;\n border-style: none;\n text-align: center;\n text-decoration: none;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 8px;\n background-color: var(--hover-color);\n padding: 2px 8px 2px 2px;\n border: 1px solid var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon {\n width: 20px;\n height: 20px;\n border: 1px solid var(--primary-icon-color);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon .ff-icon-color path {\n color: var(--primary-icon-color);\n}\n.ff-plus-icon .icon-name {\n color: var(--secondary-icon-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-plus-icon:hover {\n border: 1px solid transparent;\n background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon:hover .icon-name {\n font-weight: 600;\n color: var(--primary-icon-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-plus-icon:hover .button-icon {\n width: 20px;\n height: 20px;\n border: 1px solid transparent;\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n background-color: var(--hover-color);\n}\n.ff-plus-icon:hover .button-icon .ff-icon-color path {\n color: var(--secondary-icon-color);\n}";
18334
+ styleInject(css_248z$I);
18230
18335
 
18231
18336
  const IconButton = /*#__PURE__*/forwardRef(({
18232
18337
  label,
@@ -18255,8 +18360,8 @@ const IconButton = /*#__PURE__*/forwardRef(({
18255
18360
  });
18256
18361
  });
18257
18362
 
18258
- var css_248z$G = ".ff-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--modal-background-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n flex-direction: column;\n}\n\n.ff-modal-container {\n border-radius: 8px;\n overflow: hidden;\n}\n\n.ff-modal-content {\n background: var(--ff-mini-modal-border);\n position: relative;\n max-width: 100%;\n padding: 16px;\n}\n.ff-modal-content .ff-modal-header {\n height: 32px;\n width: 100%;\n}\n\n.modal-bottom-border {\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n}\n\n.modal-top-border {\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n}\n\n.ff-modal-footer {\n background-color: var(--expandable-menu-option-bg);\n max-width: 100%;\n width: 100%;\n height: 32px;\n display: flex;\n flex-direction: row;\n justify-content: end;\n align-items: center;\n gap: 8px;\n padding: 4px 16px;\n}";
18259
- styleInject(css_248z$G);
18363
+ var css_248z$H = ".ff-modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--modal-background-color);\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n flex-direction: column;\n}\n\n.ff-modal-container {\n border-radius: 8px;\n overflow: hidden;\n}\n\n.ff-modal-content {\n background: var(--ff-mini-modal-border);\n position: relative;\n max-width: 100%;\n padding: 16px;\n}\n.ff-modal-content .ff-modal-header {\n height: 32px;\n width: 100%;\n}\n\n.modal-bottom-border {\n border-bottom-left-radius: 8px;\n border-bottom-right-radius: 8px;\n}\n\n.modal-top-border {\n border-top-left-radius: 8px;\n border-top-right-radius: 8px;\n}\n\n.ff-modal-footer {\n background-color: var(--expandable-menu-option-bg);\n max-width: 100%;\n width: 100%;\n height: 32px;\n display: flex;\n flex-direction: row;\n justify-content: end;\n align-items: center;\n gap: 8px;\n padding: 4px 16px;\n}";
18364
+ styleInject(css_248z$H);
18260
18365
 
18261
18366
  const Modal = ({
18262
18367
  isOpen,
@@ -22952,8 +23057,8 @@ const DragAndDrop = {
22952
23057
  DNDUtilities
22953
23058
  };
22954
23059
 
22955
- var css_248z$F = ".ff_variable_input_container .ff_label_container {\n display: flex;\n align-items: center;\n margin-bottom: 4px;\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_input_label {\n color: var(--error);\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_required_asterisk {\n color: var(--error);\n}\n.ff_variable_input_container .ff_required_asterisk {\n color: var(--input-error-text-color);\n font-size: 1.1em;\n margin-right: 4px;\n}\n.ff_variable_input_container .ff_input_label {\n font-size: 14px;\n font-weight: 500;\n color: var(--text-color);\n}\n.ff_variable_input_container .ff_input_label.ff_no_hover {\n color: var(--toggle-disable-icon-color);\n}\n.ff_variable_input_container .ff_input_label.ff_disabled_label {\n color: var(--toggle-disable-icon-color);\n cursor: not-allowed;\n}\n.ff_variable_input_container .ff_input_label.ff_danger_label {\n color: var(--error);\n}\n.ff_variable_input_container .ff_content_editable {\n min-width: 8rem;\n border: 1px solid var(--input-default-border-color);\n padding: 8px;\n min-height: 30px;\n border-radius: 4px;\n font-size: 14px;\n line-height: 20px;\n transition: border-color 0.2s ease;\n position: relative;\n text-align: left;\n display: flex;\n align-items: center;\n overflow: auto;\n}\n.ff_variable_input_container .ff_content_editable .ff_var_red {\n color: var(--status-rejected-text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_def_color {\n color: var(--text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_green {\n color: var(--status-success-text-color);\n}\n.ff_variable_input_container .ff_content_editable::after {\n content: \"*\";\n color: var(--input-error-text-color);\n font-size: 1.2em;\n position: absolute;\n top: 2px;\n right: 2px;\n display: none;\n}\n.ff_variable_input_container .ff_content_editable.ff_required::after {\n display: inline;\n}\n.ff_variable_input_container .ff_content_editable.ff_required_empty:focus-within, .ff_variable_input_container .ff_content_editable.ff_required_empty:focus {\n border-color: var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_content_editable:empty::before {\n content: attr(data-placeholder);\n color: var(--ff-search-filed-placeholder-text);\n position: absolute;\n user-select: none;\n pointer-events: none;\n font-size: medium;\n}\n.ff_variable_input_container .ff_content_editable.ff_disabled {\n pointer-events: none;\n opacity: 0.5;\n background-color: var(--input-default-border-color);\n}\n.ff_variable_input_container .ff_content_editable.ff_invalid_input {\n border: 1px solid var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_suggestions {\n border: 1px solid var(--input-default-border-color);\n margin-top: 4px;\n padding: 4px;\n border-radius: 4px;\n list-style-type: none;\n background-color: var(--ff-select-background-color);\n max-height: 150px;\n overflow-y: auto;\n}\n.ff_variable_input_container .ff_suggestion_item {\n padding: 4px;\n cursor: pointer;\n}\n.ff_variable_input_container .ff_suggestion_item:hover {\n background-color: var(--ff-select-background-color);\n}";
22956
- styleInject(css_248z$F);
23060
+ var css_248z$G = ".ff_variable_input_container .ff_label_container {\n display: flex;\n align-items: center;\n margin-bottom: 4px;\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_input_label {\n color: var(--error);\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_required_asterisk {\n color: var(--error);\n}\n.ff_variable_input_container .ff_required_asterisk {\n color: var(--input-error-text-color);\n font-size: 1.1em;\n margin-right: 4px;\n}\n.ff_variable_input_container .ff_input_label {\n font-size: 14px;\n font-weight: 500;\n color: var(--text-color);\n}\n.ff_variable_input_container .ff_input_label.ff_no_hover {\n color: var(--toggle-disable-icon-color);\n}\n.ff_variable_input_container .ff_input_label.ff_disabled_label {\n color: var(--toggle-disable-icon-color);\n cursor: not-allowed;\n}\n.ff_variable_input_container .ff_input_label.ff_danger_label {\n color: var(--error);\n}\n.ff_variable_input_container .ff_content_editable {\n min-width: 8rem;\n border: 1px solid var(--input-default-border-color);\n padding: 8px;\n min-height: 30px;\n border-radius: 4px;\n font-size: 14px;\n line-height: 20px;\n transition: border-color 0.2s ease;\n position: relative;\n text-align: left;\n display: flex;\n align-items: center;\n overflow: auto;\n}\n.ff_variable_input_container .ff_content_editable .ff_var_red {\n color: var(--status-rejected-text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_def_color {\n color: var(--text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_green {\n color: var(--status-success-text-color);\n}\n.ff_variable_input_container .ff_content_editable::after {\n content: \"*\";\n color: var(--input-error-text-color);\n font-size: 1.2em;\n position: absolute;\n top: 2px;\n right: 2px;\n display: none;\n}\n.ff_variable_input_container .ff_content_editable.ff_required::after {\n display: inline;\n}\n.ff_variable_input_container .ff_content_editable.ff_required_empty:focus-within, .ff_variable_input_container .ff_content_editable.ff_required_empty:focus {\n border-color: var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_content_editable:empty::before {\n content: attr(data-placeholder);\n color: var(--ff-search-filed-placeholder-text);\n position: absolute;\n user-select: none;\n pointer-events: none;\n font-size: medium;\n}\n.ff_variable_input_container .ff_content_editable.ff_disabled {\n pointer-events: none;\n opacity: 0.5;\n background-color: var(--input-default-border-color);\n}\n.ff_variable_input_container .ff_content_editable.ff_invalid_input {\n border: 1px solid var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_suggestions {\n border: 1px solid var(--input-default-border-color);\n margin-top: 4px;\n padding: 4px;\n border-radius: 4px;\n list-style-type: none;\n background-color: var(--ff-select-background-color);\n max-height: 150px;\n overflow-y: auto;\n}\n.ff_variable_input_container .ff_suggestion_item {\n padding: 4px;\n cursor: pointer;\n}\n.ff_variable_input_container .ff_suggestion_item:hover {\n background-color: var(--ff-select-background-color);\n}";
23061
+ styleInject(css_248z$G);
22957
23062
 
22958
23063
  const VariableInput = ({
22959
23064
  type = 'url',
@@ -23231,8 +23336,8 @@ const VariableInput = ({
23231
23336
  });
23232
23337
  };
23233
23338
 
23234
- var css_248z$E = ".ff-all-project {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n}\n.ff-all-project .ff-all-project-dropdown {\n width: fit-content;\n border-radius: 16px;\n color: var(--expandable-menu-default-bg);\n line-height: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n padding: 3px;\n cursor: pointer;\n}\n.ff-all-project .ff-all-project-dropdown--selected {\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n}\n.ff-all-project .ff-all-project-dropdown--selected .ff-all-project-container {\n border-radius: 20px;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label {\n position: relative;\n white-space: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label:hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label::after {\n content: \"\";\n position: absolute;\n top: 20px;\n left: 0%;\n width: 0%;\n height: 2px;\n background-color: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container {\n display: flex;\n padding: 4px;\n gap: 4px;\n justify-content: center;\n text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container .label-icon {\n height: 16px;\n width: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-all-project .ff-projects-dropdown {\n width: 202px;\n position: absolute;\n top: 50px;\n padding: 1px;\n border: 0.5px solid var(--expandable-menu-default-bg);\n border-radius: 4px;\n background-color: var(--secondary-icon-color);\n color: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search {\n width: 100%;\n margin-bottom: 1px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input {\n height: 30px;\n width: inherit;\n border-radius: 4px;\n border-style: none;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input::placeholder {\n padding-left: 28px;\n font-size: 8px;\n line-height: 12px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search span {\n position: absolute;\n top: 11px;\n left: 8px;\n}\n.ff-all-project .ff-projects-dropdown .scroll {\n max-height: 150px;\n overflow-x: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar {\n width: 2px;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar-thumb {\n background: var(--primary-icon-color);\n border-radius: 2px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n height: 24px;\n width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons svg path {\n fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover {\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover svg path {\n fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n height: 24px;\n width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons svg path {\n fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover {\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover svg path {\n fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n border-radius: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option .ff-projects-icons svg path {\n fill: var(--secondary-icon-color);\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}";
23235
- styleInject(css_248z$E);
23339
+ var css_248z$F = ".ff-all-project {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n}\n.ff-all-project .ff-all-project-dropdown {\n width: fit-content;\n border-radius: 16px;\n color: var(--expandable-menu-default-bg);\n line-height: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n padding: 3px;\n cursor: pointer;\n}\n.ff-all-project .ff-all-project-dropdown--selected {\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n}\n.ff-all-project .ff-all-project-dropdown--selected .ff-all-project-container {\n border-radius: 20px;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label {\n position: relative;\n white-space: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label:hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label::after {\n content: \"\";\n position: absolute;\n top: 20px;\n left: 0%;\n width: 0%;\n height: 2px;\n background-color: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container {\n display: flex;\n padding: 4px;\n gap: 4px;\n justify-content: center;\n text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container .label-icon {\n height: 16px;\n width: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-all-project .ff-projects-dropdown {\n width: 202px;\n position: absolute;\n top: 50px;\n padding: 1px;\n border: 0.5px solid var(--expandable-menu-default-bg);\n border-radius: 4px;\n background-color: var(--secondary-icon-color);\n color: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search {\n width: 100%;\n margin-bottom: 1px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input {\n height: 30px;\n width: inherit;\n border-radius: 4px;\n border-style: none;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input::placeholder {\n padding-left: 28px;\n font-size: 8px;\n line-height: 12px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search span {\n position: absolute;\n top: 11px;\n left: 8px;\n}\n.ff-all-project .ff-projects-dropdown .scroll {\n max-height: 150px;\n overflow-x: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar {\n width: 2px;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar-thumb {\n background: var(--primary-icon-color);\n border-radius: 2px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n height: 24px;\n width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons svg path {\n fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover {\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover svg path {\n fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n height: 24px;\n width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons svg path {\n fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover {\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover svg path {\n fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: flex-start;\n gap: 4px;\n background-color: var(--primary-icon-color);\n color: var(--secondary-icon-color);\n border-radius: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option .ff-projects-icons svg path {\n fill: var(--secondary-icon-color);\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}";
23340
+ styleInject(css_248z$F);
23236
23341
 
23237
23342
  const AllProjectsDropdown = ({
23238
23343
  onClick = () => {},
@@ -23367,8 +23472,8 @@ const AllProjectsDropdown = ({
23367
23472
  });
23368
23473
  };
23369
23474
 
23370
- var css_248z$D = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-pie-chart-container .ff-pie-chart-tooltip {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-pie-chart-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n font-size: var(--fontSize);\n}\n.ff-pie-chart-container .ff-pie-chart-border {\n display: inline-block;\n border: 2px solid var(--pie-chart-border-color);\n border-radius: 50%;\n}\n.ff-pie-chart-container .ff-pie-chart-tooltip {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -100%);\n padding: 8px;\n border-radius: 4px;\n background-color: var(--tooltip-bg-color);\n color: var(--primary-icon-color);\n font-weight: 400;\n pointer-events: none;\n}\n.ff-pie-chart-container .ff-pie-chart-legend {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-value {\n color: var(--drawer-title-color);\n}";
23371
- styleInject(css_248z$D);
23475
+ var css_248z$E = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-pie-chart-container .ff-pie-chart-tooltip {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-pie-chart-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n font-size: var(--fontSize);\n}\n.ff-pie-chart-container .ff-pie-chart-border {\n display: inline-block;\n border: 2px solid var(--pie-chart-border-color);\n border-radius: 50%;\n}\n.ff-pie-chart-container .ff-pie-chart-tooltip {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -100%);\n padding: 8px;\n border-radius: 4px;\n background-color: var(--tooltip-bg-color);\n color: var(--primary-icon-color);\n font-weight: 400;\n pointer-events: none;\n}\n.ff-pie-chart-container .ff-pie-chart-legend {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 16px;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-value {\n color: var(--drawer-title-color);\n}";
23476
+ styleInject(css_248z$E);
23372
23477
 
23373
23478
  const calculateArc$3 = ({
23374
23479
  x,
@@ -23522,8 +23627,8 @@ const PieChart = ({
23522
23627
  });
23523
23628
  };
23524
23629
 
23525
- var css_248z$C = ".ff-app-header-main {\n display: flex;\n}\n.ff-app-header-main .ff-app-header {\n display: flex;\n flex-basis: 100%;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding: 5px;\n z-index: 1000;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n display: flex;\n align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n margin-left: 8px;\n padding: 7px;\n color: var(--ff-header-text-color);\n cursor: pointer;\n display: flex;\n position: relative;\n flex: 1 1 auto;\n overflow: hidden;\n transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n max-width: 100px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n background: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n white-space: nowrap;\n align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n padding: 3px;\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n flex-grow: 12; /* Increase size on hover */\n max-width: 550px;\n opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n color: var(--ff-header-submenu-text-color);\n align-content: center;\n position: relative;\n white-space: nowrap;\n padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 20%;\n width: 70%;\n height: 2px;\n border-radius: 4px;\n box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n display: flex;\n align-items: center;\n overflow: hidden;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n margin-right: 6px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n background: var(--brand-color);\n border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n width: 40px;\n display: flex;\n justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n height: 24px;\n padding: 8px;\n align-content: center;\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}\n@keyframes quickmenu-expand {\n from {\n max-height: 0;\n opacity: 0;\n }\n to {\n max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n opacity: 1;\n }\n}\n@keyframes quickmenu-collapse {\n from {\n max-height: 500px;\n opacity: 1;\n }\n to {\n max-height: 0;\n opacity: 0;\n }\n}";
23526
- styleInject(css_248z$C);
23630
+ var css_248z$D = ".ff-app-header-main {\n display: flex;\n}\n.ff-app-header-main .ff-app-header {\n display: flex;\n flex-basis: 100%;\n justify-content: space-between;\n background-color: var(--brand-color);\n padding-left: 8px;\n height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n padding: 4px;\n height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--brand-color);\n transform: translateY(12px);\n border-radius: 20px;\n padding: 5px;\n z-index: 1000;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n display: flex;\n align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n margin-left: 8px;\n padding: 7px;\n color: var(--ff-header-text-color);\n cursor: pointer;\n display: flex;\n position: relative;\n flex: 1 1 auto;\n overflow: hidden;\n transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n max-width: 100px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n background: var(--ff-app-header-menu-border-bottom-color);\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n white-space: nowrap;\n align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n padding: 3px;\n background-color: var(--primary-icon-color);\n border-radius: 20px;\n flex-grow: 12; /* Increase size on hover */\n max-width: 550px;\n opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n border-radius: 20px;\n padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n color: var(--ff-header-submenu-text-color);\n align-content: center;\n position: relative;\n white-space: nowrap;\n padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 25%;\n width: 0%;\n height: 2px;\n border-radius: 4px;\n transition: width 0.15s ease-in-out;\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n content: \"\";\n position: absolute;\n bottom: 0;\n left: 20%;\n width: 70%;\n height: 2px;\n border-radius: 4px;\n box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n display: flex;\n align-items: center;\n overflow: hidden;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n margin-right: 6px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n background: var(--brand-color);\n border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n width: 40px;\n display: flex;\n justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n height: 24px;\n padding: 8px;\n align-content: center;\n}\n\n@keyframes oscillate-border-width {\n 0% {\n width: 50%;\n left: 25%;\n }\n 50% {\n width: 70%;\n left: 15%;\n }\n 100% {\n width: 50%;\n left: 25%;\n }\n}\n@keyframes quickmenu-expand {\n from {\n max-height: 0;\n opacity: 0;\n }\n to {\n max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n opacity: 1;\n }\n}\n@keyframes quickmenu-collapse {\n from {\n max-height: 500px;\n opacity: 1;\n }\n to {\n max-height: 0;\n opacity: 0;\n }\n}";
23631
+ styleInject(css_248z$D);
23527
23632
 
23528
23633
  const AppHeader = ({
23529
23634
  logoIconName = 'fireflink_icon',
@@ -23662,8 +23767,8 @@ const AppHeader = ({
23662
23767
  });
23663
23768
  };
23664
23769
 
23665
- var css_248z$B = ".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}";
23666
- styleInject(css_248z$B);
23770
+ var css_248z$C = ".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}";
23771
+ styleInject(css_248z$C);
23667
23772
 
23668
23773
  const Paper = ({
23669
23774
  children,
@@ -23679,8 +23784,8 @@ const Paper = ({
23679
23784
  });
23680
23785
  };
23681
23786
 
23682
- var css_248z$A = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n display: flex;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n flex-direction: row-reverse;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg {\n display: block;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n position: absolute;\n padding: 5px;\n border-radius: 4px;\n pointer-events: none;\n background-color: var(--tooltip-bg-color);\n color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n display: grid;\n grid-auto-rows: 1fr;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend {\n grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend.ff-side-legend {\n grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend .ff-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n grid-template-columns: repeat(2, 130px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n display: flex;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--tooltip-text-color);\n border-radius: 15px;\n min-width: 25px;\n height: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend {\n grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend.ff-side-legend {\n grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend .ff-legend-item {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n overflow: hidden;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n margin-left: 1rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table {\n width: 100%;\n min-width: 300px;\n border-collapse: collapse;\n text-align: left;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header {\n font-weight: bold;\n background-color: var(--tabs-bg-color);\n color: var(--input-hover-border-color);\n padding: 0.5rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n text-align: right;\n padding-right: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:nth-last-child(2) {\n width: 58px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--tooltip-text-color);\n border-radius: 1rem;\n min-width: 22px;\n height: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n padding: 0.5rem;\n color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count:last-child {\n padding-right: 22px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n display: flex;\n align-items: baseline;\n gap: 5px;\n color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n text-align: right;\n}";
23683
- styleInject(css_248z$A);
23787
+ var css_248z$B = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n display: flex;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n flex-direction: row-reverse;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg {\n display: block;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n position: absolute;\n padding: 5px;\n border-radius: 4px;\n pointer-events: none;\n background-color: var(--tooltip-bg-color);\n color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n display: grid;\n grid-auto-rows: 1fr;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend {\n grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend.ff-side-legend {\n grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend .ff-legend-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n grid-template-columns: repeat(2, 130px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n display: flex;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--tooltip-text-color);\n border-radius: 15px;\n min-width: 25px;\n height: 18px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend {\n grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend.ff-side-legend {\n grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend .ff-legend-item {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n overflow: hidden;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n margin-left: 1rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table {\n width: 100%;\n min-width: 300px;\n border-collapse: collapse;\n text-align: left;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header {\n font-weight: bold;\n background-color: var(--tabs-bg-color);\n color: var(--input-hover-border-color);\n padding: 0.5rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n text-align: right;\n padding-right: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:nth-last-child(2) {\n width: 58px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-capsule {\n background-color: var(--status-success-text-color);\n color: var(--tooltip-text-color);\n border-radius: 1rem;\n min-width: 22px;\n height: 16px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n padding: 0.5rem;\n color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count:last-child {\n padding-right: 22px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n display: flex;\n align-items: baseline;\n gap: 5px;\n color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n text-align: right;\n}";
23788
+ styleInject(css_248z$B);
23684
23789
 
23685
23790
  const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
23686
23791
  const startX = x + radius * Math.cos(startAngle);
@@ -25791,8 +25896,8 @@ var RecaptchaWrapper = makeAsyncScript(getURL, {
25791
25896
  } : {}
25792
25897
  })(ReCAPTCHA);
25793
25898
 
25794
- var css_248z$z = ".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}";
25795
- styleInject(css_248z$z);
25899
+ var css_248z$A = ".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}";
25900
+ styleInject(css_248z$A);
25796
25901
 
25797
25902
  const Recaptcha = /*#__PURE__*/forwardRef(({
25798
25903
  onVerify,
@@ -25835,8 +25940,8 @@ const nlpDropdownDefaultCSSData = {
25835
25940
  dropDownWrapperPadding: 0
25836
25941
  };
25837
25942
 
25838
- var css_248z$y = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper {\n max-height: 160px;\n z-index: 100;\n position: absolute;\n min-width: 100px;\n border: 1px solid var(--ff-select-option-border-color);\n box-sizing: border-box;\n margin-top: 4px;\n border-radius: 4px;\n background-color: var(--ff-select-background-color);\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n overflow: hidden auto;\n display: flex;\n justify-content: space-between;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-wrapper1 {\n max-height: 160px;\n z-index: 100;\n min-width: auto;\n box-sizing: border-box;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar {\n width: 4px;\n height: 12px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-thumb {\n background-color: var(--ff-select-scroll-thumb-color);\n border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-track {\n background-color: transparent;\n border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option {\n width: calc(100% - 18px);\n border: 1px solid transparent;\n border-radius: 4px;\n padding: 0px 8px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: pointer;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option:hover {\n border-color: var(--ff-select-background-color);\n background-color: var(--ff-select-option-hover-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-no-option {\n width: calc(100% - 16px);\n margin: 0;\n overflow: hidden;\n padding: 0px 8px;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: not-allowed;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data {\n width: 200px;\n height: 134px;\n border: 1px solid transparent;\n border-radius: 5px;\n box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n overflow: scroll;\n}";
25839
- styleInject(css_248z$y);
25943
+ var css_248z$z = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-nlp-option {\n color: var(--nlp-option-color);\n display: flex;\n gap: 4px;\n align-items: center;\n}\n\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper {\n max-height: 256px;\n z-index: 100;\n position: absolute;\n border: 1px solid var(--nlp-border-color);\n box-sizing: border-box;\n margin-top: 4px;\n border-radius: 4px;\n background-color: var(--primary-icon-color);\n overflow: hidden auto;\n display: flex;\n justify-content: space-between;\n overflow: hidden;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-primary-wrapper {\n max-height: 240px;\n z-index: 100;\n min-width: 290px;\n box-sizing: border-box;\n overflow: scroll;\n scrollbar-width: none;\n flex-grow: 1;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-primary-wrapper::-webkit-scrollbar {\n display: none;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option {\n width: calc(100% - 10px);\n border: 1px solid transparent;\n padding: 0 4px;\n overflow: hidden;\n white-space: nowrap;\n height: 32px;\n text-overflow: ellipsis;\n cursor: pointer;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option:hover {\n background-color: var(--nlp-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: 0 8px;\n white-space: nowrap;\n text-overflow: ellipsis;\n cursor: not-allowed;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-show {\n width: 380px;\n height: 235px;\n border: 1px solid transparent;\n overflow: scroll;\n scrollbar-width: none;\n padding: 8px;\n border: 1px solid var(--nlp-border-color);\n position: relative;\n border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-hide {\n display: none;\n}\n.ff-nlp-dropdown-wrapper .nlp-categories {\n padding: 0px 2px;\n gap: 10px;\n border-radius: 2px;\n background: var(--nlp-background-color);\n color: var(--nlp-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-side-menu {\n display: flex;\n flex-direction: column;\n row-gap: 8px;\n color: var(--nlp-option-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-show::-webkit-scrollbar {\n display: none;\n}\n.ff-nlp-dropdown-wrapper .nlp-details-header {\n color: var(--status-skipped-text-color);\n display: flex;\n flex-direction: column;\n}\n.ff-nlp-dropdown-wrapper .nlp-details {\n color: var(--status-skipped-text-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper-main {\n display: flex;\n flex-direction: column;\n width: 302px;\n justify-content: space-between;\n flex-grow: 1;\n}\n\n.ff-nlp {\n color: var(--nlp-color);\n}\n\n.ff-sg {\n color: var(--nlp-step-group-color);\n background-color: var(--nlp-step-group-background);\n}\n\n.ff-pe {\n color: var(--nlp-pe-color);\n background-color: var(--nlp-pe-background);\n}\n\n.ff-nlp-web-service-div {\n display: flex;\n justify-content: center;\n align-items: center;\n}";
25944
+ styleInject(css_248z$z);
25840
25945
 
25841
25946
  const NlpDropdown = ({
25842
25947
  onSelectBlur,
@@ -25844,10 +25949,12 @@ const NlpDropdown = ({
25844
25949
  dropdownPosition,
25845
25950
  options = [],
25846
25951
  optionZIndex = 100,
25847
- inputRef
25952
+ inputRef,
25953
+ webServiceClick = () => {},
25954
+ containerWidth
25848
25955
  }) => {
25849
- // const [nlpData, setNlpData] = useState<OptionType | null>(null); need to add setNlpData
25850
- const [nlpData] = useState(null);
25956
+ const [nlpData, setNlpData] = useState(null);
25957
+ const [showNlpDetails, setShowNlpDetails] = useState('');
25851
25958
  const themeContext = useContext(ThemeContext);
25852
25959
  const currentTheme = themeContext?.currentTheme;
25853
25960
  const optionsWrapperRef = useRef(null);
@@ -25888,111 +25995,198 @@ const NlpDropdown = ({
25888
25995
  top: positionY - selectInputHeight - dropdownContainerHeight - margin
25889
25996
  };
25890
25997
  };
25998
+ const getNLPType = nlpType => {
25999
+ let label = '';
26000
+ let className = '';
26001
+ if (nlpType === 'NLP') {
26002
+ label = 'NLP';
26003
+ className = 'ff-nlp'; // red color
26004
+ } else if (nlpType === 'STEP_GROUP') {
26005
+ label = 'SG';
26006
+ className = 'ff-sg'; // green color
26007
+ } else if (nlpType === 'PROGRAM_ELEMENTS') {
26008
+ label = 'PE';
26009
+ className = 'ff-pe'; // yellow color
26010
+ } else {
26011
+ label = '--';
26012
+ className = 'nlp-default'; // default black color
26013
+ }
26014
+ return jsx("span", {
26015
+ className: className,
26016
+ children: label
26017
+ });
26018
+ };
26019
+ const getPlatformIcon = platform => {
26020
+ if (platform === 'Web') {
26021
+ return jsx(Icon, {
26022
+ name: "web_icon",
26023
+ height: 8,
26024
+ width: 8
26025
+ });
26026
+ } else if (platform === 'android') {
26027
+ return jsx(Icon, {
26028
+ name: "android_icon",
26029
+ height: 8,
26030
+ width: 8
26031
+ });
26032
+ } else if (platform === 'ios') {
26033
+ return jsx(Icon, {
26034
+ name: "ios_icon",
26035
+ height: 8,
26036
+ width: 8,
26037
+ color: "var(--dotted-border-color)"
26038
+ });
26039
+ } else if (platform === 'Generic') {
26040
+ return jsx("b", {
26041
+ className: "platform-ios",
26042
+ children: "Generic"
26043
+ });
26044
+ } else {
26045
+ return '--';
26046
+ }
26047
+ };
25891
26048
  return jsx("div", {
25892
26049
  className: "ff-nlp-dropdown-wrapper",
25893
26050
  children: jsxs("div", {
25894
26051
  ref: optionsWrapperRef,
25895
- style: updateDropdownPosition(),
26052
+ style: {
26053
+ ...updateDropdownPosition(),
26054
+ width: containerWidth
26055
+ },
25896
26056
  className: classNames('ff-nlp-options-wrapper', currentTheme),
26057
+ onMouseLeave: () => setShowNlpDetails('hide'),
25897
26058
  children: [jsxs("div", {
25898
- className: "ff-nlp-options-wrapper1",
25899
- children: [!checkEmpty(options) ? options.map(option =>
25900
- // <div key={ffid()} onMouseEnter={() => setNlpData(option)}> need to add onMouseEnter
25901
- jsx("div", {
25902
- children: jsxs(Typography, {
25903
- as: "div",
25904
- lineHeight: "30px",
25905
- className: classNames('ff-nlp-option', currentTheme),
26059
+ className: "ff-nlp-options-wrapper-main",
26060
+ children: [jsx("div", {
26061
+ className: "ff-nlp-options-primary-wrapper",
26062
+ children: !checkEmpty(options) ? options.map(option => jsx("div", {
26063
+ onMouseEnter: () => {
26064
+ setNlpData(option);
26065
+ setShowNlpDetails('show');
26066
+ },
26067
+ children: jsxs(Typography, {
26068
+ as: "div",
26069
+ lineHeight: "30px",
26070
+ fontSize: 12,
26071
+ className: classNames('ff-nlp-option', currentTheme),
26072
+ onClick: () => onSelectOptionSelector(option),
26073
+ children: [jsx("span", {
26074
+ children: jsx(Typography, {
26075
+ className: "nlp-categories",
26076
+ fontWeight: "regular",
26077
+ fontSize: 8,
26078
+ children: getNLPType(option.nlpType)
26079
+ })
26080
+ }), jsx("span", {
26081
+ children: getPlatformIcon(option.platform)
26082
+ }), option?.displayName]
26083
+ })
26084
+ }, ffid())) : jsx(Typography, {
26085
+ textAlign: "center",
26086
+ lineHeight: "32px",
26087
+ as: "p",
25906
26088
  color: "var(--ff-nlp-text-color)",
25907
- onClick: () => onSelectOptionSelector(option),
25908
- children: [jsx("span", {
25909
- className: "mr-2 fontPoppinsRegularMd",
25910
- children: option?.nlpType === 'NLP' ? jsx("b", {
25911
- className: "nlp-type-NLP",
25912
- children: "NLP"
25913
- }) : option?.nlpType === 'STEP_GROUP' ? jsx("b", {
25914
- className: "nlp-type-step-group",
25915
- children: "SG"
25916
- }) : option?.nlpType === 'PROGRAM_ELEMENTS' ? jsx("b", {
25917
- className: "nlp-type-program-elements",
25918
- children: "PE"
25919
- }) : '--'
25920
- }), jsx("span", {
25921
- className: "mr-2 fontPoppinsRegularMd",
25922
- children: option?.platform === 'web' ? jsx("b", {
25923
- className: "platform-web",
25924
- children: "Web"
25925
- }) : option?.platform === 'android' ? jsx("b", {
25926
- className: "platform-android",
25927
- children: "Android"
25928
- }) : option?.platform === 'ios' ? jsx("b", {
25929
- className: "platform-ios",
25930
- children: "iOS"
25931
- }) : option?.platform === 'Generic' ? jsx("b", {
25932
- className: "platform-ios",
25933
- children: "Generic"
25934
- }) : '--'
25935
- }), option?.displayName]
26089
+ className: "ff-nlp-no-option",
26090
+ children: "No Results Found"
26091
+ })
26092
+ }), jsx("div", {
26093
+ children: jsx("div", {
26094
+ className: "ff-nlp-web-service-div ",
26095
+ children: jsx(IconButton, {
26096
+ iconName: "plus_user_icon",
26097
+ label: "Web Service",
26098
+ onClick: webServiceClick
26099
+ })
25936
26100
  })
25937
- }, ffid())) : jsx(Typography, {
25938
- textAlign: "center",
25939
- lineHeight: "32px",
25940
- as: "p",
25941
- color: "var(--ff-nlp-text-color)",
25942
- className: "ff-nlp-no-option",
25943
- children: "No Results Found"
25944
- }), jsx("button", {
25945
- children: "+ Web Services"
25946
26101
  })]
25947
26102
  }), jsx("div", {
25948
- className: "ff-nlp-data",
26103
+ className: showNlpDetails === 'show' ? 'ff-nlp-data-show' : 'ff-nlp-data-hide',
25949
26104
  children: jsxs("div", {
25950
- children: [jsx("div", {
25951
- className: "nlp-details-header mt-4",
25952
- children: "Name:"
25953
- }), jsx("div", {
25954
- className: "nlp-details nlpdiv-check",
25955
- children: nlpData?.displayName || '--'
25956
- }), jsx("div", {
25957
- className: "nlp-details-header mt-4",
25958
- children: "Description:"
25959
- }), jsx("div", {
25960
- className: "nlp-details nlpdiv-check",
25961
- children: nlpData?.description || '--'
25962
- }), nlpData?.nlpType === 'STEP_GROUP' && jsxs(Fragment, {
25963
- children: [jsx("div", {
25964
- className: "nlp-details-header mt-4",
25965
- children: "Path:"
25966
- }), jsx("div", {
25967
- className: "nlp-details nlpdiv-check",
25968
- children: nlpData?.path ? nlpData?.path.slice(6) : '--'
26105
+ className: "ff-nlp-data-side-menu",
26106
+ children: [nlpData?.videoSrc && jsxs(Typography, {
26107
+ className: "nlp-details-header",
26108
+ fontWeight: "semi-bold",
26109
+ fontSize: 10,
26110
+ children: ["Video", jsx("div", {
26111
+ className: "nlp-details ",
26112
+ children: jsx("video", {
26113
+ src: nlpData.videoSrc,
26114
+ controls: true,
26115
+ className: "nlp-video-player",
26116
+ width: "100%",
26117
+ children: "Your browser does not support the video tag."
26118
+ })
25969
26119
  })]
25970
- }), jsx("div", {
25971
- className: "nlp-details-header mt-4",
25972
- children: "Inputs:"
25973
- }), nlpData?.stepInputs?.length ? nlpData.stepInputs.map((stepInput, index) => {
25974
- const stepInputType = stepInput.type ? stepInput.type.split('.').pop() : '--';
25975
- return jsxs("div", {
25976
- children: [jsxs("div", {
25977
- className: "nlp-details-header",
25978
- children: ["Input", index + 1, ":"]
25979
- }), jsxs("div", {
26120
+ }), jsxs(Typography, {
26121
+ className: "nlp-details-header",
26122
+ fontWeight: "semi-bold",
26123
+ fontSize: 10,
26124
+ children: ["NLP Details", jsx(Typography, {
26125
+ className: "nlp-details",
26126
+ fontWeight: "regular",
26127
+ fontSize: 10,
26128
+ children: nlpData?.displayName || '--'
26129
+ })]
26130
+ }), jsxs(Typography, {
26131
+ className: "nlp-details-header",
26132
+ fontWeight: "semi-bold",
26133
+ fontSize: 10,
26134
+ children: ["Description", jsx(Typography, {
26135
+ className: "nlp-details",
26136
+ fontWeight: "regular",
26137
+ fontSize: 10,
26138
+ children: nlpData?.description || '--'
26139
+ })]
26140
+ }), nlpData?.nlpType === 'STEP_GROUP' && jsx(Fragment, {
26141
+ children: jsxs(Typography, {
26142
+ className: "nlp-details-header",
26143
+ fontWeight: "semi-bold",
26144
+ fontSize: 10,
26145
+ children: ["Path", jsx(Typography, {
25980
26146
  className: "nlp-details",
25981
- children: ["type: ", stepInputType]
25982
- }), jsxs("div", {
25983
- className: "nlp-details mb-4",
25984
- children: ["name: ", stepInput.name || '--']
26147
+ fontWeight: "regular",
26148
+ fontSize: 10,
26149
+ children: nlpData?.path ? nlpData?.path.slice(6) : '--'
25985
26150
  })]
26151
+ })
26152
+ }), jsx(Typography, {
26153
+ className: "nlp-details-header",
26154
+ fontWeight: "semi-bold",
26155
+ fontSize: 10,
26156
+ children: "Inputs"
26157
+ }), nlpData?.stepInputs?.length ? nlpData.stepInputs.map((stepInput, index) => {
26158
+ const stepInputType = stepInput.type ? stepInput?.type?.split('.')?.pop() : '--';
26159
+ return jsx("div", {
26160
+ children: jsxs(Typography, {
26161
+ className: "nlp-details-header",
26162
+ fontWeight: "semi-bold",
26163
+ fontSize: 10,
26164
+ children: ["Input", index + 1, jsxs(Typography, {
26165
+ className: "nlp-details",
26166
+ fontWeight: "regular",
26167
+ fontSize: 10,
26168
+ children: ["type: ", stepInputType]
26169
+ }), jsxs(Typography, {
26170
+ className: "nlp-details",
26171
+ fontWeight: "regular",
26172
+ fontSize: 10,
26173
+ children: ["name: ", stepInput.name || '--']
26174
+ })]
26175
+ })
25986
26176
  }, index);
25987
26177
  }) : jsx("div", {
25988
- className: "nlp-details mb-4",
26178
+ className: "nlp-details",
25989
26179
  children: "--"
25990
- }), jsx("div", {
26180
+ }), jsxs(Typography, {
25991
26181
  className: "nlp-details-header",
25992
- children: "Output:"
25993
- }), jsx("div", {
25994
- className: "nlp-details mb-4",
25995
- children: nlpData?.returnType || '--'
26182
+ fontWeight: "semi-bold",
26183
+ fontSize: 10,
26184
+ children: ["Output", jsx(Typography, {
26185
+ className: "nlp-details ",
26186
+ fontWeight: "regular",
26187
+ fontSize: 10,
26188
+ children: nlpData?.returnType || '--'
26189
+ })]
25996
26190
  })]
25997
26191
  })
25998
26192
  })]
@@ -26000,8 +26194,8 @@ const NlpDropdown = ({
26000
26194
  });
26001
26195
  };
26002
26196
 
26003
- var css_248z$x = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-nlp-input-wrapper .ff-nlp-input, .ff-nlp-input-wrapper .ff-nlp-input-input {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend, .ff-nlp-input-wrapper .ff-nlp-input-label--active {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-nlp-input-wrapper {\n position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n min-height: 32px;\n min-width: 489px;\n display: flex;\n align-items: end;\n position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset {\n margin: 0;\n padding: 25px 0px 0px 8px;\n border: 1px solid transparent;\n box-sizing: border-box;\n height: 100%;\n width: 100%;\n border-radius: 4px;\n display: block;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-label {\n padding: 30px 0px 0px 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--default {\n opacity: 0;\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--active {\n opacity: 1;\n border-color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--option {\n opacity: 1;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-border {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--error {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n padding: 0 2px;\n letter-spacing: 0.5px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--default {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 0;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--active {\n transition: opacity 0.25s ease-out, transform 0.25s ease-out, font-size 0.25s ease-out, padding 0.25s ease-out;\n opacity: 1;\n color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--option {\n opacity: 1;\n color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--error {\n color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--required {\n margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input {\n position: absolute;\n top: 6px;\n right: auto;\n bottom: auto;\n left: auto;\n width: calc(100% - 38px);\n min-height: calc(100% - 8px);\n padding: 0 28px 0 8px;\n border-radius: 4px;\n border: 1px solid transparent;\n z-index: 100;\n background: transparent;\n outline: none;\n color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input:hover ~ .ff-nlp-input-label {\n color: var(--ff-nlp-input-text-hover-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default {\n opacity: 1;\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover {\n border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option {\n border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option .ff-nlp-input-legend--option {\n color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-label {\n min-height: calc(100% - 2px);\n margin-top: 0px;\n top: 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active:hover {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border {\n border: none;\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover ~ .ff-nlp-input-fieldset--no-border {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable {\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover {\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover ~ .ff-nlp-input-label--default {\n color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error:hover {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n position: absolute;\n top: 13px;\n right: auto;\n bottom: auto;\n left: 8px;\n z-index: 1;\n font-size: 12px;\n top: 60%;\n padding-left: 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--default {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 1;\n color: var(--ff-nlp-input-default-color);\n transform: translateY(-50%);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--active {\n transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n opacity: 0;\n transform: translateY(-150%);\n padding: 0 6px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--required {\n margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow {\n position: absolute;\n top: 60%;\n height: 100%;\n right: 10px;\n transform: rotateX(180deg) translateY(50%);\n cursor: pointer;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--no-label {\n top: 50%;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--down {\n transform: rotateX(0deg) translateY(-50%);\n z-index: 101;\n}\n.ff-nlp-input-wrapper-error-text {\n position: absolute;\n top: auto;\n right: auto;\n bottom: -14px;\n left: 12px;\n white-space: nowrap;\n}";
26004
- styleInject(css_248z$x);
26197
+ var css_248z$y = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-nlp-input-wrapper {\n position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n min-height: 32px;\n min-width: 482px;\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: 32px;\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(--nlp-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--active {\n opacity: 1;\n border-color: var(--nlp-border-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(--nlp-input-placeholder-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--option {\n opacity: 1;\n color: var(--nlp-input-placeholder-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-container {\n position: absolute;\n top: 6px;\n right: auto;\n bottom: auto;\n left: auto;\n width: calc(100% - 38px);\n height: 32px;\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 text-indent: 22px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container:hover ~ .ff-nlp-input-label {\n color: var(--nlp-input-placeholder-color);\n padding-left: 26px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--border-radius {\n border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--default {\n opacity: 1;\n border-color: var(--nlp-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--default:hover {\n border-color: var(--nlp-input-placeholder-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--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-container--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-container--no-label {\n min-height: calc(100% - 2px);\n margin-top: 0px;\n top: 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--active {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--active:hover {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--no-border {\n border: none;\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--no-border:hover {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--no-border:hover ~ .ff-nlp-input-fieldset--no-border {\n border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--disable {\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--disable:hover {\n border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--disable:hover ~ .ff-nlp-input-label--default {\n color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--error {\n border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--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(--nlp-input-placeholder-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(0deg) 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-error-text {\n position: absolute;\n top: auto;\n right: auto;\n bottom: -14px;\n left: 12px;\n white-space: nowrap;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n display: flex;\n align-items: center;\n padding-left: 26px;\n gap: 4px;\n}\n.ff-nlp-input-wrapper .ff-nlp-help_icon {\n position: absolute;\n bottom: 2px;\n left: 8px;\n width: 30px;\n height: 30px;\n z-index: 100;\n cursor: pointer;\n}\n\n.ff-nlp-input-arrow {\n z-index: 111;\n}\n\n.icon-container {\n position: relative;\n display: inline-block;\n}\n\n.icon-label {\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-55%);\n transform: translateY(-145%);\n margin-bottom: 5px;\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.3s ease, visibility 0s linear 0.3s;\n background-color: var(--tooltip-bg-color);\n color: var(--tooltip-text-color);\n padding: 2px 5px;\n border-radius: 3px;\n white-space: nowrap;\n}\n\n.icon-container:hover .icon-label {\n visibility: visible;\n opacity: 1;\n transition-delay: 0s;\n}\n\n.help-icon-label {\n position: absolute;\n bottom: 80%;\n left: 96%;\n transform: translateX(-50%);\n margin-bottom: 5px;\n visibility: hidden;\n opacity: 0;\n transition: opacity 0.3s ease, visibility 0s linear 0.3s;\n background-color: var(--tooltip-bg-color);\n color: var(--tooltip-text-color);\n padding: 2px 5px;\n border-radius: 3px;\n white-space: nowrap;\n}\n\n.help-icon-container:hover .help-icon-label {\n visibility: visible;\n opacity: 1;\n transition-delay: 0s;\n}";
26198
+ styleInject(css_248z$y);
26005
26199
 
26006
26200
  const nlpInputReducer = (state, action) => {
26007
26201
  switch (action.type) {
@@ -26019,7 +26213,6 @@ const nlpInputReducer = (state, action) => {
26019
26213
  isInputFocused: false,
26020
26214
  options: action.payload.optionsList,
26021
26215
  option: action.payload.option,
26022
- // todo color need to be add in style guide
26023
26216
  iconColor: 'var(--ff-nlp-input-default-color)',
26024
26217
  isIconClick: false,
26025
26218
  showOptions: false,
@@ -26036,9 +26229,7 @@ const nlpInputReducer = (state, action) => {
26036
26229
  iconColor: 'var(--ff-nlp-input-text-hover-color)'
26037
26230
  };
26038
26231
  case 'MOUSE_LEAVE':
26039
- return state.isInputFocused ? state :
26040
- // todo color need to be add in style guide
26041
- {
26232
+ return state.isInputFocused ? state : {
26042
26233
  ...state,
26043
26234
  iconColor: 'var(--ff-nlp-input-default-color)',
26044
26235
  isIconClick: false
@@ -26091,7 +26282,14 @@ const nlpInputReducer = (state, action) => {
26091
26282
  };
26092
26283
  const NlpInput = ({
26093
26284
  label = '',
26285
+ leftIcon,
26286
+ rightIcon,
26287
+ rightIconColor,
26094
26288
  showLabel = true,
26289
+ onHelpIconClick = () => {},
26290
+ aiIconClick = () => {},
26291
+ webServiceClick = () => {},
26292
+ containerWidth = '',
26095
26293
  optionsList = [],
26096
26294
  selectedOption = {
26097
26295
  displayName: '',
@@ -26106,16 +26304,17 @@ const NlpInput = ({
26106
26304
  disabled = false,
26107
26305
  borderRadius = true,
26108
26306
  showBorder = true,
26109
- required = false
26307
+ required = false,
26308
+ value = '',
26309
+ onSelect = () => {}
26110
26310
  }) => {
26111
26311
  const initialState = useMemo(() => ({
26112
26312
  isInputFocused: false,
26113
- // todo color need to be added in style guide
26114
26313
  iconColor: 'var(--ff-nlp-input-default-color)',
26115
26314
  isIconClick: false,
26116
26315
  showOptions: false,
26117
26316
  options: optionsList,
26118
- option: checkEmpty(selectedOption) ? '' : selectedOption?.projectId,
26317
+ option: checkEmpty(selectedOption) && typeof selectedOption?.displayName === 'string' ? selectedOption.displayName : '',
26119
26318
  dropdownPosition: {
26120
26319
  positionX: 0,
26121
26320
  positionY: 0,
@@ -26124,11 +26323,25 @@ const NlpInput = ({
26124
26323
  }
26125
26324
  }), [optionsList, selectedOption]);
26126
26325
  const [selectControlState, dispatch] = useReducer(nlpInputReducer, initialState);
26326
+ const [inputVal, setInputVal] = useState(selectedOption);
26327
+ useEffect(() => {
26328
+ const updatedDisplayName = typeof selectedOption.displayName === 'string' ? selectedOption.displayName : String(selectedOption.displayName ?? '');
26329
+ if (updatedDisplayName !== inputVal.displayName) {
26330
+ setInputVal({
26331
+ ...selectedOption,
26332
+ displayName: updatedDisplayName
26333
+ });
26334
+ }
26335
+ }, [selectedOption]);
26336
+ useEffect(() => {
26337
+ if (value) {
26338
+ handleSelectAction('FOCUS_INPUT');
26339
+ }
26340
+ }, [value]);
26127
26341
  const DropDownRef = useRef(null);
26128
26342
  const InputRef = useRef(null);
26129
26343
  const {
26130
26344
  isInputFocused,
26131
- iconColor,
26132
26345
  isIconClick,
26133
26346
  showOptions,
26134
26347
  dropdownPosition,
@@ -26143,7 +26356,7 @@ const NlpInput = ({
26143
26356
  type: actionType,
26144
26357
  payload: {
26145
26358
  optionsList,
26146
- option: selectedOption.projectId
26359
+ option: typeof selectedOption.displayName === 'string' ? selectedOption.displayName : String(selectedOption.displayName ?? '')
26147
26360
  }
26148
26361
  });
26149
26362
  } else {
@@ -26155,20 +26368,7 @@ const NlpInput = ({
26155
26368
  };
26156
26369
  const onSelectInputChange = e => {
26157
26370
  if (disabled) return;
26158
- const {
26159
- value
26160
- } = e.target;
26161
- const filteredOptions = optionsList.filter(option => {
26162
- return option.displayName.toLowerCase().includes(value.toLowerCase().trim());
26163
- });
26164
- dispatch({
26165
- type: 'UPDATE_OPTION_LIST',
26166
- payload: filteredOptions
26167
- });
26168
- dispatch({
26169
- type: 'UPDATE_OPTION',
26170
- payload: value
26171
- });
26371
+ onChange(e);
26172
26372
  };
26173
26373
  const onSelectBlur = () => {
26174
26374
  if (disabled) return;
@@ -26179,16 +26379,7 @@ const NlpInput = ({
26179
26379
  }
26180
26380
  };
26181
26381
  const onSelectOptionSelector = option => {
26182
- if (!disabled) {
26183
- onSelectBlur();
26184
- dispatch({
26185
- type: 'UPDATE_OPTION',
26186
- payload: option.projectId
26187
- });
26188
- if (onChange) {
26189
- onChange(option);
26190
- }
26191
- }
26382
+ onSelect(option);
26192
26383
  };
26193
26384
  const onSelectUpdatePosition = () => {
26194
26385
  if (!showOptions || !DropDownRef?.current || disabled) return;
@@ -26240,16 +26431,15 @@ const NlpInput = ({
26240
26431
  className: "ff-nlp-input",
26241
26432
  children: [jsx("input", {
26242
26433
  type: "text",
26243
- className: classNames('ff-nlp-input-input', {
26244
- 'ff-nlp-input-input--default': !isInputFocused,
26245
- 'ff-nlp-input-input--active': applyActiveOptionClasses,
26246
- 'ff-nlp-input-input--no-label': !showLabel,
26247
- 'ff-nlp-input-input--error': errorMsg && !isInputFocused && !Boolean(option),
26248
- 'ff-nlp-input-input--border-radius': !borderRadius,
26249
- 'ff-nlp-input-input--disable': disabled,
26250
- 'ff-nlp-input-input--no-border': !showBorder
26434
+ className: classNames('ff-nlp-input-container', {
26435
+ 'ff-nlp-input-container--default': !isInputFocused,
26436
+ 'ff-nlp-input-container--active': applyActiveOptionClasses,
26437
+ 'ff-nlp-input-container--no-label': !showLabel,
26438
+ 'ff-nlp-input-container--error': errorMsg && !isInputFocused && !Boolean(option),
26439
+ 'ff-nlp-input-container--border-radius': !borderRadius,
26440
+ 'ff-nlp-input-container--disable': disabled,
26441
+ 'ff-nlp-input-container--no-border': !showBorder
26251
26442
  }),
26252
- // inline css required due to multiple overlay scenarios are present
26253
26443
  style: {
26254
26444
  zIndex: optionZIndex
26255
26445
  },
@@ -26257,11 +26447,24 @@ const NlpInput = ({
26257
26447
  onMouseEnter: () => handleSelectAction('MOUSE_ENTER'),
26258
26448
  onMouseLeave: () => handleSelectAction('MOUSE_LEAVE'),
26259
26449
  onChange: onSelectInputChange,
26260
- value: option,
26450
+ value: value,
26261
26451
  disabled: disabled,
26262
26452
  autoComplete: "off",
26263
26453
  spellCheck: "false",
26264
26454
  ref: InputRef
26455
+ }), jsxs("div", {
26456
+ className: "icon-container",
26457
+ children: [jsx(Icon, {
26458
+ name: leftIcon || 'ai_search',
26459
+ className: "ff-nlp-help_icon",
26460
+ width: 16,
26461
+ height: 16,
26462
+ onClick: aiIconClick
26463
+ }), jsx(Typography, {
26464
+ className: "icon-label",
26465
+ fontSize: 10,
26466
+ children: "Search With Ai"
26467
+ })]
26265
26468
  }), showLabel && jsxs("div", {
26266
26469
  className: classNames('ff-nlp-input-label', {
26267
26470
  'ff-nlp-input-label--default': !isInputFocused,
@@ -26273,15 +26476,23 @@ const NlpInput = ({
26273
26476
  className: "ff-nlp-input-label--required",
26274
26477
  children: "*"
26275
26478
  }), label]
26276
- }), jsx(Icon, {
26277
- name: "arrow_up",
26278
- height: 7,
26279
- width: 12,
26280
- className: classNames('ff-nlp-input-arrow', {
26281
- 'ff-nlp-input-arrow--down': isIconClick,
26282
- 'ff-nlp-input-arrow--no-label': !showLabel
26283
- }),
26284
- color: iconColor
26479
+ }), jsxs("div", {
26480
+ className: "help-icon-container",
26481
+ children: [jsx(Icon, {
26482
+ name: rightIcon || '',
26483
+ height: 16,
26484
+ width: 16,
26485
+ onClick: onHelpIconClick,
26486
+ className: classNames('ff-nlp-input-arrow', {
26487
+ 'ff-nlp-input-arrow--down': !isIconClick,
26488
+ 'ff-nlp-input-arrow--no-label': !showLabel
26489
+ }),
26490
+ color: rightIconColor
26491
+ }), jsx(Typography, {
26492
+ className: "help-icon-label",
26493
+ fontSize: 10,
26494
+ children: "Help"
26495
+ })]
26285
26496
  }), jsx("fieldset", {
26286
26497
  className: classNames('ff-nlp-input-fieldset', {
26287
26498
  'ff-nlp-input-fieldset--no-label': !showLabel,
@@ -26291,6 +26502,15 @@ const NlpInput = ({
26291
26502
  'ff-nlp-input-fieldset--error': errorMsg,
26292
26503
  'ff-nlp-input-fieldset--border-radius': !borderRadius,
26293
26504
  'ff-nlp-input-fieldset--no-border': !showBorder
26505
+ }),
26506
+ children: showLabel && jsx("legend", {
26507
+ className: classNames('ff-nlp-input-legend', {
26508
+ 'ff-nlp-input-legend--default': !isInputFocused,
26509
+ 'ff-nlp-input-legend--active': isInputFocused,
26510
+ 'ff-nlp-input-legend--option': applyActiveOptionClasses,
26511
+ 'ff-nlp-input-legend--error': errorMsg
26512
+ }),
26513
+ children: label
26294
26514
  })
26295
26515
  })]
26296
26516
  }), errorMsg && jsx(Typography, {
@@ -26306,14 +26526,16 @@ const NlpInput = ({
26306
26526
  dropdownPosition: dropdownPosition,
26307
26527
  options: options,
26308
26528
  optionZIndex: optionZIndex,
26309
- inputRef: InputRef
26529
+ inputRef: InputRef,
26530
+ webServiceClick: webServiceClick,
26531
+ containerWidth: containerWidth
26310
26532
  }), document.body)
26311
26533
  })]
26312
26534
  });
26313
26535
  };
26314
26536
 
26315
- var css_248z$w = ".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 z-index: 5;\n}\n.ff-icon-radio-button.selected {\n background-color: var(--brand-color);\n}\n.ff-icon-radio-button.disabled {\n opacity: 50%;\n cursor: not-allowed;\n}\n.ff-icon-radio-button .icon-container {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--border-color);\n background: var(--drawer-footer-bg);\n}\n.ff-icon-radio-button .icon-container:hover {\n background: var(--border-color);\n}\n.ff-icon-radio-button .icon-container.selected {\n background-color: var(--brand-color);\n}\n.ff-icon-radio-button .icon-container .icon {\n width: 14px;\n height: 14px;\n}\n\n.line-connector {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 1px;\n background-color: var(--border-color);\n z-index: 3;\n border-radius: 2px 0px 0px 0px;\n opacity: 0px;\n}";
26316
- styleInject(css_248z$w);
26537
+ var css_248z$x = ".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 z-index: 5;\n}\n.ff-icon-radio-button.selected {\n background-color: var(--brand-color);\n}\n.ff-icon-radio-button.disabled {\n opacity: 50%;\n cursor: not-allowed;\n}\n.ff-icon-radio-button .icon-container {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n display: flex;\n justify-content: center;\n align-items: center;\n border: 1px solid var(--border-color);\n background: var(--drawer-footer-bg);\n}\n.ff-icon-radio-button .icon-container:hover {\n background: var(--border-color);\n}\n.ff-icon-radio-button .icon-container.selected {\n background-color: var(--brand-color);\n}\n.ff-icon-radio-button .icon-container .icon {\n width: 14px;\n height: 14px;\n}\n\n.line-connector {\n position: absolute;\n top: 50%;\n left: 0;\n right: 0;\n height: 1px;\n background-color: var(--border-color);\n z-index: 3;\n border-radius: 2px 0px 0px 0px;\n opacity: 0px;\n}";
26538
+ styleInject(css_248z$x);
26317
26539
 
26318
26540
  const IconRadioGroup = ({
26319
26541
  items,
@@ -26364,8 +26586,8 @@ const IconRadioGroup = ({
26364
26586
  });
26365
26587
  };
26366
26588
 
26367
- var css_248z$v = ".ff-machine-input-field-wrapper {\n min-width: 100px;\n height: 32px;\n position: relative;\n cursor: pointer;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n height: 100%;\n width: 100%;\n border: 1px solid var(--ff-machine-input-field-border-color);\n padding: 0 8px 0 0;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n display: flex;\n align-items: center;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-icon {\n margin-left: 4px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n min-width: 30px;\n max-width: 70px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse {\n direction: ltr;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-label {\n position: absolute;\n top: -6px;\n left: 8px;\n background-color: var(--ff-machine-input-field-border-color);\n border-radius: 4px;\n padding: 1px 2px;\n height: 12px;\n}";
26368
- styleInject(css_248z$v);
26589
+ var css_248z$w = ".ff-machine-input-field-wrapper {\n min-width: 100px;\n height: 32px;\n position: relative;\n cursor: pointer;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n height: 100%;\n width: 100%;\n border: 1px solid var(--ff-machine-input-field-border-color);\n padding: 0 8px 0 0;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n display: flex;\n align-items: center;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-icon {\n margin-left: 4px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text {\n max-width: fit-content;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse {\n direction: ltr;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-label {\n position: absolute;\n top: -6px;\n left: 8px;\n background-color: var(--ff-machine-input-field-border-color);\n border-radius: 4px;\n padding: 1px 2px;\n height: 12px;\n}";
26590
+ styleInject(css_248z$w);
26369
26591
 
26370
26592
  const MachineInputField = /*#__PURE__*/forwardRef(({
26371
26593
  width = '',
@@ -26373,8 +26595,9 @@ const MachineInputField = /*#__PURE__*/forwardRef(({
26373
26595
  runCount = 0,
26374
26596
  className = '',
26375
26597
  contentReverse = false,
26376
- onClick = () => {}
26377
- }, ref) => {
26598
+ onClick = () => {},
26599
+ modalId = ''
26600
+ }) => {
26378
26601
  const getIcon = {
26379
26602
  Local: 'local',
26380
26603
  Browserstack: 'browserstack_icon',
@@ -26388,15 +26611,16 @@ const MachineInputField = /*#__PURE__*/forwardRef(({
26388
26611
  'Microsoft Edge': 'edge',
26389
26612
  'Internet Explorer': 'internet_explorer',
26390
26613
  Safari: 'safari_icon',
26391
- Opera: 'opera'
26614
+ Opera: 'opera',
26615
+ windows: 'windows'
26392
26616
  };
26393
26617
  return jsxs("div", {
26394
- ref: ref,
26618
+ ref: modalId,
26395
26619
  style: {
26396
26620
  width: width
26397
26621
  },
26398
26622
  className: classNames('ff-machine-input-field-wrapper', className),
26399
- onClick: onClick,
26623
+ onClick: () => onClick(),
26400
26624
  children: [jsxs(Typography, {
26401
26625
  as: "span",
26402
26626
  color: "var(--ff-machine-input-field-text-color)",
@@ -26423,7 +26647,7 @@ const MachineInputField = /*#__PURE__*/forwardRef(({
26423
26647
  'ff-machine-text-reverse': contentReverse
26424
26648
  }),
26425
26649
  color: "var(--ff-machine-input-field-text-color)",
26426
- children: label
26650
+ children: truncateText(label, 15)
26427
26651
  })]
26428
26652
  }, type))
26429
26653
  })]
@@ -26431,11 +26655,11 @@ const MachineInputField = /*#__PURE__*/forwardRef(({
26431
26655
  });
26432
26656
  MachineInputField.displayName = 'MachineInputField';
26433
26657
 
26434
- var css_248z$u = ".ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper {\n height: 66px;\n box-sizing: border-box;\n width: fit-content;\n margin-bottom: 16px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper {\n position: relative;\n display: flex;\n box-sizing: border-box;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-sequential-select-branch {\n width: 240px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow {\n display: flex;\n align-items: center;\n position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper {\n margin: 0;\n width: 40px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper .ff-branch-arrow {\n width: 6px;\n height: 6px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(100% 50%, 0 100%, 0 0);\n position: absolute;\n right: -1px;\n top: -3px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-select-branch-point {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background-color: var(--ff-connecting-branch-color);\n position: absolute;\n left: -3px;\n z-index: 102;\n top: 50%;\n transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down {\n position: absolute;\n height: 38px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-point {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background-color: var(--ff-connecting-branch-color);\n position: absolute;\n left: -2px;\n z-index: 102;\n top: 50%;\n transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-arrow {\n width: 0;\n height: 62px;\n top: calc(50% + 1px);\n border-left: 1px solid var(--ff-connecting-branch-color);\n z-index: 102;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist {\n box-sizing: border-box;\n width: 240px;\n display: flex;\n justify-content: space-between;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper {\n display: flex;\n align-items: center;\n margin-right: 12px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper .ff-scope-text {\n text-transform: capitalize;\n margin: 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper {\n display: flex;\n align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper #ff-sequential-machine-datalist {\n display: flex;\n align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-dataset-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-run-delete-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n cursor: pointer;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n margin: 0 12px 0 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-sequential-branches-wrapper {\n box-sizing: border-box;\n width: fit-content;\n height: fit-content;\n}";
26435
- styleInject(css_248z$u);
26658
+ var css_248z$v = ".ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper {\n height: 66px;\n box-sizing: border-box;\n width: fit-content;\n margin-bottom: 16px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper {\n position: relative;\n display: flex;\n box-sizing: border-box;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-sequential-select-branch {\n width: 240px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow {\n display: flex;\n align-items: center;\n position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper {\n margin: 0;\n width: 40px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper .ff-branch-arrow {\n width: 6px;\n height: 6px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(100% 50%, 0 100%, 0 0);\n position: absolute;\n right: -1px;\n top: -3px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-select-branch-point {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background-color: var(--ff-connecting-branch-color);\n position: absolute;\n left: -3px;\n z-index: 102;\n top: 50%;\n transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down {\n position: absolute;\n height: 38px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-point {\n width: 5px;\n height: 5px;\n border-radius: 50%;\n background-color: var(--ff-connecting-branch-color);\n position: absolute;\n left: -2px;\n z-index: 102;\n top: 50%;\n transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-arrow {\n width: 0;\n height: 62px;\n top: calc(50% + 1px);\n border-left: 1px solid var(--ff-connecting-branch-color);\n z-index: 102;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist {\n box-sizing: border-box;\n width: 240px;\n display: flex;\n justify-content: space-between;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper {\n display: flex;\n align-items: center;\n margin-right: 12px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper .ff-scope-text {\n text-transform: capitalize;\n margin: 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper {\n display: flex;\n align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper #ff-sequential-machine-datalist {\n display: flex;\n align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-dataset-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-run-delete-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n cursor: pointer;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n margin: 0 12px 0 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-sequential-branches-wrapper {\n box-sizing: border-box;\n width: fit-content;\n height: fit-content;\n}";
26659
+ styleInject(css_248z$v);
26436
26660
 
26437
- var css_248z$t = ".ff-connecting-branch-grid,\n.ff-connecting-branch-grid-reverse {\n box-sizing: border-box;\n display: grid;\n grid-template-columns: 24px 180px 40px 180px 24px;\n height: 66px;\n margin-bottom: 16px;\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper {\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow {\n position: absolute;\n height: 6px;\n width: 6px;\n background-color: var(--ff-connecting-branch-color);\n z-index: 2;\n clip-path: polygon(0 0, 0% 100%, 100% 50%);\n top: calc(25% - 3px);\n right: -2px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse {\n position: absolute;\n height: 6px;\n width: 6px;\n background-color: var(--ff-connecting-branch-color);\n z-index: 2;\n left: -2px;\n top: calc(25% - 3px);\n clip-path: polygon(0 50%, 100% 100%, 100% 0);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container {\n width: 100%;\n height: 25%;\n border: 1px solid var(--ff-connecting-branch-color);\n border-top: none;\n border-right: none;\n border-bottom-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse {\n width: 100%;\n height: 25%;\n border: 1px solid var(--ff-connecting-branch-color);\n border-top: none;\n border-left: none;\n border-bottom-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist {\n display: flex;\n padding-top: 4px;\n height: 24px;\n justify-content: flex-end;\n width: 100%;\n align-items: center;\n flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-dataset-list-branch {\n display: flex;\n align-items: center;\n flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-icon {\n margin-right: 4px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-text {\n margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-delete-icon {\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse {\n display: flex;\n padding-top: 4px;\n height: 24px;\n justify-content: flex-end;\n width: 100%;\n align-items: center;\n flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-icon {\n margin-right: 4px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-text {\n margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon {\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper {\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n z-index: 2;\n right: -2px;\n top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n z-index: 2;\n left: -2px;\n top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow {\n height: 0;\n width: 100%;\n margin-top: calc(50% - 3px);\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(0 0, 0% 100%, 100% 50%);\n top: calc(25% - 3px);\n right: -2px;\n z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(0 50%, 100% 100%, 100% 0);\n top: calc(25% - 3px);\n left: -1px;\n z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow {\n width: 100%;\n height: 100%;\n margin-top: 17px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n border-right: 1px solid var(--ff-connecting-branch-color);\n border-top-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow-reverse {\n width: 100%;\n height: 100%;\n margin-top: 17px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n border-left: 1px solid var(--ff-connecting-branch-color);\n border-top-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-browser-button,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-browser-button {\n height: 32px;\n display: flex;\n align-items: center;\n}\n\n.ff-connecting-branch-grid-reverse {\n direction: rtl;\n margin: 0 0 16px 0;\n}";
26438
- styleInject(css_248z$t);
26661
+ var css_248z$u = ".ff-connecting-branch-grid,\n.ff-connecting-branch-grid-reverse {\n box-sizing: border-box;\n display: grid;\n grid-template-columns: 24px 180px 40px 180px 24px;\n height: 66px;\n margin-bottom: 16px;\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper {\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow {\n position: absolute;\n height: 6px;\n width: 6px;\n background-color: var(--ff-connecting-branch-color);\n z-index: 2;\n clip-path: polygon(0 0, 0% 100%, 100% 50%);\n top: calc(25% - 3px);\n right: -2px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse {\n position: absolute;\n height: 6px;\n width: 6px;\n background-color: var(--ff-connecting-branch-color);\n z-index: 2;\n left: -2px;\n top: calc(25% - 3px);\n clip-path: polygon(0 50%, 100% 100%, 100% 0);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container {\n width: 100%;\n height: 25%;\n border: 1px solid var(--ff-connecting-branch-color);\n border-top: none;\n border-right: none;\n border-bottom-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse {\n width: 100%;\n height: 25%;\n border: 1px solid var(--ff-connecting-branch-color);\n border-top: none;\n border-left: none;\n border-bottom-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist {\n display: flex;\n padding-top: 4px;\n height: 24px;\n justify-content: flex-end;\n width: 100%;\n align-items: center;\n flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-dataset-list-branch {\n display: flex;\n align-items: center;\n flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-icon {\n margin-right: 4px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-text {\n margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-delete-icon {\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse {\n display: flex;\n padding-top: 4px;\n height: 24px;\n justify-content: flex-end;\n width: 100%;\n align-items: center;\n flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch {\n display: flex;\n align-items: center;\n flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-icon {\n margin-right: 4px;\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-text {\n margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon {\n cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper {\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n z-index: 2;\n right: -2px;\n top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n border-radius: 50%;\n z-index: 2;\n left: -2px;\n top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow {\n height: 0;\n width: 100%;\n margin-top: calc(50% - 3px);\n position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(0 0, 0% 100%, 100% 50%);\n top: calc(25% - 3px);\n right: -2px;\n z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse {\n position: absolute;\n height: 5px;\n width: 5px;\n background-color: var(--ff-connecting-branch-color);\n clip-path: polygon(0 50%, 100% 100%, 100% 0);\n top: calc(25% - 3px);\n left: -1px;\n z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow {\n width: 100%;\n height: 100%;\n margin-top: 17px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n border-right: 1px solid var(--ff-connecting-branch-color);\n border-top-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow-reverse {\n width: 100%;\n height: 100%;\n margin-top: 17px;\n border-top: 1px solid var(--ff-connecting-branch-color);\n border-left: 1px solid var(--ff-connecting-branch-color);\n border-top-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-browser-button,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-browser-button {\n height: 32px;\n display: flex;\n align-items: center;\n}\n\n.ff-connecting-branch-grid-reverse {\n direction: rtl;\n margin: 0 0 16px 0;\n}";
26662
+ styleInject(css_248z$u);
26439
26663
 
26440
26664
  const Branches = ({
26441
26665
  machineInstances,
@@ -26447,7 +26671,11 @@ const Branches = ({
26447
26671
  onAddBrowser,
26448
26672
  onDeleteBrowser,
26449
26673
  onAddRunBrowser,
26450
- onUpdateDataSetList
26674
+ onUpdateDataSetList,
26675
+ onUpdateAddBrowserInstance,
26676
+ addInstanceLabel = '',
26677
+ scriptType = '',
26678
+ projectType = ''
26451
26679
  }) => {
26452
26680
  const evenRow = rowIndex % 2 === 0;
26453
26681
  const lastMachineInstance = checkEmpty(machineInstances[machineColumnCount - 1]);
@@ -26464,6 +26692,59 @@ const Branches = ({
26464
26692
  }
26465
26693
  return `24px ${machineColumnWidth}px repeat(${machineColumnCount - 1}, 40px ${machineColumnWidth}px) 24px`;
26466
26694
  };
26695
+ const getMachineLabelOptionList = (type = '', machineInstance) => {
26696
+ const {
26697
+ executionEnv,
26698
+ browserName,
26699
+ browserVersion,
26700
+ machineInfo: {
26701
+ osVersion,
26702
+ iconName
26703
+ },
26704
+ deviceInfo
26705
+ } = machineInstance;
26706
+ // Helper to handle device info safely
26707
+ const getDeviceOption = (platform, defaultType = '', index = 0) => deviceInfo?.[index]?.platform?.toLowerCase().includes(platform ?? '') ? defaultType : undefined;
26708
+ const getEnvironment = (environment = '') => {
26709
+ if (environment.toLowerCase().includes('browserstack')) return 'Browserstack';
26710
+ if (environment.toLowerCase().includes('lambdatest')) return 'LambdaTest';
26711
+ if (environment.toLowerCase().includes('saucelabs')) return 'SauceLabs';
26712
+ return '';
26713
+ };
26714
+ // Base options
26715
+ const baseOptions = [{
26716
+ label: executionEnv,
26717
+ type: getEnvironment(executionEnv)
26718
+ }];
26719
+ // Web-specific options
26720
+ const webOptions = [{
26721
+ label: osVersion,
26722
+ type: iconName
26723
+ }, {
26724
+ label: browserVersion,
26725
+ type: browserName
26726
+ }];
26727
+ // Mobile-specific options
26728
+ const mobileOptions = [{
26729
+ label: deviceInfo?.[0]?.name,
26730
+ type: getDeviceOption('android', 'android_icon', 0)
26731
+ }, {
26732
+ label: deviceInfo?.[1]?.name,
26733
+ type: getDeviceOption('ios', 'mac_icon', 1)
26734
+ }];
26735
+ // Determine options based on the type
26736
+ switch (type.toLowerCase()) {
26737
+ case 'web':
26738
+ return [...baseOptions, ...webOptions];
26739
+ case 'web & mobile':
26740
+ return [...baseOptions, ...webOptions, ...mobileOptions];
26741
+ case 'mobile':
26742
+ return [...baseOptions, ...mobileOptions];
26743
+ default:
26744
+ return [];
26745
+ }
26746
+ };
26747
+ const hideDataSet = scriptType.toLowerCase() !== 'manual';
26467
26748
  return jsxs("div", {
26468
26749
  className: classNames({
26469
26750
  'ff-connecting-branch-grid': evenRow,
@@ -26493,9 +26774,6 @@ const Branches = ({
26493
26774
  })]
26494
26775
  }), machineInstances?.map((machineInstance, index) => {
26495
26776
  const {
26496
- executionEnv = 'Local',
26497
- browserName = 'Local',
26498
- browserVersion = '1',
26499
26777
  numberOfRuns = 'numberOfRuns' in machineInstance ? machineInstance.numberOfRuns : 0,
26500
26778
  machineInstanceId = '',
26501
26779
  peVariableSetId = '',
@@ -26514,21 +26792,17 @@ const Branches = ({
26514
26792
  }), jsx(MachineInputField, {
26515
26793
  width: `${machineColumnWidth}px`,
26516
26794
  runCount: numberOfRuns,
26517
- options: [{
26518
- label: executionEnv,
26519
- type: executionEnv
26520
- }, {
26521
- label: browserVersion,
26522
- type: browserName
26523
- }],
26524
- contentReverse: !evenRow
26795
+ options: getMachineLabelOptionList(projectType, machineInstance),
26796
+ contentReverse: !evenRow,
26797
+ modalId: `${machineInstanceId}-runCount-${numberOfRuns}`,
26798
+ onClick: () => onUpdateAddBrowserInstance(`${machineInstanceId}-runCount-0`, machineInstance)
26525
26799
  }, ffid())]
26526
26800
  }), jsxs("div", {
26527
26801
  className: classNames({
26528
26802
  'ff-connecting-branch-datalist': evenRow,
26529
26803
  'ff-connecting-branch-datalist-reverse': !evenRow
26530
26804
  }),
26531
- children: [jsxs("div", {
26805
+ children: [hideDataSet && jsxs("div", {
26532
26806
  id: `ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`,
26533
26807
  className: "ff-dataset-list-branch",
26534
26808
  onClick: () => onUpdateDataSetList(`ff-sequential-branch-dataset-${machineInstanceId}-${numberOfRuns}`, {
@@ -26565,7 +26839,7 @@ const Branches = ({
26565
26839
  children: jsx(Button$1, {
26566
26840
  id: `ff-sequential-branch-add-${machineInstanceId}`,
26567
26841
  variant: "tertiary",
26568
- label: "Add Environrment",
26842
+ label: addInstanceLabel,
26569
26843
  onClick: () => onAddBrowser(`ff-sequential-branch-add-${machineInstanceId}`)
26570
26844
  })
26571
26845
  }), showMiddleArrow(index) && jsx("div", {
@@ -26596,8 +26870,8 @@ const Branches = ({
26596
26870
  });
26597
26871
  };
26598
26872
 
26599
- var css_248z$s = ".ff-connecting-branch-grid-wrapper {\n box-sizing: border-box;\n}";
26600
- styleInject(css_248z$s);
26873
+ var css_248z$t = ".ff-connecting-branch-grid-wrapper {\n box-sizing: border-box;\n}";
26874
+ styleInject(css_248z$t);
26601
26875
 
26602
26876
  const ConnectingBranches = ({
26603
26877
  machineBranchInstances,
@@ -26606,7 +26880,11 @@ const ConnectingBranches = ({
26606
26880
  onAddBrowser,
26607
26881
  onDeleteBrowser,
26608
26882
  onAddRunBrowser,
26609
- onUpdateDataSetList
26883
+ onUpdateDataSetList,
26884
+ onUpdateAddBrowserInstance,
26885
+ addInstanceLabel = '',
26886
+ scriptType = '',
26887
+ projectType = 'Web'
26610
26888
  }) => {
26611
26889
  const [machineInstance, setMachineInstance] = useState(machineBranchInstances);
26612
26890
  useEffect(() => {
@@ -26633,7 +26911,11 @@ const ConnectingBranches = ({
26633
26911
  onAddRunBrowser: onAddRunBrowser,
26634
26912
  nextRowMachineInstance: machineInstancesRow[index + 1]?.[0],
26635
26913
  previousRowMachineInstance: machineInstancesRow[index - 1]?.[machineColumnCount - 1],
26636
- onUpdateDataSetList: onUpdateDataSetList
26914
+ onUpdateDataSetList: onUpdateDataSetList,
26915
+ onUpdateAddBrowserInstance: onUpdateAddBrowserInstance,
26916
+ addInstanceLabel: addInstanceLabel,
26917
+ scriptType: scriptType,
26918
+ projectType: projectType
26637
26919
  })
26638
26920
  }, ffid()))
26639
26921
  });
@@ -26655,7 +26937,11 @@ const SequentialConnectingBranch = ({
26655
26937
  testDataSetId: '',
26656
26938
  globalVariableSetId: '',
26657
26939
  peVariableSetId: ''
26658
- }
26940
+ },
26941
+ onUpdateAddBrowserInstance = () => {},
26942
+ addInstanceLabel = 'Add Environment',
26943
+ scriptType = 'Automation',
26944
+ projectType = 'Web'
26659
26945
  }) => {
26660
26946
  const [selectedMachineInstance, setSelectedMachineInstance] = useState({});
26661
26947
  const selectButtonRef = useRef(null);
@@ -26663,7 +26949,10 @@ const SequentialConnectingBranch = ({
26663
26949
  const defaultMachineColumnWidth = Math.max(machineColumnWidth, 180);
26664
26950
  const [machineBranchInstances, setMachineBranchInstances] = useState([]);
26665
26951
  const isMachineInstances = checkEmpty(machineInstances);
26666
- const isMachineSelected = checkEmpty(selectedMachine.value?.clientId);
26952
+ let isMachineSelected = checkEmpty(selectedMachine.value?.clientId);
26953
+ if (scriptType === 'Manual') {
26954
+ isMachineSelected = checkEmpty(selectedMachine.value);
26955
+ }
26667
26956
  const getMachineStatusColor = (machineStatus = '') => {
26668
26957
  if (machineStatus.toLowerCase().includes('inactive')) return 'var(--ff-machine-inactive-status-color)';
26669
26958
  if (machineStatus.toLowerCase().includes('running')) return 'var(--ff-machine-running-status-color)';
@@ -26676,6 +26965,7 @@ const SequentialConnectingBranch = ({
26676
26965
  useEffect(() => {
26677
26966
  setMachineBranchInstances([...machineInstances, {}]);
26678
26967
  }, [machineInstances]);
26968
+ const hideDataSet = scriptType.toLowerCase() !== 'manual';
26679
26969
  return jsxs("div", {
26680
26970
  className: "ff-sequential-connecting-branch-wrapper",
26681
26971
  children: [jsxs("div", {
@@ -26732,7 +27022,7 @@ const SequentialConnectingBranch = ({
26732
27022
  })
26733
27023
  }), jsxs("div", {
26734
27024
  className: "ff-datalist-wrapper",
26735
- children: [jsxs("div", {
27025
+ children: [hideDataSet && jsxs("div", {
26736
27026
  id: "ff-sequential-machine-datalist",
26737
27027
  onClick: () => onUpdateDataSetList('ff-sequential-machine-datalist', dataSetValues),
26738
27028
  children: [jsx(Icon, {
@@ -26762,14 +27052,18 @@ const SequentialConnectingBranch = ({
26762
27052
  onAddBrowser: onAddBrowserInstance,
26763
27053
  onDeleteBrowser: onDeleteBrowserInstance,
26764
27054
  onAddRunBrowser: onAddRunBrowserInstance,
26765
- onUpdateDataSetList: onUpdateDataSetList
27055
+ onUpdateDataSetList: onUpdateDataSetList,
27056
+ onUpdateAddBrowserInstance: onUpdateAddBrowserInstance,
27057
+ addInstanceLabel: addInstanceLabel,
27058
+ scriptType: scriptType,
27059
+ projectType: projectType
26766
27060
  })
26767
27061
  })]
26768
27062
  });
26769
27063
  };
26770
27064
 
26771
- var css_248z$r = ".ff-input-field {\n display: none;\n}\n\n.ff-attachment-files {\n display: flex;\n align-items: center;\n gap: 4px;\n line-height: 15px;\n}";
26772
- styleInject(css_248z$r);
27065
+ var css_248z$s = ".ff-input-field {\n display: none;\n}\n\n.ff-attachment-files {\n display: flex;\n align-items: center;\n gap: 4px;\n line-height: 15px;\n}";
27066
+ styleInject(css_248z$s);
26773
27067
 
26774
27068
  const AttachmentButton = ({
26775
27069
  label,
@@ -26826,6 +27120,7 @@ const AttachmentButton = ({
26826
27120
  return jsxs("div", {
26827
27121
  children: [jsx(Typography, {
26828
27122
  fontWeight: "semi-bold",
27123
+ lineHeight: '18px',
26829
27124
  children: label
26830
27125
  }), (!showSelectedFiles || selectedFiles.length === 0) && jsx(Button$1, {
26831
27126
  variant: buttonVariant,
@@ -26944,8 +27239,8 @@ const toast = {
26944
27239
  alert: (arg1, arg2) => openToast('alert', arg1, arg2)
26945
27240
  };
26946
27241
 
26947
- var css_248z$q = "/* Container Styling */\n.toggle-container {\n display: flex;\n background-color: var(--base-bg-color);\n height: 24px;\n border-radius: 6px;\n padding: 4px 2px;\n overflow: hidden;\n width: fit-content;\n box-shadow: 1px 1px 2px 0px var(--base-bg-color), inset -1px -1px 2px var(--base-bg-color), inset 1px -1px 2px var(--ff-toggle-switch-shadow-color), inset -1px 2px 0px var(--ff-toggle-switch-shadow-color);\n align-items: center;\n justify-content: center;\n gap: 4px;\n}\n\n/* Button Styling */\n.toggle-button {\n padding: 4px 2px;\n font-size: 10px;\n font-weight: 500;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n background-color: var(--base-bg-color);\n color: var(--ff-toggle-switch-off-color);\n outline: none;\n transition: all 0.3s ease;\n min-width: 24px;\n height: 20px;\n text-align: center;\n box-shadow: inset 1px 1px 2px 0 var(--base-bg-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), 1px -1px 2px 0 var(--ff-chips-blur-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Active Button */\n.toggle-button.active {\n background-color: var(--ff-line-number-bg);\n color: var(--base-bg-color);\n box-shadow: inset -1px -1px 2px 0 var(--ff-chips-blur-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Button Hover Effect */\n.toggle-button:hover {\n background-color: var(--hover-color);\n color: var(--brand-color);\n}";
26948
- styleInject(css_248z$q);
27242
+ var css_248z$r = "/* Container Styling */\n.toggle-container {\n display: flex;\n background-color: var(--base-bg-color);\n height: 24px;\n border-radius: 6px;\n padding: 4px 2px;\n overflow: hidden;\n width: fit-content;\n box-shadow: 1px 1px 2px 0px var(--base-bg-color), inset -1px -1px 2px var(--base-bg-color), inset 1px -1px 2px var(--ff-toggle-switch-shadow-color), inset -1px 2px 0px var(--ff-toggle-switch-shadow-color);\n align-items: center;\n justify-content: center;\n gap: 4px;\n}\n\n/* Button Styling */\n.toggle-button {\n padding: 4px 2px;\n font-size: 10px;\n font-weight: 500;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n background-color: var(--base-bg-color);\n color: var(--ff-toggle-switch-off-color);\n outline: none;\n transition: all 0.3s ease;\n min-width: 24px;\n height: 20px;\n text-align: center;\n box-shadow: inset 1px 1px 2px 0 var(--base-bg-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), 1px -1px 2px 0 var(--ff-chips-blur-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Active Button */\n.toggle-button.active {\n background-color: var(--ff-line-number-bg);\n color: var(--base-bg-color);\n box-shadow: inset -1px -1px 2px 0 var(--ff-chips-blur-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Button Hover Effect */\n.toggle-button:hover {\n background-color: var(--hover-color);\n color: var(--brand-color);\n}";
27243
+ styleInject(css_248z$r);
26949
27244
 
26950
27245
  const ToggleSwitch = ({
26951
27246
  selected = "text",
@@ -26967,8 +27262,8 @@ const ToggleSwitch = ({
26967
27262
  });
26968
27263
  };
26969
27264
 
26970
- var css_248z$p = ".ff-avatar {\n border-radius: 50%;\n overflow: hidden;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: var(--ff-avatar-background-color);\n}\n.ff-avatar--small {\n width: 32px;\n height: 32px;\n}\n.ff-avatar--medium {\n width: 48px;\n height: 48px;\n}\n.ff-avatar--large {\n width: 64px;\n height: 64px;\n}\n.ff-avatar .ff-avatar-label {\n font-weight: bold;\n text-align: center;\n}";
26971
- styleInject(css_248z$p);
27265
+ var css_248z$q = ".ff-avatar {\n border-radius: 50%;\n overflow: hidden;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background-color: var(--ff-avatar-background-color);\n}\n.ff-avatar--small {\n width: 32px;\n height: 32px;\n}\n.ff-avatar--medium {\n width: 48px;\n height: 48px;\n}\n.ff-avatar--large {\n width: 64px;\n height: 64px;\n}\n.ff-avatar .ff-avatar-label {\n font-weight: bold;\n text-align: center;\n}";
27266
+ styleInject(css_248z$q);
26972
27267
 
26973
27268
  const Avatar = ({
26974
27269
  variant = "small",
@@ -27004,8 +27299,8 @@ const Avatar = ({
27004
27299
  });
27005
27300
  };
27006
27301
 
27007
- var css_248z$o = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown, .ff-label-edit-text-field .ff-text-dropdown-field {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n.ff-label-edit-text-field .ff-label-text-field {\n display: flex;\n gap: 10px;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n position: absolute;\n top: 0;\n left: 10px;\n transform: translateY(-50%);\n transition: all 0.2s ease;\n color: var(--label-edit-text-label-color);\n background: var(--label-edit-text-background-color);\n padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n padding: 4px;\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown {\n border: 1px solid var(--label-edit-text-label-color);\n outline: none;\n width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field {\n position: relative;\n padding: 0 4px;\n border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field {\n flex: 2;\n border: 1px solid var(--label-edit-text-label-color);\n border-radius: 4px 0 0 4px;\n border-right: none;\n border-width: thin;\n padding-left: 5px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field:focus-visible {\n outline: none;\n}\n.ff-label-edit-text-field .dropdown {\n border-radius: 0 4px 4px 0;\n flex: 1;\n height: inherit;\n}\n.ff-label-edit-text-field .ff-icon-container {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n margin: 0;\n color: var(--label-edit-error-text);\n}";
27008
- styleInject(css_248z$o);
27302
+ var css_248z$p = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown, .ff-label-edit-text-field .ff-text-dropdown-field {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n.ff-label-edit-text-field .ff-label-text-field {\n display: flex;\n gap: 5px;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n position: absolute;\n top: 0;\n left: 10px;\n transform: translateY(-50%);\n transition: all 0.2s ease;\n color: var(--label-edit-text-label-color);\n background: var(--label-edit-text-background-color);\n padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n padding: 4px;\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown {\n border: 1px solid var(--label-edit-text-label-color);\n outline: none;\n width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field {\n position: relative;\n padding: 0 4px;\n border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field {\n flex: 2;\n border: 1px solid var(--label-edit-text-label-color);\n border-radius: 4px 0 0 4px;\n border-right: none;\n border-width: thin;\n padding-left: 5px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field:focus-visible {\n outline: none;\n}\n.ff-label-edit-text-field .dropdown {\n border-radius: 0 4px 4px 0;\n flex: 1;\n height: inherit;\n}\n.ff-label-edit-text-field .ff-icon-container {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n margin: 0;\n color: var(--label-edit-error-text);\n}";
27303
+ styleInject(css_248z$p);
27009
27304
 
27010
27305
  const getErrorMessage$1 = (inputValue, text, customError, customErrorCondition) => {
27011
27306
  if (inputValue === text) {
@@ -27021,6 +27316,7 @@ const getErrorMessage$1 = (inputValue, text, customError, customErrorCondition)
27021
27316
  };
27022
27317
  const LabelEditTextField = ({
27023
27318
  label,
27319
+ placeholder,
27024
27320
  text,
27025
27321
  highlightText,
27026
27322
  customError,
@@ -27029,7 +27325,7 @@ const LabelEditTextField = ({
27029
27325
  cancelIcon,
27030
27326
  variant = 'textField',
27031
27327
  dropdownData = [],
27032
- width,
27328
+ // width,
27033
27329
  height,
27034
27330
  isOpen = false,
27035
27331
  confirmAction,
@@ -27041,7 +27337,7 @@ const LabelEditTextField = ({
27041
27337
  const [dropdownValue, setDropdownValue] = useState(dropdownData[0]?.value ?? '');
27042
27338
  const [showError, setShowError] = useState('');
27043
27339
  const [isTextFieldModified, setIsTextFieldModified] = useState(false);
27044
- const [isDropdownModified, setIsDropdownModified] = useState(false);
27340
+ const isThrowingError = showError && isEditing ? true : false;
27045
27341
  const containerRef = useRef(null);
27046
27342
  const cancelRef = useRef(null); // New ref for cancel icon
27047
27343
  const [clickTimeout, setClickTimeout] = useState(null);
@@ -27090,18 +27386,12 @@ const LabelEditTextField = ({
27090
27386
  setIsEditing(false);
27091
27387
  setShowError('');
27092
27388
  setIsTextFieldModified(false);
27093
- setIsDropdownModified(false);
27094
27389
  };
27095
27390
  const handleTextFieldChange = e => {
27096
27391
  setInputValue(e.target.value);
27097
27392
  setIsTextFieldModified(true);
27098
27393
  setShowError('');
27099
27394
  };
27100
- const handleDropdownChange = e => {
27101
- setDropdownValue(e.target.value);
27102
- setIsDropdownModified(true);
27103
- setShowError('');
27104
- };
27105
27395
  const handleBlur = e => {
27106
27396
  if (containerRef.current && !containerRef.current.contains(e.target) && cancelRef.current !== e.target // Exclude clicks on cancel icon
27107
27397
  ) {
@@ -27130,43 +27420,41 @@ const LabelEditTextField = ({
27130
27420
  style: {
27131
27421
  height
27132
27422
  },
27133
- children: [jsx("input", {
27423
+ children: [jsx(Input, {
27424
+ name: "input",
27134
27425
  type: "text",
27426
+ label: label ? label : '',
27427
+ disabled: false,
27428
+ error: isThrowingError,
27429
+ placeholder: placeholder ? placeholder : '',
27135
27430
  value: inputValue,
27136
27431
  onChange: handleTextFieldChange,
27137
- className: `ff-text-dropdown-field ${isTextFieldModified ? 'modified' : ''}`,
27138
- placeholder: " ",
27139
- style: {
27140
- width
27141
- }
27142
- }), label && jsx("label", {
27143
- className: "ff-label",
27144
- children: label
27145
- }), jsx("select", {
27146
- value: dropdownValue,
27147
- onChange: handleDropdownChange,
27148
- className: `dropdown ${isDropdownModified ? 'modified' : ''}`,
27149
- children: dropdownData.map(item => jsx("option", {
27150
- value: item.value,
27151
- children: item.label
27152
- }, item.id))
27432
+ className: `
27433
+
27434
+ ${isTextFieldModified ? 'modified' : ''}`
27435
+ }), jsx(Select$1, {
27436
+ label: '',
27437
+ optionsList: dropdownData,
27438
+ selectedOption: {
27439
+ value: dropdownValue,
27440
+ label: dropdownValue
27441
+ },
27442
+ onChange: option => setDropdownValue(option.value)
27153
27443
  })]
27154
- }) : jsxs("div", {
27444
+ }) : jsx("div", {
27155
27445
  className: "ff-label-text-field-without-dropdown",
27156
- children: [jsx("input", {
27446
+ children: jsx(Input, {
27447
+ name: "input",
27157
27448
  type: "text",
27449
+ label: label ? label : '',
27450
+ disabled: false,
27451
+ placeholder: placeholder ? placeholder : '',
27158
27452
  value: inputValue,
27159
27453
  onChange: handleTextFieldChange,
27160
- className: `ff-text-field ${isTextFieldModified ? 'modified' : ''}`,
27161
- placeholder: " ",
27162
- style: {
27163
- width,
27164
- height
27165
- }
27166
- }), jsx("label", {
27167
- className: "ff-textfield-label",
27168
- children: label
27169
- })]
27454
+ className: `
27455
+
27456
+ ${isTextFieldModified ? 'modified' : ''}`
27457
+ })
27170
27458
  }), jsxs("div", {
27171
27459
  className: "ff-icon-container",
27172
27460
  children: [confirmIcon && jsx(Icon, {
@@ -27208,8 +27496,8 @@ const LabelEditTextField = ({
27208
27496
  });
27209
27497
  };
27210
27498
 
27211
- var css_248z$n = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n.ff-label-edit-text-field .display-text-container {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button {\n padding: 4px 8px;\n background-color: var(--button-background-color);\n color: var(--button-text-color);\n border: 1px solid var(--button-border-color);\n border-radius: 4px;\n cursor: pointer;\n font-size: 12px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button:hover {\n background-color: var(--button-hover-background-color);\n}\n.ff-label-edit-text-field .ff-label-text-field {\n display: flex;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n position: absolute;\n top: 0;\n left: 10px;\n transform: translateY(-50%);\n transition: all 0.2s ease;\n color: var(--label-edit-text-label-color);\n background: var(--label-edit-text-background-color);\n padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field {\n outline: none;\n width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field-error-border {\n border: 1px solid var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-border {\n border: 1px solid var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field-error-text {\n color: var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-text {\n color: var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field {\n padding: 0 4px;\n border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-icon-container {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n color: var(--label-edit-error-text);\n margin: 0;\n}";
27212
- styleInject(css_248z$n);
27499
+ var css_248z$o = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n display: flex;\n flex-direction: column;\n position: relative;\n width: 100%;\n}\n.ff-label-edit-text-field .display-text-container {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button {\n padding: 4px 8px;\n background-color: var(--button-background-color);\n color: var(--button-text-color);\n border: 1px solid var(--button-border-color);\n border-radius: 4px;\n cursor: pointer;\n font-size: 12px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button:hover {\n background-color: var(--button-hover-background-color);\n}\n.ff-label-edit-text-field .ff-label-text-field {\n display: flex;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n position: relative;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n position: absolute;\n top: 0;\n left: 10px;\n transform: translateY(-50%);\n transition: all 0.2s ease;\n color: var(--label-edit-text-label-color);\n background: var(--label-edit-text-background-color);\n padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field {\n outline: none;\n width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field-error-border {\n border: 1px solid var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-border {\n border: 1px solid var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field-error-text {\n color: var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-text {\n color: var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field {\n padding: 0 4px;\n border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-icon-container {\n display: flex;\n gap: 8px;\n align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n color: var(--label-edit-error-text);\n margin: 0;\n}";
27500
+ styleInject(css_248z$o);
27213
27501
 
27214
27502
  const capitalize = text => {
27215
27503
  if (!text) return '';
@@ -27241,8 +27529,8 @@ const EditTextField = ({
27241
27529
  cancelIcon,
27242
27530
  editIcon,
27243
27531
  dropdownData = [],
27244
- width = '300px',
27245
- height = '22px',
27532
+ // width = '',
27533
+ // height = '',
27246
27534
  isOpen = false,
27247
27535
  confirmAction,
27248
27536
  onClick,
@@ -27253,6 +27541,7 @@ const EditTextField = ({
27253
27541
  const [dropdownValue, setDropdownValue] = useState(dropdownData[0]?.value ?? '');
27254
27542
  const [showError, setShowError] = useState('');
27255
27543
  const [isTextFieldModified, setIsTextFieldModified] = useState(false);
27544
+ const isThrowingError = showError && isEditing ? true : false;
27256
27545
  const containerRef = useRef(null);
27257
27546
  const cancelRef = useRef(null);
27258
27547
  const handleEditButtonClick = () => {
@@ -27286,22 +27575,21 @@ const EditTextField = ({
27286
27575
  ref: containerRef,
27287
27576
  children: [isEditing ? jsxs("div", {
27288
27577
  className: "ff-label-text-field",
27289
- children: [jsxs("div", {
27578
+ children: [jsx("div", {
27290
27579
  className: "ff-label-text-field-without-dropdown",
27291
- children: [jsx("input", {
27292
- type: "text",
27580
+ children: jsx(Input, {
27581
+ name: "input",
27582
+ label: label ? label : '',
27583
+ disabled: false,
27584
+ error: isThrowingError,
27585
+ placeholder: "Enter your name",
27293
27586
  value: inputValue,
27294
27587
  onChange: handleTextFieldChange,
27295
- className: `ff-text-field ${showError && isEditing ? 'ff-text-field-error-border' : 'ff-text-field-border'} ${isTextFieldModified ? 'modified' : ''}`,
27296
- placeholder: " ",
27297
- style: {
27298
- width,
27299
- height
27300
- }
27301
- }), jsx("label", {
27302
- className: `ff-textfield-label ${showError && isEditing ? 'ff-text-field-error-text' : 'ff-text-field-text'}`,
27303
- children: label
27304
- })]
27588
+ className: `
27589
+
27590
+ ${isTextFieldModified ? 'modified' : ''}`,
27591
+ type: "text"
27592
+ })
27305
27593
  }), jsxs("div", {
27306
27594
  className: "ff-icon-container",
27307
27595
  children: [confirmIcon && jsx(Icon, {
@@ -27397,6 +27685,15 @@ const DELETE_ROW = 'DELETE_ROW';
27397
27685
  const DELETE_COLUMN = 'DELETE_COLUMN';
27398
27686
  const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
27399
27687
  const SET_COLUMN_POSITION = 'SET_COLUMN_POSITION';
27688
+ const SET_AUTO_FILL = 'SET_AUTO_FILL';
27689
+ function autoFill(autofill) {
27690
+ return {
27691
+ type: SET_AUTO_FILL,
27692
+ payload: {
27693
+ autofill
27694
+ }
27695
+ };
27696
+ }
27400
27697
  function setRowHeight(row, height) {
27401
27698
  return {
27402
27699
  type: SET_ROW_HEIGHT,
@@ -28774,10 +29071,10 @@ function applyBorderToCells(currentData, selectedRange, value, color) {
28774
29071
  case 'border-none':
28775
29072
  updatedCell.style = {
28776
29073
  ...currentCell.style,
28777
- borderRight: `1px solid var(--toggle-strip-color)`,
28778
- borderLeft: `1px solid var(--toggle-strip-color)`,
28779
- borderTop: `1px solid var(--toggle-strip-color)`,
28780
- borderBottom: `1px solid var(--toggle-strip-color)`
29074
+ borderRight: `1px solid var(--excel-sheet-border)`,
29075
+ borderLeft: `1px solid var(--excel-sheet-border)`,
29076
+ borderTop: `1px solid var(--excel-sheet-border)`,
29077
+ borderBottom: `1px solid var(--excel-sheet-border)`
28781
29078
  };
28782
29079
  break;
28783
29080
  case 'border-right':
@@ -28883,8 +29180,7 @@ function applyUnderlineToCells(currentData, selectedRange, value, active) {
28883
29180
  ...currentCell,
28884
29181
  style: {
28885
29182
  ...currentCell.style,
28886
- textDecoration: 'none',
28887
- textDecorationStyle: 'solid'
29183
+ textDecoration: 'none solid'
28888
29184
  }
28889
29185
  };
28890
29186
  } else {
@@ -28892,8 +29188,7 @@ function applyUnderlineToCells(currentData, selectedRange, value, active) {
28892
29188
  ...currentCell,
28893
29189
  style: {
28894
29190
  ...currentCell.style,
28895
- textDecoration: value === 'double_border' ? 'underline' : value,
28896
- textDecorationStyle: value === 'double_border' ? 'double' : 'none'
29191
+ textDecoration: value === 'double_border' ? 'underline double' : value
28897
29192
  }
28898
29193
  };
28899
29194
  }
@@ -29010,6 +29305,96 @@ function applyFormatePainter(currentData, activePoint) {
29010
29305
  }
29011
29306
  return undefined;
29012
29307
  }
29308
+ function dragEndFormatePainter(currentData, selectedRange, formattedStyle) {
29309
+ if (!selectedRange || !formattedStyle.open) {
29310
+ return currentData;
29311
+ }
29312
+ const {
29313
+ start,
29314
+ end
29315
+ } = selectedRange;
29316
+ let updatedData = currentData;
29317
+ for (let row = start.row; row <= end.row; row++) {
29318
+ for (let col = start.column; col <= end.column; col++) {
29319
+ const currentCell = get({
29320
+ row,
29321
+ column: col
29322
+ }, updatedData);
29323
+ if (!currentCell) {
29324
+ continue;
29325
+ }
29326
+ const updatedCell = {
29327
+ ...currentCell,
29328
+ style: formattedStyle.style
29329
+ };
29330
+ updatedData = set({
29331
+ row,
29332
+ column: col
29333
+ }, updatedCell, updatedData);
29334
+ }
29335
+ }
29336
+ return updatedData;
29337
+ }
29338
+ function dragEndAutoFill(currentData, selectedRange, cellValue, activeCell) {
29339
+ if (!selectedRange) {
29340
+ return currentData;
29341
+ }
29342
+ const {
29343
+ start,
29344
+ end
29345
+ } = selectedRange;
29346
+ const rowCount = start.row - end.row;
29347
+ const columnCount = start.column - end.column;
29348
+ let startPoint = {
29349
+ row: 0,
29350
+ column: 0
29351
+ };
29352
+ let endPoint = {
29353
+ row: 0,
29354
+ column: 0
29355
+ };
29356
+ if (rowCount > columnCount) {
29357
+ startPoint = {
29358
+ row: activeCell?.row ?? 0,
29359
+ column: start.column
29360
+ };
29361
+ endPoint = {
29362
+ row: activeCell?.row ?? 0,
29363
+ column: end.column
29364
+ };
29365
+ } else {
29366
+ startPoint = {
29367
+ row: start.row,
29368
+ column: activeCell?.column ?? 0
29369
+ };
29370
+ endPoint = {
29371
+ row: end.row,
29372
+ column: activeCell?.column ?? 0
29373
+ };
29374
+ }
29375
+ let updatedData = currentData;
29376
+ for (let row = startPoint.row; row <= endPoint.row; row++) {
29377
+ for (let col = startPoint.column; col <= endPoint.column; col++) {
29378
+ const currentCell = get({
29379
+ row,
29380
+ column: col
29381
+ }, updatedData);
29382
+ if (!currentCell) {
29383
+ continue;
29384
+ }
29385
+ const updatedCell = {
29386
+ ...currentCell,
29387
+ style: cellValue.style,
29388
+ value: cellValue.value
29389
+ };
29390
+ updatedData = set({
29391
+ row,
29392
+ column: col
29393
+ }, updatedCell, updatedData);
29394
+ }
29395
+ }
29396
+ return updatedData;
29397
+ }
29013
29398
  function edit(state) {
29014
29399
  if (isActiveReadOnly(state)) {
29015
29400
  return state;
@@ -29257,6 +29642,13 @@ const INITIAL_STATE = {
29257
29642
  lastChanged: null,
29258
29643
  hasPasted: false,
29259
29644
  cut: false,
29645
+ autoFill: {
29646
+ open: false,
29647
+ cellValue: {
29648
+ value: '',
29649
+ style: {}
29650
+ }
29651
+ },
29260
29652
  dragging: false,
29261
29653
  model: new Model(createFormulaParser, []),
29262
29654
  selected: new EmptySelection(),
@@ -29271,6 +29663,30 @@ const INITIAL_STATE = {
29271
29663
  };
29272
29664
  function reducer(state, action) {
29273
29665
  switch (action.type) {
29666
+ case SET_AUTO_FILL:
29667
+ {
29668
+ const {
29669
+ autofill
29670
+ } = action.payload;
29671
+ const activeCell = state.active;
29672
+ let currentCell = {
29673
+ value: '',
29674
+ style: {}
29675
+ };
29676
+ if (activeCell) {
29677
+ currentCell = get({
29678
+ row: activeCell.row,
29679
+ column: activeCell.column
29680
+ }, state.model.data) || currentCell;
29681
+ }
29682
+ return {
29683
+ ...state,
29684
+ autoFill: {
29685
+ open: autofill,
29686
+ cellValue: currentCell
29687
+ }
29688
+ };
29689
+ }
29274
29690
  case ADD_ROW_TOP:
29275
29691
  {
29276
29692
  let {
@@ -29839,44 +30255,74 @@ function reducer(state, action) {
29839
30255
  case DRAG_END:
29840
30256
  {
29841
30257
  const selectedRange = state.selected.toRange(state.model.data);
29842
- let currentData = state.model.data;
29843
- if (!state.formattedStyle.open || !selectedRange) {
30258
+ const activeCell = state.active;
30259
+ let updatedData = state.model.data;
30260
+ if (state.formattedStyle.open) {
30261
+ updatedData = dragEndFormatePainter(state.model.data, selectedRange, state.formattedStyle);
30262
+ }
30263
+ if (state.autoFill.open) {
30264
+ updatedData = dragEndAutoFill(state.model.data, selectedRange, state.autoFill.cellValue, activeCell);
30265
+ let {
30266
+ start,
30267
+ end
30268
+ } = selectedRange;
30269
+ const rowCount = start.row - end.row;
30270
+ const columnCount = start.column - end.column;
30271
+ let startPoint = {
30272
+ row: 0,
30273
+ column: 0
30274
+ };
30275
+ let endPoint = {
30276
+ row: 0,
30277
+ column: 0
30278
+ };
30279
+ if (rowCount > columnCount) {
30280
+ startPoint = {
30281
+ row: activeCell?.row ?? 0,
30282
+ column: start.column
30283
+ };
30284
+ endPoint = {
30285
+ row: activeCell?.row ?? 0,
30286
+ column: end.column
30287
+ };
30288
+ } else {
30289
+ startPoint = {
30290
+ row: start.row,
30291
+ column: activeCell?.column ?? 0
30292
+ };
30293
+ endPoint = {
30294
+ row: end.row,
30295
+ column: activeCell?.column ?? 0
30296
+ };
30297
+ }
29844
30298
  return {
29845
30299
  ...state,
29846
30300
  dragging: false,
30301
+ autoFill: {
30302
+ open: false,
30303
+ cellValue: {
30304
+ value: '',
30305
+ style: {}
30306
+ }
30307
+ },
29847
30308
  formattedStyle: {
29848
30309
  open: false,
29849
30310
  style: undefined
29850
- }
30311
+ },
30312
+ model: new Model(state.model.createFormulaParser, updatedData),
30313
+ selected: new RangeSelection(new PointRange(startPoint, endPoint))
29851
30314
  };
29852
30315
  }
29853
- const {
29854
- start,
29855
- end
29856
- } = selectedRange;
29857
- let updatedData = currentData;
29858
- for (let row = start.row; row <= end.row; row++) {
29859
- for (let col = start.column; col <= end.column; col++) {
29860
- const currentCell = get({
29861
- row,
29862
- column: col
29863
- }, updatedData);
29864
- if (!currentCell) {
29865
- continue;
29866
- }
29867
- const updatedCell = {
29868
- ...currentCell,
29869
- style: state.formattedStyle.style
29870
- };
29871
- updatedData = set({
29872
- row,
29873
- column: col
29874
- }, updatedCell, updatedData);
29875
- }
29876
- }
29877
30316
  return {
29878
30317
  ...state,
29879
30318
  dragging: false,
30319
+ autoFill: {
30320
+ open: false,
30321
+ cellValue: {
30322
+ value: '',
30323
+ style: {}
30324
+ }
30325
+ },
29880
30326
  formattedStyle: {
29881
30327
  open: false,
29882
30328
  style: undefined
@@ -31194,8 +31640,6 @@ const Cell = ({
31194
31640
  setCellData,
31195
31641
  setContextMenu
31196
31642
  }) => {
31197
- const [isDotDragging, setIsDotDragging] = React.useState(false);
31198
- const [first, setFirst] = React.useState(true);
31199
31643
  const rootRef = React.useRef(null);
31200
31644
  const point = React.useMemo(() => ({
31201
31645
  row,
@@ -31225,27 +31669,11 @@ const Cell = ({
31225
31669
  }
31226
31670
  }, [mode, setCellDimensions, point, select, activate]);
31227
31671
  const handleMouseOver = React.useCallback(event => {
31228
- if (dragging && first && !isDotDragging) {
31229
- setCellDimensions(point, getOffsetRect(event.currentTarget));
31230
- select(point);
31231
- }
31232
- }, [setCellDimensions, select, dragging, point, first, isDotDragging]);
31233
- const handleDotDown = React.useCallback(event => {
31234
- setIsDotDragging(true);
31235
- setCellDimensions(point, getOffsetRect(event.currentTarget));
31236
- if (event.shiftKey) {
31237
- select(point);
31238
- } else {
31239
- activate(point);
31240
- }
31241
- }, [setCellDimensions, point, select, activate]);
31242
- const handleDotOver = React.useCallback(event => {
31243
- setFirst(false);
31244
- if (dragging && isDotDragging) {
31672
+ if (dragging) {
31245
31673
  setCellDimensions(point, getOffsetRect(event.currentTarget));
31246
31674
  select(point);
31247
31675
  }
31248
- }, [setCellDimensions, select, dragging, point, isDotDragging]);
31676
+ }, [setCellDimensions, select, dragging, point]);
31249
31677
  const contextClick = React.useCallback(event => {
31250
31678
  event.preventDefault();
31251
31679
  select(point);
@@ -31271,7 +31699,7 @@ const Cell = ({
31271
31699
  // @ts-ignore
31272
31700
  DataViewer = data.DataViewer;
31273
31701
  }
31274
- return jsxs("td", {
31702
+ return jsx("td", {
31275
31703
  ref: rootRef,
31276
31704
  style: data?.style,
31277
31705
  className: classNames('ff-spreadsheet-cell', data?.className, {
@@ -31281,18 +31709,14 @@ const Cell = ({
31281
31709
  onMouseDown: handleMouseDown,
31282
31710
  onContextMenu: contextClick,
31283
31711
  tabIndex: 0,
31284
- children: [jsx(DataViewer, {
31712
+ children: jsx(DataViewer, {
31285
31713
  row: row,
31286
31714
  setContextMenu: setContextMenu,
31287
31715
  column: column,
31288
31716
  cell: data,
31289
31717
  evaluatedCell: evaluatedData,
31290
31718
  setCellData: setCellData
31291
- }), jsx("div", {
31292
- // className="Selection_dot" TODO
31293
- onMouseOver: handleDotOver,
31294
- onMouseDown: handleDotDown
31295
- })]
31719
+ })
31296
31720
  });
31297
31721
  };
31298
31722
  const enhance = CellComponent => {
@@ -31425,6 +31849,7 @@ const ActiveCell = props => {
31425
31849
  const dispatch = useDispatch();
31426
31850
  const setCellData$1 = React.useCallback((active, data) => dispatch(setCellData(active, data)), [dispatch]);
31427
31851
  const edit = React.useCallback(() => dispatch(edit$1()), [dispatch]);
31852
+ const autoFill$1 = React.useCallback(value => dispatch(autoFill(value)), [dispatch]);
31428
31853
  const commit = React.useCallback(changes => dispatch(commit$1(changes)), [dispatch]);
31429
31854
  const view = React.useCallback(() => {
31430
31855
  dispatch(view$1());
@@ -31477,20 +31902,26 @@ const ActiveCell = props => {
31477
31902
  });
31478
31903
  const DataEditor = cell && cell.DataEditor || props.DataEditor;
31479
31904
  const readOnly = cell && cell.readOnly;
31480
- return hidden ? null : jsx("div", {
31905
+ const handleMouseDown = React.useCallback(() => {
31906
+ mode === 'view' ? autoFill$1(true) : autoFill$1(false);
31907
+ }, [mode, autoFill$1]);
31908
+ return hidden ? null : jsxs("div", {
31481
31909
  ref: rootRef,
31482
31910
  className: classNames('ff-spreadsheet-active-cell', `ff-spreadsheet-active-cell--${mode}`),
31483
31911
  style: dimensions,
31484
31912
  onClick: mode === 'view' && !readOnly ? edit : undefined,
31485
31913
  tabIndex: 0,
31486
- children: mode === 'edit' && active && jsx(DataEditor, {
31914
+ children: [mode === 'edit' && active && jsx(DataEditor, {
31487
31915
  row: active.row,
31488
31916
  column: active.column,
31489
31917
  cell: cell,
31490
31918
  // @ts-ignore
31491
31919
  onChange: handleChange,
31492
31920
  exitEditMode: view
31493
- })
31921
+ }), jsx("div", {
31922
+ onMouseDown: handleMouseDown,
31923
+ className: "select_dot"
31924
+ })]
31494
31925
  });
31495
31926
  };
31496
31927
 
@@ -31500,12 +31931,28 @@ const FloatingRect = ({
31500
31931
  hidden,
31501
31932
  variant
31502
31933
  }) => {
31934
+ const active = useSelector(state => state.active);
31935
+ const autoFill = useSelector(state => state.autoFill);
31936
+ const FixedVal = useSelector(state => active ? getCellDimensions(active, state.rowDimensions, state.columnDimensions) : undefined);
31503
31937
  const {
31504
31938
  width,
31505
31939
  height,
31506
31940
  top,
31507
31941
  left
31508
31942
  } = dimensions || {};
31943
+ let sampleHeight = FixedVal?.height ?? 0;
31944
+ let sampleWidth = FixedVal?.width ?? 0;
31945
+ let adjustedWidth = width;
31946
+ let adjustedHeight = height;
31947
+ if (autoFill.open && width && height && FixedVal) {
31948
+ if (width - sampleWidth > height - sampleHeight) {
31949
+ adjustedWidth = width;
31950
+ adjustedHeight = FixedVal.height;
31951
+ } else {
31952
+ adjustedHeight = height;
31953
+ adjustedWidth = FixedVal.width;
31954
+ }
31955
+ }
31509
31956
  return jsx("div", {
31510
31957
  className: classNames('ff-spreadsheet-floating-rect', {
31511
31958
  [`ff-spreadsheet-floating-rect--${variant}`]: variant,
@@ -31513,8 +31960,8 @@ const FloatingRect = ({
31513
31960
  'ff-spreadsheet-floating-rect--hidden': hidden
31514
31961
  }),
31515
31962
  style: {
31516
- width,
31517
- height,
31963
+ width: adjustedWidth,
31964
+ height: adjustedHeight,
31518
31965
  top,
31519
31966
  left
31520
31967
  }
@@ -31546,15 +31993,15 @@ const Copied = () => {
31546
31993
  });
31547
31994
  };
31548
31995
 
31549
- var css_248z$m = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-excel {\n display: flex;\n flex-direction: column;\n}\n\n.ff-spreadsheet {\n --background-color: var(--drawer-footer-bg);\n --text-color: var(--text-color);\n --readonly-text-color: var(--toggle-strip-active);\n --outline-color: var(--toggle-strip-active);\n --outline-background-color: var(--overlay-bg);\n --border-color: var(--toggle-strip-color);\n --header-background-color: var(--pop-up-background-blur);\n --elevation: var(--brand-color);\n position: relative;\n overflow: visible;\n background: var(--background-color);\n color: var(--text-color);\n display: inline-block;\n}\n\n.ff-spreadsheet-active-cell {\n position: absolute;\n border: 2px solid var(--outline-color);\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-active-cell--edit {\n background: var(--background-color);\n box-shadow: var(--elevation);\n}\n\n.ff-spreadsheet-table {\n overflow: scroll;\n margin-top: 20px;\n border-collapse: collapse;\n table-layout: fixed;\n}\n.ff-spreadsheet-table::-webkit-scrollbar {\n height: 0px;\n}\n\n.ff-spreadsheet-cell {\n outline: none;\n position: relative;\n z-index: 0;\n}\n\n.ff-spreadsheet-active-cell .Selection_dot {\n background-color: var(--elevation);\n height: 7px;\n width: 7px;\n border-radius: 50%;\n position: absolute;\n right: -3px;\n z-index: 10;\n bottom: -3px;\n cursor: crosshair;\n}\n\n.ff-spreadsheet-cell--readonly {\n color: var(--readonly-text-color);\n}\n\n.ff-spreadsheet-cell,\n.ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n overflow: hidden;\n word-break: keep-all;\n white-space: nowrap;\n text-align: left;\n box-sizing: border-box;\n user-select: none;\n}\n\n.ff-spreadsheet-header {\n background: var(--header-background-color);\n color: var(--readonly-text-color);\n text-align: center;\n}\n\n.corner_indicator {\n margin: 0px 0px 0px 15px;\n}\n\n.ff-spreadsheet-header--selected {\n background: var(--brand-color);\n color: var(--tooltip-text-color);\n}\n\n.ff-spreadsheet-header,\n.ff-spreadsheet-data-viewer,\n.ff-spreadsheet-data-editor input {\n padding: 4px;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-data-viewer--preserve-breaks {\n white-space: pre-wrap;\n}\n\n.ff-spreadsheet-data-editor,\n.ff-spreadsheet-data-editor input {\n width: 100%;\n height: 100%;\n}\n\n.ff-spreadsheet-data-editor input {\n font: inherit;\n color: inherit;\n background: none;\n border: none;\n outline: none;\n margin: 0;\n}\n\n.ff-spreadsheet-data-viewer--boolean {\n text-align: center;\n}\n\n.ff-spreadsheet-floating-rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-floating-rect--hidden {\n display: none;\n}\n\n.ff-spreadsheet-floating-rect--selected {\n background: var(--outline-background-color);\n border: 2px var(--outline-color) solid;\n}\n\n.ff-spreadsheet-floating-rect--dragging {\n border: none;\n}\n\n.ff-spreadsheet-floating-rect--copied {\n border: 2px var(--outline-color) dashed;\n}";
31996
+ var css_248z$n = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-excel {\n display: flex;\n flex-direction: column;\n}\n\n.ff-spreadsheet {\n --background-color: var(--drawer-footer-bg);\n --text-color: var(--text-color);\n --readonly-text-color: var(--toggle-strip-active);\n --outline-color: var(--toggle-strip-active);\n --outline-background-color: var(--overlay-bg);\n --border-color: var(--excel-sheet-border);\n --header-background-color: var(--pop-up-background-blur);\n --elevation: var(--brand-color);\n position: relative;\n overflow: visible;\n background: var(--background-color);\n color: var(--text-color);\n display: inline-block;\n}\n\n.ff-spreadsheet-active-cell {\n position: absolute;\n border: 2px solid var(--outline-color);\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-active-cell--edit {\n background: var(--background-color);\n box-shadow: var(--elevation);\n}\n\n.ff-spreadsheet-table {\n overflow: scroll;\n margin-top: 20px;\n border-collapse: collapse;\n table-layout: fixed;\n}\n.ff-spreadsheet-table::-webkit-scrollbar {\n height: 0px;\n}\n\n.ff-spreadsheet-cell {\n outline: none;\n position: relative;\n z-index: 0;\n}\n\n.ff-spreadsheet-active-cell .select_dot {\n background-color: var(--elevation);\n height: 10px;\n width: 10px;\n border-radius: 50%;\n position: absolute;\n bottom: -5px;\n right: -5px;\n cursor: crosshair;\n z-index: 1000;\n}\n\n.ff-spreadsheet-cell--readonly {\n color: var(--readonly-text-color);\n}\n\n.ff-spreadsheet-cell,\n.ff-spreadsheet-header {\n border: 0.1px solid var(--border-color);\n overflow: hidden;\n word-break: keep-all;\n white-space: nowrap;\n text-align: left;\n box-sizing: border-box;\n user-select: none;\n}\n\n.ff-spreadsheet-header {\n background: var(--header-background-color);\n color: var(--readonly-text-color);\n text-align: center;\n}\n\n.corner_indicator {\n margin: 0px 0px 0px 15px;\n}\n\n.ff-spreadsheet-header--selected {\n background: var(--brand-color);\n color: var(--tooltip-text-color);\n}\n\n.ff-spreadsheet-header,\n.ff-spreadsheet-data-viewer,\n.ff-spreadsheet-data-editor input {\n padding: 4px;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-data-viewer--preserve-breaks {\n white-space: pre-wrap;\n}\n\n.ff-spreadsheet-data-editor,\n.ff-spreadsheet-data-editor input {\n width: 100%;\n height: 100%;\n}\n\n.ff-spreadsheet-data-editor input {\n font: inherit;\n color: inherit;\n background: none;\n border: none;\n outline: none;\n margin: 0;\n}\n\n.ff-spreadsheet-data-viewer--boolean {\n text-align: center;\n}\n\n.ff-spreadsheet-floating-rect {\n position: absolute;\n pointer-events: none;\n box-sizing: border-box;\n}\n\n.ff-spreadsheet-floating-rect--hidden {\n display: none;\n}\n\n.ff-spreadsheet-floating-rect--selected {\n background: var(--outline-background-color);\n border: 2px var(--outline-color) solid;\n}\n\n.ff-spreadsheet-floating-rect--dragging {\n border: none;\n}\n\n.ff-spreadsheet-floating-rect--copied {\n border: 2px var(--outline-color) dashed;\n}";
31997
+ styleInject(css_248z$n);
31998
+
31999
+ var css_248z$m = ".ff-excel-toolbar {\n display: flex;\n height: 32px;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-divider {\n width: 1px;\n height: 24px;\n background-color: var(--excel-toolbar-divider);\n margin: 0 24px;\n border-radius: 1px;\n z-index: 1000;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font {\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-family {\n width: 120px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-size {\n width: 56px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text {\n width: 100px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text .ff-excel-toolbar-icon-underline {\n display: flex;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon {\n width: 88px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu {\n display: flex;\n align-items: center;\n width: 36px;\n height: 24px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu .ff-excel-toolbar-menu-option {\n display: flex;\n align-items: center;\n}";
31550
32000
  styleInject(css_248z$m);
31551
32001
 
31552
- var css_248z$l = ".ff-excel-toolbar {\n display: flex;\n height: 32px;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-divider {\n width: 1px;\n height: 24px;\n background-color: var(--excel-toolbar-divider);\n margin: 0 24px;\n border-radius: 1px;\n z-index: 1000;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font {\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-family {\n width: 120px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-size {\n width: 56px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text {\n width: 100px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text .ff-excel-toolbar-icon-underline {\n display: flex;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon {\n width: 88px;\n height: 24px;\n display: flex;\n gap: 8px;\n justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n width: 24px;\n height: 24px;\n border-radius: 4px;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n border-radius: 4px;\n background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu {\n display: flex;\n align-items: center;\n width: 36px;\n height: 24px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu .ff-excel-toolbar-menu-option {\n display: flex;\n align-items: center;\n}";
32002
+ var css_248z$l = ".ff-excel-color-selector {\n position: absolute;\n background-color: var(--error_light);\n width: 14px;\n height: 3px;\n bottom: 3px;\n z-index: 200;\n cursor: pointer;\n}\n.ff-excel-color-selector .ff-excel-color-selector-picker {\n width: 100%;\n height: 0;\n padding: 0;\n visibility: hidden;\n}";
31553
32003
  styleInject(css_248z$l);
31554
32004
 
31555
- var css_248z$k = ".ff-excel-color-selector {\n position: absolute;\n background-color: var(--error_light);\n width: 14px;\n height: 3px;\n bottom: 3px;\n z-index: 200;\n cursor: pointer;\n}\n.ff-excel-color-selector .ff-excel-color-selector-picker {\n width: 100%;\n height: 0;\n padding: 0;\n visibility: hidden;\n}";
31556
- styleInject(css_248z$k);
31557
-
31558
32005
  const ColorBarSelector = ({
31559
32006
  getColorValue,
31560
32007
  disabled
@@ -31631,6 +32078,26 @@ const getTextAlignmentBack = alignment => {
31631
32078
  }
31632
32079
  };
31633
32080
  function convertStyleToFrontend(backendStyle) {
32081
+ const {
32082
+ border
32083
+ } = backendStyle;
32084
+ let borderTop = '';
32085
+ let borderRight = '';
32086
+ let borderBottom = '';
32087
+ let borderLeft = '';
32088
+ if (border.top !== 'NONE') {
32089
+ borderTop = border.top === 'THIN' ? '2px solid var(--input-hover-border-color)' : '1px solid var(--excel-sheet-border)';
32090
+ }
32091
+ if (border.right !== 'NONE') {
32092
+ borderRight = border.right === 'THIN' ? '2px solid var(--input-hover-border-color)' : '1px solid var(--excel-sheet-border)';
32093
+ }
32094
+ if (border.bottom !== 'NONE') {
32095
+ borderBottom = border.bottom === 'THIN' ? '2px solid var(--input-hover-border-color)' : '1px solid var(--excel-sheet-border)';
32096
+ }
32097
+ if (border.left !== 'NONE') {
32098
+ borderLeft = border.left === 'THIN' ? '2px solid var(--input-hover-border-color)' : '1px solid var(--excel-sheet-border)';
32099
+ }
32100
+ // Return the converted styles
31634
32101
  return {
31635
32102
  fontSize: `${backendStyle.size}px`,
31636
32103
  fontFamily: backendStyle.name,
@@ -31638,12 +32105,11 @@ function convertStyleToFrontend(backendStyle) {
31638
32105
  backgroundColor: `#${backendStyle.backgroundColor}`,
31639
32106
  fontWeight: backendStyle.bold ? 'bold' : 'normal',
31640
32107
  fontStyle: backendStyle.italic ? 'italic' : 'normal',
31641
- textDecoration: backendStyle.underline ? 'underline' : 'value',
31642
- textDecorationStyle: getTextDecoration(backendStyle.underline),
31643
- borderTop: backendStyle.border.top === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
31644
- borderRight: backendStyle.border.right === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
31645
- borderBottom: backendStyle.border.bottom === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
31646
- borderLeft: backendStyle.border.left === 'NONE' ? 'none' : `1px solid ${backendStyle.borderColor}`,
32108
+ textDecoration: backendStyle.underline ? `underline ${getTextDecoration(backendStyle.underline)}` : 'none',
32109
+ borderTop: borderTop,
32110
+ borderRight: borderRight,
32111
+ borderBottom: borderBottom,
32112
+ borderLeft: borderLeft,
31647
32113
  textAlign: getTextAlignment(backendStyle.alignment.horizontal)
31648
32114
  };
31649
32115
  }
@@ -31668,7 +32134,7 @@ const convertStyleToBackend = frontendStyle => {
31668
32134
  size: parseInt(frontendStyle.fontSize?.toString() || '11', 10),
31669
32135
  bold: frontendStyle.fontWeight === 'bold',
31670
32136
  italic: frontendStyle.fontStyle === 'italic',
31671
- underline: "solid",
32137
+ underline: 'solid',
31672
32138
  color: frontendStyle.color?.replace('#', '') || '000000',
31673
32139
  backgroundColor: frontendStyle.backgroundColor?.replace('#', '') || 'FFFFFF',
31674
32140
  borderColor: frontendStyle.borderTop && frontendStyle.borderTop.toString().includes('solid') ? 'F2F2F2' : '000000',
@@ -31702,17 +32168,25 @@ const ExcelToolBar = ({
31702
32168
  const cell = useSelector(state => state.active ? get(state.active, state.model.data) : null);
31703
32169
  const data = useSelector(state => state.model.data);
31704
32170
  const formattedStyle = useSelector(state => state.formattedStyle.open);
31705
- const [cellStyle, setCellStyle] = useState(cell?.style || {
31706
- color: 'var(--text-color)',
32171
+ // Default style to Excel
32172
+ const basicStyle = {
32173
+ color: 'var(--input-hover-border-color)',
31707
32174
  backgroundColor: 'var(--drawer-footer-bg)',
31708
- borderColor: 'var(--toggle-strip-color)'
31709
- });
32175
+ borderColor: 'var(--excel-sheet-border)',
32176
+ textDecoration: 'none solid',
32177
+ borderRight: `1px solid var(--excel-sheet-border)`,
32178
+ borderLeft: `1px solid var(--excel-sheet-border)`,
32179
+ borderTop: `1px solid var(--excel-sheet-border)`,
32180
+ borderBottom: `1px solid var(--excel-sheet-border)`,
32181
+ fontSize: '15px',
32182
+ fontWeight: 'normal',
32183
+ fontStyle: 'normal',
32184
+ fontFamily: 'Times New Roman',
32185
+ textAlign: 'center'
32186
+ };
32187
+ const [cellStyle, setCellStyle] = useState(cell?.style || basicStyle);
31710
32188
  useEffect(() => {
31711
- setCellStyle(cell?.style || {
31712
- color: 'var(--text-color)',
31713
- backgroundColor: 'var(--drawer-footer-bg)',
31714
- borderColor: 'var(--toggle-strip-color)'
31715
- });
32189
+ setCellStyle(cell?.style || basicStyle);
31716
32190
  }, [cell]);
31717
32191
  useEffect(() => {
31718
32192
  if (cell?.style && JSON.stringify(cell.style) !== JSON.stringify(cellStyle)) {
@@ -31729,7 +32203,7 @@ const ExcelToolBar = ({
31729
32203
  const [colorContainer, setColorPicker] = useState({
31730
32204
  color: 'var(--error-light)',
31731
32205
  backgroundColor: 'var(--error-light)',
31732
- borderColor: 'var(--text-color)'
32206
+ borderColor: 'var(--input-hover-border-color)'
31733
32207
  });
31734
32208
  const borderTypeIcon = [{
31735
32209
  value: 'border-all-sides',
@@ -31775,6 +32249,15 @@ const ExcelToolBar = ({
31775
32249
  }, {
31776
32250
  label: 'Arial',
31777
32251
  value: 'Arial'
32252
+ }, {
32253
+ label: 'fantasy',
32254
+ value: 'fantasy'
32255
+ }, {
32256
+ label: 'cursive',
32257
+ value: 'cursive'
32258
+ }, {
32259
+ label: 'Poppins',
32260
+ value: 'Poppins'
31778
32261
  }, {
31779
32262
  label: 'Courier New',
31780
32263
  value: '"Courier New"'
@@ -32301,11 +32784,11 @@ const Spreadsheet = props => {
32301
32784
  });
32302
32785
  };
32303
32786
 
32304
- var css_248z$j = ".ff-excel-page {\n width: 100%;\n display: flex;\n margin-top: 40px;\n flex-direction: column;\n align-items: center;\n}\n.ff-excel-page .ff-excel-book {\n position: relative;\n width: 100%;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar {\n margin-left: 60px;\n display: flex;\n height: 36px;\n align-items: center;\n color: var(--brand2-color);\n margin-top: -2px;\n box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-add-sheet-icon {\n padding: 4px 6px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container {\n height: 36px;\n width: 860px;\n display: flex;\n overflow-x: auto;\n align-items: center;\n scrollbar-width: none;\n scrollbar-color: var(--hover-color) transparent;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-thumb {\n border-radius: 5px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar {\n height: 0px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list {\n margin-top: 2px;\n padding: 10px 9px;\n min-width: max-content;\n cursor: pointer;\n display: flex;\n background-color: var(--hover-color);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list.active {\n background-color: var(--excel-sheet-button-color);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list:focus {\n outline: none;\n text-decoration: none;\n}";
32305
- styleInject(css_248z$j);
32787
+ var css_248z$k = ".ff-excel-page {\n width: 100%;\n display: flex;\n margin-top: 40px;\n flex-direction: column;\n align-items: center;\n}\n.ff-excel-page .ff-excel-book {\n position: relative;\n width: 100%;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar {\n margin-left: 48px;\n display: flex;\n height: 36px;\n align-items: center;\n color: var(--brand2-color);\n margin-top: -2px;\n box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-add-sheet-icon {\n margin-top: 4px;\n padding: 0px 6px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container {\n height: 36px;\n width: 860px;\n display: flex;\n overflow-x: auto;\n align-items: center;\n scrollbar-width: none;\n scrollbar-color: var(--hover-color) transparent;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-track {\n background-color: transparent;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-thumb {\n border-radius: 5px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar {\n height: 0px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list {\n margin-top: 2px;\n padding: 10px 9px;\n min-width: max-content;\n cursor: pointer;\n display: flex;\n background-color: var(--hover-color);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list.active {\n background-color: var(--excel-sheet-button-color);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list:focus {\n outline: none;\n text-decoration: none;\n}";
32788
+ styleInject(css_248z$k);
32306
32789
 
32307
- var css_248z$i = ".ff-excel-menu {\n position: absolute;\n border: 1px solid var(--option-card-border-color);\n background: var(--option-card-bg-color);\n border-radius: 4px;\n margin: 2px;\n min-height: 32px;\n min-width: 111px;\n white-space: nowrap;\n z-index: 100;\n}\n.ff-excel-menu .ff-excel-menu-options {\n color: var(--text-color);\n cursor: pointer;\n border-radius: 3px;\n display: flex;\n align-items: center;\n padding: 4px;\n gap: 8px;\n}\n.ff-excel-menu .ff-excel-menu-options:hover {\n background-color: var(--hover-color);\n}\n.ff-excel-menu .ff-excel-menu-options label {\n cursor: pointer;\n}";
32308
- styleInject(css_248z$i);
32790
+ var css_248z$j = ".ff-excel-menu {\n position: absolute;\n border: 1px solid var(--option-card-border-color);\n background: var(--option-card-bg-color);\n border-radius: 4px;\n margin: 2px;\n min-height: 32px;\n min-width: 111px;\n white-space: nowrap;\n z-index: 100;\n}\n.ff-excel-menu .ff-excel-menu-options {\n color: var(--text-color);\n cursor: pointer;\n border-radius: 3px;\n display: flex;\n align-items: center;\n padding: 4px;\n gap: 8px;\n}\n.ff-excel-menu .ff-excel-menu-options:hover {\n background-color: var(--hover-color);\n}\n.ff-excel-menu .ff-excel-menu-options label {\n cursor: pointer;\n}";
32791
+ styleInject(css_248z$j);
32309
32792
 
32310
32793
  const ExcelContextMenu = ({
32311
32794
  contextMenu
@@ -32357,11 +32840,19 @@ const ExcelFile = ({
32357
32840
  const EmptyRow = {
32358
32841
  value: '',
32359
32842
  style: {
32360
- color: 'var(--text-color)',
32843
+ color: 'var(--input-hover-border-color)',
32361
32844
  backgroundColor: 'var(--drawer-footer-bg)',
32362
- borderColor: 'var(--toggle-strip-color)',
32363
- textDecoration: 'none',
32364
- textDecorationStyle: 'solid'
32845
+ borderColor: 'var(--excel-sheet-border)',
32846
+ textDecoration: 'none solid',
32847
+ borderRight: `1px solid var(--excel-sheet-border)`,
32848
+ borderLeft: `1px solid var(--excel-sheet-border)`,
32849
+ borderTop: `1px solid var(--excel-sheet-border)`,
32850
+ borderBottom: `1px solid var(--excel-sheet-border)`,
32851
+ fontSize: '15px',
32852
+ fontWeight: 'normal',
32853
+ fontStyle: 'normal',
32854
+ fontFamily: 'Times New Roman',
32855
+ textAlign: 'center'
32365
32856
  }
32366
32857
  };
32367
32858
  const [selectedSheet, setSelectedSheet] = useState({
@@ -32744,8 +33235,8 @@ const ExcelFile = ({
32744
33235
  });
32745
33236
  };
32746
33237
 
32747
- var css_248z$h = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-Module-chip {\n width: 68px;\n height: 30px;\n color: var(--table-column-text-color);\n border: 1px solid var(--ff-editor-line-bg);\n border-radius: 16px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-Module-chip .module-typography {\n color: var(--table-column-text-color);\n}\n.ff-Module-chip--active {\n border: 0.5px solid var(--brand-color);\n background: var(--brand-color);\n}\n.ff-Module-chip--active .module-typography {\n color: var(--base-bg-color);\n font-weight: 600;\n}\n.ff-Module-chip--hover:hover {\n border: 0.5px solid var(--brand-color);\n background-color: var(--hover-color);\n}\n.ff-Module-chip--hover:hover .module-typography {\n color: var(--table-column-text-color);\n font-weight: 600;\n}";
32748
- styleInject(css_248z$h);
33238
+ var css_248z$i = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-Module-chip {\n width: 68px;\n height: 30px;\n color: var(--table-column-text-color);\n border: 1px solid var(--ff-editor-line-bg);\n border-radius: 16px;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n}\n.ff-Module-chip .module-typography {\n color: var(--table-column-text-color);\n}\n.ff-Module-chip--active {\n border: 0.5px solid var(--brand-color);\n background: var(--brand-color);\n}\n.ff-Module-chip--active .module-typography {\n color: var(--base-bg-color);\n font-weight: 600;\n}\n.ff-Module-chip--hover:hover {\n border: 0.5px solid var(--brand-color);\n background-color: var(--hover-color);\n}\n.ff-Module-chip--hover:hover .module-typography {\n color: var(--table-column-text-color);\n font-weight: 600;\n}";
33239
+ styleInject(css_248z$i);
32749
33240
 
32750
33241
  const ModuleChip = ({
32751
33242
  label = '',
@@ -32766,8 +33257,8 @@ const ModuleChip = ({
32766
33257
  });
32767
33258
  };
32768
33259
 
32769
- var css_248z$g = ".fontXs, .ff-icon-radial-chart-container svg text {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-icon-radial-chart-container {\n position: relative;\n}\n.ff-icon-radial-chart-container svg .ff-radial-chart-icon-padding {\n padding: 0px;\n}\n.ff-icon-radial-chart-container svg text {\n font-size: var(--fontSize) !important;\n font-weight: 400;\n}\n.ff-icon-radial-chart-container .ff-icon-radial-chart-tooltip {\n position: fixed;\n padding: 5px;\n border-radius: 4px;\n pointer-events: none;\n background-color: var(--tooltip-bg-color);\n color: var(--tooltip-text-color);\n}";
32770
- styleInject(css_248z$g);
33260
+ var css_248z$h = ".fontXs, .ff-icon-radial-chart-container svg text {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-icon-radial-chart-container {\n position: relative;\n}\n.ff-icon-radial-chart-container svg .ff-radial-chart-icon-padding {\n padding: 0px;\n}\n.ff-icon-radial-chart-container svg text {\n font-size: var(--fontSize) !important;\n font-weight: 400;\n}\n.ff-icon-radial-chart-container .ff-icon-radial-chart-tooltip {\n position: fixed;\n padding: 5px;\n border-radius: 4px;\n pointer-events: none;\n background-color: var(--tooltip-bg-color);\n color: var(--tooltip-text-color);\n}";
33261
+ styleInject(css_248z$h);
32771
33262
 
32772
33263
  // Function to generate SVG arc paths
32773
33264
  const calculateArc$1 = ({
@@ -32915,8 +33406,8 @@ const IconRadialChart = ({
32915
33406
  });
32916
33407
  };
32917
33408
 
32918
- var css_248z$f = ".ff-attach-image-container {\n position: relative;\n display: inline-block;\n}\n.ff-attach-image-container .ff-image-wrapper {\n position: relative;\n width: 79px;\n height: 75px;\n}\n.ff-attach-image-container .ff-image-wrapper img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n background-color: rgba(0, 0, 0, 0.7);\n transition: opacity 0.4s ease;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-top-icons {\n position: absolute;\n top: 1px;\n right: 1px;\n display: flex;\n gap: 4px;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-top-icons .ff-icon-container {\n width: 8px;\n height: 8px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n border-radius: 4px;\n background-color: transparent;\n transition: background-color 0.3s ease;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-expand-icon-container {\n width: 24px;\n height: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n border-radius: 4px;\n background-color: transparent;\n transition: background-color 0.3s ease;\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-hover-icons {\n opacity: 1;\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-icon-container, .ff-attach-image-container .ff-image-wrapper:hover .ff-top-icons .ff-icon-container {\n border-radius: 4px;\n background-color: var(--ff-icon-hover-bg-color);\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-expand-icon-container {\n background-color: var(--ff-icon-hover-bg-color);\n}";
32919
- styleInject(css_248z$f);
33409
+ var css_248z$g = ".ff-attach-image-container {\n position: relative;\n display: inline-block;\n}\n.ff-attach-image-container .ff-image-wrapper {\n position: relative;\n width: 79px;\n height: 75px;\n}\n.ff-attach-image-container .ff-image-wrapper img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n background-color: rgba(0, 0, 0, 0.7);\n transition: opacity 0.4s ease;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-top-icons {\n position: absolute;\n top: 1px;\n right: 1px;\n display: flex;\n gap: 4px;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-top-icons .ff-icon-container {\n width: 8px;\n height: 8px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n border-radius: 4px;\n background-color: transparent;\n transition: background-color 0.3s ease;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-expand-icon-container {\n width: 24px;\n height: 24px;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n border-radius: 4px;\n background-color: transparent;\n transition: background-color 0.3s ease;\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-hover-icons {\n opacity: 1;\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-icon-container, .ff-attach-image-container .ff-image-wrapper:hover .ff-top-icons .ff-icon-container {\n border-radius: 4px;\n background-color: var(--ff-icon-hover-bg-color);\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-expand-icon-container {\n background-color: var(--ff-icon-hover-bg-color);\n}";
33410
+ styleInject(css_248z$g);
32920
33411
 
32921
33412
  const AttachImage = ({
32922
33413
  imageSrc,
@@ -32990,8 +33481,8 @@ const AttachImage = ({
32990
33481
  });
32991
33482
  };
32992
33483
 
32993
- var css_248z$e = ".ff-card-container {\n width: 120px;\n height: 93px;\n display: flex;\n align-items: center;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n overflow: hidden;\n cursor: pointer;\n}\n.ff-card-container:hover.passed {\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n width: 24px;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: start;\n align-items: center;\n border-right: 1px solid var(--border-color);\n gap: 30px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n transform: rotate(-90deg);\n transform-origin: center;\n display: inline-block;\n}\n.ff-card-container.passed .ff-status-bar {\n background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n background-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-content {\n flex: 1;\n padding: 8px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n margin-bottom: 4px;\n color: inherit;\n}\n.ff-card-container.passed .ff-number {\n color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-number {\n color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-number {\n color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-number {\n color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-number {\n color: var(--ff-card-flaky-status-bg-color);\n}";
32994
- styleInject(css_248z$e);
33484
+ var css_248z$f = ".ff-card-container {\n width: 120px;\n height: 93px;\n display: flex;\n align-items: center;\n border: 1px solid var(--border-color);\n border-radius: 4px;\n overflow: hidden;\n cursor: pointer;\n}\n.ff-card-container:hover.passed {\n border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n width: 24px;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: start;\n align-items: center;\n border-right: 1px solid var(--border-color);\n gap: 30px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n transform: rotate(-90deg);\n transform-origin: center;\n display: inline-block;\n}\n.ff-card-container.passed .ff-status-bar {\n background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n background-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-content {\n flex: 1;\n padding: 8px;\n display: flex;\n flex-direction: column;\n justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n margin-bottom: 4px;\n color: inherit;\n}\n.ff-card-container.passed .ff-number {\n color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-number {\n color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-number {\n color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-number {\n color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-number {\n color: var(--ff-card-flaky-status-bg-color);\n}";
33485
+ styleInject(css_248z$f);
32995
33486
 
32996
33487
  const StatusCard = ({
32997
33488
  icon,
@@ -33040,8 +33531,8 @@ const StatusCard = ({
33040
33531
  });
33041
33532
  };
33042
33533
 
33043
- var css_248z$d = ".ff-variable-dropdown {\n height: 300px;\n display: flex;\n flex-direction: column;\n background-color: var(--variable-dropdown-bg);\n border: 1px solid var(--border-color);\n border-radius: 3px;\n z-index: 9999;\n overflow: hidden;\n overflow-y: auto;\n}\n.ff-variable-dropdown.absolute {\n position: absolute;\n}\n.ff-variable-dropdown.relative {\n position: relative;\n}\n\n.ff-variable-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px;\n cursor: pointer;\n}\n.ff-variable-option:hover {\n background-color: var(--hover-color);\n}";
33044
- styleInject(css_248z$d);
33534
+ var css_248z$e = ".ff-variable-dropdown {\n height: 300px;\n display: flex;\n flex-direction: column;\n background-color: var(--variable-dropdown-bg);\n border: 1px solid var(--border-color);\n border-radius: 3px;\n z-index: 9999;\n overflow: hidden;\n overflow-y: auto;\n}\n.ff-variable-dropdown.absolute {\n position: absolute;\n}\n.ff-variable-dropdown.relative {\n position: relative;\n}\n\n.ff-variable-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 10px;\n cursor: pointer;\n}\n.ff-variable-option:hover {\n background-color: var(--hover-color);\n}";
33535
+ styleInject(css_248z$e);
33045
33536
 
33046
33537
  const VariableDropdown = ({
33047
33538
  optionsList = [],
@@ -33078,8 +33569,8 @@ const VariableDropdown = ({
33078
33569
  });
33079
33570
  };
33080
33571
 
33081
- var css_248z$c = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-line-chart-inner-tooltip, .ff--line-chart-x-line-data, .ff-line-chart-y-axis-text, .ff-line-chart-date {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-line-chart-x-axis-label {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-line-chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.ff-line-chart-text {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n}\n.ff-line-chart-text .smooth-dot {\n transition: cx 0.2s ease, cy 0.2s ease;\n}\n\n.ff-line-chart-yAxisLabel-warpper {\n position: relative;\n min-width: 20px;\n height: 100%;\n}\n.ff-line-chart-yAxisLabel-warpper .ff-line-chart-yAxisLabel {\n position: absolute;\n right: 0;\n top: 50%;\n display: flex;\n white-space: nowrap;\n transform: rotate(270deg) translateX(60%);\n transform-origin: right center;\n}\n\n.ff-line-chart-text1 {\n transform-origin: center;\n transform: rotate(-90deg);\n transition: transform 1s ease-in-out;\n position: relative;\n left: 163px;\n min-width: 10px;\n color: var(--drawer-title-color);\n}\n\n.ff-line-chart-tooltip {\n position: absolute;\n background-color: var(--tooltip-bg-color);\n border-radius: 4px;\n pointer-events: none;\n display: flex;\n flex-direction: column;\n min-width: 30px;\n min-height: 30px;\n justify-content: center;\n align-items: flex-start;\n row-gap: 10px;\n padding: 8px !important;\n}\n\n.ff-line-chart-status-dot {\n width: 16px;\n height: 16px;\n border-radius: 100%;\n}\n\n.ff-line-chart-inner-tooltip {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 5px;\n color: var(--arrow-button-bg-color);\n}\n\n.ff-line-chart-date {\n height: 100%;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n border-bottom: 1px solid var(--arrow-button-bg-color);\n color: var(--arrow-button-bg-color);\n}\n\n.ff-line-chart-x-axis-label {\n font-weight: 600;\n}";
33082
- styleInject(css_248z$c);
33572
+ var css_248z$d = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm, .ff-line-chart-inner-tooltip, .ff--line-chart-x-line-data, .ff-line-chart-y-axis-text, .ff-line-chart-date {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8, .ff-line-chart-x-axis-label {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-line-chart-container {\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.ff-line-chart-text {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n}\n.ff-line-chart-text .smooth-dot {\n transition: cx 0.2s ease, cy 0.2s ease;\n}\n\n.ff-line-chart-yAxisLabel-warpper {\n position: relative;\n min-width: 20px;\n height: 100%;\n}\n.ff-line-chart-yAxisLabel-warpper .ff-line-chart-yAxisLabel {\n position: absolute;\n right: 0;\n top: 50%;\n display: flex;\n white-space: nowrap;\n transform: rotate(270deg) translateX(60%);\n transform-origin: right center;\n}\n\n.ff-line-chart-text1 {\n transform-origin: center;\n transform: rotate(-90deg);\n transition: transform 1s ease-in-out;\n position: relative;\n left: 163px;\n min-width: 10px;\n color: var(--drawer-title-color);\n}\n\n.ff-line-chart-tooltip {\n position: absolute;\n background-color: var(--tooltip-bg-color);\n border-radius: 4px;\n pointer-events: none;\n display: flex;\n flex-direction: column;\n min-width: 30px;\n min-height: 30px;\n justify-content: center;\n align-items: flex-start;\n row-gap: 10px;\n padding: 8px !important;\n}\n\n.ff-line-chart-status-dot {\n width: 16px;\n height: 16px;\n border-radius: 100%;\n}\n\n.ff-line-chart-inner-tooltip {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 5px;\n color: var(--arrow-button-bg-color);\n}\n\n.ff-line-chart-date {\n height: 100%;\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: flex-start;\n border-bottom: 1px solid var(--arrow-button-bg-color);\n color: var(--arrow-button-bg-color);\n}\n\n.ff-line-chart-x-axis-label {\n font-weight: 600;\n}";
33573
+ styleInject(css_248z$d);
33083
33574
 
33084
33575
  const LineChart = ({
33085
33576
  data,
@@ -33094,7 +33585,8 @@ const LineChart = ({
33094
33585
  yAxisLabelColor,
33095
33586
  textSize,
33096
33587
  fontWeight,
33097
- numberSize
33588
+ numberSize,
33589
+ proportionalSpacing
33098
33590
  }) => {
33099
33591
  const margin = 40;
33100
33592
  const xMax = width - margin * 2;
@@ -33103,11 +33595,18 @@ const LineChart = ({
33103
33595
  const xKey = isDefaultLineChart ? 'date' : 'date';
33104
33596
  const yKey = isDefaultLineChart ? 'totalMemory' : 'value';
33105
33597
  const xScale = x => {
33106
- const date = new Date(x);
33107
- const time = date.getTime();
33108
- const minDate = new Date(Math.min(...data[0].data.map(d => new Date(d[xKey]).getTime())));
33109
- const maxDate = new Date(Math.max(...data[0].data.map(d => new Date(d[xKey]).getTime())));
33110
- return (time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime()) * xMax;
33598
+ if (proportionalSpacing) {
33599
+ const date = new Date(x);
33600
+ const time = date.getTime();
33601
+ const minDate = new Date(Math.min(...data[0].data.map(d => new Date(d[xKey]).getTime())));
33602
+ const maxDate = new Date(Math.max(...data[0].data.map(d => new Date(d[xKey]).getTime())));
33603
+ return (time - minDate.getTime()) / (maxDate.getTime() - minDate.getTime()) * xMax;
33604
+ } else {
33605
+ const index = data[0].data.findIndex(point => point[xKey] === x);
33606
+ if (index === -1) return 0;
33607
+ const totalPoints = data[0].data.length;
33608
+ return index / (totalPoints - 1) * xMax;
33609
+ }
33111
33610
  };
33112
33611
  const yScale = y => yMax - y * yMax / 1024;
33113
33612
  const generateLinePath = lineData => lineData.reduce((path, point, i) => {
@@ -33323,20 +33822,18 @@ const LineChart = ({
33323
33822
  });
33324
33823
  };
33325
33824
 
33326
- var css_248z$b = ":root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n.ff-download-client-overlay {\n width: 378px;\n height: 217px;\n position: absolute;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n z-index: 9999;\n}\n.ff-download-client-overlay .ff-download-client-container {\n width: 370px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n flex-direction: column;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n border: 1px solid var(--download-client-border-color);\n margin-left: 5px;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-header {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: space-between;\n padding: 7px 4px;\n margin-bottom: 8px;\n border-radius: 4px 4px 0 0;\n background-color: var(--download-client-header-bg-color);\n box-sizing: border-box;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-header .ff-header-arrow {\n content: \"\";\n display: block;\n position: absolute;\n top: 10px;\n right: 70px;\n width: 10px;\n height: 10px;\n background-color: var(--download-client-icon-container-bg-color);\n transform: translateY(-50%) rotate(-45deg);\n z-index: -999;\n border: 1px solid var(--download-client-header-bg-color);\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content {\n width: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n flex-direction: column;\n padding-left: 8px;\n padding-right: 24px;\n gap: 8px;\n margin-bottom: 8px;\n color: var(--popup-text-color);\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content .ff-download-install,\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content .ff-choose-os {\n padding: 4px 0;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-actions {\n width: 240px;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 12px;\n margin-bottom: 17px;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-actions .ff-icons-container {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n width: 64px;\n height: 64px;\n border-radius: 8px;\n border: 1px solid var(--download-client-icon-container-border-color);\n background-color: var(--download-client-icon-container-bg-color);\n cursor: pointer;\n box-shadow: 0px 0px 10px 0px var(--download-client-icon-container-box-shadow-color);\n}";
33327
- styleInject(css_248z$b);
33825
+ var css_248z$c = ".ff-download-client-wrapper {\n position: absolute;\n height: 181px;\n width: 368px;\n border: 1px solid var(--download-client-border-color);\n border-radius: 4px;\n box-shadow: 0px 0px 8px 0px var(--download-client-icon-container-box-shadow-color);\n}\n.ff-download-client-wrapper .ff-download-client-header-wrapper {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n justify-content: space-between;\n background-color: var(--download-client-header-bg-color);\n}\n.ff-download-client-wrapper .ff-download-client-header-wrapper .ff-download-client-hollow-triangle {\n position: absolute;\n height: 8px;\n width: 8px;\n border: 1px solid var(--download-client-border-color);\n top: -6px;\n right: 64px;\n z-index: -1;\n border-radius: 2px;\n transform: rotate(45deg);\n}\n.ff-download-client-wrapper .ff-download-client-header-wrapper .ff-download-client-header-text {\n margin-left: 4px;\n}\n.ff-download-client-wrapper .ff-download-client-header-wrapper .ff-download-client-close-icon {\n cursor: pointer;\n margin-right: 10px;\n}\n.ff-download-client-wrapper .ff-download-client-content-text {\n width: calc(100% - 16px);\n height: 132px;\n background-color: #fff;\n padding: 8px;\n}\n.ff-download-client-wrapper .ff-download-client-content-text .ff-download-client-description-text {\n margin-bottom: 8px;\n}\n.ff-download-client-wrapper .ff-download-client-os-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n gap: 24px;\n}\n.ff-download-client-wrapper .ff-download-client-os-wrapper .ff-os-version-wrapper {\n display: flex;\n justify-content: center;\n align-items: center;\n align-content: center;\n height: 64px;\n width: 64px;\n cursor: pointer;\n border-radius: 8px;\n border: 1px solid var(--download-client-icon-container-border-color);\n box-shadow: 0px 0px 10px 0px var(--download-client-icon-container-box-shadow-color);\n}";
33826
+ styleInject(css_248z$c);
33328
33827
 
33329
33828
  const DownloadClient = ({
33330
33829
  onClose,
33331
- onClickWindows,
33332
- onClickLinux,
33333
- onClickMac,
33334
- top = '10px',
33335
- left = '10px'
33830
+ top = '100px',
33831
+ left = '0px',
33832
+ className,
33833
+ description = 'Download and Install the fireflink client to run the script',
33834
+ onClick = () => {},
33835
+ optionZIndex = 10000001
33336
33836
  }) => {
33337
- const title = 'Download Client';
33338
- const description = 'Download and Install the fireflink client to run the script';
33339
- const chooseOSText = 'Choose OS';
33340
33837
  useEffect(() => {
33341
33838
  const handleCloseDownloadClient = event => {
33342
33839
  if (event.key === 'Escape') {
@@ -33348,81 +33845,66 @@ const DownloadClient = ({
33348
33845
  document.removeEventListener('keydown', handleCloseDownloadClient);
33349
33846
  };
33350
33847
  }, [onClose]);
33351
- return jsx("div", {
33352
- className: "ff-download-client-overlay",
33848
+ const osVersion = ['windows', 'mac_icon', 'linux'];
33849
+ return jsxs("div", {
33850
+ className: `ff-download-client-wrapper ${className}`,
33353
33851
  style: {
33354
- top,
33355
- left
33852
+ top: top,
33853
+ left: left,
33854
+ zIndex: optionZIndex
33356
33855
  },
33357
- children: jsxs("div", {
33358
- className: "ff-download-client-container",
33359
- children: [jsxs("div", {
33360
- className: "ff-download-client-header",
33361
- children: [jsx("div", {
33362
- className: "ff-header-arrow"
33363
- }), jsx(Typography, {
33364
- color: "var(--table-header-text-color)",
33365
- fontWeight: "semi-bold",
33366
- children: title
33367
- }), jsx("div", {
33368
- onClick: onClose,
33369
- children: jsx(Icon, {
33370
- name: "close",
33371
- width: 12,
33372
- height: 12
33373
- })
33374
- })]
33375
- }), jsxs("div", {
33376
- className: "ff-download-client-content",
33377
- children: [jsx("div", {
33378
- className: "ff-download-install",
33379
- children: jsx(Typography, {
33380
- fontWeight: "semi-bold",
33381
- color: "var(--download-client-content-text-color)",
33382
- children: description
33383
- })
33384
- }), jsx("div", {
33385
- className: "ff-choose-os",
33386
- children: jsx(Typography, {
33387
- fontWeight: "semi-bold",
33388
- color: "var(--download-client-choose-os-text-color)",
33389
- children: chooseOSText
33390
- })
33391
- })]
33392
- }), jsxs("div", {
33393
- className: "ff-download-client-actions",
33394
- children: [jsx("div", {
33395
- className: "ff-icons-container",
33396
- onClick: onClickWindows,
33397
- children: jsx(Icon, {
33398
- name: "windows",
33399
- width: 32,
33400
- height: 38
33401
- })
33402
- }), jsx("div", {
33403
- className: "ff-icons-container",
33404
- onClick: onClickLinux,
33405
- children: jsx(Icon, {
33406
- name: "linux",
33407
- width: 32,
33408
- height: 38
33409
- })
33410
- }), jsx("div", {
33411
- className: "ff-icons-container",
33412
- onClick: onClickMac,
33856
+ children: [jsxs("div", {
33857
+ className: "ff-download-client-header-wrapper",
33858
+ children: [jsx("div", {
33859
+ className: "ff-download-client-hollow-triangle"
33860
+ }), jsx(Typography, {
33861
+ fontWeight: "semi-bold",
33862
+ lineHeight: "32px",
33863
+ className: "ff-download-client-header-text",
33864
+ children: "Download client"
33865
+ }), jsx(Icon, {
33866
+ name: "close",
33867
+ color: "var(--brand-color)",
33868
+ className: "ff-download-client-close-icon",
33869
+ height: 12,
33870
+ width: 12
33871
+ })]
33872
+ }), jsxs("div", {
33873
+ className: "ff-download-client-content-text",
33874
+ children: [jsx(Typography, {
33875
+ as: "div",
33876
+ color: "var(--download-client-content-text-color)",
33877
+ fontWeight: "semi-bold",
33878
+ textAlign: "center",
33879
+ lineHeight: "26px",
33880
+ children: description
33881
+ }), jsx(Typography, {
33882
+ as: "div",
33883
+ className: "ff-download-client-description-text",
33884
+ textAlign: "center",
33885
+ fontWeight: "medium",
33886
+ lineHeight: '26px',
33887
+ children: "Choose OS to Download"
33888
+ }), jsx("div", {
33889
+ className: "ff-download-client-os-wrapper",
33890
+ children: osVersion.map(os => jsx("div", {
33891
+ className: "ff-os-version-wrapper",
33892
+ onClick: () => {
33893
+ onClick(os === 'mac_icon' ? 'mac' : os);
33894
+ },
33413
33895
  children: jsx(Icon, {
33414
- name: "mac_icon",
33415
- width: 32,
33416
- height: 38
33896
+ name: os,
33897
+ height: 36,
33898
+ width: 36
33417
33899
  })
33418
- })]
33900
+ }))
33419
33901
  })]
33420
- })
33902
+ })]
33421
33903
  });
33422
33904
  };
33423
33905
 
33424
- var css_248z$a = ".ff_fieldSet_container .ff_fieldSet {\n border: 1px solid var(--ff-select-border-color);\n border-radius: 5px;\n}\n.ff_fieldSet_container .ff_fieldSet .ff_legend_container {\n display: flex;\n margin-left: 8px;\n}";
33425
- styleInject(css_248z$a);
33906
+ var css_248z$b = ".ff_fieldSet_container .ff_fieldSet {\n border: 1px solid var(--ff-select-border-color);\n border-radius: 5px;\n}\n.ff_fieldSet_container .ff_fieldSet .ff_legend_container {\n display: flex;\n margin-left: 8px;\n}";
33907
+ styleInject(css_248z$b);
33426
33908
 
33427
33909
  const FieldSet = ({
33428
33910
  legendName,
@@ -33454,8 +33936,8 @@ const FieldSet = ({
33454
33936
  });
33455
33937
  };
33456
33938
 
33457
- var css_248z$9 = ".ff-create-variable-slider {\n padding: 8px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.ff-create-variable-slider .ff-hide-value-content {\n display: flex;\n align-items: center;\n}\n\n.ff-create-slider-footer {\n width: 100%;\n gap: 8px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}";
33458
- styleInject(css_248z$9);
33939
+ var css_248z$a = ".ff-create-variable-slider {\n padding: 8px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n.ff-create-variable-slider .ff-hide-value-content {\n display: flex;\n align-items: center;\n}\n\n.ff-create-slider-footer {\n width: 100%;\n gap: 8px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}";
33940
+ styleInject(css_248z$a);
33459
33941
 
33460
33942
  const CreateVariableSlider = ({
33461
33943
  isOpen,
@@ -33541,8 +34023,8 @@ const CreateVariableSlider = ({
33541
34023
  });
33542
34024
  };
33543
34025
 
33544
- var css_248z$8 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n:root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.ff-accordion-table-container {\n overflow-y: auto;\n}\n.ff-accordion-table-container .ff-accordion-table {\n width: 100%;\n}\n.ff-accordion-table-container .ff-accordion-table .ff-table-header,\n.ff-accordion-table-container .ff-accordion-table .ff-table-cell {\n text-align: left;\n padding: 9px;\n}\n.ff-accordion-table-container .ff-accordion-table .ff-table-header {\n color: var(--text-color);\n border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-accordion-table-container .ff-accordion-table .ff-table-body .ff-table-row:hover {\n background-color: var(--hover-color);\n}\n.ff-accordion-table-container .ff-accordion-table--primary-bg {\n background-color: var(--table-with-accordion-header-primary-bg);\n}\n.ff-accordion-table-container .ff-accordion-table--secondary-bg {\n background-color: var(--secondary-bg);\n}\n.ff-accordion-table-container .ff-accordion-table--default-bg {\n background-color: var(--default-bg);\n}\n.ff-accordion-table-container .ff-accordion-fixed-header {\n position: sticky;\n top: 0;\n z-index: 99;\n background-color: var(--file-details-bg);\n}\n.ff-accordion-table-container .column-table-accordion {\n width: 100%;\n}\n.ff-accordion-table-container .column-table-accordion .accordion-header {\n display: flex;\n align-items: center;\n}\n.ff-accordion-table-container .column-table-accordion .accordion-header .header-title {\n padding: 8px;\n}\n.ff-accordion-table-container .column-table-accordion .accordion-header .accordion-arrow img {\n height: 30px;\n width: 35px;\n}";
33545
- styleInject(css_248z$8);
34026
+ var css_248z$9 = ".fontXs {\n font-family: \"Poppins\";\n font-size: 10px;\n}\n\n.fontSm {\n font-family: \"Poppins\";\n font-size: 12px;\n}\n\n.fontMd {\n font-family: \"Poppins\";\n font-size: 14px;\n}\n\n.fontLg {\n font-family: \"Poppins\";\n font-size: 16px;\n}\n\n.fontXL {\n font-family: \"Poppins\";\n font-size: 18px;\n}\n\n.font2Xl {\n font-family: \"Poppins\";\n font-size: 24px;\n}\n\n.font-size-8 {\n font-family: \"Poppins\";\n font-size: 8px;\n}\n\n.font-size-20 {\n font-family: \"Poppins\";\n font-size: 20px;\n}\n\n.font-size-32 {\n font-family: \"Poppins\";\n font-size: 32px;\n}\n\n.font-size-80 {\n font-family: \"Poppins\";\n font-size: 80px;\n}\n\n:root {\n --tooltip-bg-color: #1e161f;\n --status-approved-text-color: #016102;\n --status-warning-text-color: #ff8b00;\n --status-rejected-text-color: #c60202;\n --status-skipped-text-color: #3c3838;\n --status-approved-bg-color: #c6efcd;\n --status-rejected-bg-color: #f7d9d9;\n --status-warning-bg-color: #fae2c6;\n --status-skipped-bg-color: #c4c3c3;\n --brand-color: #71347b;\n --icons-default-color: #71347b;\n --default-icon-color: #a3a3a3;\n --default-color: #747474;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --system-color--error: #c50303;\n --hover-color: #f7ebff;\n --brand2-color: #610b86;\n --status-warning-hover-bg-color: #fcd8ac;\n --status-percentage-growth-bg-color: #ecedf8;\n --primary-icon-color: #ffffff;\n --secondary-icon-color: #71347b;\n --description-text-color: #d9d9d9;\n --expandable-menu-default-bg: #fdfaff;\n --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n --text-color: #1e161f;\n --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n --file-details-bg: #ffffff;\n --error-light: #e42525;\n --tabs-label-default-color: tabs-label-default-color;\n --tabs-label-active-color: tabs-label-active-color;\n --tabs-border-color: tabs-border-color;\n --tabs-bg-color: tabs-bg-color;\n --tab-bg-color: tab-bg-color;\n --toggle-button-bg-color: #ffffff;\n --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n --toggle-strip-color: #cfd1e2;\n --disable-color: rgba(113, 52, 123, 0.5019607843);\n --toggle-strip-color: #cfd1e2;\n --add-icon-hover-color: #431b4a;\n --arrows-button-border-color: #ded1e5;\n --arrow-button-bg-color: #ffffff;\n --text-bg-highlight: #f5fb00;\n --slider-table-color: #efe1f9;\n --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.ff-accordion-table-container {\n overflow-y: auto;\n}\n.ff-accordion-table-container .ff-accordion-table {\n width: 100%;\n}\n.ff-accordion-table-container .ff-accordion-table .ff-table-header,\n.ff-accordion-table-container .ff-accordion-table .ff-table-cell {\n text-align: left;\n padding: 9px;\n}\n.ff-accordion-table-container .ff-accordion-table .ff-table-header {\n color: var(--text-color);\n border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-accordion-table-container .ff-accordion-table .ff-table-body .ff-table-row:hover {\n background-color: var(--hover-color);\n}\n.ff-accordion-table-container .ff-accordion-table--primary-bg {\n background-color: var(--table-with-accordion-header-primary-bg);\n}\n.ff-accordion-table-container .ff-accordion-table--secondary-bg {\n background-color: var(--secondary-bg);\n}\n.ff-accordion-table-container .ff-accordion-table--default-bg {\n background-color: var(--default-bg);\n}\n.ff-accordion-table-container .ff-accordion-fixed-header {\n position: sticky;\n top: 0;\n z-index: 99;\n background-color: var(--file-details-bg);\n}\n.ff-accordion-table-container .column-table-accordion {\n width: 100%;\n}\n.ff-accordion-table-container .column-table-accordion .accordion-header {\n display: flex;\n align-items: center;\n}\n.ff-accordion-table-container .column-table-accordion .accordion-header .header-title {\n padding: 8px;\n}\n.ff-accordion-table-container .column-table-accordion .accordion-header .accordion-arrow img {\n height: 30px;\n width: 35px;\n}";
34027
+ styleInject(css_248z$9);
33546
34028
 
33547
34029
  const TableWithAccordion = ({
33548
34030
  tableMeta = [],
@@ -33684,6 +34166,59 @@ const TableWithAccordion = ({
33684
34166
  });
33685
34167
  };
33686
34168
 
34169
+ var css_248z$8 = ".ff-progress-bar-container {\n width: 100%;\n min-width: 200px;\n display: flex;\n align-items: center;\n gap: 5px;\n}\n.ff-progress-bar-container.ff-has-label {\n justify-content: space-between;\n}\n.ff-progress-bar-container:not(.ff-has-label) .ff-progress-bar-track {\n flex: 1;\n}\n\n.ff-progress-bar-track {\n flex: 1;\n background-color: var(--ff-progress-bar-bg-color);\n border-radius: 5px;\n overflow: hidden;\n position: relative;\n}\n\n.ff-progress-bar {\n border-radius: 5px;\n transition: width 0.3s ease;\n}\n\n.ff-progress-bar-percentage {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n\n.ff-progress-bar-label {\n max-width: 50px;\n font-size: 14px;\n color: var(--ff-card-status-text-color);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n}";
34170
+ styleInject(css_248z$8);
34171
+
34172
+ const ProgressBar = ({
34173
+ progressPercentage,
34174
+ color = 'var(--brand-color)',
34175
+ trackColor = '#f0f0f0',
34176
+ height = 10,
34177
+ label,
34178
+ labelFontSize = 12,
34179
+ labelTextColor = 'var(--ff-card-status-text-color)',
34180
+ showPercentage = false,
34181
+ percentageFontSize = 10,
34182
+ percentageTextColor = 'var(--tooltip-text-color)'
34183
+ }) => {
34184
+ // Ensure progress is between 0 and 100
34185
+ const validProgress = Math.max(0, Math.min(progressPercentage, 100));
34186
+ // Bar style for the filled part
34187
+ const barStyle = {
34188
+ width: `${validProgress}%`,
34189
+ backgroundColor: color,
34190
+ height: `${height}px`
34191
+ };
34192
+ // Track style for the empty part of the progress bar
34193
+ const trackStyle = {
34194
+ backgroundColor: trackColor,
34195
+ height: `${height}px`
34196
+ };
34197
+ return jsxs("div", {
34198
+ className: `ff-progress-bar-container ${label ? 'ff-has-label' : ''}`,
34199
+ children: [jsx("div", {
34200
+ className: "ff-progress-bar-track",
34201
+ style: trackStyle,
34202
+ children: jsx("div", {
34203
+ className: "ff-progress-bar",
34204
+ style: barStyle,
34205
+ children: showPercentage && jsx(Typography, {
34206
+ className: "ff-progress-bar-percentage",
34207
+ fontSize: percentageFontSize,
34208
+ color: percentageTextColor,
34209
+ children: `${validProgress}%`
34210
+ })
34211
+ })
34212
+ }), label && jsx(Typography, {
34213
+ as: "div",
34214
+ className: "ff-progress-bar-label",
34215
+ fontSize: labelFontSize,
34216
+ color: labelTextColor,
34217
+ children: label
34218
+ })]
34219
+ });
34220
+ };
34221
+
33687
34222
  function findAndInsert(data, key, targetId, newEntry, insertPosition, childrenKey = 'children' // Allow dynamic key for nested children
33688
34223
  ) {
33689
34224
  function recursiveSearch(items) {
@@ -47040,23 +47575,58 @@ function formatString(input, removeSections = []) {
47040
47575
  return formatCamelCaseString(input, removeSections);
47041
47576
  }
47042
47577
 
47043
- var css_248z$1 = ".ff-add-variable-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 8px;\n position: relative;\n}\n.ff-add-variable-container .ff-add-variable-input {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n}";
47578
+ var css_248z$1 = ".ff-add-variable-container {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 8px;\n position: relative;\n}\n.ff-add-variable-container .ff-add-variable-input {\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 8px;\n}\n\n.ff-variable-dropdown {\n padding: 4px;\n width: auto;\n}";
47044
47579
  styleInject(css_248z$1);
47045
47580
 
47046
- const AddVariables = ({
47581
+ const OptionsDropdown = ({
47582
+ onSelectVariable,
47583
+ dropdownPosition,
47584
+ filteredOptions = [],
47585
+ position = 'relative',
47586
+ width = '300px'
47587
+ }) => {
47588
+ return jsx("div", {
47589
+ className: classNames('ff-variable-dropdown', position),
47590
+ style: dropdownPosition ? {
47591
+ top: dropdownPosition.top + 30,
47592
+ left: dropdownPosition.left - 30,
47593
+ width
47594
+ } : {
47595
+ width
47596
+ },
47597
+ children: filteredOptions?.map(option => {
47598
+ return jsx("div", {
47599
+ className: "ff-variable-option",
47600
+ onClick: () => onSelectVariable(option),
47601
+ children: jsx(Typography, {
47602
+ as: "span",
47603
+ fontSize: 14,
47604
+ children: option?.name
47605
+ })
47606
+ }, option?.id);
47607
+ })
47608
+ });
47609
+ };
47610
+
47611
+ const ConditionalDropdown = ({
47047
47612
  label = '',
47613
+ hashInputValue = '',
47614
+ setHashInputValue,
47048
47615
  variableList = [],
47049
47616
  placeholder = 'Enter text',
47050
47617
  onChange,
47051
47618
  onCreateVariableClick,
47052
47619
  value = '',
47053
47620
  dropdownWidth = 'inherit',
47621
+ isHash = false,
47622
+ dataFiles = [],
47054
47623
  ...props
47055
47624
  }) => {
47056
- const [inputValue, setInputValue] = useState('');
47625
+ const [inputValue, setInputValue] = useState(value);
47057
47626
  const [showDropdown, setShowDropdown] = useState(false);
47058
47627
  const [cursorPosition, setCursorPosition] = useState(null);
47059
47628
  const [showCreateVariableIcon, setShowCreateVariableIcon] = useState(false);
47629
+ const [filteredOptions, setFilteredOptions] = useState([]);
47060
47630
  const inputRef = useRef(null);
47061
47631
  useEffect(() => {
47062
47632
  if (cursorPosition !== null && inputRef.current) {
@@ -47065,31 +47635,40 @@ const AddVariables = ({
47065
47635
  }
47066
47636
  }, [cursorPosition]);
47067
47637
  useEffect(() => {
47068
- const newPayload = replaceVariablesWithIds(inputValue);
47069
- onChange(newPayload);
47638
+ if (inputValue.startsWith('#') && isHash) {
47639
+ const searchQuery = inputValue.slice(1).toLowerCase();
47640
+ const filtered = dataFiles.filter(file => file.name.toLowerCase().includes(searchQuery));
47641
+ setFilteredOptions(filtered);
47642
+ setShowDropdown(filtered.length > 0);
47643
+ } else if (!isHash) {
47644
+ const newPayload = replaceVariablesWithIds(inputValue);
47645
+ onChange?.(newPayload);
47646
+ }
47070
47647
  }, [inputValue]);
47071
47648
  const replaceVariablesWithIds = input => {
47072
47649
  return input.replace(/\${.*?_(.*?)}/g, (_, variableName) => {
47073
- // Find the matching variable in the list by name
47074
47650
  const foundVariable = variableList.find(varaible => varaible.name === variableName.trim());
47075
- return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`; // Replace if found, otherwise keep as is
47651
+ return foundVariable ? `\${${foundVariable.id}}` : `\${${variableName}}`;
47076
47652
  });
47077
47653
  };
47078
47654
  const handleChange = event => {
47079
47655
  const fieldValue = event.target.value;
47080
47656
  setInputValue(fieldValue);
47081
- // Show dropdown only if the last character typed is `$`
47082
47657
  const cursorPos = inputRef.current?.selectionStart || 0;
47083
47658
  const isDollarTyped = fieldValue[cursorPos - 1] === '$';
47084
- if (isDollarTyped) {
47085
- setShowDropdown(true);
47659
+ if (isHash) {
47660
+ setShowDropdown(fieldValue.startsWith('#'));
47086
47661
  } else {
47087
- setShowDropdown(false); // Close if it's a space or other characters
47088
- }
47089
- if (fieldValue?.includes('$')) {
47090
- setShowCreateVariableIcon(false);
47091
- } else {
47092
- setShowCreateVariableIcon(true);
47662
+ if (isDollarTyped) {
47663
+ setShowDropdown(true);
47664
+ } else {
47665
+ setShowDropdown(false);
47666
+ }
47667
+ if (fieldValue?.includes('$')) {
47668
+ setShowCreateVariableIcon(false);
47669
+ } else {
47670
+ setShowCreateVariableIcon(true);
47671
+ }
47093
47672
  }
47094
47673
  };
47095
47674
  const handleDropdownClick = item => {
@@ -47099,10 +47678,15 @@ const AddVariables = ({
47099
47678
  selectionEnd
47100
47679
  } = inputRef.current;
47101
47680
  const dollarSyntax = `{${item.type === 'LOCAL' ? 'LV' : item.type === 'GLOBAL' ? 'GV' : item.type === 'GROUP' ? 'SG' : 'PEV'}_${item.name}}`;
47102
- const newValue = inputValue.slice(0, selectionStart || 0) + dollarSyntax + inputValue.slice(selectionEnd || 0);
47681
+ let newValue;
47682
+ if (isHash && inputValue[0] === '#') {
47683
+ newValue = item.name + inputValue.slice(selectionEnd || 1);
47684
+ } else {
47685
+ newValue = inputValue.slice(0, selectionStart || 0) + dollarSyntax + inputValue.slice(selectionEnd || 0);
47686
+ }
47687
+ setHashInputValue?.(item);
47103
47688
  setInputValue(newValue);
47104
47689
  setCursorPosition((selectionStart || 0) + dollarSyntax.length);
47105
- // Close the dropdown after inserting the variable
47106
47690
  setShowDropdown(false);
47107
47691
  }
47108
47692
  };
@@ -47120,19 +47704,24 @@ const AddVariables = ({
47120
47704
  variant: "primary",
47121
47705
  label: label,
47122
47706
  placeholder: placeholder
47123
- }), !checkEmpty(value) && showCreateVariableIcon && jsx(Icon, {
47707
+ }), !checkEmpty(value) && !isHash && showCreateVariableIcon && jsx(Icon, {
47124
47708
  onClick: onCreateVariableClick,
47125
47709
  name: "add_variable",
47126
47710
  width: 24,
47127
47711
  height: 24,
47128
47712
  hoverEffect: true
47129
47713
  })]
47130
- }), showDropdown && jsx(VariableDropdown, {
47714
+ }), showDropdown && (isHash ? jsx(OptionsDropdown, {
47715
+ position: "relative",
47716
+ width: dropdownWidth,
47717
+ filteredOptions: filteredOptions,
47718
+ onSelectVariable: handleDropdownClick
47719
+ }) : jsx(VariableDropdown, {
47131
47720
  position: "relative",
47132
47721
  width: dropdownWidth,
47133
47722
  optionsList: variableList,
47134
47723
  onSelectVariable: handleDropdownClick
47135
- })]
47724
+ }))]
47136
47725
  });
47137
47726
  };
47138
47727
 
@@ -49096,5 +49685,5 @@ const PhoneInputField = ({
49096
49685
  });
49097
49686
  };
49098
49687
 
49099
- export { Accordion, AddButton as AddResourceButton, AddVariables, AllProjectsDropdown, AppHeader, AttachImage, AttachmentButton, Avatar, BarChart, Button$1 as Button, Checkbox, Chip, Col, Comments, ConnectingBranch, Container, CreateVariableSlider, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DownloadClient, DragAndDrop, Drawer, Dropzone, EditTextField, Editor, ExcelFile as Excel, ExpandableMenu, FieldSet, FileDropzone, FilePreview, ForwardedForms as Form, formatString as FormatString, HighlightText, Icon, IconButton, IconRadialChart, IconRadioGroup, Input, InputWithDropdown, LabelEditTextField, LazyLoad, LineChart, MachineInputField, MenuOption, MiniModal, Modal, ModuleChip, MultiRadialChart, MultiSelect, NlpInput as NLPInput, Paper, PhoneInputField, PieChart, PopUpModal, RadialChart, RadioButton, RadioGroup, Recaptcha, Row$1 as Row, Search, Select$1 as Select, SequentialConnectingBranch, StateDropdown, StatusButton, StatusCard, Table$1 as Table, TreeTable as TableTree, TableWithAccordion, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toastify, Toggle, ToggleSwitch, Tooltip, Typography, VariableDropdown, VariableInput, capitalize, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, getSequentialPayload, hasDuplicateFile, saveFileFromBlob, throttle, toast, truncateText, useFileDropzone, useTheme };
49688
+ export { Accordion, AddButton as AddResourceButton, AllProjectsDropdown, AppHeader, AttachImage, AttachmentButton, Avatar, BarChart, Button$1 as Button, Checkbox, Chip, Col, Comments, ConditionalDropdown, ConnectingBranch, Container, CreateVariableSlider, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DownloadClient, DragAndDrop, Drawer, Dropzone, EditTextField, Editor, ExcelFile as Excel, ExpandableMenu, FieldSet, FileDropzone, FilePreview, ForwardedForms as Form, formatString as FormatString, HighlightText, Icon, IconButton, IconRadialChart, IconRadioGroup, Input, InputWithDropdown, LabelEditTextField, LazyLoad, LineChart, MachineInputField, MenuOption, MiniModal, Modal, ModuleChip, MultiRadialChart, MultiSelect, NlpInput as NLPInput, Paper, PhoneInputField, PieChart, PopUpModal, ProgressBar, RadialChart, RadioButton, RadioGroup, Recaptcha, Row$1 as Row, Search, Select$1 as Select, SequentialConnectingBranch, StateDropdown, StatusButton, StatusCard, Table$1 as Table, TableTree, TableWithAccordion, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toastify, Toggle, ToggleSwitch, Tooltip, Typography, VariableDropdown, VariableInput, capitalize, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, getSequentialPayload, hasDuplicateFile, saveFileFromBlob, throttle, toast, truncateText, useFileDropzone, useTheme };
49100
49689
  //# sourceMappingURL=index.esm.js.map