pixel-react 1.6.2 → 1.6.5

package/lib/index.js

@@ -48,11 +48,11 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$1c = ":root {\n  --tooltip-bg-color: #1e161f;\n  --status-approved-text-color: #016102;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-text-color: #3c3838;\n  --status-approved-bg-color: #c6efcd;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-warning-bg-color: #fae2c6;\n  --status-skipped-bg-color: #c4c3c3;\n  --brand-color: #71347b;\n  --icons-default-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --default-color: #747474;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --system-color--error: #c50303;\n  --hover-color: #f7ebff;\n  --brand2-color: #610b86;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --description-text-color: #d9d9d9;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --text-color: #1e161f;\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --error-light: #e42525;\n  --tabs-label-default-color: tabs-label-default-color;\n  --tabs-label-active-color: tabs-label-active-color;\n  --tabs-border-color: tabs-border-color;\n  --tabs-bg-color: tabs-bg-color;\n  --tab-bg-color: tab-bg-color;\n  --toggle-button-bg-color: #ffffff;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-strip-color: #cfd1e2;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --toggle-strip-color: #cfd1e2;\n  --add-icon-hover-color: #431b4a;\n  --arrows-button-border-color: #ded1e5;\n  --arrow-button-bg-color: #ffffff;\n  --text-bg-highlight: #f5fb00;\n  --slider-table-color: #efe1f9;\n  --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs, .ff-button, .ff-button--small, .ff-button--medium {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-button--large {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-button {\n  width: auto;\n  background-color: var(--primary-button-text-color);\n  border-radius: 4px;\n  padding: 4px 8px;\n  text-align: center;\n  text-decoration: none;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  gap: 4px;\n  justify-content: center;\n  align-items: center;\n  border: 2px solid transparent;\n}\n.ff-button--transparent {\n  background-color: transparent;\n}\n.ff-button--primary, .ff-button--delete, .ff-button--secondary {\n  position: relative;\n  cursor: pointer;\n  border-radius: 4px;\n  z-index: 1;\n  border: none;\n  overflow: hidden;\n}\n.ff-button--primary:before, .ff-button--delete:before, .ff-button--secondary:before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 4px;\n  padding: 0.6px;\n  background: var(--primary-button-border);\n  mask: linear-gradient(var(--primary-button-text-color) 0 0) content-box, linear-gradient(var(--primary-button-text-color) 0 0);\n  mask-composite: exclude;\n  -webkit-mask: linear-gradient(var(--primary-button-text-color) 0 0) content-box, linear-gradient(var(--primary-button-text-color) 0 0);\n  -webkit-mask-composite: destination-out;\n  z-index: -1;\n}\n.ff-button--primary:hover, .ff-button--delete:hover, .ff-button--secondary:hover {\n  background: var(--primary-button-hover);\n}\n.ff-button--primary:disabled, .ff-button--delete:disabled, .ff-button--secondary:disabled {\n  opacity: 50%;\n  cursor: no-drop;\n}\n.ff-button--primary:disabled:before, .ff-button--delete:disabled:before, .ff-button--secondary:disabled:before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 4px;\n  padding: 0.6px;\n  -webkit-mask-composite: destination-out;\n  mask-composite: exclude;\n  z-index: -1;\n}\n.ff-button--primary {\n  background: var(--primary-button-color);\n}\n.ff-button--primary:before {\n  background: var(--primary-button-border);\n}\n.ff-button--primary:hover {\n  background: var(--primary-button-hover);\n}\n.ff-button--delete {\n  background: var(--delete-button-color);\n  color: var(--primary-button-text-color);\n}\n.ff-button--delete:before {\n  background: var(--delete-button-border);\n}\n.ff-button--delete:hover {\n  background: var(--delete-button-hover);\n}\n.ff-button--warning {\n  background: var(--warning-button-color);\n  border: var(--warning-button-border);\n}\n.ff-button--secondary:before {\n  background: var(--primary-button-border);\n}\n.ff-button--secondary:hover {\n  background: var(--secondary-button-hover);\n}\n.ff-button--tertiary {\n  border: none;\n  background: var(--tertiary-button-color);\n}\n.ff-button--tertiary:hover {\n  background: var(--tertiary-button-hover);\n}\n.ff-button--tertiary:disabled {\n  opacity: 0.5;\n  cursor: no-drop;\n}\n.ff-button--small {\n  font-weight: 500;\n  padding: 4.5px 8px;\n  line-height: 15px;\n}\n.ff-button--medium {\n  font-weight: 500;\n  padding: 6px 12px;\n}\n.ff-button--large {\n  padding: 8px 16px;\n}\n.ff-button-primary--text {\n  color: var(--primary-button-text-color);\n}\n.ff-button-secondary--text, .ff-button-tertiary--text {\n  background: var(--secondary-button-color-text);\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n}";
-styleInject(css_248z$1c);
+var css_248z$1d = ":root {\n  --tooltip-bg-color: #1e161f;\n  --status-approved-text-color: #016102;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-text-color: #3c3838;\n  --status-approved-bg-color: #c6efcd;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-warning-bg-color: #fae2c6;\n  --status-skipped-bg-color: #c4c3c3;\n  --brand-color: #71347b;\n  --icons-default-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --default-color: #747474;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --system-color--error: #c50303;\n  --hover-color: #f7ebff;\n  --brand2-color: #610b86;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --description-text-color: #d9d9d9;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --text-color: #1e161f;\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --error-light: #e42525;\n  --tabs-label-default-color: tabs-label-default-color;\n  --tabs-label-active-color: tabs-label-active-color;\n  --tabs-border-color: tabs-border-color;\n  --tabs-bg-color: tabs-bg-color;\n  --tab-bg-color: tab-bg-color;\n  --toggle-button-bg-color: #ffffff;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-strip-color: #cfd1e2;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --toggle-strip-color: #cfd1e2;\n  --add-icon-hover-color: #431b4a;\n  --arrows-button-border-color: #ded1e5;\n  --arrow-button-bg-color: #ffffff;\n  --text-bg-highlight: #f5fb00;\n  --slider-table-color: #efe1f9;\n  --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs, .ff-button, .ff-button--small, .ff-button--medium {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-button--large {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-button {\n  width: auto;\n  background-color: var(--primary-button-text-color);\n  border-radius: 4px;\n  padding: 4px 8px;\n  text-align: center;\n  text-decoration: none;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  gap: 4px;\n  justify-content: center;\n  align-items: center;\n  border: 2px solid transparent;\n}\n.ff-button--transparent {\n  background-color: transparent;\n}\n.ff-button--primary, .ff-button--delete, .ff-button--secondary {\n  position: relative;\n  cursor: pointer;\n  border-radius: 4px;\n  z-index: 1;\n  border: none;\n  overflow: hidden;\n}\n.ff-button--primary:before, .ff-button--delete:before, .ff-button--secondary:before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 4px;\n  padding: 0.6px;\n  background: var(--primary-button-border);\n  mask: linear-gradient(var(--primary-button-text-color) 0 0) content-box, linear-gradient(var(--primary-button-text-color) 0 0);\n  mask-composite: exclude;\n  -webkit-mask: linear-gradient(var(--primary-button-text-color) 0 0) content-box, linear-gradient(var(--primary-button-text-color) 0 0);\n  -webkit-mask-composite: destination-out;\n  z-index: -1;\n}\n.ff-button--primary:hover, .ff-button--delete:hover, .ff-button--secondary:hover {\n  background: var(--primary-button-hover);\n}\n.ff-button--primary:disabled, .ff-button--delete:disabled, .ff-button--secondary:disabled {\n  opacity: 50%;\n  cursor: no-drop;\n}\n.ff-button--primary:disabled:before, .ff-button--delete:disabled:before, .ff-button--secondary:disabled:before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 4px;\n  padding: 0.6px;\n  -webkit-mask-composite: destination-out;\n  mask-composite: exclude;\n  z-index: -1;\n}\n.ff-button--primary {\n  background: var(--primary-button-color);\n}\n.ff-button--primary:before {\n  background: var(--primary-button-border);\n}\n.ff-button--primary:hover {\n  background: var(--primary-button-hover);\n}\n.ff-button--delete {\n  background: var(--delete-button-color);\n  color: var(--primary-button-text-color);\n}\n.ff-button--delete:before {\n  background: var(--delete-button-border);\n}\n.ff-button--delete:hover {\n  background: var(--delete-button-hover);\n}\n.ff-button--warning {\n  background: var(--warning-button-color);\n  border: var(--warning-button-border);\n}\n.ff-button--secondary:before {\n  background: var(--primary-button-border);\n}\n.ff-button--secondary:hover {\n  background: var(--secondary-button-hover);\n}\n.ff-button--tertiary {\n  border: none;\n  background: var(--tertiary-button-color);\n}\n.ff-button--tertiary:hover {\n  background: var(--tertiary-button-hover);\n}\n.ff-button--tertiary:disabled {\n  opacity: 0.5;\n  cursor: no-drop;\n}\n.ff-button--small {\n  font-weight: 500;\n  padding: 4.5px 8px;\n  line-height: 15px;\n}\n.ff-button--medium {\n  font-weight: 500;\n  padding: 6px 12px;\n}\n.ff-button--large {\n  padding: 8px 16px;\n}\n.ff-button-primary--text {\n  color: var(--primary-button-text-color);\n}\n.ff-button-secondary--text, .ff-button-tertiary--text {\n  background: var(--secondary-button-color-text);\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n}";
+styleInject(css_248z$1d);
 
-var css_248z$1b = ":root {\n  --tooltip-bg-color: #1e161f;\n  --status-approved-text-color: #016102;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-text-color: #3c3838;\n  --status-approved-bg-color: #c6efcd;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-warning-bg-color: #fae2c6;\n  --status-skipped-bg-color: #c4c3c3;\n  --brand-color: #71347b;\n  --icons-default-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --default-color: #747474;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --system-color--error: #c50303;\n  --hover-color: #f7ebff;\n  --brand2-color: #610b86;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --description-text-color: #d9d9d9;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --text-color: #1e161f;\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --error-light: #e42525;\n  --tabs-label-default-color: tabs-label-default-color;\n  --tabs-label-active-color: tabs-label-active-color;\n  --tabs-border-color: tabs-border-color;\n  --tabs-bg-color: tabs-bg-color;\n  --tab-bg-color: tab-bg-color;\n  --toggle-button-bg-color: #ffffff;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-strip-color: #cfd1e2;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --toggle-strip-color: #cfd1e2;\n  --add-icon-hover-color: #431b4a;\n  --arrows-button-border-color: #ded1e5;\n  --arrow-button-bg-color: #ffffff;\n  --text-bg-highlight: #f5fb00;\n  --slider-table-color: #efe1f9;\n  --variable-dropdown-bg: #($variable-dropdown-bg);\n}";
-styleInject(css_248z$1b);
+var css_248z$1c = ":root {\n  --tooltip-bg-color: #1e161f;\n  --status-approved-text-color: #016102;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-text-color: #3c3838;\n  --status-approved-bg-color: #c6efcd;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-warning-bg-color: #fae2c6;\n  --status-skipped-bg-color: #c4c3c3;\n  --brand-color: #71347b;\n  --icons-default-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --default-color: #747474;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --system-color--error: #c50303;\n  --hover-color: #f7ebff;\n  --brand2-color: #610b86;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --description-text-color: #d9d9d9;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --text-color: #1e161f;\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --error-light: #e42525;\n  --tabs-label-default-color: tabs-label-default-color;\n  --tabs-label-active-color: tabs-label-active-color;\n  --tabs-border-color: tabs-border-color;\n  --tabs-bg-color: tabs-bg-color;\n  --tab-bg-color: tab-bg-color;\n  --toggle-button-bg-color: #ffffff;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-strip-color: #cfd1e2;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --toggle-strip-color: #cfd1e2;\n  --add-icon-hover-color: #431b4a;\n  --arrows-button-border-color: #ded1e5;\n  --arrow-button-bg-color: #ffffff;\n  --text-bg-highlight: #f5fb00;\n  --slider-table-color: #efe1f9;\n  --variable-dropdown-bg: #($variable-dropdown-bg);\n}";
+styleInject(css_248z$1c);
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -305,7 +305,7 @@ const SvgCopyIcon = (props) => /* @__PURE__ */ React__namespace.createElement("s
 
 const SvgDownloadIcon$1 = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.4444 16H3.55555C2.60588 16 1.71302 15.6302 1.04142 14.9586C0.369847 14.287 0 13.3941 0 12.4444V11.5555C0 11.0646 0.397948 10.6666 0.888894 10.6666C1.37984 10.6666 1.77779 11.0646 1.77779 11.5555V12.4444C1.77779 12.9193 1.96273 13.3657 2.29845 13.7015C2.63426 14.0372 3.08068 14.2222 3.55555 14.2222H12.4444C12.9193 14.2222 13.3657 14.0372 13.7015 13.7015C14.0372 13.3656 14.2222 12.9192 14.2222 12.4444V11.5555C14.2222 11.0646 14.6202 10.6666 15.1111 10.6666C15.602 10.6666 16 11.0646 16 11.5555V12.4444C16 13.3941 15.6302 14.2869 14.9586 14.9586C14.287 15.6302 13.3941 16 12.4444 16ZM7.99998 12.4444C7.87702 12.4444 7.75996 12.4194 7.65346 12.3743C7.55409 12.3323 7.46072 12.2713 7.37903 12.1916C7.379 12.1915 7.379 12.1915 7.37897 12.1915C7.37838 12.191 7.37779 12.1904 7.3772 12.1898C7.37704 12.1897 7.37685 12.1894 7.3767 12.1893C7.3762 12.1888 7.37577 12.1884 7.3753 12.1879C7.37499 12.1876 7.37471 12.1874 7.3744 12.187C7.37409 12.1867 7.37369 12.1863 7.37341 12.186C7.37279 12.1854 7.3721 12.1847 7.37148 12.1841L3.81591 8.62852C3.46879 8.2814 3.46879 7.71857 3.81591 7.37142C4.16302 7.0243 4.72588 7.02427 5.073 7.37142L7.11112 9.40954V0.888894C7.11109 0.397948 7.50904 0 7.99998 0C8.49093 0 8.88891 0.397948 8.88891 0.888894V9.40951L10.927 7.37142C11.2741 7.0243 11.837 7.0243 12.1841 7.37142C12.5312 7.71854 12.5312 8.2814 12.1841 8.62852L8.62852 12.1841C8.6279 12.1847 8.62721 12.1854 8.62659 12.186C8.62625 12.1863 8.62588 12.1867 8.6256 12.1869C8.62529 12.1873 8.62501 12.1875 8.6247 12.1878C8.62426 12.1883 8.62377 12.1888 8.62333 12.1892C8.62318 12.1894 8.62296 12.1896 8.6228 12.1897C8.62224 12.1903 8.62165 12.1909 8.62106 12.1915C8.62103 12.1915 8.62103 12.1915 8.621 12.1915C8.61122 12.201 8.60132 12.2103 8.59119 12.2193C8.51676 12.2857 8.43386 12.3375 8.3462 12.3744C8.34589 12.3745 8.34564 12.3747 8.34533 12.3748C8.34499 12.3749 8.34471 12.3751 8.34437 12.3752C8.23842 12.4198 8.12211 12.4444 7.99998 12.4444Z", fill: "currentColor" }));
 
-const SvgRefreshIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.0002 14C13.8234 14 13.6538 13.9298 13.5288 13.8047C13.4037 13.6797 13.3335 13.5101 13.3335 13.3333V10.6667H10.6668C10.49 10.6667 10.3204 10.5964 10.1954 10.4714C10.0704 10.3464 10.0002 10.1768 10.0002 10C10.0002 9.82319 10.0704 9.65362 10.1954 9.5286C10.3204 9.40357 10.49 9.33333 10.6668 9.33333H14.0002C14.177 9.33333 14.3465 9.40357 14.4716 9.5286C14.5966 9.65362 14.6668 9.82319 14.6668 10V13.3333C14.6668 13.5101 14.5966 13.6797 14.4716 13.8047C14.3465 13.9298 14.177 14 14.0002 14ZM5.3335 6.66667H2.00016C1.82335 6.66667 1.65378 6.59643 1.52876 6.4714C1.40373 6.34638 1.3335 6.17681 1.3335 6V2.66667C1.3335 2.48986 1.40373 2.32029 1.52876 2.19526C1.65378 2.07024 1.82335 2 2.00016 2C2.17697 2 2.34654 2.07024 2.47157 2.19526C2.59659 2.32029 2.66683 2.48986 2.66683 2.66667V5.33333H5.3335C5.51031 5.33333 5.67988 5.40357 5.8049 5.5286C5.92992 5.65362 6.00016 5.82319 6.00016 6C6.00016 6.17681 5.92992 6.34638 5.8049 6.4714C5.67988 6.59643 5.51031 6.66667 5.3335 6.66667Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.99983 14.6669C6.35964 14.6672 4.77691 14.0628 3.55435 12.9694C2.3318 11.876 1.55522 10.3703 1.37316 8.74022C1.36353 8.65267 1.37124 8.56408 1.39585 8.47951C1.42045 8.39494 1.46147 8.31605 1.51657 8.24733C1.62784 8.10856 1.78968 8.01966 1.9665 8.00022C2.14331 7.98077 2.3206 8.03235 2.45938 8.14362C2.59816 8.2549 2.68705 8.41674 2.7065 8.59355C2.83827 9.79535 3.37446 10.9167 4.22716 11.7738C5.07986 12.6309 6.19847 13.1728 7.39958 13.3108C8.60069 13.4487 9.81303 13.1744 10.8378 12.533C11.8626 11.8915 12.6391 10.9209 13.0398 9.78022C13.0648 9.69253 13.1075 9.61091 13.1653 9.54039C13.2231 9.46987 13.2948 9.41195 13.3758 9.37023C13.4569 9.3285 13.5457 9.30384 13.6366 9.29778C13.7276 9.29172 13.8189 9.30439 13.9048 9.33499C13.9906 9.3656 14.0693 9.4135 14.136 9.47573C14.2026 9.53796 14.2558 9.6132 14.2922 9.69679C14.3286 9.78039 14.3475 9.87056 14.3476 9.96174C14.3478 10.0529 14.3293 10.1432 14.2932 10.2269C13.8324 11.5271 12.9797 12.6524 11.8525 13.4476C10.7254 14.2429 9.37928 14.6689 7.99983 14.6669ZM13.9598 8.00022C13.795 8.00122 13.6357 7.94113 13.5126 7.83156C13.3895 7.72199 13.3113 7.57069 13.2932 7.40688C13.1555 6.21083 12.6172 5.09655 11.7658 4.24529C10.9145 3.39402 9.80012 2.85585 8.60406 2.71832C7.408 2.58078 6.20059 2.85198 5.17823 3.4878C4.15587 4.12361 3.37871 5.08663 2.97316 6.22022C2.94817 6.3079 2.90545 6.38952 2.84766 6.46004C2.78986 6.53056 2.71822 6.58848 2.63715 6.63021C2.55608 6.67193 2.46732 6.69659 2.37634 6.70265C2.28537 6.70871 2.19412 6.69605 2.10823 6.66544C2.02235 6.63483 1.94365 6.58693 1.87702 6.5247C1.81038 6.46247 1.75722 6.38723 1.72081 6.30364C1.68441 6.22004 1.66554 6.12987 1.66537 6.0387C1.6652 5.94752 1.68373 5.85728 1.71983 5.77355C2.22178 4.3496 3.19222 3.1382 4.47232 2.33762C5.75243 1.53704 7.26637 1.19469 8.76639 1.36661C10.2664 1.53853 11.6636 2.21453 12.7294 3.28397C13.7952 4.35341 14.4664 5.75296 14.6332 7.25355C14.6519 7.42846 14.6008 7.60369 14.4909 7.74105C14.381 7.87841 14.2213 7.96677 14.0465 7.98688L13.9598 8.00022Z", fill: "currentColor" }));
+const SvgRefreshIcon$1 = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.0002 14C13.8234 14 13.6538 13.9298 13.5288 13.8047C13.4037 13.6797 13.3335 13.5101 13.3335 13.3333V10.6667H10.6668C10.49 10.6667 10.3204 10.5964 10.1954 10.4714C10.0704 10.3464 10.0002 10.1768 10.0002 10C10.0002 9.82319 10.0704 9.65362 10.1954 9.5286C10.3204 9.40357 10.49 9.33333 10.6668 9.33333H14.0002C14.177 9.33333 14.3465 9.40357 14.4716 9.5286C14.5966 9.65362 14.6668 9.82319 14.6668 10V13.3333C14.6668 13.5101 14.5966 13.6797 14.4716 13.8047C14.3465 13.9298 14.177 14 14.0002 14ZM5.3335 6.66667H2.00016C1.82335 6.66667 1.65378 6.59643 1.52876 6.4714C1.40373 6.34638 1.3335 6.17681 1.3335 6V2.66667C1.3335 2.48986 1.40373 2.32029 1.52876 2.19526C1.65378 2.07024 1.82335 2 2.00016 2C2.17697 2 2.34654 2.07024 2.47157 2.19526C2.59659 2.32029 2.66683 2.48986 2.66683 2.66667V5.33333H5.3335C5.51031 5.33333 5.67988 5.40357 5.8049 5.5286C5.92992 5.65362 6.00016 5.82319 6.00016 6C6.00016 6.17681 5.92992 6.34638 5.8049 6.4714C5.67988 6.59643 5.51031 6.66667 5.3335 6.66667Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.99983 14.6669C6.35964 14.6672 4.77691 14.0628 3.55435 12.9694C2.3318 11.876 1.55522 10.3703 1.37316 8.74022C1.36353 8.65267 1.37124 8.56408 1.39585 8.47951C1.42045 8.39494 1.46147 8.31605 1.51657 8.24733C1.62784 8.10856 1.78968 8.01966 1.9665 8.00022C2.14331 7.98077 2.3206 8.03235 2.45938 8.14362C2.59816 8.2549 2.68705 8.41674 2.7065 8.59355C2.83827 9.79535 3.37446 10.9167 4.22716 11.7738C5.07986 12.6309 6.19847 13.1728 7.39958 13.3108C8.60069 13.4487 9.81303 13.1744 10.8378 12.533C11.8626 11.8915 12.6391 10.9209 13.0398 9.78022C13.0648 9.69253 13.1075 9.61091 13.1653 9.54039C13.2231 9.46987 13.2948 9.41195 13.3758 9.37023C13.4569 9.3285 13.5457 9.30384 13.6366 9.29778C13.7276 9.29172 13.8189 9.30439 13.9048 9.33499C13.9906 9.3656 14.0693 9.4135 14.136 9.47573C14.2026 9.53796 14.2558 9.6132 14.2922 9.69679C14.3286 9.78039 14.3475 9.87056 14.3476 9.96174C14.3478 10.0529 14.3293 10.1432 14.2932 10.2269C13.8324 11.5271 12.9797 12.6524 11.8525 13.4476C10.7254 14.2429 9.37928 14.6689 7.99983 14.6669ZM13.9598 8.00022C13.795 8.00122 13.6357 7.94113 13.5126 7.83156C13.3895 7.72199 13.3113 7.57069 13.2932 7.40688C13.1555 6.21083 12.6172 5.09655 11.7658 4.24529C10.9145 3.39402 9.80012 2.85585 8.60406 2.71832C7.408 2.58078 6.20059 2.85198 5.17823 3.4878C4.15587 4.12361 3.37871 5.08663 2.97316 6.22022C2.94817 6.3079 2.90545 6.38952 2.84766 6.46004C2.78986 6.53056 2.71822 6.58848 2.63715 6.63021C2.55608 6.67193 2.46732 6.69659 2.37634 6.70265C2.28537 6.70871 2.19412 6.69605 2.10823 6.66544C2.02235 6.63483 1.94365 6.58693 1.87702 6.5247C1.81038 6.46247 1.75722 6.38723 1.72081 6.30364C1.68441 6.22004 1.66554 6.12987 1.66537 6.0387C1.6652 5.94752 1.68373 5.85728 1.71983 5.77355C2.22178 4.3496 3.19222 3.1382 4.47232 2.33762C5.75243 1.53704 7.26637 1.19469 8.76639 1.36661C10.2664 1.53853 11.6636 2.21453 12.7294 3.28397C13.7952 4.35341 14.4664 5.75296 14.6332 7.25355C14.6519 7.42846 14.6008 7.60369 14.4909 7.74105C14.381 7.87841 14.2213 7.96677 14.0465 7.98688L13.9598 8.00022Z", fill: "currentColor" }));
 
 const SvgLicenseInfo = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("mask", { id: "path-1-inside-1_7412_62086", fill: "white" }, /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M29.5478 0.348431C31.1495 -0.116144 32.8504 -0.116144 34.4522 0.348431C35.4864 0.64848 36.3688 1.16933 37.2388 1.80367C38.0679 2.40822 39.0111 3.21215 40.1337 4.1687L40.7102 4.66016C41.7146 5.51598 41.9889 5.7369 42.2709 5.89768C42.5616 6.06326 42.8717 6.19178 43.1944 6.28015C43.5077 6.366 43.8576 6.40371 45.1731 6.50866L45.9282 6.56893C47.3984 6.68621 48.6339 6.7848 49.6476 6.94353C50.7113 7.11014 51.7036 7.36579 52.6472 7.88507C54.108 8.68913 55.3109 9.89176 56.115 11.3529C56.6342 12.2964 56.8899 13.2887 57.0564 14.3524C57.2151 15.3661 57.3137 16.6017 57.4309 18.0718L57.4914 18.8269C57.5963 20.1422 57.6338 20.4923 57.7199 20.8056C57.8082 21.1281 57.9366 21.4383 58.1021 21.729C58.2631 22.0111 58.484 22.2854 59.3399 23.2896L59.8312 23.8664C60.7879 24.9888 61.5917 25.9322 62.1963 26.7612C62.8307 27.6309 63.3515 28.5134 63.6514 29.5479C64.1162 31.1496 64.1162 32.8502 63.6514 34.452C63.3515 35.4865 62.8307 36.369 62.1963 37.239C61.5917 38.068 60.7879 39.011 59.8315 40.1335L59.3399 40.7103C58.484 41.7144 58.2631 41.9887 58.1021 42.271C57.9366 42.5617 57.8082 42.8718 57.7199 43.1945C57.6338 43.5075 57.5963 43.8577 57.4914 45.1729L57.4309 45.928C57.3137 47.3982 57.2151 48.6337 57.0564 49.6474C56.8899 50.7111 56.6342 51.7034 56.115 52.647C55.3109 54.1082 54.108 55.3107 52.6472 56.1148C51.7036 56.6343 50.7113 56.8897 49.6476 57.0565C48.6339 57.2153 47.3984 57.3138 45.9282 57.431L45.1731 57.4912C43.8576 57.5962 43.5077 57.6339 43.1944 57.7197C42.8717 57.8081 42.5616 57.9367 42.2709 58.1022C41.9889 58.2629 41.7146 58.4841 40.7102 59.3397L40.1334 59.8313C39.0112 60.7877 38.0679 61.5918 37.2388 62.1961C36.3688 62.8305 35.4864 63.3513 34.4522 63.6516C32.8504 64.116 31.1495 64.116 29.5478 63.6516C28.5136 63.3513 27.6311 62.8305 26.7611 62.1961C25.9321 61.5918 24.9888 60.7877 23.8664 59.8313L23.2896 59.3397C22.2854 58.4841 22.0111 58.2629 21.729 58.1022C21.4383 57.9367 21.1281 57.8081 20.8056 57.7197C20.4923 57.6339 20.1422 57.5962 18.8269 57.4912L18.0718 57.431C16.6017 57.3138 15.3661 57.2153 14.3524 57.0565C13.2887 56.8897 12.2964 56.6343 11.3529 56.1148C9.89176 55.3107 8.68913 54.1082 7.88507 52.647C7.36576 51.7034 7.11011 50.7111 6.94353 49.6474C6.78477 48.6337 6.68621 47.3985 6.56893 45.9284L6.50866 45.1729C6.40371 43.8577 6.366 43.5075 6.28015 43.1945C6.19178 42.8718 6.06326 42.5617 5.89768 42.271C5.73687 41.9887 5.51598 41.7144 4.66013 40.7103L4.16864 40.1335C3.21212 39.0113 2.40819 38.068 1.80367 37.239C1.16933 36.369 0.64848 35.4865 0.348431 34.452C-0.116144 32.8502 -0.116144 31.1496 0.348431 29.5479C0.64848 28.5134 1.16933 27.6309 1.80367 26.7612C2.40822 25.9322 3.21212 24.9888 4.16867 23.8664L4.66013 23.2896C5.51598 22.2854 5.73687 22.0111 5.89768 21.729C6.06326 21.4383 6.19178 21.1281 6.28015 20.8056C6.366 20.4923 6.40371 20.1422 6.50866 18.8269L6.56893 18.0716C6.68621 16.6016 6.78477 15.3661 6.94353 14.3524C7.11011 13.2887 7.36576 12.2964 7.88507 11.3529C8.68913 9.89176 9.89176 8.68916 11.3529 7.88507C12.2964 7.36579 13.2887 7.11014 14.3524 6.94353C15.3661 6.7848 16.6015 6.68621 18.0715 6.56893L18.8269 6.50866C20.1422 6.40371 20.4923 6.366 20.8056 6.28015C21.1281 6.19178 21.4383 6.06326 21.729 5.89768C22.0111 5.7369 22.2854 5.51598 23.2896 4.66016L23.8663 4.1687C24.9887 3.21215 25.9321 2.40822 26.7611 1.80367C27.6311 1.16933 28.5136 0.64848 29.5478 0.348431Z" })), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M29.5478 0.348431C31.1495 -0.116144 32.8504 -0.116144 34.4522 0.348431C35.4864 0.64848 36.3688 1.16933 37.2388 1.80367C38.0679 2.40822 39.0111 3.21215 40.1337 4.1687L40.7102 4.66016C41.7146 5.51598 41.9889 5.7369 42.2709 5.89768C42.5616 6.06326 42.8717 6.19178 43.1944 6.28015C43.5077 6.366 43.8576 6.40371 45.1731 6.50866L45.9282 6.56893C47.3984 6.68621 48.6339 6.7848 49.6476 6.94353C50.7113 7.11014 51.7036 7.36579 52.6472 7.88507C54.108 8.68913 55.3109 9.89176 56.115 11.3529C56.6342 12.2964 56.8899 13.2887 57.0564 14.3524C57.2151 15.3661 57.3137 16.6017 57.4309 18.0718L57.4914 18.8269C57.5963 20.1422 57.6338 20.4923 57.7199 20.8056C57.8082 21.1281 57.9366 21.4383 58.1021 21.729C58.2631 22.0111 58.484 22.2854 59.3399 23.2896L59.8312 23.8664C60.7879 24.9888 61.5917 25.9322 62.1963 26.7612C62.8307 27.6309 63.3515 28.5134 63.6514 29.5479C64.1162 31.1496 64.1162 32.8502 63.6514 34.452C63.3515 35.4865 62.8307 36.369 62.1963 37.239C61.5917 38.068 60.7879 39.011 59.8315 40.1335L59.3399 40.7103C58.484 41.7144 58.2631 41.9887 58.1021 42.271C57.9366 42.5617 57.8082 42.8718 57.7199 43.1945C57.6338 43.5075 57.5963 43.8577 57.4914 45.1729L57.4309 45.928C57.3137 47.3982 57.2151 48.6337 57.0564 49.6474C56.8899 50.7111 56.6342 51.7034 56.115 52.647C55.3109 54.1082 54.108 55.3107 52.6472 56.1148C51.7036 56.6343 50.7113 56.8897 49.6476 57.0565C48.6339 57.2153 47.3984 57.3138 45.9282 57.431L45.1731 57.4912C43.8576 57.5962 43.5077 57.6339 43.1944 57.7197C42.8717 57.8081 42.5616 57.9367 42.2709 58.1022C41.9889 58.2629 41.7146 58.4841 40.7102 59.3397L40.1334 59.8313C39.0112 60.7877 38.0679 61.5918 37.2388 62.1961C36.3688 62.8305 35.4864 63.3513 34.4522 63.6516C32.8504 64.116 31.1495 64.116 29.5478 63.6516C28.5136 63.3513 27.6311 62.8305 26.7611 62.1961C25.9321 61.5918 24.9888 60.7877 23.8664 59.8313L23.2896 59.3397C22.2854 58.4841 22.0111 58.2629 21.729 58.1022C21.4383 57.9367 21.1281 57.8081 20.8056 57.7197C20.4923 57.6339 20.1422 57.5962 18.8269 57.4912L18.0718 57.431C16.6017 57.3138 15.3661 57.2153 14.3524 57.0565C13.2887 56.8897 12.2964 56.6343 11.3529 56.1148C9.89176 55.3107 8.68913 54.1082 7.88507 52.647C7.36576 51.7034 7.11011 50.7111 6.94353 49.6474C6.78477 48.6337 6.68621 47.3985 6.56893 45.9284L6.50866 45.1729C6.40371 43.8577 6.366 43.5075 6.28015 43.1945C6.19178 42.8718 6.06326 42.5617 5.89768 42.271C5.73687 41.9887 5.51598 41.7144 4.66013 40.7103L4.16864 40.1335C3.21212 39.0113 2.40819 38.068 1.80367 37.239C1.16933 36.369 0.64848 35.4865 0.348431 34.452C-0.116144 32.8502 -0.116144 31.1496 0.348431 29.5479C0.64848 28.5134 1.16933 27.6309 1.80367 26.7612C2.40822 25.9322 3.21212 24.9888 4.16867 23.8664L4.66013 23.2896C5.51598 22.2854 5.73687 22.0111 5.89768 21.729C6.06326 21.4383 6.19178 21.1281 6.28015 20.8056C6.366 20.4923 6.40371 20.1422 6.50866 18.8269L6.56893 18.0716C6.68621 16.6016 6.78477 15.3661 6.94353 14.3524C7.11011 13.2887 7.36576 12.2964 7.88507 11.3529C8.68913 9.89176 9.89176 8.68916 11.3529 7.88507C12.2964 7.36579 13.2887 7.11014 14.3524 6.94353C15.3661 6.7848 16.6015 6.68621 18.0715 6.56893L18.8269 6.50866C20.1422 6.40371 20.4923 6.366 20.8056 6.28015C21.1281 6.19178 21.4383 6.06326 21.729 5.89768C22.0111 5.7369 22.2854 5.51598 23.2896 4.66016L23.8663 4.1687C24.9887 3.21215 25.9321 2.40822 26.7611 1.80367C27.6311 1.16933 28.5136 0.64848 29.5478 0.348431Z", fill: "url(#paint0_linear_7412_62086)" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M29.5478 0.348431L29.2692 -0.611986L29.2691 -0.611966L29.5478 0.348431ZM34.4522 0.348431L34.7308 -0.611966L34.7307 -0.611986L34.4522 0.348431ZM37.2388 1.80367L37.828 0.995689L37.828 0.995655L37.2388 1.80367ZM40.1337 4.1687L40.7825 3.40771L40.7823 3.40756L40.1337 4.1687ZM40.7102 4.66016L40.0614 5.42115L40.0616 5.42133L40.7102 4.66016ZM42.2709 5.89768L41.7756 6.7664L41.7759 6.76656L42.2709 5.89768ZM43.1944 6.28015L43.4586 5.31569L43.4585 5.31568L43.1944 6.28015ZM45.1731 6.50866L45.2527 5.51183L45.2527 5.51183L45.1731 6.50866ZM45.9282 6.56893L45.8487 7.56576L45.8487 7.56577L45.9282 6.56893ZM49.6476 6.94353L49.8024 5.95558L49.8023 5.95557L49.6476 6.94353ZM52.6472 7.88507L53.1294 7.009L53.1293 7.00897L52.6472 7.88507ZM56.115 11.3529L56.9911 10.8708L56.9911 10.8707L56.115 11.3529ZM57.0564 14.3524L56.0684 14.507L56.0684 14.5071L57.0564 14.3524ZM57.4309 18.0718L56.434 18.1512L56.4341 18.1517L57.4309 18.0718ZM57.4914 18.8269L58.4882 18.7473L58.4882 18.7471L57.4914 18.8269ZM57.7199 20.8056L58.6844 20.5414L58.6841 20.5405L57.7199 20.8056ZM58.1021 21.729L57.2331 22.2238L57.2335 22.2245L58.1021 21.729ZM59.3399 23.2896L60.1011 22.6412L60.1009 22.641L59.3399 23.2896ZM59.8312 23.8664L59.07 24.5149L59.0702 24.5151L59.8312 23.8664ZM62.1963 26.7612L61.3884 27.3505L61.3884 27.3506L62.1963 26.7612ZM63.6514 29.5479L62.691 29.8264L62.691 29.8266L63.6514 29.5479ZM63.6514 34.452L62.691 34.1733L62.691 34.1735L63.6514 34.452ZM62.1963 37.239L63.0043 37.8282L63.0043 37.8281L62.1963 37.239ZM59.8315 40.1335L60.5926 40.7822L60.5927 40.782L59.8315 40.1335ZM59.3399 40.7103L60.1009 41.359L60.1009 41.359L59.3399 40.7103ZM58.1021 42.271L57.2334 41.7756L57.2331 41.7762L58.1021 42.271ZM57.7199 43.1945L58.6841 43.4597L58.6844 43.4586L57.7199 43.1945ZM57.4914 45.1729L58.4882 45.2528L58.4882 45.2525L57.4914 45.1729ZM57.4309 45.928L56.4341 45.8482L56.434 45.8486L57.4309 45.928ZM57.0564 49.6474L56.0684 49.4927L56.0684 49.4928L57.0564 49.6474ZM56.115 52.647L56.9911 53.1291L56.9911 53.129L56.115 52.647ZM52.6472 56.1148L52.165 55.2387L52.1649 55.2388L52.6472 56.1148ZM49.6476 57.0565L49.8024 58.0444L49.8025 58.0444L49.6476 57.0565ZM45.9282 57.431L45.8488 56.4341L45.8488 56.4341L45.9282 57.431ZM45.1731 57.4912L45.0937 56.4943L45.0936 56.4943L45.1731 57.4912ZM43.1944 57.7197L42.9303 56.7552L42.9303 56.7552L43.1944 57.7197ZM42.2709 58.1022L41.7761 57.2332L41.7758 57.2334L42.2709 58.1022ZM40.7102 59.3397L40.0617 58.5784L40.0615 58.5786L40.7102 59.3397ZM40.1334 59.8313L40.782 60.5924L40.7821 60.5924L40.1334 59.8313ZM37.2388 62.1961L36.6498 61.388L36.6496 61.3881L37.2388 62.1961ZM34.4522 63.6516L34.7306 64.612L34.731 64.6119L34.4522 63.6516ZM29.5478 63.6516L29.269 64.6119L29.2693 64.612L29.5478 63.6516ZM26.7611 62.1961L27.3503 61.3881L27.3502 61.388L26.7611 62.1961ZM23.8664 59.8313L23.2177 60.5923L23.2178 60.5925L23.8664 59.8313ZM23.2896 59.3397L23.9384 58.5786L23.9381 58.5785L23.2896 59.3397ZM21.729 58.1022L21.2341 58.9712L21.2341 58.9712L21.729 58.1022ZM20.8056 57.7197L21.0697 56.7552L21.0697 56.7552L20.8056 57.7197ZM18.8269 57.4912L18.9065 56.4943L18.9064 56.4943L18.8269 57.4912ZM18.0718 57.431L18.1512 56.4341L18.1512 56.4341L18.0718 57.431ZM14.3524 57.0565L14.1975 58.0444L14.1977 58.0444L14.3524 57.0565ZM11.3529 56.1148L11.8352 55.2388L11.835 55.2387L11.3529 56.1148ZM7.88507 52.647L8.76118 52.1649L8.76116 52.1648L7.88507 52.647ZM6.94353 49.6474L7.93149 49.4927L7.93149 49.4927L6.94353 49.6474ZM6.56893 45.9284L7.56577 45.8488L7.56577 45.8488L6.56893 45.9284ZM6.50866 45.1729L7.50549 45.0934L7.50549 45.0934L6.50866 45.1729ZM6.28015 43.1945L5.31568 43.4587L5.31576 43.459L6.28015 43.1945ZM5.89768 42.271L5.02876 42.766L5.0288 42.7661L5.89768 42.271ZM4.66013 40.7103L3.89898 41.3589L3.89907 41.359L4.66013 40.7103ZM4.16864 40.1335L4.92978 39.4849L4.9297 39.4848L4.16864 40.1335ZM1.80367 37.239L0.995656 37.8281L0.995675 37.8281L1.80367 37.239ZM0.348431 34.452L1.30885 34.1734L1.30885 34.1734L0.348431 34.452ZM0.348431 29.5479L1.30885 29.8265L1.30885 29.8265L0.348431 29.5479ZM1.80367 26.7612L2.61159 27.3505L2.61166 27.3504L1.80367 26.7612ZM4.16867 23.8664L4.92977 24.515L4.9298 24.515L4.16867 23.8664ZM4.66013 23.2896L3.89903 22.641L3.899 22.641L4.66013 23.2896ZM5.89768 21.729L6.76651 22.2241L6.76654 22.224L5.89768 21.729ZM6.28015 20.8056L5.31572 20.5412L5.31569 20.5413L6.28015 20.8056ZM6.50866 18.8269L7.50549 18.9065L7.50549 18.9065L6.50866 18.8269ZM6.56893 18.0716L7.56577 18.1511L7.56577 18.1511L6.56893 18.0716ZM6.94353 14.3524L7.93149 14.5071L7.93149 14.5071L6.94353 14.3524ZM7.88507 11.3529L8.76115 11.835L8.76117 11.835L7.88507 11.3529ZM11.3529 7.88507L10.8707 7.00897L10.8707 7.00898L11.3529 7.88507ZM14.3524 6.94353L14.1977 5.95557L14.1976 5.95558L14.3524 6.94353ZM18.0715 6.56893L18.1511 7.56577L18.1511 7.56577L18.0715 6.56893ZM18.8269 6.50866L18.9065 7.50549L18.9065 7.50549L18.8269 6.50866ZM20.8056 6.28015L20.5413 5.31569L20.5412 5.31572L20.8056 6.28015ZM21.729 5.89768L21.2339 5.02881L21.2339 5.02882L21.729 5.89768ZM23.2896 4.66016L23.9382 5.42128L23.9383 5.42127L23.2896 4.66016ZM23.8663 4.1687L24.515 4.92981L24.515 4.9298L23.8663 4.1687ZM26.7611 1.80367L26.1719 0.995655L26.1719 0.995689L26.7611 1.80367ZM29.8263 1.30885C31.2461 0.897051 32.7538 0.897051 34.1736 1.30885L34.7307 -0.611986C32.947 -1.12934 31.0529 -1.12934 29.2692 -0.611986L29.8263 1.30885ZM34.1735 1.30883C35.0523 1.56378 35.8277 2.01237 36.6497 2.61169L37.828 0.995655C36.9099 0.326276 35.9204 -0.266818 34.7308 -0.611966L34.1735 1.30883ZM36.6496 2.61166C37.4413 3.18899 38.3525 3.96469 39.4851 4.92984L40.7823 3.40756C39.6698 2.45961 38.6944 1.62746 37.828 0.995689L36.6496 2.61166ZM39.4849 4.92969L40.0614 5.42115L41.3589 3.89917L40.7825 3.40771L39.4849 4.92969ZM40.0616 5.42133C41.0337 6.24956 41.392 6.54766 41.7756 6.7664L42.7662 5.02896C42.5859 4.92614 42.3955 4.7824 41.3587 3.89899L40.0616 5.42133ZM41.7759 6.76656C42.1391 6.97347 42.5268 7.13413 42.9302 7.24463L43.4585 5.31568C43.2167 5.24943 42.984 5.15306 42.7659 5.0288L41.7759 6.76656ZM42.9301 7.24461C43.3565 7.36143 43.8205 7.40392 45.0936 7.50549L45.2527 5.51183C43.8947 5.40349 43.6589 5.37057 43.4586 5.31569L42.9301 7.24461ZM45.0936 7.50549L45.8487 7.56576L46.0078 5.57211L45.2527 5.51183L45.0936 7.50549ZM45.8487 7.56577C47.332 7.6841 48.5249 7.77991 49.4929 7.93149L49.8023 5.95557C48.743 5.78969 47.4648 5.68833 46.0077 5.5721L45.8487 7.56577ZM49.4929 7.93149C50.4978 8.08889 51.3633 8.31995 52.165 8.76117L53.1293 7.00897C52.0438 6.41163 50.9248 6.13138 49.8024 5.95558L49.4929 7.93149ZM52.165 8.76114C53.46 9.47389 54.5262 10.5399 55.2389 11.835L56.9911 10.8707C56.0956 9.24358 54.7561 7.90436 53.1294 7.009L52.165 8.76114ZM55.2389 11.8349C55.68 12.6367 55.9112 13.5022 56.0684 14.507L58.0443 14.1978C57.8687 13.0752 57.5883 11.9562 56.9911 10.8708L55.2389 11.8349ZM56.0684 14.5071C56.22 15.4752 56.3158 16.668 56.434 18.1512L58.4277 17.9924C58.3116 16.5353 58.2102 15.2571 58.0443 14.1977L56.0684 14.5071ZM56.4341 18.1517L56.4946 18.9068L58.4882 18.7471L58.4277 17.9919L56.4341 18.1517ZM56.4945 18.9065C56.5961 20.1785 56.6383 20.6437 56.7557 21.0706L58.6841 20.5405C58.6293 20.3409 58.5966 20.1059 58.4882 18.7473L56.4945 18.9065ZM56.7554 21.0697C56.8658 21.4728 57.0262 21.8605 57.2331 22.2238L58.9711 21.2341C58.847 21.0162 58.7507 20.7835 58.6844 20.5414L56.7554 21.0697ZM57.2335 22.2245C57.4524 22.6082 57.7503 22.9663 58.5788 23.9383L60.1009 22.641C59.2176 21.6045 59.0737 21.414 58.9707 21.2334L57.2335 22.2245ZM58.5786 23.9381L59.07 24.5149L60.5924 23.2179L60.1011 22.6412L58.5786 23.9381ZM59.0702 24.5151C60.0353 25.6473 60.8109 26.5588 61.3884 27.3505L63.0043 26.172C62.3724 25.3056 61.5406 24.3302 60.5922 23.2177L59.0702 24.5151ZM61.3884 27.3506C61.9877 28.172 62.4362 28.9474 62.691 29.8264L64.6119 29.2695C64.2669 28.0794 63.6738 27.0898 63.0042 26.1719L61.3884 27.3506ZM62.691 29.8266C63.103 31.2463 63.103 32.7536 62.691 34.1733L64.6118 34.7306C65.1294 32.9469 65.1294 31.053 64.6118 29.2692L62.691 29.8266ZM62.691 34.1735C62.4361 35.0525 61.9877 35.8279 61.3883 36.6498L63.0043 37.8281C63.6738 36.91 64.2669 35.9205 64.6119 34.7304L62.691 34.1735ZM61.3884 36.6497C60.8109 37.4414 60.0354 38.3523 59.0703 39.485L60.5927 40.782C61.5405 39.6697 62.3724 38.6945 63.0043 37.8282L61.3884 36.6497ZM59.0705 39.4848L58.5788 40.0616L60.1009 41.359L60.5926 40.7822L59.0705 39.4848ZM58.5788 40.0616C57.7503 41.0335 57.4524 41.3917 57.2334 41.7756L58.9707 42.7664C59.0738 42.5858 59.2176 42.3953 60.1009 41.359L58.5788 40.0616ZM57.2331 41.7762C57.0262 42.1395 56.8658 42.5272 56.7554 42.9304L58.6844 43.4586C58.7507 43.2165 58.847 42.9838 58.9711 42.7658L57.2331 41.7762ZM56.7557 42.9293C56.6383 43.3561 56.5961 43.8215 56.4945 45.0934L58.4882 45.2525C58.5966 43.894 58.6293 43.659 58.6841 43.4597L56.7557 42.9293ZM56.4946 45.0931L56.4341 45.8482L58.4277 46.0079L58.4882 45.2528L56.4946 45.0931ZM56.434 45.8486C56.3158 47.3318 56.22 48.5247 56.0684 49.4927L58.0443 49.8022C58.2102 48.7428 58.3116 47.4646 58.4277 46.0075L56.434 45.8486ZM56.0684 49.4928C55.9112 50.4976 55.68 51.3631 55.2388 52.1649L56.9911 53.129C57.5883 52.0436 57.8687 50.9246 58.0443 49.802L56.0684 49.4928ZM55.2389 52.1649C54.5262 53.46 53.46 54.526 52.165 55.2387L53.1294 56.9909C54.7561 56.0955 56.0956 54.7564 56.9911 53.1291L55.2389 52.1649ZM52.1649 55.2388C51.3633 55.6801 50.4979 55.911 49.4927 56.0686L49.8025 58.0444C50.9246 57.8685 52.0438 57.5885 53.1295 56.9908L52.1649 55.2388ZM49.4929 56.0685C48.5249 56.2201 47.332 56.316 45.8488 56.4341L46.0077 58.4278C47.4648 58.3117 48.7429 58.2104 49.8024 58.0444L49.4929 56.0685ZM45.8488 56.4341L45.0937 56.4943L45.2526 58.488L46.0077 58.4278L45.8488 56.4341ZM45.0936 56.4943C43.8203 56.596 43.3566 56.6385 42.9303 56.7552L43.4584 58.6842C43.6589 58.6293 43.8949 58.5964 45.2527 58.488L45.0936 56.4943ZM42.9303 56.7552C42.5265 56.8658 42.1389 57.0266 41.7761 57.2332L42.7657 58.9712C42.9842 58.8468 43.2169 58.7503 43.4585 58.6842L42.9303 56.7552ZM41.7758 57.2334C41.392 57.4521 41.0334 57.7507 40.0617 58.5784L41.3586 60.1009C42.3958 59.2174 42.5858 59.0737 42.766 58.9711L41.7758 57.2334ZM40.0615 58.5786L39.4847 59.0703L40.7821 60.5924L41.3589 60.1007L40.0615 58.5786ZM39.4847 59.0702C38.3524 60.0353 37.4413 60.811 36.6498 61.388L37.8279 63.0042C38.6944 62.3726 39.6699 61.5402 40.782 60.5924L39.4847 59.0702ZM36.6496 61.3881C35.8278 61.9875 35.0522 62.4361 34.1734 62.6912L34.731 64.6119C35.9205 64.2666 36.9099 63.6736 37.828 63.0041L36.6496 61.3881ZM34.1737 62.6911C32.7539 63.1028 31.2461 63.1028 29.8263 62.6911L29.2693 64.612C31.0529 65.1292 32.947 65.1292 34.7306 64.612L34.1737 62.6911ZM29.8266 62.6912C28.9477 62.4361 28.1722 61.9875 27.3503 61.3881L26.1719 63.0041C27.09 63.6736 28.0795 64.2666 29.269 64.6119L29.8266 62.6912ZM27.3502 61.388C26.5586 60.811 25.6475 60.0353 24.515 59.0702L23.2178 60.5925C24.33 61.5402 25.3056 62.3726 26.172 63.0042L27.3502 61.388ZM24.5151 59.0703L23.9384 58.5786L22.6409 60.1007L23.2177 60.5923L24.5151 59.0703ZM23.9381 58.5785C22.9668 57.7509 22.608 57.452 22.2238 57.2332L21.2341 58.9712C21.4142 59.0738 21.604 59.2173 22.6411 60.1009L23.9381 58.5785ZM22.2238 57.2332C21.861 57.0266 21.4733 56.8658 21.0697 56.7552L20.5414 58.6842C20.783 58.7503 21.0157 58.8468 21.2341 58.9712L22.2238 57.2332ZM21.0697 56.7552C20.6435 56.6385 20.1794 56.5959 18.9065 56.4943L18.7473 58.488C20.105 58.5964 20.3411 58.6293 20.5414 58.6842L21.0697 56.7552ZM18.9064 56.4943L18.1512 56.4341L17.9924 58.4278L18.7475 58.488L18.9064 56.4943ZM18.1512 56.4341C16.668 56.316 15.4752 56.2201 14.5071 56.0685L14.1977 58.0444C15.2571 58.2104 16.5353 58.3117 17.9924 58.4278L18.1512 56.4341ZM14.5073 56.0686C13.502 55.911 12.6367 55.6801 11.8352 55.2388L10.8706 56.9908C11.9562 57.5885 13.0754 57.8685 14.1975 58.0444L14.5073 56.0686ZM11.835 55.2387C10.5399 54.526 9.47388 53.46 8.76118 52.1649L7.00895 53.1291C7.90437 54.7563 9.24365 56.0955 10.8707 56.9909L11.835 55.2387ZM8.76116 52.1648C8.31992 51.3631 8.08886 50.4976 7.93149 49.4927L5.95557 49.8022C6.13135 50.9246 6.4116 52.0436 7.00898 53.1291L8.76116 52.1648ZM7.93149 49.4927C7.77988 48.5247 7.68409 47.3321 7.56577 45.8488L5.5721 46.0079C5.68833 47.4649 5.78966 48.7428 5.95558 49.8022L7.93149 49.4927ZM7.56577 45.8488L7.50549 45.0934L5.51183 45.2525L5.5721 46.0079L7.56577 45.8488ZM7.50549 45.0934C7.40394 43.8208 7.36144 43.3563 7.24455 42.93L5.31576 43.459C5.37056 43.6588 5.40348 43.8947 5.51183 45.2525L7.50549 45.0934ZM7.24463 42.9303C7.13413 42.5269 6.97347 42.1392 6.76656 41.776L5.0288 42.7661C5.15306 42.9842 5.24943 43.2168 5.31568 43.4587L7.24463 42.9303ZM6.7666 41.7761C6.5477 41.3918 6.24945 41.0334 5.42119 40.0616L3.89907 41.359C4.7825 42.3955 4.92603 42.5856 5.02876 42.766L6.7666 41.7761ZM5.42127 40.0617L4.92978 39.4849L3.40749 40.7821L3.89898 41.3589L5.42127 40.0617ZM4.9297 39.4848C3.96465 38.3526 3.18894 37.4414 2.61167 36.6498L0.995675 37.8281C1.62744 38.6945 2.45959 39.67 3.40758 40.7822L4.9297 39.4848ZM2.61169 36.6498C2.01239 35.8279 1.5638 35.0524 1.30885 34.1734L-0.611989 34.7305C-0.266844 35.9205 0.326265 36.9101 0.995656 37.8281L2.61169 36.6498ZM1.30885 34.1734C0.897051 32.7536 0.897051 31.2462 1.30885 29.8265L-0.611986 29.2693C-1.12934 31.053 -1.12934 32.9468 -0.611986 34.7305L1.30885 34.1734ZM1.30885 29.8265C1.5638 28.9474 2.01238 28.172 2.61159 27.3505L0.995759 26.1719C0.326274 27.0898 -0.266841 28.0793 -0.611989 29.2693L1.30885 29.8265ZM2.61166 27.3504C3.18899 26.5587 3.96471 25.6474 4.92977 24.515L3.40756 23.2177C2.45953 24.3302 1.62745 25.3057 0.99569 26.172L2.61166 27.3504ZM4.9298 24.515L5.42126 23.9382L3.899 22.641L3.40754 23.2178L4.9298 24.515ZM5.42123 23.9383C6.24946 22.9664 6.54765 22.6081 6.76651 22.2241L5.02886 21.2338C4.92608 21.4142 4.78249 21.6044 3.89903 22.641L5.42123 23.9383ZM6.76654 22.224C6.97347 21.8608 7.13412 21.4731 7.24461 21.0698L5.31569 20.5413C5.24943 20.7832 5.15305 21.0159 5.02882 21.2339L6.76654 22.224ZM7.24459 21.0699C7.36143 20.6435 7.40393 20.1792 7.50549 18.9065L5.51183 18.7474C5.40348 20.1052 5.37057 20.3411 5.31572 20.5412L7.24459 21.0699ZM7.50549 18.9065L7.56577 18.1511L5.5721 17.992L5.51183 18.7474L7.50549 18.9065ZM7.56577 18.1511C7.6841 16.6679 7.77988 15.4751 7.93149 14.5071L5.95558 14.1977C5.78966 15.257 5.68833 16.5352 5.5721 17.992L7.56577 18.1511ZM7.93149 14.5071C8.08886 13.5022 8.31992 12.6367 8.76115 11.835L7.00898 10.8707C6.4116 11.9561 6.13135 13.0752 5.95557 14.1977L7.93149 14.5071ZM8.76117 11.835C9.47387 10.5399 10.5399 9.47391 11.835 8.76116L10.8707 7.00898C9.24364 7.90441 7.90438 9.24362 7.00897 10.8707L8.76117 11.835ZM11.835 8.76116C12.6367 8.31995 13.5022 8.08889 14.5071 7.93149L14.1976 5.95558C13.0752 6.13138 11.9562 6.41163 10.8707 7.00897L11.835 8.76116ZM14.5071 7.93149C15.4751 7.77991 16.6679 7.68409 18.1511 7.56577L17.992 5.5721C16.5351 5.68833 15.257 5.78969 14.1977 5.95557L14.5071 7.93149ZM18.1511 7.56577L18.9065 7.50549L18.7474 5.51183L17.992 5.5721L18.1511 7.56577ZM18.9065 7.50549C20.1792 7.40393 20.6435 7.36143 21.0699 7.24459L20.5412 5.31572C20.3411 5.37057 20.1052 5.40348 18.7474 5.51183L18.9065 7.50549ZM21.0698 7.24461C21.4731 7.13412 21.8608 6.97347 22.224 6.76654L21.2339 5.02882C21.0159 5.15305 20.7832 5.24943 20.5413 5.31569L21.0698 7.24461ZM22.224 6.76655C22.6081 6.54771 22.9665 6.2494 23.9382 5.42128L22.641 3.89904C21.6043 4.78255 21.4142 4.92609 21.2339 5.02881L22.224 6.76655ZM23.9383 5.42127L24.515 4.92981L23.2177 3.40759L22.641 3.89905L23.9383 5.42127ZM24.515 4.9298C25.6474 3.9647 26.5586 3.18898 27.3503 2.61166L26.1719 0.995689C25.3055 1.62746 24.3301 2.4596 23.2177 3.40759L24.515 4.9298ZM27.3503 2.61169C28.1722 2.01237 28.9477 1.56378 29.8264 1.30883L29.2691 -0.611966C28.0795 -0.266818 27.09 0.326276 26.1719 0.995655L27.3503 2.61169Z", fill: "url(#paint1_linear_7412_62086)", mask: "url(#path-1-inside-1_7412_62086)" }), /* @__PURE__ */ React__namespace.createElement("circle", { cx: 32, cy: 31.9999, r: 20, fill: "white" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M34 40.4444C34 41.3035 33.1046 41.9999 32 41.9999C30.8954 41.9999 30 41.3035 30 40.4444V29.5555C30 28.6964 30.8954 27.9999 32 27.9999C33.1046 27.9999 34 28.6964 34 29.5555V40.4444Z", fill: "url(#paint2_linear_7412_62086)" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M32 21.9999C33.1046 21.9999 34 22.8954 34 23.9999C34 25.1045 33.1046 25.9999 32 25.9999C30.8954 25.9999 30 25.1045 30 23.9999C30 22.8954 30.8954 21.9999 32 21.9999Z", fill: "url(#paint3_linear_7412_62086)" }), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("linearGradient", { id: "paint0_linear_7412_62086", x1: 20, y1: 0, x2: 20, y2: 39.9999, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React__namespace.createElement("stop", { stopColor: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("stop", { offset: 1, stopColor: "#46164D" })), /* @__PURE__ */ React__namespace.createElement("linearGradient", { id: "paint1_linear_7412_62086", x1: 20, y1: 0, x2: 20, y2: 39.9999, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React__namespace.createElement("stop", { stopColor: "#A42FB8" }), /* @__PURE__ */ React__namespace.createElement("stop", { offset: 1, stopColor: "#6B1677" })), /* @__PURE__ */ React__namespace.createElement("linearGradient", { id: "paint2_linear_7412_62086", x1: 32, y1: 41.9999, x2: 32, y2: 27.9999, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React__namespace.createElement("stop", { stopColor: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("stop", { offset: 1, stopColor: "#46164D" })), /* @__PURE__ */ React__namespace.createElement("linearGradient", { id: "paint3_linear_7412_62086", x1: 32, y1: 25.9999, x2: 32, y2: 21.9999, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ React__namespace.createElement("stop", { stopColor: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("stop", { offset: 1, stopColor: "#46164D" }))));
 
@@ -403,7 +403,7 @@ const SvgEyeClosed = (props) => /* @__PURE__ */ React__namespace.createElement("
 
 const SvgAttachmentIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 14 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.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" }));
 
-const SvgAuthorizationIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 14 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.01996 1.20377C8.85437 1.81129 10.7372 2.52661 12.3472 3.151C12.4591 3.88383 12.6126 5.14073 12.6419 6.66013C12.6679 8.39079 12.5248 9.3455 12.4613 9.67831C12.3285 10.1368 12.0497 10.6349 11.6329 11.1587C11.1385 11.7793 10.4653 12.4246 9.6322 13.0762L9.63063 13.0774C8.44655 14.0068 7.35028 14.6059 7.01996 14.7784C6.68964 14.6062 5.59462 14.0084 4.41116 13.0796L4.40959 13.0784C3.57677 12.4271 2.90394 11.7821 2.41049 11.1618C2.01455 10.664 1.74329 10.1889 1.60329 9.74988C1.59954 9.73519 1.59548 9.7205 1.59079 9.7055C1.52829 9.49394 1.32735 8.64173 1.35766 6.54419C1.39079 5.20791 1.51329 4.01414 1.70454 3.14287C3.30957 2.5213 5.1868 1.80941 7.01996 1.20377ZM7.01996 0C6.92589 0 6.83152 0.0150003 6.73995 0.0453134C4.94273 0.63595 3.09926 1.32878 1.22453 2.05504C0.97234 2.15285 0.760773 2.3338 0.62327 2.5538C0.633896 2.55505 0.23795 3.79101 0.170449 6.52075C0.130448 9.25081 0.470455 10.0686 0.459205 10.0696C0.643271 10.6696 0.987652 11.2799 1.4811 11.9005C2.03267 12.5937 2.778 13.3096 3.67833 14.0134C5.16867 15.1831 6.56339 15.8822 6.62183 15.9069C6.74808 15.9688 6.88214 16 7.02027 16C7.15871 16 7.29309 15.9684 7.41934 15.9062C7.47809 15.8816 8.87437 15.1803 10.3641 14.0109C11.2647 13.3065 12.0101 12.5906 12.5619 11.8977C13.0907 11.233 13.4482 10.5808 13.621 9.9402C13.6141 9.93926 13.8642 8.93674 13.8295 6.6395C13.7854 4.34258 13.4654 2.64849 13.4698 2.64693C13.3366 2.38723 13.1032 2.17004 12.8176 2.0591C10.9425 1.33253 9.09875 0.63845 7.30121 0.0459384C7.20902 0.0156253 7.11434 0 7.01996 0Z", fill: "currentColor" }));
+const SvgAuthorizationIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 14 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.01996 1.20377C8.85437 1.81129 10.7372 2.52661 12.3472 3.151C12.4591 3.88383 12.6126 5.14073 12.6419 6.66013C12.6679 8.39079 12.5248 9.3455 12.4613 9.67831C12.3285 10.1368 12.0497 10.6349 11.6329 11.1587C11.1385 11.7793 10.4653 12.4246 9.6322 13.0762L9.63063 13.0774C8.44655 14.0068 7.35028 14.6059 7.01996 14.7784C6.68964 14.6062 5.59462 14.0084 4.41116 13.0796L4.40959 13.0784C3.57677 12.4271 2.90394 11.7821 2.41049 11.1618C2.01455 10.664 1.74329 10.1889 1.60329 9.74988C1.59954 9.73519 1.59548 9.7205 1.59079 9.7055C1.52829 9.49394 1.32735 8.64173 1.35766 6.54419C1.39079 5.20791 1.51329 4.01414 1.70454 3.14287C3.30957 2.5213 5.1868 1.80941 7.01996 1.20377ZM7.01996 0C6.92589 0 6.83152 0.0150003 6.73995 0.0453134C4.94273 0.63595 3.09926 1.32878 1.22453 2.05504C0.97234 2.15285 0.760773 2.3338 0.62327 2.5538C0.633896 2.55505 0.23795 3.79101 0.170449 6.52075C0.130448 9.25081 0.470455 10.0686 0.459205 10.0696C0.643271 10.6696 0.987652 11.2799 1.4811 11.9005C2.03267 12.5937 2.778 13.3096 3.67833 14.0134C5.16867 15.1831 6.56339 15.8822 6.62183 15.9069C6.74808 15.9688 6.88214 16 7.02027 16C7.15871 16 7.29309 15.9684 7.41934 15.9062C7.47809 15.8816 8.87437 15.1803 10.3641 14.0109C11.2647 13.3065 12.0101 12.5906 12.5619 11.8977C13.0907 11.233 13.4482 10.5808 13.621 9.9402C13.6141 9.93926 13.8642 8.93674 13.8295 6.6395C13.7854 4.34258 13.4654 2.64849 13.4698 2.64693C13.3366 2.38723 13.1032 2.17004 12.8176 2.0591C10.9425 1.33253 9.09875 0.63845 7.30121 0.0459384C7.20902 0.0156253 7.11434 0 7.01996 0Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.01901 11.0311C6.6765 11.0311 6.35462 10.898 6.11274 10.6558C5.87055 10.4136 5.73711 10.0918 5.73711 9.74956V8.7486C5.21335 8.35641 4.90021 7.74202 4.8999 7.07045C4.8999 5.91261 5.8418 4.97041 6.99963 4.97009C7.56058 4.97009 8.08809 5.18853 8.48466 5.58511C8.88123 5.98168 9.09998 6.50919 9.09998 7.07013C9.09998 7.72108 8.80092 8.32516 8.30059 8.71923V9.74956C8.30059 10.0921 8.16747 10.4139 7.92527 10.6558C7.68308 10.898 7.3612 11.0311 7.01901 11.0315V11.0311ZM6.99994 6.1573C6.49681 6.1573 6.08743 6.56669 6.08743 7.06982C6.08743 7.41858 6.2818 7.73202 6.59493 7.88765C6.79681 7.98796 6.92432 8.19391 6.92432 8.41922V9.74925C6.92432 9.80112 6.96682 9.84363 7.01869 9.84363C7.05088 9.84363 7.07276 9.82863 7.08526 9.81613C7.09776 9.80363 7.11276 9.78175 7.11276 9.74956V8.40047C7.11276 8.18109 7.2337 7.97953 7.42745 7.8764C7.72652 7.71702 7.91246 7.40827 7.91215 7.07013C7.91215 6.82638 7.81715 6.59731 7.64496 6.42481C7.47245 6.25262 7.24339 6.15762 6.99963 6.15762L6.99994 6.1573Z", fill: "currentColor" }));
 
 const SvgCloneIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.86942 0.0111092H12.8728C13.7018 0.0123063 14.4965 0.342161 15.0828 0.928364C15.669 1.51457 15.9988 2.30928 16 3.1383V9.8924C15.9988 10.7214 15.669 11.5161 15.0828 12.1023C14.4965 12.6885 13.7018 13.0184 12.8728 13.0196H12.2586C12.2176 13.8104 11.8782 14.5578 11.3068 15.1097C10.7104 15.6858 9.90991 16.0018 9.08083 15.9885H3.18372C2.35443 16.0018 1.55368 15.6859 0.956918 15.1099C0.360155 14.5339 0.0160501 13.7448 0 12.9156V6.05293C0.0160501 5.22369 0.360155 4.43463 0.956918 3.85864C1.55368 3.28264 2.35443 2.96669 3.18372 2.98001H3.74183C3.76016 2.62314 3.83951 2.27164 3.97679 1.94088C4.13434 1.56131 4.3651 1.21649 4.6559 0.926106C4.94671 0.63572 5.29187 0.405455 5.67166 0.24846C6.05146 0.0914646 6.45846 0.010813 6.86942 0.0111092ZM3.73771 4.11059H3.18372C2.65408 4.0966 2.14051 4.29322 1.75562 4.65733C1.37074 5.02144 1.14596 5.52333 1.13058 6.05293V12.9065C1.14596 13.4361 1.37074 13.938 1.75562 14.3021C2.14051 14.6662 2.65408 14.8629 3.18372 14.8489H9.08083C9.61009 14.8622 10.1231 14.6654 10.5075 14.3013C10.8644 13.9633 11.0834 13.5067 11.1252 13.0196H6.86942C6.45846 13.0199 6.05146 12.9392 5.67166 12.7822C5.29187 12.6252 4.94671 12.395 4.6559 12.1046C4.3651 11.8142 4.13434 11.4694 3.97679 11.0898C3.81925 10.7102 3.73801 10.3034 3.73771 9.8924V4.11059ZM11.7002 11.889L11.697 11.889L11.6939 11.889H6.86942C6.34007 11.8884 5.83258 11.6779 5.45827 11.3036C5.08396 10.9292 4.87341 10.4217 4.87282 9.8924V3.1383C4.87341 2.60895 5.08396 2.10145 5.45827 1.72715C5.83258 1.35284 6.34007 1.14229 6.86942 1.14169H12.8728C13.4022 1.14229 13.9097 1.35284 14.284 1.72715C14.6583 2.10145 14.8688 2.60895 14.8694 3.1383V9.8924C14.8688 10.4217 14.6583 10.9292 14.284 11.3036C13.9097 11.6779 13.4022 11.8884 12.8728 11.889H11.7002ZM12.2962 4.58997H7.4415C7.29157 4.58997 7.14779 4.64952 7.04178 4.75554C6.93577 4.86155 6.87621 5.00533 6.87621 5.15526C6.87621 5.30518 6.93577 5.44897 7.04178 5.55498C7.14779 5.66099 7.29157 5.72055 7.4415 5.72055H12.2962C12.4461 5.72055 12.5899 5.66099 12.6959 5.55498C12.802 5.44897 12.8615 5.30518 12.8615 5.15526C12.8615 5.00533 12.802 4.86155 12.6959 4.75554C12.5899 4.64952 12.4461 4.58997 12.2962 4.58997ZM7.4415 7.32144H12.2962C12.4461 7.32144 12.5899 7.381 12.6959 7.48701C12.802 7.59303 12.8615 7.73681 12.8615 7.88673C12.8615 8.03666 12.802 8.18044 12.6959 8.28646C12.5899 8.39247 12.4461 8.45203 12.2962 8.45203H7.4415C7.29157 8.45203 7.14779 8.39247 7.04178 8.28646C6.93577 8.18044 6.87621 8.03666 6.87621 7.88673C6.87621 7.73681 6.93577 7.59303 7.04178 7.48701C7.14779 7.381 7.29157 7.32144 7.4415 7.32144Z", fill: "currentColor" }));
 
@@ -453,7 +453,7 @@ const SvgSafariIcon = (props) => /* @__PURE__ */ React__namespace.createElement(
 
 const SvgMaximizeScript = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_2947_11413)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M5.5 4H18.5C19.3271 4 20 4.67285 20 5.5V11.6748C20 11.9512 19.7761 12.1748 19.5 12.1748C19.2239 12.1748 19 11.9512 19 11.6748V5.5C19 5.22412 18.7756 5 18.5 5H5.5C5.22437 5 5 5.22412 5 5.5V18.5C5 18.7759 5.22437 19 5.5 19H11.675C11.9512 19 12.175 19.2236 12.175 19.5C12.175 19.7764 11.9512 20 11.675 20H5.5C4.67285 20 4 19.3272 4 18.5V5.5C4 4.67285 4.67285 4 5.5 4Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.5 13H18.5C19.3271 13 20 13.6729 20 14.5V18.5C20 19.3271 19.3271 20 18.5 20H14.5C13.6729 20 13 19.3271 13 18.5V14.5C13 13.6729 13.6729 13 14.5 13Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.6465 12.3535L8.5 9.20703V10C8.5 10.2764 8.27612 10.5 8 10.5C7.72388 10.5 7.5 10.2764 7.5 10V8C7.5 7.73216 7.72802 7.5 8 7.5H10C10.2761 7.5 10.5 7.72363 10.5 8C10.5 8.27637 10.2761 8.5 10 8.5H9.20703L12.3535 11.6465C12.5488 11.8418 12.5488 12.1582 12.3535 12.3535C12.1647 12.5423 11.8414 12.5484 11.6465 12.3535Z", fill: "currentColor" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_2947_11413" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z", fill: "currentColor" }))));
 
-const SvgDownloadFileIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_1306_9986)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.1796 5.30667L9.786 3.85417C9.2568 3.30333 8.5536 3 7.806 3H6C4.8972 3 4 3.93458 4 5.08333V10.9167C4 12.0654 4.8972 13 6 13H10C11.1028 13 12 12.0654 12 10.9167V7.36875C12 6.58917 11.7084 5.8575 11.1796 5.30667ZM10.614 5.89625C10.7412 6.02833 10.8488 6.17542 10.936 6.33375H9.1996C8.9788 6.33375 8.7996 6.14667 8.7996 5.91708V4.10792C8.9516 4.19875 9.0928 4.31083 9.22 4.44333L10.6136 5.89583L10.614 5.89625ZM11.2 10.9171C11.2 11.6062 10.6616 12.1671 10 12.1671H6C5.3384 12.1671 4.8 11.6062 4.8 10.9171V5.08333C4.8 4.39417 5.3384 3.83333 6 3.83333H7.806C7.8712 3.83333 7.936 3.83667 8 3.84292V5.91667C8 6.60583 8.5384 7.16667 9.2 7.16667H11.1908C11.1968 7.23333 11.2 7.30083 11.2 7.36875V10.9171ZM9.4828 9.71083C9.6392 9.87333 9.6392 10.1371 9.4828 10.3L8.8376 10.9725C8.6068 11.2129 8.3032 11.3333 8 11.3333C7.6968 11.3333 7.3932 11.2129 7.1624 10.9725L6.5172 10.3C6.3608 10.1371 6.3608 9.87333 6.5172 9.71083C6.6736 9.54792 6.9264 9.54792 7.0828 9.71083L7.6 10.2496V8.41708C7.6 8.18708 7.7788 8.00042 8 8.00042C8.2212 8.00042 8.4 8.18708 8.4 8.41708V10.2496L8.9172 9.71083C9.0736 9.54792 9.3264 9.54792 9.4828 9.71083Z", fill: "currentColor" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_1306_9986" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z", fill: "white" }))));
+const SvgDownloadFileIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 14 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.0873 3.69067L9.85758 1.36667C9.01086 0.485333 7.88574 0 6.68958 0H3.79998C2.0355 0 0.599976 1.49533 0.599976 3.33333V12.6667C0.599976 14.5047 2.0355 16 3.79998 16H10.2C11.9645 16 13.4 14.5047 13.4 12.6667V6.99C13.4 5.74267 12.9334 4.572 12.0873 3.69067ZM11.1824 4.634C11.3859 4.84533 11.5581 5.08067 11.6976 5.334H8.91934C8.56606 5.334 8.27934 5.03467 8.27934 4.66733V1.77267C8.52254 1.918 8.74846 2.09733 8.95198 2.30933L11.1817 4.63333L11.1824 4.634ZM12.12 12.6673C12.12 13.77 11.2585 14.6673 10.2 14.6673H3.79998C2.74142 14.6673 1.87998 13.77 1.87998 12.6673V3.33333C1.87998 2.23067 2.74142 1.33333 3.79998 1.33333H6.68958C6.7939 1.33333 6.89758 1.33867 6.99998 1.34867V4.66667C6.99998 5.76933 7.86142 6.66667 8.91998 6.66667H12.1053C12.1149 6.77333 12.12 6.88133 12.12 6.99V12.6673ZM9.37246 10.7373C9.62269 10.9973 9.62269 11.4193 9.37246 11.68L8.34014 12.756C7.97086 13.1407 7.4851 13.3333 6.99998 13.3333C6.51486 13.3333 6.0291 13.1407 5.65982 12.756L4.6275 11.68C4.37726 11.4193 4.37726 10.9973 4.6275 10.7373C4.87774 10.4767 5.28222 10.4767 5.53246 10.7373L6.35998 11.5993V8.66733C6.35998 8.29933 6.64606 8.00067 6.99998 8.00067C7.3539 8.00067 7.63998 8.29933 7.63998 8.66733V11.5993L8.4675 10.7373C8.71774 10.4767 9.12222 10.4767 9.37246 10.7373Z", fill: "#71347B" }));
 
 const SvgMaximizeIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M1.5 0H14.5C15.3271 0 16 0.67285 16 1.5V7.67481C16 7.95117 15.7761 8.1748 15.5 8.1748C15.2239 8.1748 15 7.95117 15 7.67481V1.5C15 1.22412 14.7756 1 14.5 1H1.5C1.22437 1 1 1.22412 1 1.5V14.5C1 14.7759 1.22437 15 1.5 15H7.67505C7.95117 15 8.17505 15.2236 8.17505 15.5C8.17505 15.7764 7.95117 16 7.67505 16H1.5C0.67285 16 0 15.3272 0 14.5V1.5C0 0.67285 0.67285 0 1.5 0Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.5 9H14.5C15.3271 9 16 9.67285 16 10.5V14.5C16 15.3271 15.3271 16 14.5 16H10.5C9.67285 16 9 15.3271 9 14.5V10.5C9 9.67285 9.67285 9 10.5 9Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.64649 8.35351L4.5 5.20703V6C4.5 6.27637 4.27612 6.5 4 6.5C3.72388 6.5 3.5 6.27637 3.5 6V4C3.5 3.73216 3.72802 3.5 4 3.5H6C6.27612 3.5 6.5 3.72363 6.5 4C6.5 4.27637 6.27612 4.5 6 4.5H5.20703L8.35352 7.64648C8.54883 7.84179 8.54883 8.1582 8.35352 8.35351C8.16474 8.54229 7.84137 8.54839 7.64649 8.35351Z", fill: "currentColor" }));
 
@@ -583,6 +583,22 @@ const SvgInfoUser = (props) => /* @__PURE__ */ React__namespace.createElement("s
 
 const SvgWebServiceIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.845864 11.5813C0.304532 10.504 0 9.28691 0 7.99998C0 6.71305 0.304532 5.49599 0.845864 4.41866C2.16053 1.79893 4.87199 0 7.99998 0C11.128 0 13.8394 1.79893 15.1541 4.41866C15.6954 5.49599 16 6.71305 16 7.99998C16 8.74122 15.8989 9.45928 15.7098 10.1408C15.5178 9.64596 15.2368 9.19545 14.8865 8.8089C14.9174 8.54352 14.9333 8.27358 14.9333 7.99998C14.9333 7.06079 14.7461 6.16479 14.4074 5.34772C13.5365 5.68532 12.5098 5.95626 11.3765 6.13866C11.4167 6.54759 11.4442 6.96932 11.4575 7.40092C11.0893 7.42113 10.7334 7.48763 10.3956 7.59469C10.386 7.14382 10.3603 6.70393 10.32 6.27892C9.57811 6.35786 8.80052 6.39999 7.99998 6.39999C7.19945 6.39999 6.42185 6.35786 5.67999 6.27892C5.62772 6.83039 5.59999 7.40692 5.59999 7.99998C5.59999 8.59305 5.62772 9.16958 5.67999 9.72105C6.40301 9.64412 7.15998 9.60215 7.93903 9.60006C7.75305 9.93264 7.60993 10.2924 7.51716 10.672C6.93298 10.6849 6.36403 10.7212 5.81545 10.7781C6.01065 11.9786 6.33066 13.0128 6.73812 13.7733C6.94452 14.1589 7.17065 14.4688 7.41812 14.6789C7.60265 14.8357 7.79465 14.9333 7.99998 14.9333C8.20532 14.9333 8.39732 14.8357 8.58185 14.6789L8.58903 14.6728C9.02045 15.1233 9.54884 15.4802 10.1407 15.7099C9.4592 15.8989 8.74129 16 7.99998 16C4.87199 16 2.16053 14.201 0.845864 11.5813ZM1.59253 5.34772C1.25386 6.16479 1.06666 7.06079 1.06666 7.99998C1.06666 8.93918 1.25386 9.83518 1.59253 10.6522C2.46346 10.3146 3.49013 10.0437 4.62346 9.86131C4.56479 9.26505 4.53332 8.64158 4.53332 7.99998C4.53332 7.35839 4.56479 6.73492 4.62346 6.13866C3.49013 5.95626 2.46346 5.68532 1.59253 5.34772ZM13.9205 4.39252C13.0378 2.94773 11.6416 1.8512 9.98665 1.35626C10.0608 1.47146 10.1328 1.5936 10.2021 1.72267C10.657 2.57226 11.0208 3.73279 11.2394 5.08159C12.2357 4.91999 13.1429 4.68479 13.9205 4.39252ZM6.01332 1.35626C4.35839 1.8512 2.96213 2.94773 2.07946 4.39252C2.85706 4.68532 3.76426 4.91999 4.76053 5.08159C4.97919 3.73279 5.34292 2.57226 5.79786 1.72267C5.86719 1.5936 5.93919 1.47146 6.01332 1.35626ZM2.07946 11.6074C2.96213 13.0522 4.35839 14.1488 6.01332 14.6437C5.93919 14.5285 5.86719 14.4064 5.79786 14.2773C5.34292 13.4277 4.97919 12.2672 4.76053 10.9184C3.76426 11.08 2.85706 11.3152 2.07946 11.6074ZM7.99998 1.06666C7.79465 1.06666 7.60265 1.16426 7.41812 1.32106C7.17065 1.5312 6.94452 1.84106 6.73812 2.22666C6.33066 2.9872 6.01065 4.02133 5.81545 5.22186C6.51412 5.29492 7.24585 5.33332 7.99998 5.33332C8.75412 5.33332 9.48585 5.29439 10.1845 5.22186C9.98931 4.02133 9.66931 2.9872 9.26185 2.22666C9.05545 1.84106 8.82932 1.5312 8.58185 1.32106C8.39732 1.16426 8.20532 1.06666 7.99998 1.06666ZM15.3852 11.7118L14.6747 11.839C14.6625 12.1002 14.6178 12.3527 14.5446 12.5925L15.1688 12.9585L14.5112 14.1149L13.8862 13.7485C13.7155 13.9359 13.5218 14.1016 13.3095 14.2404L13.5563 14.9286L12.3204 15.3853L12.0737 14.6971C11.9504 14.7129 11.8246 14.7211 11.6971 14.7211C11.5696 14.7211 11.4438 14.7129 11.3205 14.6971L11.0738 15.3853L9.83792 14.9286L10.0847 14.2404C9.8724 14.1016 9.6787 13.9359 9.50803 13.7485L8.88303 14.1149L8.22538 12.9585L8.84963 12.5925C8.77643 12.3527 8.73174 12.1002 8.71954 11.839L8.00897 11.7118L8.23727 10.3967L8.94724 10.5238C9.04546 10.2861 9.1728 10.064 9.32441 9.86175L8.86061 9.30034L9.86812 8.44189L10.3315 9.00283C10.5528 8.88684 10.7902 8.79826 11.0396 8.74126V8.00904H12.3546V8.74126C12.6039 8.79824 12.8414 8.88684 13.0627 9.00283L13.5261 8.44187L14.5336 9.30031L14.0698 9.86172C14.2214 10.064 14.3487 10.2861 14.447 10.5238L15.1569 10.3967L15.3852 11.7118ZM10.3235 11.6942C10.3235 12.4645 10.9385 13.0889 11.6971 13.0889C12.4557 13.0889 13.0707 12.4645 13.0707 11.6942C13.0707 10.9238 12.4557 10.2994 11.6971 10.2994C10.9385 10.2994 10.3235 10.9238 10.3235 11.6942Z", fill: "currentColor" }));
 
+const SvgProjectStatusIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 18 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M17.522 3.29551V9.46075C17.522 10.9867 16.8226 12.7579 15.5531 14.4481C14.0737 16.4173 11.8945 18.1555 9.25101 19.4748L8.99975 19.6L8.74849 19.4748C6.10501 18.1555 3.9258 16.4173 2.44637 14.4481C1.17694 12.7579 0.477539 10.9867 0.477539 9.46075V3.29551L4.6237 0.400024H13.3758L17.522 3.29551Z", fill: "#00358F" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M17.5222 3.29551V9.46075C17.5222 10.9867 16.8228 12.7579 15.5534 14.4481C14.0739 16.4173 11.8947 18.1555 9.25126 19.4748L9 19.6V0.400024H13.376L17.5222 3.29551Z", fill: "#012453" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.6677 2.65015H5.33164L2.72754 4.46859V9.46079C2.72754 11.1765 4.41548 14.5291 8.99966 17.0653C13.5838 14.5291 15.2718 11.1765 15.2718 9.46079V4.46859L12.6677 2.65015Z", fill: "#00B3FE" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M15.2721 4.46859V9.46079C15.2721 11.1765 13.5842 14.5291 9 17.0653V2.65015H12.668L15.2721 4.46859Z", fill: "#0274F9" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.8447 2.08765H5.15466L2.16504 4.17535V9.46081C2.16504 10.5581 2.72081 11.9524 3.68947 13.286C4.86889 14.9098 6.61084 16.387 8.72742 17.5578L8.99968 17.7085L9.27194 17.5578C11.3885 16.387 13.1305 14.9098 14.3099 13.286C15.2786 11.9524 15.8343 10.5581 15.8343 9.46081V4.17535L12.8447 2.08765ZM14.7093 9.46081C14.7093 10.9575 13.1826 14.0135 8.99968 16.4196C4.81677 14.0135 3.29008 10.9575 3.29008 9.46081V4.76188L5.50867 3.21269H12.4907L14.7093 4.76188V9.46081Z", fill: "#EFF5FA" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M15.8346 4.17535V9.46081C15.8346 10.5581 15.2789 11.9524 14.3102 13.286C13.1308 14.9098 11.3888 16.387 9.27226 17.5578L9 17.7085V16.4196C13.1829 14.0135 14.7096 10.9575 14.7096 9.46081V4.76188L12.491 3.21269H9V2.08765H12.845L15.8346 4.17535Z", fill: "#C6E1EC" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.591 6.93419L8.99983 10.6251L8.99233 10.633L8.07917 11.5712L5.40869 9.07365L6.1771 8.25199L8.04167 9.99618L8.99233 9.01965L8.99983 9.01177L11.7847 6.14966L12.591 6.93419Z", fill: "#EFF5FA" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.5911 6.93419L9 10.6251V9.01177L11.7849 6.14966L12.5911 6.93419Z", fill: "#C6E1EC" }));
+
+const SvgCaptureIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M3.83333 14V13.5H3C2.72386 13.5 2.5 13.2761 2.5 13V12.1667H2V10.5H2.5V8.83333H2V7.16667H2.5V5.5H2V3.83333H2.5V3C2.5 2.72386 2.72386 2.5 3 2.5H3.83333V2H5.5V2.5H7.16667V2H8.83333V2.5H10.5V2H12.1667V2.5H13C13.2761 2.5 13.5 2.72386 13.5 3V3.83333H14V5.5H13.5V7.16667H14V8.83333H13.5V10.5H14V12.1667H13.5V13C13.5 13.2761 13.2761 13.5 13 13.5H12.1667V14H10.5V13.5H8.83333V14H7.16667V13.5H5.5V14H3.83333Z", stroke: "currentcolor", strokeDasharray: "2 2" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11 11H14V12H12V14H11V11Z", fill: "currentcolor" }), /* @__PURE__ */ React__namespace.createElement("rect", { x: 12, y: 12, width: 2, height: 2, fill: "" }), /* @__PURE__ */ React__namespace.createElement("rect", { x: 11.4622, y: 12.2595, width: 1, height: 2.5193, transform: "rotate(-49.0426 11.4622 12.2595)", fill: "currentcolor" }));
+
+const SvgRotateIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_4584_14070)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.6519 2.47368C11.6114 2.92652 12.437 3.61884 13.0482 4.48336C13.6595 5.34787 14.0358 6.35517 14.1404 7.40732H15.0183C14.8676 5.65951 14.0639 4.03158 12.7661 2.84524C11.4683 1.65889 9.77087 1.00044 8.00915 1H7.62308L9.85681 3.24256L10.6519 2.47368ZM6.34994 3.02288L13.019 9.66362L9.66837 13L2.99933 6.35469L6.34994 3.02288ZM6.34994 1.7643C6.11717 1.76444 5.89398 1.85663 5.72945 2.02059L1.99737 5.73684C1.91524 5.81809 1.85006 5.91471 1.80558 6.02113C1.7611 6.12756 1.73821 6.2417 1.73821 6.35698C1.73821 6.47226 1.7611 6.58639 1.80558 6.69282C1.85006 6.79925 1.91524 6.89587 1.99737 6.97712L9.04789 13.9977C9.21599 14.1591 9.43948 14.2507 9.67297 14.254C9.90574 14.2539 10.1289 14.1617 10.2934 13.9977L14.0209 10.2815C14.1036 10.2005 14.1693 10.104 14.2141 9.99754C14.259 9.89107 14.282 9.77678 14.282 9.66133C14.282 9.54588 14.259 9.43158 14.2141 9.32511C14.1693 9.21864 14.1036 9.12212 14.0209 9.04119L6.97502 2.02059C6.81049 1.85663 6.5873 1.76444 6.35453 1.7643H6.34994ZM5.38015 13.5492C4.4155 13.0955 3.58564 12.4002 2.97174 11.5314C2.35784 10.6626 1.98093 9.65002 1.87787 8.59268H1C1.15074 10.3405 1.95441 11.9684 3.25218 13.1548C4.54996 14.3411 6.24743 14.9996 8.00915 15H8.39523L6.16149 12.7757L5.38015 13.5492Z", fill: "currentcolor" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_4584_14070" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 16, height: 16, fill: "white", transform: "matrix(-1 -8.74228e-08 -8.74228e-08 1 16 0)" }))));
+
+const SvgTapIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 12 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("rect", { x: 2.4209, width: 4.26667, height: 4.26667, rx: 2.13333, fill: "currentcolor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.3333 8.57942V13.2691C11.3333 14.7772 10.1749 16 8.7475 16H5.95043C5.13922 16 4.35611 15.6506 3.81234 15.0143C3.56558 14.7258 3.32621 14.378 3.15038 13.9725L0.769979 9.19234C0.538043 8.7247 0.710535 8.15301 1.14677 7.91036C1.791 7.55321 2.58742 7.81366 2.92579 8.49521L3.67937 10.008V3.18639C3.67937 2.61402 4.12264 2.11808 4.66492 2.13366C5.1755 2.14942 5.59284 2.58985 5.59284 3.1427V7.28182C5.59284 6.7235 6.02133 6.27277 6.55032 6.27277C7.07624 6.27277 7.50631 6.72116 7.50631 7.28182V7.83392C7.50631 7.27558 7.9348 6.82486 8.46379 6.82486C8.99072 6.82486 9.4198 7.27445 9.4198 7.83392V8.5794C9.4198 8.02106 9.8483 7.57036 10.3773 7.57036C10.9042 7.57036 11.3333 8.01995 11.3333 8.57942Z", fill: "white", stroke: "currentcolor", strokeLinejoin: "round" }));
+
+const SvgRefreshIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M14 14C13.8232 14 13.6537 13.9298 13.5286 13.8047C13.4036 13.6797 13.3334 13.5101 13.3334 13.3333V10.6667H10.6667C10.4899 10.6667 10.3203 10.5964 10.1953 10.4714C10.0703 10.3464 10 10.1768 10 10C10 9.82319 10.0703 9.65362 10.1953 9.5286C10.3203 9.40357 10.4899 9.33333 10.6667 9.33333H14C14.1769 9.33333 14.3464 9.40357 14.4714 9.5286C14.5965 9.65362 14.6667 9.82319 14.6667 10V13.3333C14.6667 13.5101 14.5965 13.6797 14.4714 13.8047C14.3464 13.9298 14.1769 14 14 14ZM5.33337 6.66667H2.00004C1.82323 6.66667 1.65366 6.59643 1.52864 6.4714C1.40361 6.34638 1.33337 6.17681 1.33337 6V2.66667C1.33337 2.48986 1.40361 2.32029 1.52864 2.19526C1.65366 2.07024 1.82323 2 2.00004 2C2.17685 2 2.34642 2.07024 2.47145 2.19526C2.59647 2.32029 2.66671 2.48986 2.66671 2.66667V5.33333H5.33337C5.51018 5.33333 5.67975 5.40357 5.80478 5.5286C5.9298 5.65362 6.00004 5.82319 6.00004 6C6.00004 6.17681 5.9298 6.34638 5.80478 6.4714C5.67975 6.59643 5.51018 6.66667 5.33337 6.66667Z", fill: "currentcolor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.99995 14.6666C6.35977 14.6669 4.77704 14.0626 3.55448 12.9692C2.33192 11.8757 1.55534 10.37 1.37328 8.73997C1.36365 8.65242 1.37136 8.56384 1.39597 8.47927C1.42057 8.3947 1.4616 8.3158 1.51669 8.24709C1.62796 8.10831 1.78981 8.01942 1.96662 7.99997C2.14343 7.98052 2.32072 8.03211 2.4595 8.14338C2.59828 8.25465 2.68717 8.41649 2.70662 8.59331C2.83839 9.79511 3.37458 10.9165 4.22728 11.7736C5.07999 12.6306 6.19859 13.1726 7.3997 13.3105C8.60081 13.4485 9.81315 13.1742 10.8379 12.5327C11.8627 11.8912 12.6392 10.9206 13.0399 9.77997C13.0649 9.69229 13.1077 9.61066 13.1655 9.54014C13.2232 9.46963 13.2949 9.41171 13.376 9.36998C13.457 9.32825 13.5458 9.3036 13.6368 9.29754C13.7277 9.29148 13.819 9.30414 13.9049 9.33475C13.9908 9.36536 14.0695 9.41326 14.1361 9.47549C14.2027 9.53772 14.2559 9.61296 14.2923 9.69655C14.3287 9.78014 14.3476 9.87032 14.3477 9.96149C14.3479 10.0527 14.3294 10.1429 14.2933 10.2266C13.8325 11.5269 12.9798 12.6522 11.8527 13.4474C10.7255 14.2426 9.3794 14.6686 7.99995 14.6666ZM13.96 7.99997C13.7951 8.00097 13.6358 7.94089 13.5127 7.83132C13.3896 7.72174 13.3114 7.57045 13.2933 7.40664C13.1556 6.21059 12.6173 5.09631 11.766 4.24504C10.9146 3.39377 9.80024 2.8556 8.60418 2.71807C7.40812 2.58054 6.20071 2.85174 5.17835 3.48755C4.15599 4.12337 3.37883 5.08639 2.97328 6.21997C2.94829 6.30766 2.90557 6.38928 2.84778 6.4598C2.78999 6.53032 2.71834 6.58823 2.63727 6.62996C2.55621 6.67169 2.46744 6.69635 2.37647 6.70241C2.28549 6.70847 2.19424 6.6958 2.10836 6.66519C2.02247 6.63459 1.94378 6.58669 1.87714 6.52446C1.8105 6.46223 1.75734 6.38699 1.72093 6.30339C1.68453 6.2198 1.66566 6.12963 1.66549 6.03845C1.66532 5.94728 1.68386 5.85703 1.71995 5.7733C2.2219 4.34935 3.19234 3.13796 4.47245 2.33738C5.75255 1.5368 7.2665 1.19445 8.76651 1.36637C10.2665 1.53828 11.6638 2.21428 12.7295 3.28372C13.7953 4.35317 14.4665 5.75271 14.6333 7.2533C14.652 7.42821 14.6009 7.60344 14.491 7.7408C14.3811 7.87817 14.2214 7.96653 14.0466 7.98664L13.96 7.99997Z", fill: "currentcolor" }));
+
+const SvgSwipeIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 15 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M13.5739 9.27756V14.1579C13.5739 15.7274 12.3683 16.9998 10.8829 16.9998H7.97215C7.12796 16.9998 6.31301 16.6363 5.74713 15.9741C5.49034 15.6738 5.24124 15.3119 5.05826 14.8899L2.58107 9.9154C2.3397 9.42873 2.51921 8.8338 2.97317 8.58129C3.6436 8.20962 4.47241 8.48066 4.82454 9.18992L5.60875 10.7642V3.66524C5.60875 3.0696 6.07005 2.5535 6.63437 2.56971C7.16572 2.58611 7.60002 3.04444 7.60002 3.61978V7.92719C7.60002 7.34617 8.04594 6.87711 8.59643 6.87711C9.14374 6.87711 9.59129 7.34373 9.59129 7.92719V8.50175C9.59129 7.9207 10.0372 7.45165 10.5877 7.45165C11.1361 7.45165 11.5826 7.91952 11.5826 8.50175V9.27753C11.5826 8.69649 12.0285 8.22746 12.579 8.22746C13.1274 8.22746 13.5739 8.69533 13.5739 9.27756Z", fill: "#ffffff", stroke: "currentcolor", strokeLinejoin: "round" }), /* @__PURE__ */ React__namespace.createElement("mask", { id: "path-2-outside-1_8001_33053", maskUnits: "userSpaceOnUse", x: -0.573853, y: 0, width: 6, height: 9, fill: "currentcolor" }, /* @__PURE__ */ React__namespace.createElement("rect", { fill: "white", x: -0.573853, width: 6, height: 9 }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.49785 1.00001C2.57712 0.999346 2.65342 1.0302 2.70996 1.08578L4.51888 2.86463C4.57382 2.92056 4.60459 2.99583 4.60456 3.07423C4.60454 3.15263 4.57372 3.22788 4.51875 3.28378C4.46378 3.33968 4.38906 3.37175 4.31067 3.37309C4.23229 3.37443 4.15651 3.34492 4.09967 3.29093L2.81729 2.02988L2.87005 7.1985L4.14046 5.90189C4.19629 5.84686 4.2715 5.81595 4.3499 5.81583C4.4283 5.81571 4.50361 5.84639 4.55961 5.90126C4.6156 5.95612 4.64781 6.03079 4.64929 6.10917C4.65078 6.18756 4.62141 6.26339 4.56753 6.32033L2.79198 8.1325C2.73649 8.18912 2.66077 8.22139 2.5815 8.2222C2.50222 8.22301 2.42587 8.1923 2.36923 8.13682L0.557056 6.36127C0.50202 6.30544 0.471113 6.23022 0.470994 6.15183C0.470875 6.07343 0.501553 5.99812 0.55642 5.94212C0.611287 5.88612 0.685953 5.85392 0.764337 5.85243C0.84272 5.85095 0.91855 5.88032 0.975494 5.9342L2.25067 7.18361L2.20742 2.02318L0.934648 3.31746C0.878716 3.37239 0.803445 3.40316 0.725047 3.40314C0.64665 3.40311 0.571398 3.3723 0.5155 3.31733C0.459601 3.26236 0.427529 3.18764 0.426191 3.10925C0.424853 3.03086 0.454356 2.95509 0.508345 2.89824L2.2872 1.08932C2.3428 1.0328 2.41857 1.00067 2.49785 1.00001Z" })), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.49785 1.00001C2.57712 0.999346 2.65342 1.0302 2.70996 1.08578L4.51888 2.86463C4.57382 2.92056 4.60459 2.99583 4.60456 3.07423C4.60454 3.15263 4.57372 3.22788 4.51875 3.28378C4.46378 3.33968 4.38906 3.37175 4.31067 3.37309C4.23229 3.37443 4.15651 3.34492 4.09967 3.29093L2.81729 2.02988L2.87005 7.1985L4.14046 5.90189C4.19629 5.84686 4.2715 5.81595 4.3499 5.81583C4.4283 5.81571 4.50361 5.84639 4.55961 5.90126C4.6156 5.95612 4.64781 6.03079 4.64929 6.10917C4.65078 6.18756 4.62141 6.26339 4.56753 6.32033L2.79198 8.1325C2.73649 8.18912 2.66077 8.22139 2.5815 8.2222C2.50222 8.22301 2.42587 8.1923 2.36923 8.13682L0.557056 6.36127C0.50202 6.30544 0.471113 6.23022 0.470994 6.15183C0.470875 6.07343 0.501553 5.99812 0.55642 5.94212C0.611287 5.88612 0.685953 5.85392 0.764337 5.85243C0.84272 5.85095 0.91855 5.88032 0.975494 5.9342L2.25067 7.18361L2.20742 2.02318L0.934648 3.31746C0.878716 3.37239 0.803445 3.40316 0.725047 3.40314C0.64665 3.40311 0.571398 3.3723 0.5155 3.31733C0.459601 3.26236 0.427529 3.18764 0.426191 3.10925C0.424853 3.03086 0.454356 2.95509 0.508345 2.89824L2.2872 1.08932C2.3428 1.0328 2.41857 1.00067 2.49785 1.00001Z", fill: "currentcolor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M2.70996 1.08578L2.85019 0.943175L2.85017 0.943154L2.70996 1.08578ZM2.49785 1.00001L2.49952 1.2L2.49785 1.00001ZM4.51888 2.86463L4.66159 2.72447L4.65911 2.72203L4.51888 2.86463ZM4.60456 3.07423L4.40456 3.07417V3.07417L4.60456 3.07423ZM4.31067 3.37309L4.31409 3.57306H4.31409L4.31067 3.37309ZM4.09967 3.29093L3.95941 3.43356L3.96193 3.43595L4.09967 3.29093ZM2.81729 2.02988L2.95752 1.88728L2.61236 1.54785L2.6173 2.03192L2.81729 2.02988ZM2.87005 7.1985L2.67006 7.20054L2.67499 7.68336L3.01291 7.33847L2.87005 7.1985ZM4.14046 5.90189L4.00003 5.75944L3.9976 5.76192L4.14046 5.90189ZM4.3499 5.81583L4.3502 6.01583H4.35021L4.3499 5.81583ZM4.55961 5.90126L4.69958 5.7584L4.69958 5.7584L4.55961 5.90126ZM4.64929 6.10917L4.84926 6.10539L4.64929 6.10917ZM4.56753 6.32033L4.71041 6.46032L4.7128 6.4578L4.56753 6.32033ZM2.79198 8.1325L2.93482 8.27249L2.93484 8.27247L2.79198 8.1325ZM2.5815 8.2222L2.57946 8.02221L2.5815 8.2222ZM2.36923 8.13682L2.22926 8.27968L2.22928 8.2797L2.36923 8.13682ZM0.557056 6.36127L0.414603 6.5017L0.417086 6.50413L0.557056 6.36127ZM0.470994 6.15183L0.670994 6.15152L0.470994 6.15183ZM0.55642 5.94212L0.699277 6.08209L0.699278 6.08209L0.55642 5.94212ZM0.764337 5.85243L0.768115 6.0524H0.768116L0.764337 5.85243ZM0.975494 5.9342L1.11549 5.79132L1.11296 5.78893L0.975494 5.9342ZM2.25067 7.18361L2.1107 7.32646L2.4547 7.66351L2.45066 7.18193L2.25067 7.18361ZM2.20742 2.02318L2.40741 2.0215L2.40336 1.53867L2.06482 1.88294L2.20742 2.02318ZM0.934648 3.31746L1.07481 3.46017L1.07725 3.45769L0.934648 3.31746ZM0.725047 3.40314L0.725109 3.20314H0.725109L0.725047 3.40314ZM0.5155 3.31733L0.375268 3.45993L0.375269 3.45993L0.5155 3.31733ZM0.426191 3.10925L0.22622 3.11266L0.426191 3.10925ZM0.508345 2.89824L0.365722 2.75799L0.363328 2.76051L0.508345 2.89824ZM2.2872 1.08932L2.14462 0.949067L2.1446 0.949088L2.2872 1.08932ZM2.85017 0.943154C2.75581 0.850394 2.62848 0.798909 2.49617 0.800018L2.49952 1.2C2.52577 1.19978 2.55103 1.21 2.56975 1.2284L2.85017 0.943154ZM4.65911 2.72203L2.85019 0.943175L2.56973 1.22838L4.37865 3.00723L4.65911 2.72203ZM4.80456 3.07429C4.8046 2.94345 4.75325 2.81783 4.66157 2.72449L4.37619 3.00477C4.39438 3.02329 4.40457 3.04821 4.40456 3.07417L4.80456 3.07429ZM4.66136 3.42401C4.75309 3.33072 4.80452 3.20513 4.80456 3.07429L4.40456 3.07417C4.40455 3.10013 4.39435 3.12504 4.37615 3.14355L4.66136 3.42401ZM4.31409 3.57306C4.44491 3.57083 4.56962 3.5173 4.66136 3.42401L4.37615 3.14355C4.35795 3.16206 4.33321 3.17267 4.30726 3.17312L4.31409 3.57306ZM3.96193 3.43595C4.0568 3.52605 4.18327 3.57529 4.31409 3.57306L4.30726 3.17312C4.28131 3.17356 4.25622 3.16379 4.2374 3.14592L3.96193 3.43595ZM2.67706 2.17248L3.95943 3.43354L4.2399 3.14833L2.95752 1.88728L2.67706 2.17248ZM3.07004 7.19646L3.01728 2.02784L2.6173 2.03192L2.67006 7.20054L3.07004 7.19646ZM3.9976 5.76192L2.7272 7.05853L3.01291 7.33847L4.28332 6.04186L3.9976 5.76192ZM4.3496 5.61583C4.21876 5.61603 4.09323 5.66761 4.00005 5.75946L4.28086 6.04433C4.29935 6.0261 4.32425 6.01587 4.3502 6.01583L4.3496 5.61583ZM4.69958 5.7584C4.60612 5.66683 4.48044 5.61563 4.3496 5.61583L4.35021 6.01583C4.37616 6.01579 4.4011 6.02595 4.41964 6.04412L4.69958 5.7584ZM4.84926 6.10539C4.84679 5.97458 4.79303 5.84997 4.69958 5.7584L4.41964 6.04412C4.43818 6.06228 4.44884 6.087 4.44933 6.11295L4.84926 6.10539ZM4.7128 6.4578C4.80272 6.36276 4.85173 6.23621 4.84926 6.10539L4.44933 6.11295C4.44982 6.13891 4.4401 6.16401 4.42226 6.18287L4.7128 6.4578ZM2.93484 8.27247L4.71038 6.4603L4.42467 6.18036L2.64912 7.99253L2.93484 8.27247ZM2.58354 8.42219C2.71585 8.42084 2.8422 8.36699 2.93482 8.27249L2.64914 7.99251C2.63077 8.01126 2.6057 8.02194 2.57946 8.02221L2.58354 8.42219ZM2.22928 8.2797C2.3238 8.37228 2.45123 8.42354 2.58354 8.42219L2.57946 8.02221C2.55321 8.02247 2.52793 8.01231 2.50918 7.99394L2.22928 8.2797ZM0.417086 6.50413L2.22926 8.27968L2.5092 7.99396L0.697027 6.21841L0.417086 6.50413ZM0.270995 6.15213C0.271193 6.28297 0.322773 6.4085 0.414625 6.50167L0.699488 6.22087C0.681266 6.20238 0.671034 6.17748 0.670994 6.15152L0.270995 6.15213ZM0.413563 5.80215C0.321995 5.89561 0.270796 6.02129 0.270995 6.15213L0.670994 6.15152C0.670955 6.12557 0.681112 6.10063 0.699277 6.08209L0.413563 5.80215ZM0.760558 5.65247C0.629742 5.65494 0.50513 5.7087 0.413562 5.80215L0.699278 6.08209C0.717443 6.06355 0.742164 6.05289 0.768115 6.0524L0.760558 5.65247ZM1.11296 5.78893C1.01793 5.699 0.891373 5.65 0.760557 5.65247L0.768116 6.0524C0.794068 6.05191 0.819174 6.06163 0.838027 6.07947L1.11296 5.78893ZM2.39064 7.04075L1.11546 5.79135L0.835523 6.07706L2.1107 7.32646L2.39064 7.04075ZM2.00743 2.02485L2.05068 7.18528L2.45066 7.18193L2.40741 2.0215L2.00743 2.02485ZM1.07725 3.45769L2.35002 2.16341L2.06482 1.88294L0.792046 3.17723L1.07725 3.45769ZM0.724985 3.60314C0.855824 3.60318 0.981445 3.55183 1.07479 3.46015L0.794505 3.17477C0.775986 3.19296 0.751065 3.20315 0.725109 3.20314L0.724985 3.60314ZM0.375269 3.45993C0.468558 3.55167 0.594146 3.6031 0.724986 3.60314L0.725109 3.20314C0.699153 3.20313 0.674238 3.19293 0.655731 3.17473L0.375269 3.45993ZM0.22622 3.11266C0.228454 3.24348 0.281979 3.36819 0.375268 3.45993L0.655731 3.17473C0.637224 3.15653 0.626605 3.13179 0.626162 3.10584L0.22622 3.11266ZM0.363328 2.76051C0.273225 2.85538 0.223987 2.98184 0.22622 3.11266L0.626162 3.10584C0.625719 3.07988 0.635487 3.0548 0.653362 3.03598L0.363328 2.76051ZM2.1446 0.949088L0.365743 2.75801L0.650947 3.03847L2.4298 1.22955L2.1446 0.949088ZM2.49617 0.800018C2.36386 0.801126 2.23741 0.854739 2.14462 0.949067L2.42978 1.22957C2.44819 1.21086 2.47327 1.20022 2.49952 1.2L2.49617 0.800018Z", fill: "currentcolor", mask: "url(#path-2-outside-1_8001_33053)" }));
+
+const SvgBackward = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_4584_13995)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M15 8.36263L1 8.36263M1 8.36263L6.25 3M1 8.36263L6.25 13.7253", stroke: "currentcolor", strokeWidth: 1.3, strokeLinecap: "round", strokeLinejoin: "round" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_4584_13995" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 16, height: 16, fill: "white", transform: "matrix(-1 -8.74228e-08 -8.74228e-08 1 16 0)" }))));
+
+const SvgForward = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M1.90479 8.57157H14.0953M14.0953 8.57157L9.52383 12.9797M14.0953 8.57157L9.52383 4.16341", stroke: "currentcolor", strokeWidth: 1.3, strokeLinecap: "round", strokeLinejoin: "round" }));
+
 let Components = {};
 Components['success'] = SvgSuccess;
 Components['alert'] = SvgAlert;
@@ -670,7 +686,7 @@ Components['calendar_icon'] = SvgCalendarIcon;
 Components['hide_icon'] = SvgHideIcon;
 Components['vertical_separator'] = SvgVerticalSeparator;
 Components['collapse_icon'] = SvgCollapseIcon;
-Components['refresh_icon'] = SvgRefreshIcon;
+Components['refresh_icon'] = SvgRefreshIcon$1;
 Components['download_file'] = SvgDownloadIcon$1;
 Components['copy_icon'] = SvgCopyIcon;
 Components['expand_icon'] = SvgExpandIcon;
@@ -801,9 +817,17 @@ Components['remove_user'] = SvgRemoveUser;
 Components['dashboard_icon'] = SvgDashboardIcon; //TODO:this is temporary icon
 Components['info_user'] = SvgInfoUser;
 Components['web_service_icon'] = SvgWebServiceIcon;
+Components['project_status_icon'] = SvgProjectStatusIcon;
+Components['capture_icon'] = SvgCaptureIcon;
+Components['backward'] = SvgBackward;
+Components['forward'] = SvgForward;
+Components['refresh_icon'] = SvgRefreshIcon;
+Components['rotate_icon'] = SvgRotateIcon;
+Components['tap_icon'] = SvgTapIcon;
+Components['swipe_icon'] = SvgSwipeIcon;
 
-var css_248z$1a = ".ff-icon-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px;\n  box-sizing: content-box;\n}\n.ff-icon-container.ff-icon-danger:hover {\n  background-color: var(--ff-icon-color-danger-variant);\n}\n.ff-icon-container.ff-icon-dark {\n  background-color: var(--brand-color);\n  border-radius: 4px;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover {\n  background-color: white;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n\n.ff-icon-click {\n  cursor: pointer;\n  box-sizing: content-box;\n}\n.ff-icon-click:hover {\n  border-radius: 4px;\n  background-color: var(--ff-icon-hover-fill-color);\n}\n.ff-icon-click:hover > svg {\n  color: var(--brand-color);\n}\n\n.ff-icon-disabled {\n  cursor: no-drop;\n}\n.ff-icon-disabled > svg {\n  color: var(--toggle-strip-color);\n}\n.ff-icon-disabled:hover {\n  box-shadow: none;\n}\n.ff-icon-disabled:hover > svg {\n  color: var(--toggle-strip-color);\n}";
-styleInject(css_248z$1a);
+var css_248z$1b = ".ff-icon-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px;\n  box-sizing: content-box;\n}\n.ff-icon-container.ff-icon-danger:hover {\n  background-color: var(--ff-icon-color-danger-variant);\n}\n.ff-icon-container.ff-icon-dark {\n  background-color: var(--brand-color);\n  border-radius: 4px;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover {\n  background-color: white;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n\n.ff-icon-click {\n  cursor: pointer;\n  box-sizing: content-box;\n}\n.ff-icon-click:hover {\n  border-radius: 4px;\n  background-color: var(--ff-icon-hover-fill-color);\n}\n.ff-icon-click:hover > svg {\n  color: var(--brand-color);\n}\n\n.ff-icon-disabled {\n  cursor: no-drop;\n}\n.ff-icon-disabled > svg {\n  color: var(--toggle-strip-color);\n}\n.ff-icon-disabled:hover {\n  box-shadow: none;\n}\n.ff-icon-disabled:hover > svg {\n  color: var(--toggle-strip-color);\n}";
+styleInject(css_248z$1b);
 
 const Icon = /*#__PURE__*/React.forwardRef(({
   name,
@@ -879,8 +903,8 @@ const Icon = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-var css_248z$19 = ".ff-text {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n.ff-text--regular {\n  font-weight: 400;\n}\n.ff-text--medium {\n  font-weight: 500;\n}\n.ff-text--semi-bold {\n  font-weight: 600;\n}\n.ff-text--bold {\n  font-weight: 700;\n}\n.ff-text .required-asterisk {\n  color: var(--input-error-text-color);\n  padding-right: 4px;\n}";
-styleInject(css_248z$19);
+var css_248z$1a = ".ff-text {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n.ff-text--regular {\n  font-weight: 400;\n}\n.ff-text--medium {\n  font-weight: 500;\n}\n.ff-text--semi-bold {\n  font-weight: 600;\n}\n.ff-text--bold {\n  font-weight: 700;\n}\n.ff-text .required-asterisk {\n  color: var(--input-error-text-color);\n  padding-right: 4px;\n}";
+styleInject(css_248z$1a);
 
 const Typography = ({
   fontWeight = 'regular',
@@ -960,8 +984,8 @@ const Button$1 = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-var css_248z$18 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-drawer-container .ff-overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--drawer-title-color);\n  opacity: 0.5;\n  z-index: 999;\n}\n.ff-drawer-container .child-drawer-overlay {\n  z-index: 999;\n}\n.ff-drawer-container .ff-drawer {\n  margin-bottom: 4px;\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  top: 87px;\n  min-width: 450px;\n  background-color: var(--primary-button-text-color);\n  z-index: 999;\n  transform: translateX(100%);\n  opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n  transform: translateX(0);\n  opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n  width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n  width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n  width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n  width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n  transition: all 0.4s ease-in-out;\n  border-radius: 5px;\n  border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n  padding: 4px 8px 4px 8px;\n  display: flex;\n  gap: 10px;\n  border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n  font-weight: 600;\n  color: var(--drawer-title-color);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n  height: 16px;\n  width: 16px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n  cursor: pointer;\n  background-color: var(--button-bg-color);\n  outline: none;\n  border: none;\n  margin: 0;\n  border: 1px solid transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-custom-header {\n  background-color: var(--drawer-footer-bg);\n  padding: 4px 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-body {\n  background-color: var(--drawer-footer-bg);\n  overflow-y: auto;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 4px 8px 4px 8px;\n  display: flex;\n  justify-content: space-between;\n  border-top: 1px solid var(--drawer-footer-border);\n  z-index: 1000;\n  background-color: var(--base-bg-color);\n  transform: translateY(3px);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .button-container {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .ff-custom-footer {\n  background-color: var(--drawer-footer-bg);\n  padding: 4px 8px;\n}";
-styleInject(css_248z$18);
+var css_248z$19 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-drawer-container .ff-overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--drawer-title-color);\n  opacity: 0.5;\n  z-index: 999;\n}\n.ff-drawer-container .child-drawer-overlay {\n  z-index: 999;\n}\n.ff-drawer-container .ff-drawer {\n  margin-bottom: 4px;\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  top: 87px;\n  background-color: var(--primary-button-text-color);\n  z-index: 999;\n  transform: translateX(100%);\n  opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n  transform: translateX(0);\n  opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n  width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n  width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n  width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n  width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n  transition: all 0.4s ease-in-out;\n  border-radius: 5px;\n  border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n  padding: 4px 8px 4px 8px;\n  display: flex;\n  gap: 10px;\n  border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n  font-weight: 600;\n  color: var(--drawer-title-color);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n  height: 16px;\n  width: 16px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n  cursor: pointer;\n  background-color: var(--button-bg-color);\n  outline: none;\n  border: none;\n  margin: 0;\n  border: 1px solid transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-custom-header {\n  background-color: var(--drawer-footer-bg);\n  padding: 4px 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-body {\n  background-color: var(--drawer-footer-bg);\n  overflow-y: auto;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 4px 8px 4px 8px;\n  display: flex;\n  justify-content: space-between;\n  border-top: 1px solid var(--drawer-footer-border);\n  z-index: 1000;\n  background-color: var(--base-bg-color);\n  transform: translateY(3px);\n  border-radius: 0 0 4px 4px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .button-container {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .ff-custom-footer {\n  background-color: var(--drawer-footer-bg);\n  padding: 4px 8px;\n}";
+styleInject(css_248z$19);
 
 function useEscapeKey(key) {
   return callBack => {
@@ -979,8 +1003,8 @@ function useEscapeKey(key) {
   };
 }
 
-var css_248z$17 = ":root {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #71347b;\n  --text-color: #1e161f;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #71347b;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #71347b;\n  --border-color: #f0e7f4;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-machine-input-field-border-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-avatar-background-color: #71347b;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-running-status-color: #2055de;\n  --ff-machine-active-status-color: #4caf50;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n}\n\n:root {\n  --base-bg-color: #1e1a22;\n  --brand-color: #71347b;\n  --text-color: #e8e0e9;\n  --description-text: #d9d9d9;\n  --click-able-text-color: #e8e0e9;\n  --custom-table-header-bg-color: #EFE1F9;\n  --icons-default-color: #e8e0e9;\n  --border-color: #333234;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n  --slider-table-color: #272428;\n  --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n  --drawer-footer-border: #333234;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #2a2a2a;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active-color: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(18, 18, 18, 0.6);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n  --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n  --secondary-button-text-color: #71347b;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n  --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --default-icon-color: #a3a3a3;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n  --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n  --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n  --file-details-bg: #0d0d0d;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --pie-chart-border-color: #b6b6b6;\n  --button-bg-color: #f6ebff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --confirm-tick-icon-color: #5CA700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-icon-color-dark-variant: #ffffff;\n  --avatar-background-color: #71347b;\n  --avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #333234;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4B494C;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-search-field-hover-color: #F7ECF8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #C50303;\n  --ff-machine-active-status-color: #4CAF50;\n  --ff-machine-running-status-color: #2055DE;\n  --download-client-border-color: #F0E7F4;\n  --download-client-header-bg-color: #EDE6F2;\n  --download-client-content-text-color: #592F7C;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #F0E7F4;\n  --download-client-icon-container-bg-color: #FFFFFF;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #F9D5FF;\n  --partial-public-chip-bg-color: #FCC27D;\n  --private-chip-bg-color: #DBC3EF;\n  --disabled-chip-bg-color: #C4C3C3;\n  --impact-list-text-color: #14041C;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #E3CCF5;\n}\n\n.ff-light-theme {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #71347b;\n  --text-color: #1e161f;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #71347b;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #71347b;\n  --border-color: #f0e7f4;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-machine-input-field-border-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-avatar-background-color: #71347b;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-running-status-color: #2055de;\n  --ff-machine-active-status-color: #4caf50;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n}\n\n.ff-dark-theme {\n  --base-bg-color: #1e1a22;\n  --brand-color: #71347b;\n  --text-color: #e8e0e9;\n  --description-text: #d9d9d9;\n  --click-able-text-color: #e8e0e9;\n  --custom-table-header-bg-color: #EFE1F9;\n  --icons-default-color: #e8e0e9;\n  --border-color: #333234;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n  --slider-table-color: #272428;\n  --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n  --drawer-footer-border: #333234;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #2a2a2a;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active-color: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(18, 18, 18, 0.6);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n  --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n  --secondary-button-text-color: #71347b;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n  --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --default-icon-color: #a3a3a3;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n  --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n  --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n  --file-details-bg: #0d0d0d;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --pie-chart-border-color: #b6b6b6;\n  --button-bg-color: #f6ebff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --confirm-tick-icon-color: #5CA700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-icon-color-dark-variant: #ffffff;\n  --avatar-background-color: #71347b;\n  --avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #333234;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4B494C;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-search-field-hover-color: #F7ECF8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #C50303;\n  --ff-machine-active-status-color: #4CAF50;\n  --ff-machine-running-status-color: #2055DE;\n  --download-client-border-color: #F0E7F4;\n  --download-client-header-bg-color: #EDE6F2;\n  --download-client-content-text-color: #592F7C;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #F0E7F4;\n  --download-client-icon-container-bg-color: #FFFFFF;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #F9D5FF;\n  --partial-public-chip-bg-color: #FCC27D;\n  --private-chip-bg-color: #DBC3EF;\n  --disabled-chip-bg-color: #C4C3C3;\n  --impact-list-text-color: #14041C;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #E3CCF5;\n}";
-styleInject(css_248z$17);
+var css_248z$18 = ":root {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #71347b;\n  --text-color: #1e161f;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #71347b;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #71347b;\n  --border-color: #f0e7f4;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-machine-input-field-border-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-avatar-background-color: #71347b;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-running-status-color: #2055de;\n  --ff-machine-active-status-color: #4caf50;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n}\n\n:root {\n  --base-bg-color: #1e1a22;\n  --brand-color: #71347b;\n  --text-color: #e8e0e9;\n  --description-text: #d9d9d9;\n  --click-able-text-color: #e8e0e9;\n  --custom-table-header-bg-color: #EFE1F9;\n  --icons-default-color: #e8e0e9;\n  --border-color: #333234;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n  --slider-table-color: #272428;\n  --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n  --drawer-footer-border: #333234;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #2a2a2a;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active-color: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(18, 18, 18, 0.6);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n  --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n  --secondary-button-text-color: #71347b;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n  --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --default-icon-color: #a3a3a3;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n  --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n  --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n  --file-details-bg: #0d0d0d;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --pie-chart-border-color: #b6b6b6;\n  --button-bg-color: #f6ebff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --confirm-tick-icon-color: #5CA700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-icon-color-dark-variant: #ffffff;\n  --avatar-background-color: #71347b;\n  --avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #333234;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4B494C;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-search-field-hover-color: #F7ECF8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #C50303;\n  --ff-machine-active-status-color: #4CAF50;\n  --ff-machine-running-status-color: #2055DE;\n  --download-client-border-color: #F0E7F4;\n  --download-client-header-bg-color: #EDE6F2;\n  --download-client-content-text-color: #592F7C;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #F0E7F4;\n  --download-client-icon-container-bg-color: #FFFFFF;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #F9D5FF;\n  --partial-public-chip-bg-color: #FCC27D;\n  --private-chip-bg-color: #DBC3EF;\n  --disabled-chip-bg-color: #C4C3C3;\n  --impact-list-text-color: #14041C;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #E3CCF5;\n}\n\n.ff-light-theme {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #71347b;\n  --text-color: #1e161f;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #71347b;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #71347b;\n  --border-color: #f0e7f4;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-machine-input-field-border-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-avatar-background-color: #71347b;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-running-status-color: #2055de;\n  --ff-machine-active-status-color: #4caf50;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n}\n\n.ff-dark-theme {\n  --base-bg-color: #1e1a22;\n  --brand-color: #71347b;\n  --text-color: #e8e0e9;\n  --description-text: #d9d9d9;\n  --click-able-text-color: #e8e0e9;\n  --custom-table-header-bg-color: #EFE1F9;\n  --icons-default-color: #e8e0e9;\n  --border-color: #333234;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n  --slider-table-color: #272428;\n  --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n  --drawer-footer-border: #333234;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #2a2a2a;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active-color: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(18, 18, 18, 0.6);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n  --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n  --secondary-button-text-color: #71347b;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n  --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --default-icon-color: #a3a3a3;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n  --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n  --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n  --file-details-bg: #0d0d0d;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --pie-chart-border-color: #b6b6b6;\n  --button-bg-color: #f6ebff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --confirm-tick-icon-color: #5CA700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-icon-color-dark-variant: #ffffff;\n  --avatar-background-color: #71347b;\n  --avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #333234;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4B494C;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-search-field-hover-color: #F7ECF8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #C50303;\n  --ff-machine-active-status-color: #4CAF50;\n  --ff-machine-running-status-color: #2055DE;\n  --download-client-border-color: #F0E7F4;\n  --download-client-header-bg-color: #EDE6F2;\n  --download-client-content-text-color: #592F7C;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #F0E7F4;\n  --download-client-icon-container-bg-color: #FFFFFF;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #F9D5FF;\n  --partial-public-chip-bg-color: #FCC27D;\n  --private-chip-bg-color: #DBC3EF;\n  --disabled-chip-bg-color: #C4C3C3;\n  --impact-list-text-color: #14041C;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #E3CCF5;\n}";
+styleInject(css_248z$18);
 
 const ThemeContext = /*#__PURE__*/React.createContext(undefined);
 const ThemeProvider = ({
@@ -1032,7 +1056,10 @@ const Drawer = ({
   rightTertiaryButtonProps = {},
   zIndex = 999,
   secondLayerZIndex = false,
-  top
+  top,
+  height,
+  width,
+  right = 0
 }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const handleEsc = useEscapeKey('Escape');
@@ -1070,7 +1097,10 @@ const Drawer = ({
       }),
       style: {
         zIndex,
-        top
+        top,
+        height,
+        width,
+        right
       },
       children: [showHeader && jsxRuntime.jsx("div", {
         className: classNames('ff-drawer-header', {
@@ -1174,15 +1204,15 @@ const Drawer = ({
   }), document.body);
 };
 
-var css_248z$16 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-accordion {\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  min-width: fit-content;\n}\n.ff-accordion .accordion-header {\n  display: flex;\n  justify-content: space-between;\n  min-height: 32px;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-accordion .accordion-header .header-title {\n  padding: 8px;\n}\n.ff-accordion .accordion-header .accordion-arrow {\n  display: flex;\n  padding: 8px;\n  align-items: center;\n  transition: transform 0.3s ease;\n}\n.ff-accordion .accordion-header .accordion-arrow.expanded {\n  transform: rotate(180deg);\n}\n.ff-accordion .accordion-header .accordion-arrow:hover {\n  color: var(--tooltip-bg-color);\n}\n.ff-accordion .accordion-header.expanded {\n  background-color: var(--hover-color);\n  border-bottom: 1px solid var(--hover-color);\n}\n.ff-accordion .accordion-header:hover {\n  background-color: var(--hover-color);\n}\n.ff-accordion .accordion-content {\n  padding: 8px;\n}";
+var css_248z$17 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-accordion {\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  min-width: fit-content;\n}\n.ff-accordion .accordion-header {\n  display: flex;\n  justify-content: space-between;\n  min-height: 32px;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-accordion .accordion-header .header-title {\n  padding: 8px;\n}\n.ff-accordion .accordion-header .accordion-arrow {\n  display: flex;\n  padding: 8px;\n  align-items: center;\n  transition: transform 0.3s ease;\n}\n.ff-accordion .accordion-header .accordion-arrow.expanded {\n  transform: rotate(180deg);\n}\n.ff-accordion .accordion-header .accordion-arrow:hover {\n  color: var(--tooltip-bg-color);\n}\n.ff-accordion .accordion-header.expanded {\n  background-color: var(--hover-color);\n  border-bottom: 1px solid var(--hover-color);\n}\n.ff-accordion .accordion-header:hover {\n  background-color: var(--hover-color);\n}\n.ff-accordion .accordion-content {\n  padding: 8px;\n}";
+styleInject(css_248z$17);
+
+var css_248z$16 = "/* global.css or component CSS */\nbody {\n  font-family: \"Poppins\", sans-serif;\n}";
 styleInject(css_248z$16);
 
-var css_248z$15 = "/* global.css or component CSS */\nbody {\n  font-family: \"Poppins\", sans-serif;\n}";
+var css_248z$15 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-tooltip-container {\n  cursor: pointer;\n  display: inline-block;\n}\n\n.ff-tooltip {\n  position: fixed;\n  width: max-content;\n  max-width: 60vw;\n  word-wrap: break-word;\n  background-color: var(--tooltip-bg-color);\n  line-height: 18px;\n  color: var(--tooltip-text-color);\n  text-align: center;\n  border-radius: 5px;\n  padding: 4px 8px;\n  opacity: 0;\n  z-index: 10000;\n}\n.ff-tooltip--visible {\n  opacity: 1;\n  transition: opacity 0.3s;\n}";
 styleInject(css_248z$15);
 
-var css_248z$14 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-tooltip-container {\n  cursor: pointer;\n  display: inline-block;\n}\n\n.ff-tooltip {\n  position: fixed;\n  width: max-content;\n  max-width: 60vw;\n  word-wrap: break-word;\n  background-color: var(--tooltip-bg-color);\n  line-height: 18px;\n  color: var(--tooltip-text-color);\n  text-align: center;\n  border-radius: 5px;\n  padding: 4px 8px;\n  opacity: 0;\n  z-index: 10000;\n}\n.ff-tooltip--visible {\n  opacity: 1;\n  transition: opacity 0.3s;\n}";
-styleInject(css_248z$14);
-
 const checkEmpty = value => {
   // Check for null or undefined
   if (value == null) return true;
@@ -1404,8 +1434,8 @@ const Accordion = ({
   });
 };
 
-var css_248z$13 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .default-label {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .active-default-label, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .error-text {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-multiselect-container-with-icon {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  width: 100%;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper {\n  flex-grow: 1;\n  box-sizing: border-box;\n  transition: all 0.3s ease;\n  cursor: pointer;\n  position: relative;\n  border: 1px solid var(--default-icon-color);\n  border-radius: 4px;\n  background: var(--drawer-footer-bg);\n  min-width: 150px;\n  height: 32px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect {\n  position: relative;\n  padding: 6px 3px;\n  border: none;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main {\n  display: flex;\n  flex: 1;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .default-label {\n  font-family: Poppins;\n  font-weight: 400;\n  letter-spacing: 0.5px;\n  transition: all 0.3s ease;\n  color: var(--default-icon-color);\n  line-height: 18px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .active-default-label {\n  font-size: 8px !important;\n  height: 8px;\n  font-family: Poppins;\n  font-weight: 400;\n  letter-spacing: 0.5px;\n  transition: all 0.3s ease;\n  background-color: var(--multi-select-label-bg);\n  line-height: 12px;\n  color: var(--default-icon-color);\n  padding: 0 4px;\n  position: absolute;\n  left: 8px;\n  top: -6px;\n  pointer-events: none;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 5px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  border: 0.5px solid var(--tabs-border-color);\n  padding-left: 4px;\n  gap: 4px;\n  height: 16px;\n  border-radius: 15px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n  line-height: 14px;\n  color: var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label.label-padding {\n  padding-right: 3px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-close-icon {\n  color: var(--brand-color);\n  cursor: pointer;\n  padding: 0px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container {\n  flex: 1;\n  min-width: 20px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input {\n  width: 100%;\n  min-width: 30px;\n  max-width: calc(100% - 0px);\n  padding: 2px;\n  box-sizing: border-box;\n  border: none;\n  font-size: 12px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input:focus {\n  outline: none;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect .ff-multiselect-more-chip {\n  display: flex;\n  align-items: center;\n  width: 16px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow {\n  transition: transform 0.3s ease;\n  transform: rotate(360deg);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow svg path {\n  transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow--opened-dropdown {\n  transform: rotate(180deg);\n  transition: transform 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover {\n  border: 1px solid var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-select-arrow svg path {\n  fill: var(--tooltip-bg-color);\n  transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--with-options {\n  height: fit-content;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown {\n  border: 1px solid var(--brand-color);\n  height: fit-content;\n  cursor: default;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover {\n  border: 1px solid var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error {\n  border: 1px solid var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover {\n  border: 1px solid var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled {\n  pointer-events: none;\n  border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover {\n  border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-select-arrow svg path {\n  fill: var(--multi-select-border);\n  transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-select-arrow svg path {\n  fill: var(--multi-select-border);\n  transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n  color: var(--text-color-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .error-text {\n  position: absolute;\n  margin-top: 4px;\n  left: 12px;\n  color: var(--error-light);\n  letter-spacing: 0.5px;\n}\n.ff-multiselect-container-with-icon .ff-manage-labels-text {\n  position: absolute;\n  right: 0;\n  margin-top: 4px;\n}\n.ff-multiselect-container-with-icon .ff-label-plus-icon {\n  cursor: pointer;\n}";
-styleInject(css_248z$13);
+var css_248z$14 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .default-label {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .active-default-label, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .error-text {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-multiselect-container-with-icon {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  width: 100%;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper {\n  flex-grow: 1;\n  box-sizing: border-box;\n  transition: all 0.3s ease;\n  cursor: pointer;\n  position: relative;\n  border: 1px solid var(--default-icon-color);\n  border-radius: 4px;\n  background: var(--drawer-footer-bg);\n  min-width: 150px;\n  height: 32px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect {\n  position: relative;\n  padding: 6px 3px;\n  border: none;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main {\n  display: flex;\n  flex: 1;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .default-label {\n  font-family: Poppins;\n  font-weight: 400;\n  letter-spacing: 0.5px;\n  transition: all 0.3s ease;\n  color: var(--default-icon-color);\n  line-height: 18px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .active-default-label {\n  font-size: 8px !important;\n  height: 8px;\n  font-family: Poppins;\n  font-weight: 400;\n  letter-spacing: 0.5px;\n  transition: all 0.3s ease;\n  background-color: var(--multi-select-label-bg);\n  line-height: 12px;\n  color: var(--default-icon-color);\n  padding: 0 4px;\n  position: absolute;\n  left: 8px;\n  top: -6px;\n  pointer-events: none;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 5px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  border: 0.5px solid var(--tabs-border-color);\n  padding-left: 4px;\n  gap: 4px;\n  height: 16px;\n  border-radius: 15px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n  line-height: 14px;\n  color: var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label.label-padding {\n  padding-right: 3px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-close-icon {\n  color: var(--brand-color);\n  cursor: pointer;\n  padding: 0px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container {\n  flex: 1;\n  min-width: 20px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input {\n  width: 100%;\n  min-width: 30px;\n  max-width: calc(100% - 0px);\n  padding: 2px;\n  box-sizing: border-box;\n  border: none;\n  font-size: 12px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input:focus {\n  outline: none;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect .ff-multiselect-more-chip {\n  display: flex;\n  align-items: center;\n  width: 16px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow {\n  transition: transform 0.3s ease;\n  transform: rotate(360deg);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow svg path {\n  transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow--opened-dropdown {\n  transform: rotate(180deg);\n  transition: transform 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover {\n  border: 1px solid var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-select-arrow svg path {\n  fill: var(--tooltip-bg-color);\n  transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--with-options {\n  height: fit-content;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown {\n  border: 1px solid var(--brand-color);\n  height: fit-content;\n  cursor: default;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover {\n  border: 1px solid var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error {\n  border: 1px solid var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover {\n  border: 1px solid var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled {\n  pointer-events: none;\n  border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover {\n  border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-select-arrow svg path {\n  fill: var(--multi-select-border);\n  transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-select-arrow svg path {\n  fill: var(--multi-select-border);\n  transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n  color: var(--text-color-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .error-text {\n  position: absolute;\n  margin-top: 4px;\n  left: 12px;\n  color: var(--error-light);\n  letter-spacing: 0.5px;\n}\n.ff-multiselect-container-with-icon .ff-manage-labels-text {\n  position: absolute;\n  right: 0;\n  margin-top: 4px;\n}\n.ff-multiselect-container-with-icon .ff-label-plus-icon {\n  cursor: pointer;\n}";
+styleInject(css_248z$14);
 
 const dropdownDefaultCSSData$1 = {
   verticalMargin: 4,
@@ -1413,11 +1443,11 @@ const dropdownDefaultCSSData$1 = {
   maxDropdownHeight: 160
 };
 
-var css_248z$12 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-multiselect-dropdown-container .no-options, .ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-multiselect-dropdown-container {\n  position: absolute;\n  background: var(--drawer-footer-bg);\n  z-index: 1000;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  border: 0.5px solid var(--ff-select-option-border-color);\n  border-radius: 4px;\n  box-sizing: border-box;\n  margin-block: 4px;\n  max-height: 160px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper {\n  max-height: 128px;\n  overflow-y: auto;\n  border-radius: 2px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 40px;\n  border-radius: 12px 0px 0px 0px;\n  background: var(--description-text);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-track {\n  background: var(--ff-select-scroll-track-bg);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb {\n  background: var(--ff-select-scroll-thumb-color);\n  border-radius: 10px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb:hover {\n  background: var(--ff-select-scroll-thumb-hover);\n}\n.ff-multiselect-dropdown-container .no-options {\n  color: var(--pop-up-background-blur);\n  text-align: center;\n  margin: 0;\n  padding: 10px;\n  line-height: 12px;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  height: 32px;\n  padding: 4px 8px;\n  gap: 4px;\n  border-radius: 4px 0px 0px 0px;\n  background-color: white;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n  color: var(--ff-select-text-color);\n}\n.ff-multiselect-dropdown-container .dropdown-option-container:hover {\n  background-color: var(--hover-color);\n}\n.ff-multiselect-dropdown-container:focus {\n  outline: none;\n}\n.ff-multiselect-dropdown-container .select-button-container {\n  box-sizing: border-box;\n  width: 100%;\n  border-top: 1px solid var(--slider-table-color);\n  height: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}";
-styleInject(css_248z$12);
+var css_248z$13 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-multiselect-dropdown-container .no-options, .ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-multiselect-dropdown-container {\n  position: absolute;\n  background: var(--drawer-footer-bg);\n  z-index: 1000;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  border: 0.5px solid var(--ff-select-option-border-color);\n  border-radius: 4px;\n  box-sizing: border-box;\n  margin-block: 4px;\n  max-height: 160px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper {\n  max-height: 128px;\n  overflow-y: auto;\n  border-radius: 2px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 40px;\n  border-radius: 12px 0px 0px 0px;\n  background: var(--description-text);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-track {\n  background: var(--ff-select-scroll-track-bg);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb {\n  background: var(--ff-select-scroll-thumb-color);\n  border-radius: 10px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb:hover {\n  background: var(--ff-select-scroll-thumb-hover);\n}\n.ff-multiselect-dropdown-container .no-options {\n  color: var(--pop-up-background-blur);\n  text-align: center;\n  margin: 0;\n  padding: 10px;\n  line-height: 12px;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  height: 32px;\n  padding: 4px 8px;\n  gap: 4px;\n  border-radius: 4px 0px 0px 0px;\n  background-color: white;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n  color: var(--ff-select-text-color);\n}\n.ff-multiselect-dropdown-container .dropdown-option-container:hover {\n  background-color: var(--hover-color);\n}\n.ff-multiselect-dropdown-container:focus {\n  outline: none;\n}\n.ff-multiselect-dropdown-container .select-button-container {\n  box-sizing: border-box;\n  width: 100%;\n  border-top: 1px solid var(--slider-table-color);\n  height: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}";
+styleInject(css_248z$13);
 
-var css_248z$11 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-checkbox--overlay {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  cursor: pointer;\n  position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n  display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--checkbox-border-color);\n  box-sizing: border-box;\n  border-radius: 2px;\n  margin-right: 4px;\n  background-color: var(--checkbox-bg-color);\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::before {\n  content: \"\";\n  width: 9px;\n  height: 2px;\n  background-color: var(--checkbox-partial-color);\n  border-radius: 2px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(180deg);\n  opacity: 0;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::after {\n  content: \"\";\n  width: 16px;\n  height: 16px;\n  border: 4px solid var(--checkbox-hover-color);\n  border-radius: 4px;\n  position: absolute;\n  opacity: 0;\n  background-color: var(--checkbox-hover-color);\n  z-index: -1;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover {\n  border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom {\n  background: var(--brand-color);\n  border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom {\n  background: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom {\n  opacity: 0.5;\n  cursor: not-allowed;\n  border: 1px solid var(--checkbox-border-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom::after {\n  opacity: 0;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial {\n  background-color: var(--brand-color);\n  border: none;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial::before {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover {\n  background-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover::after {\n  opacity: 1;\n}";
-styleInject(css_248z$11);
+var css_248z$12 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-checkbox--overlay {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  cursor: pointer;\n  position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n  display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--checkbox-border-color);\n  box-sizing: border-box;\n  border-radius: 2px;\n  margin-right: 4px;\n  background-color: var(--checkbox-bg-color);\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::before {\n  content: \"\";\n  width: 9px;\n  height: 2px;\n  background-color: var(--checkbox-partial-color);\n  border-radius: 2px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(180deg);\n  opacity: 0;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::after {\n  content: \"\";\n  width: 16px;\n  height: 16px;\n  border: 4px solid var(--checkbox-hover-color);\n  border-radius: 4px;\n  position: absolute;\n  opacity: 0;\n  background-color: var(--checkbox-hover-color);\n  z-index: -1;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover {\n  border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom {\n  background: var(--brand-color);\n  border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom {\n  background: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom {\n  opacity: 0.5;\n  cursor: not-allowed;\n  border: 1px solid var(--checkbox-border-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom::after {\n  opacity: 0;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial {\n  background-color: var(--brand-color);\n  border: none;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial::before {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover {\n  background-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover::after {\n  opacity: 1;\n}";
+styleInject(css_248z$12);
 
 const Checkbox = ({
   id,
@@ -1928,8 +1958,8 @@ const MultiSelect = ({
   });
 };
 
-var css_248z$10 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-toaster-overlay {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  pointer-events: none;\n  justify-content: flex-end;\n  align-items: flex-end;\n}\n.ff-toaster-overlay .ff-toaster {\n  background-color: var(--drawer-footer-bg);\n  display: flex;\n  border-radius: 10px;\n  margin: 16px;\n  pointer-events: auto;\n  min-width: 320px;\n  max-width: 600px;\n  gap: 8px;\n  box-shadow: 0px 1px 4px 0px var(--toaster-boxshadow);\n  animation: slideInToasterBottomRight 0.5s forwards;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container {\n  padding: 8px;\n  display: flex;\n  border-radius: 10px;\n  gap: 8px;\n  width: 100%;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 8px;\n  padding: 1px;\n  -webkit-mask: linear-gradient(var(--drawer-footer-bg) 0 0) content-box, linear-gradient(var(--drawer-footer-bg) 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  z-index: -1;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 4px;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__title {\n  max-width: 500px;\n  word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__message {\n  max-width: 500px;\n  word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__prompt {\n  margin-top: 4px;\n  display: flex;\n  gap: 10px;\n}\n.ff-toaster-overlay .ff-toaster--success::before {\n  background: var(--toaster-success-border);\n}\n.ff-toaster-overlay .ff-toaster--warning::before {\n  background: var(--toaster-warning-border);\n}\n.ff-toaster-overlay .ff-toaster--info::before {\n  background: var(--toaster-info-border);\n}\n.ff-toaster-overlay .ff-toaster--danger::before, .ff-toaster-overlay .ff-toaster--confirm::before {\n  background: var(--toaster-danger_confirm-border);\n}\n.ff-toaster-overlay .ff-toaster .ff-close-icon-wrapper {\n  box-sizing: border-box;\n  cursor: pointer;\n  height: fit-content;\n  width: fit-content;\n  border-radius: 8px;\n  padding: 8px;\n  background: var(--toast-close-icon-wrapper-bg);\n  margin-left: auto;\n}\n.ff-toaster-overlay.exiting {\n  animation: slideOutToasterBottomRight 0.5s forwards;\n}\n\n@keyframes slideOutToasterBottomRight {\n  from {\n    transform: translateX(0%);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n@keyframes slideInToasterBottomRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0%);\n  }\n}\n.fireflink-stories-toaster-container .fireflink-stories-toaster-container-row {\n  display: flex;\n  gap: 5px;\n  margin: 15px;\n}";
-styleInject(css_248z$10);
+var css_248z$11 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-toaster-overlay {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  pointer-events: none;\n  justify-content: flex-end;\n  align-items: flex-end;\n}\n.ff-toaster-overlay .ff-toaster {\n  background-color: var(--drawer-footer-bg);\n  display: flex;\n  border-radius: 10px;\n  margin: 16px;\n  pointer-events: auto;\n  min-width: 320px;\n  max-width: 600px;\n  gap: 8px;\n  box-shadow: 0px 1px 4px 0px var(--toaster-boxshadow);\n  animation: slideInToasterBottomRight 0.5s forwards;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container {\n  padding: 8px;\n  display: flex;\n  border-radius: 10px;\n  gap: 8px;\n  width: 100%;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 8px;\n  padding: 1px;\n  -webkit-mask: linear-gradient(var(--drawer-footer-bg) 0 0) content-box, linear-gradient(var(--drawer-footer-bg) 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  z-index: -1;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 4px;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__title {\n  max-width: 500px;\n  word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__message {\n  max-width: 500px;\n  word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__prompt {\n  margin-top: 4px;\n  display: flex;\n  gap: 10px;\n}\n.ff-toaster-overlay .ff-toaster--success::before {\n  background: var(--toaster-success-border);\n}\n.ff-toaster-overlay .ff-toaster--warning::before {\n  background: var(--toaster-warning-border);\n}\n.ff-toaster-overlay .ff-toaster--info::before {\n  background: var(--toaster-info-border);\n}\n.ff-toaster-overlay .ff-toaster--danger::before, .ff-toaster-overlay .ff-toaster--confirm::before {\n  background: var(--toaster-danger_confirm-border);\n}\n.ff-toaster-overlay .ff-toaster .ff-close-icon-wrapper {\n  box-sizing: border-box;\n  cursor: pointer;\n  height: fit-content;\n  width: fit-content;\n  border-radius: 8px;\n  padding: 8px;\n  background: var(--toast-close-icon-wrapper-bg);\n  margin-left: auto;\n}\n.ff-toaster-overlay.exiting {\n  animation: slideOutToasterBottomRight 0.5s forwards;\n}\n\n@keyframes slideOutToasterBottomRight {\n  from {\n    transform: translateX(0%);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n@keyframes slideInToasterBottomRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0%);\n  }\n}\n.fireflink-stories-toaster-container .fireflink-stories-toaster-container-row {\n  display: flex;\n  gap: 5px;\n  margin: 15px;\n}";
+styleInject(css_248z$11);
 
 const Toaster = ({
   isOpen = false,
@@ -2038,8 +2068,8 @@ const Toaster = ({
   }), document.body);
 };
 
-var css_248z$$ = "/* Container */\n.ff-container {\n  margin-right: auto;\n  margin-left: auto;\n  width: 90%;\n  display: grid;\n}\n\n.ff-container-fluid {\n  width: 100%;\n  margin-right: auto;\n  margin-left: auto;\n  display: grid;\n}\n\n/* Row */\n.ff-row {\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n}\n\n/* Column sizes based on a 12-column layout */\n.ff-col {\n  grid-column: span 12;\n}\n\n.ff-col-1 {\n  grid-column: span 1;\n}\n\n.ff-col-2 {\n  grid-column: span 2;\n}\n\n.ff-col-3 {\n  grid-column: span 3;\n}\n\n.ff-col-4 {\n  grid-column: span 4;\n}\n\n.ff-col-5 {\n  grid-column: span 5;\n}\n\n.ff-col-6 {\n  grid-column: span 6;\n}\n\n.ff-col-7 {\n  grid-column: span 7;\n}\n\n.ff-col-8 {\n  grid-column: span 8;\n}\n\n.ff-col-9 {\n  grid-column: span 9;\n}\n\n.ff-col-10 {\n  grid-column: span 10;\n}\n\n.ff-col-11 {\n  grid-column: span 11;\n}\n\n.ff-col-12 {\n  grid-column: span 12;\n}\n\n@media (max-width: 768px) {\n  /* Stacking columns on small screens */\n  .ff-col {\n    grid-column: span 12;\n  }\n}";
-styleInject(css_248z$$);
+var css_248z$10 = "/* Container */\n.ff-container {\n  margin-right: auto;\n  margin-left: auto;\n  width: 90%;\n  display: grid;\n}\n\n.ff-container-fluid {\n  width: 100%;\n  margin-right: auto;\n  margin-left: auto;\n  display: grid;\n}\n\n/* Row */\n.ff-row {\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n}\n\n/* Column sizes based on a 12-column layout */\n.ff-col {\n  grid-column: span 12;\n}\n\n.ff-col-1 {\n  grid-column: span 1;\n}\n\n.ff-col-2 {\n  grid-column: span 2;\n}\n\n.ff-col-3 {\n  grid-column: span 3;\n}\n\n.ff-col-4 {\n  grid-column: span 4;\n}\n\n.ff-col-5 {\n  grid-column: span 5;\n}\n\n.ff-col-6 {\n  grid-column: span 6;\n}\n\n.ff-col-7 {\n  grid-column: span 7;\n}\n\n.ff-col-8 {\n  grid-column: span 8;\n}\n\n.ff-col-9 {\n  grid-column: span 9;\n}\n\n.ff-col-10 {\n  grid-column: span 10;\n}\n\n.ff-col-11 {\n  grid-column: span 11;\n}\n\n.ff-col-12 {\n  grid-column: span 12;\n}\n\n@media (max-width: 768px) {\n  /* Stacking columns on small screens */\n  .ff-col {\n    grid-column: span 12;\n  }\n}";
+styleInject(css_248z$10);
 
 const Container = ({
   children,
@@ -2081,8 +2111,8 @@ const Col = ({
   });
 };
 
-var css_248z$_ = ".ff--switch-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff--switch-container .ff--switch-checkbox {\n  height: 0;\n  width: 0;\n  display: none;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button {\n  right: -1px;\n  border: 1px solid var(--brand-color);\n  background: var(--toggle-button-bg-color);\n  transition: all 0.3s;\n  box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button .ff-checked-icon--primary svg path {\n  fill: var(--brand-color);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label--primary {\n  background: var(--brand-color);\n  transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label:disabled {\n  cursor: default;\n  color: var(--disable-color);\n  background: var(--disable-color);\n}\n.ff--switch-container .ff--switch-checkbox:disabled {\n  cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  border-radius: 8px;\n  position: relative;\n  background: var(--toggle-strip-color);\n  transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-label--disabled {\n  opacity: 0.5;\n  cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button {\n  position: absolute;\n  left: 0;\n  border: 1px solid var(--toggle-strip-color);\n  display: flex;\n  background: var(--toggle-button-bg-color);\n  border-radius: 50%;\n  box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n  transition: all 0.3s;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button .ff-unchecked-icon--primary svg path {\n  fill: var(--toggle-disable-icon-color);\n}\n.ff--switch-container .default--small {\n  width: 24px;\n  height: 10px;\n}\n.ff--switch-container .default--small .ff--switch-button {\n  width: 16px;\n  height: 16px;\n  transform: translateX(0);\n}\n.ff--switch-container .default--small .ff--switch-button.checked {\n  transform: translateX(10px);\n}\n.ff--switch-container .default--medium {\n  width: 32px;\n  height: 14px;\n}\n.ff--switch-container .default--medium .ff--switch-button {\n  width: 20px;\n  height: 20px;\n  transform: translateX(0);\n}\n.ff--switch-container .default--medium .ff--switch-button.checked {\n  transform: translateX(14px);\n}\n.ff--switch-container .default--large {\n  width: 40px;\n  height: 16px;\n}\n.ff--switch-container .default--large .ff--switch-button {\n  width: 24px;\n  height: 24px;\n  transform: translateX(0);\n}\n.ff--switch-container .default--large .ff--switch-button.checked {\n  transform: translateX(16px);\n}";
-styleInject(css_248z$_);
+var css_248z$$ = ".ff--switch-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff--switch-container .ff--switch-checkbox {\n  height: 0;\n  width: 0;\n  display: none;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button {\n  right: -1px;\n  border: 1px solid var(--brand-color);\n  background: var(--toggle-button-bg-color);\n  transition: all 0.3s;\n  box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button .ff-checked-icon--primary svg path {\n  fill: var(--brand-color);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label--primary {\n  background: var(--brand-color);\n  transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label:disabled {\n  cursor: default;\n  color: var(--disable-color);\n  background: var(--disable-color);\n}\n.ff--switch-container .ff--switch-checkbox:disabled {\n  cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  border-radius: 8px;\n  position: relative;\n  background: var(--toggle-strip-color);\n  transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-label--disabled {\n  opacity: 0.5;\n  cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button {\n  position: absolute;\n  left: 0;\n  border: 1px solid var(--toggle-strip-color);\n  display: flex;\n  background: var(--toggle-button-bg-color);\n  border-radius: 50%;\n  box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n  transition: all 0.3s;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button .ff-unchecked-icon--primary svg path {\n  fill: var(--toggle-disable-icon-color);\n}\n.ff--switch-container .default--small {\n  width: 24px;\n  height: 10px;\n}\n.ff--switch-container .default--small .ff--switch-button {\n  width: 16px;\n  height: 16px;\n  transform: translateX(0);\n}\n.ff--switch-container .default--small .ff--switch-button.checked {\n  transform: translateX(10px);\n}\n.ff--switch-container .default--medium {\n  width: 32px;\n  height: 14px;\n}\n.ff--switch-container .default--medium .ff--switch-button {\n  width: 20px;\n  height: 20px;\n  transform: translateX(0);\n}\n.ff--switch-container .default--medium .ff--switch-button.checked {\n  transform: translateX(14px);\n}\n.ff--switch-container .default--large {\n  width: 40px;\n  height: 16px;\n}\n.ff--switch-container .default--large .ff--switch-button {\n  width: 24px;\n  height: 24px;\n  transform: translateX(0);\n}\n.ff--switch-container .default--large .ff--switch-button.checked {\n  transform: translateX(16px);\n}";
+styleInject(css_248z$$);
 
 const Toggle = ({
   onChange,
@@ -2160,8 +2190,8 @@ const Toggle = ({
   });
 };
 
-var css_248z$Z = ".fontXs, .ff-chip-wrapper .ff-default-chip-style {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-chip-wrapper .ff-default-chip-style--custom {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-chip-wrapper {\n  display: inline-flex;\n  margin: 5px;\n  justify-content: center;\n  align-items: center;\n}\n.ff-chip-wrapper .ff-default-chip-style {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: fit-content;\n  gap: 5px;\n  height: 17px;\n  border-radius: 25px;\n  padding: 1px 6px;\n  line-height: 15px;\n  border: none;\n  transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;\n  box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--fullText:hover {\n  box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n  padding-right: 12px;\n}\n.ff-chip-wrapper .ff-default-chip-style--primary {\n  background-color: var(--ff-chips-fill-color);\n  color: var(--ff-chip-bg);\n  color: var(--ff-chip-text-color);\n}\n.ff-chip-wrapper .ff-default-chip-style--success {\n  background-color: var(--ff-success);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--error {\n  background-color: var(--ff-error-light);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--warning {\n  background-color: var(--ff-warning);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--custom {\n  background: rgba(97, 11, 134, 0.1019607843);\n  color: #610b86;\n  padding: 2px 8px;\n  border-radius: 12px;\n  cursor: pointer;\n  white-space: nowrap;\n  box-shadow: none;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n.ff-chip-wrapper .ff-default-chip-style--custom:hover {\n  background-color: #610b86;\n  color: #fdfaff;\n}\n.ff-chip-wrapper .ff-default-chip-style--public {\n  background-color: var(--public-chip-bg-color);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--partial-public {\n  background-color: var(--partial-public-chip-bg-color);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--private {\n  background-color: var(--private-chip-bg-color);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--disabled {\n  background-color: var(--disabled-chip-bg-color);\n  color: var(--ff-chip-bg);\n}";
-styleInject(css_248z$Z);
+var css_248z$_ = ".fontXs, .ff-chip-wrapper .ff-default-chip-style {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-chip-wrapper .ff-default-chip-style--custom {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-chip-wrapper {\n  display: inline-flex;\n  margin: 5px;\n  justify-content: center;\n  align-items: center;\n}\n.ff-chip-wrapper .ff-default-chip-style {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: fit-content;\n  gap: 5px;\n  height: 17px;\n  border-radius: 25px;\n  padding: 1px 6px;\n  line-height: 15px;\n  border: none;\n  transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;\n  box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--fullText:hover {\n  box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n  padding-right: 12px;\n}\n.ff-chip-wrapper .ff-default-chip-style--primary {\n  background-color: var(--ff-chips-fill-color);\n  color: var(--ff-chip-bg);\n  color: var(--ff-chip-text-color);\n}\n.ff-chip-wrapper .ff-default-chip-style--success {\n  background-color: var(--ff-success);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--error {\n  background-color: var(--ff-error-light);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--warning {\n  background-color: var(--ff-warning);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--custom {\n  background: rgba(97, 11, 134, 0.1019607843);\n  color: #610b86;\n  padding: 2px 8px;\n  border-radius: 12px;\n  cursor: pointer;\n  white-space: nowrap;\n  box-shadow: none;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n.ff-chip-wrapper .ff-default-chip-style--custom:hover {\n  background-color: #610b86;\n  color: #fdfaff;\n}\n.ff-chip-wrapper .ff-default-chip-style--public {\n  background-color: var(--public-chip-bg-color);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--partial-public {\n  background-color: var(--partial-public-chip-bg-color);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--private {\n  background-color: var(--private-chip-bg-color);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--disabled {\n  background-color: var(--disabled-chip-bg-color);\n  color: var(--ff-chip-bg);\n}";
+styleInject(css_248z$_);
 
 const Chip = ({
   label = '',
@@ -2190,8 +2220,8 @@ const Chip = ({
   });
 };
 
-var css_248z$Y = ".fontXs, .ff-input-container .ff-input::placeholder, .ff-input-container .ff-input-label-container::placeholder, .ff-input-container:focus-within .ff-input-label-container, .ff-input-container .ff-input-message {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-input-container .ff-input, .ff-input-container .ff-input-label-container {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-input-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n.ff-input-container .ff-input, .ff-input-container .ff-input-label-container {\n  padding: 6px 8px;\n  border: 1px solid var(--input-default-border-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n}\n.ff-input-container .ff-input--medium {\n  padding: 10px 9px;\n}\n.ff-input-container .ff-input:disabled, .ff-input-container .ff-input-label-container:disabled {\n  cursor: not-allowed;\n}\n.ff-input-container .ff-input::placeholder, .ff-input-container .ff-input-label-container::placeholder {\n  opacity: 0;\n  line-height: 15px;\n}\n.ff-input-container .ff-input--disabled {\n  background: transparent;\n  border-color: var(--input-default-border-color);\n}\n.ff-input-container .ff-input--danger {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-container .ff-input--transparentBackground {\n  background: transparent;\n}\n.ff-input-container .ff-input--no-border {\n  border: none;\n}\n.ff-input-container .ff-input--placeholder::placeholder {\n  opacity: 1;\n}\n.ff-input-container .ff-input-label-container {\n  display: flex;\n  gap: 2px;\n  position: absolute;\n  border: none;\n  outline: none;\n  line-height: 18px;\n  margin-top: 1px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-input-container .ff-input-label-container--medium {\n  line-height: 25px;\n}\n.ff-input-container .ff-input-label-container .ff-input-label {\n  color: var(--input-default-label-color);\n}\n.ff-input-container .ff-input-label-container .ff-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container .ff-input-label-container .ff-input-label--disabled {\n  color: var(--input-default-border-color);\n  background-color: var(--input-label-bg-color);\n}\n.ff-input-container .ff-input-label-container .required-asterisk {\n  color: var(--input-error-text-color);\n}\n.ff-input-container:hover .ff-input-label {\n  color: var(--input-default-label-color);\n}\n.ff-input-container:hover .ff-input-label--no-hover {\n  color: var(--input-default-label-color);\n}\n.ff-input-container:hover .ff-input-label--disabled {\n  color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container:hover .ff-input, .ff-input-container:hover .ff-input-label-container {\n  border-color: var(--brand-color);\n}\n.ff-input-container:hover .ff-input--no-hover {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input--disabled {\n  background: transparent;\n  border-color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input--danger {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input-label-container {\n  top: -9px;\n  background-color: var(--input-label-bg-color);\n  line-height: 15px;\n  padding: 0px 2px;\n  margin-left: 10px;\n}\n.ff-input-container:focus-within .ff-input-label--primary {\n  color: var(--brand-color);\n}\n.ff-input-container:focus-within .ff-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input, .ff-input-container:focus-within .ff-input-label-container {\n  border-color: var(--brand-color);\n}\n.ff-input-container:focus-within .ff-input--danger {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input::placeholder, .ff-input-container:focus-within .ff-input-label-container::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-input-container .ff-input-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 15px;\n}\n.ff-input-container .ff-input-message--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container--float .ff-input-label-container {\n  top: -9px;\n  font-size: 10px;\n  background-color: var(--input-label-bg-color);\n  line-height: 15px;\n  padding: 0px 2px;\n  margin-left: 10px;\n}\n.ff-input-container--float--disabled {\n  cursor: not-allowed;\n}\n.ff-input-container--float--disabled .ff-input-label-container {\n  cursor: not-allowed;\n}";
-styleInject(css_248z$Y);
+var css_248z$Z = ".fontXs, .ff-input-container .ff-input::placeholder, .ff-input-container .ff-input-label-container::placeholder, .ff-input-container:focus-within .ff-input-label-container, .ff-input-container .ff-input-message {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-input-container .ff-input, .ff-input-container .ff-input-label-container {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-input-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n.ff-input-container .ff-input, .ff-input-container .ff-input-label-container {\n  padding: 6px 8px;\n  border: 1px solid var(--input-default-border-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n}\n.ff-input-container .ff-input--medium {\n  padding: 10px 9px;\n}\n.ff-input-container .ff-input:disabled, .ff-input-container .ff-input-label-container:disabled {\n  cursor: not-allowed;\n}\n.ff-input-container .ff-input::placeholder, .ff-input-container .ff-input-label-container::placeholder {\n  opacity: 0;\n  line-height: 15px;\n}\n.ff-input-container .ff-input--disabled {\n  background: transparent;\n  border-color: var(--input-default-border-color);\n}\n.ff-input-container .ff-input--danger {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-container .ff-input--transparentBackground {\n  background: transparent;\n}\n.ff-input-container .ff-input--no-border {\n  border: none;\n}\n.ff-input-container .ff-input--placeholder::placeholder {\n  opacity: 1;\n}\n.ff-input-container .ff-input-label-container {\n  display: flex;\n  gap: 2px;\n  position: absolute;\n  border: none;\n  outline: none;\n  line-height: 18px;\n  margin-top: 1px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-input-container .ff-input-label-container--medium {\n  line-height: 25px;\n}\n.ff-input-container .ff-input-label-container .ff-input-label {\n  color: var(--input-default-label-color);\n}\n.ff-input-container .ff-input-label-container .ff-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container .ff-input-label-container .ff-input-label--disabled {\n  color: var(--input-default-border-color);\n  background-color: var(--input-label-bg-color);\n}\n.ff-input-container .ff-input-label-container .required-asterisk {\n  color: var(--input-error-text-color);\n}\n.ff-input-container:hover .ff-input-label {\n  color: var(--input-default-label-color);\n}\n.ff-input-container:hover .ff-input-label--no-hover {\n  color: var(--input-default-label-color);\n}\n.ff-input-container:hover .ff-input-label--disabled {\n  color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container:hover .ff-input, .ff-input-container:hover .ff-input-label-container {\n  border-color: var(--brand-color);\n}\n.ff-input-container:hover .ff-input--no-hover {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input--disabled {\n  background: transparent;\n  border-color: var(--input-default-border-color);\n}\n.ff-input-container:hover .ff-input--danger {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input-label-container {\n  top: -9px;\n  background-color: var(--input-label-bg-color);\n  line-height: 15px;\n  padding: 0px 2px;\n  margin-left: 10px;\n}\n.ff-input-container:focus-within .ff-input-label--primary {\n  color: var(--brand-color);\n}\n.ff-input-container:focus-within .ff-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input, .ff-input-container:focus-within .ff-input-label-container {\n  border-color: var(--brand-color);\n}\n.ff-input-container:focus-within .ff-input--danger {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-container:focus-within .ff-input::placeholder, .ff-input-container:focus-within .ff-input-label-container::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-input-container .ff-input-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 15px;\n}\n.ff-input-container .ff-input-message--danger {\n  color: var(--input-error-text-color);\n}\n.ff-input-container--float .ff-input-label-container {\n  top: -9px;\n  font-size: 10px;\n  background-color: var(--input-label-bg-color);\n  line-height: 15px;\n  padding: 0px 2px;\n  margin-left: 10px;\n}\n.ff-input-container--float--disabled {\n  cursor: not-allowed;\n}\n.ff-input-container--float--disabled .ff-input-label-container {\n  cursor: not-allowed;\n}";
+styleInject(css_248z$Z);
 
 const Input = ({
   type = 'text',
@@ -2271,8 +2301,8 @@ const Input = ({
   });
 };
 
-var css_248z$X = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-radial-chart-container svg text {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-radial-chart-container {\n  cursor: pointer;\n}\n.ff-radial-chart-container svg text {\n  font-size: var(--fontSize) !important;\n  font-weight: 400;\n}";
-styleInject(css_248z$X);
+var css_248z$Y = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-radial-chart-container svg text {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-radial-chart-container {\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.ff-radial-chart-container svg {\n  vertical-align: middle;\n}\n.ff-radial-chart-container svg text {\n  font-size: var(--fontSize) !important;\n  font-weight: 400;\n}";
+styleInject(css_248z$Y);
 
 const useColorMappings$1 = () => React.useMemo(() => {
   return {
@@ -2381,41 +2411,45 @@ const RadialChart = ({
         percentage
       } = calculateArcAngles$1(status.value, total, currentAngle, radius);
       currentAngle = endAngle;
-      return jsxRuntime.jsx("svg", {
-        width: svgSize,
-        height: svgSize,
-        viewBox: `0 0 ${svgSize} ${svgSize}`,
-        onClick: () => onClick(status),
-        role: "img",
-        "aria-label": `${status.status}: ${Math.round(percentage * 100)}%`,
-        children: jsxRuntime.jsxs("g", {
-          transform: `translate(${radius + lineWidth}, ${radius + lineWidth})`,
-          children: [jsxRuntime.jsx("path", {
-            d: backgroundArcPath,
-            fill: "none",
-            stroke: backgroundColorMapping[normalizedStatus],
-            strokeWidth: lineWidth
-          }), jsxRuntime.jsx("path", {
-            d: foregroundArcPath,
-            fill: "none",
-            stroke: colorMapping[normalizedStatus],
-            strokeWidth: lineWidth
-          }), jsxRuntime.jsx("text", {
-            x: "0",
-            y: "0",
-            fill: colorMapping[normalizedStatus],
-            textAnchor: "middle",
-            dominantBaseline: "central",
-            children: `${Math.round(percentage * 100)}%`
-          })]
-        })
-      }, status.status);
+      return jsxRuntime.jsx(Tooltip, {
+        title: `${status.status}: ${Math.round(percentage * 100)}%`,
+        zIndex: 1000,
+        children: jsxRuntime.jsx("svg", {
+          width: svgSize,
+          height: svgSize,
+          viewBox: `0 0 ${svgSize} ${svgSize}`,
+          onClick: () => onClick(status),
+          role: "img",
+          "aria-label": `${status.status}: ${Math.round(percentage * 100)}%`,
+          children: jsxRuntime.jsxs("g", {
+            transform: `translate(${radius + lineWidth}, ${radius + lineWidth})`,
+            children: [jsxRuntime.jsx("path", {
+              d: backgroundArcPath,
+              fill: "none",
+              stroke: backgroundColorMapping[normalizedStatus],
+              strokeWidth: lineWidth
+            }), jsxRuntime.jsx("path", {
+              d: foregroundArcPath,
+              fill: "none",
+              stroke: colorMapping[normalizedStatus],
+              strokeWidth: lineWidth
+            }), jsxRuntime.jsx("text", {
+              x: "0",
+              y: "0",
+              fill: colorMapping[normalizedStatus],
+              textAnchor: "middle",
+              dominantBaseline: "central",
+              children: `${Math.round(percentage * 100)}%`
+            })]
+          })
+        }, status.status)
+      });
     })
   });
 };
 
-var css_248z$W = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-expandable-chip-menu--medium, .ff-expandable-chip-menu .ff-sub-chip--medium {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-expandable-chip-menu {\n  display: inline-flex;\n  gap: 16px;\n  align-items: center;\n  border-radius: 16px;\n  cursor: pointer;\n  overflow: hidden;\n  width: auto;\n  padding: 4px 8px;\n  transition: all 0.3s ease;\n}\n.ff-expandable-chip-menu--primary {\n  border: 0.5px solid var(--brand-color);\n  background-color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-label-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 4px;\n  white-space: nowrap;\n  padding: 2px 0;\n}\n.ff-expandable-chip-menu .ff-label-chip .arrow-icon {\n  height: 14px;\n  width: 14px;\n  display: grid;\n  place-items: center;\n}\n.ff-expandable-chip-menu .ff-label-chip--primary {\n  color: var(--brand-color);\n}\n.ff-expandable-chip-menu--disabled {\n  opacity: 0.5;\n}\n.ff-expandable-chip-menu--disabled:disabled {\n  pointer-events: none;\n}\n.ff-expandable-chip-menu--medium {\n  line-height: 18px;\n}\n.ff-expandable-chip-menu .ff-sub-chips {\n  display: flex;\n  gap: 8px;\n  max-width: 500px;\n  overflow-x: auto;\n  -ms-overflow-style: none;\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 0.3s ease, opacity 0.3s ease;\n  opacity: 0;\n}\n.ff-expandable-chip-menu .ff-sub-chips::-webkit-scrollbar {\n  display: none;\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chips {\n  transform: scaleX(1);\n  opacity: 1;\n}\n.ff-expandable-chip-menu .ff-sub-chip {\n  padding: 2px 8px;\n  border-radius: 12px;\n  white-space: nowrap;\n  transition: background-color 0.3s ease, color 0.3s ease;\n  opacity: 0;\n  transform: translateX(-10px);\n  animation: fadeIn 0.5s ease forwards;\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary {\n  background: var(--expandable-menu-option-bg);\n  color: var(--brand-color);\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary:hover, .ff-expandable-chip-menu .ff-sub-chip--primary.selected {\n  background-color: var(--brand-color);\n  color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-sub-chip--medium {\n  line-height: 18px;\n}\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n    transform: translateX(-10px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chip {\n  animation: fadeIn 0.5s ease forwards;\n}";
-styleInject(css_248z$W);
+var css_248z$X = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-expandable-chip-menu--medium, .ff-expandable-chip-menu .ff-sub-chip--medium {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-expandable-chip-menu {\n  display: inline-flex;\n  gap: 16px;\n  align-items: center;\n  border-radius: 16px;\n  cursor: pointer;\n  overflow: hidden;\n  width: auto;\n  padding: 4px 8px;\n  transition: all 0.3s ease;\n}\n.ff-expandable-chip-menu--primary {\n  border: 0.5px solid var(--brand-color);\n  background-color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-label-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 4px;\n  white-space: nowrap;\n  padding: 2px 0;\n}\n.ff-expandable-chip-menu .ff-label-chip .arrow-icon {\n  height: 14px;\n  width: 14px;\n  display: grid;\n  place-items: center;\n}\n.ff-expandable-chip-menu .ff-label-chip--primary {\n  color: var(--brand-color);\n}\n.ff-expandable-chip-menu--disabled {\n  opacity: 0.5;\n}\n.ff-expandable-chip-menu--disabled:disabled {\n  pointer-events: none;\n}\n.ff-expandable-chip-menu--medium {\n  line-height: 18px;\n}\n.ff-expandable-chip-menu .ff-sub-chips {\n  display: flex;\n  gap: 8px;\n  max-width: 500px;\n  overflow-x: auto;\n  -ms-overflow-style: none;\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 0.3s ease, opacity 0.3s ease;\n  opacity: 0;\n}\n.ff-expandable-chip-menu .ff-sub-chips::-webkit-scrollbar {\n  display: none;\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chips {\n  transform: scaleX(1);\n  opacity: 1;\n}\n.ff-expandable-chip-menu .ff-sub-chip {\n  padding: 2px 8px;\n  border-radius: 12px;\n  white-space: nowrap;\n  transition: background-color 0.3s ease, color 0.3s ease;\n  opacity: 0;\n  transform: translateX(-10px);\n  animation: fadeIn 0.5s ease forwards;\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary {\n  background: var(--expandable-menu-option-bg);\n  color: var(--brand-color);\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary:hover, .ff-expandable-chip-menu .ff-sub-chip--primary.selected {\n  background-color: var(--brand-color);\n  color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-sub-chip--medium {\n  line-height: 18px;\n}\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n    transform: translateX(-10px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chip {\n  animation: fadeIn 0.5s ease forwards;\n}";
+styleInject(css_248z$X);
 
 const ExpandableMenu = ({
   label = '',
@@ -2482,8 +2516,8 @@ const ExpandableMenu = ({
   });
 };
 
-var css_248z$V = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-select-wrapper .ff-select .ff-select-inputField, .ff-select-wrapper .ff-select .ff-select-labels {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-select-wrapper .ff-select__focus .ff-select-labels, .ff-select-wrapper .ff-select__error .ff-select-labels {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-select-wrapper {\n  min-height: 24px;\n  min-width: 50px;\n}\n.ff-select-wrapper .ff-select {\n  height: 100%;\n  border: 1px solid var(--ff-select-border-color);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-evenly;\n  position: relative;\n  box-sizing: border-box;\n}\n.ff-select-wrapper .ff-select:hover {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-labels {\n  color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-text-hover-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField {\n  width: calc(100% - 8px);\n  height: 100%;\n  padding: 0 0 0 8px;\n  border: none;\n  outline: none;\n  letter-spacing: 0.5px;\n  z-index: 10;\n  background: transparent;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__disabled {\n  cursor: not-allowed;\n  color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper {\n  cursor: pointer;\n  height: 100%;\n  padding: 0 8px 0 0;\n  display: flex;\n  align-items: center;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-border-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper__disabled {\n  cursor: not-allowed;\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-labels {\n  position: absolute;\n  left: 8px;\n  color: var(--ff-select-border-color);\n  letter-spacing: 0.5px;\n  line-height: 18px;\n  transition: 0.18s ease all;\n  border-radius: 4px;\n}\n.ff-select-wrapper .ff-select .ff-select-labels__active {\n  transform: translateY(-16px);\n  transition: 0.18s ease all;\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  z-index: 100000;\n}\n.ff-select-wrapper .ff-select__focus {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-labels {\n  color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-labels {\n  transform: translateY(-16px);\n  transition: 0.18s ease all;\n  color: var(--ff-select-brand-color);\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  line-height: 18px;\n  z-index: 100000;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows {\n  transform: rotate(180deg);\n  transition: 0.18s ease all;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__disabled {\n  cursor: not-allowed;\n}\n.ff-select-wrapper .ff-select__disabled:hover {\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-labels {\n  color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-border-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error {\n  border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover {\n  border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-labels {\n  color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-default-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error__focused:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error .ff-select-labels {\n  transform: translateY(-16px);\n  transition: 0.3s ease all;\n  color: var(--error_light);\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  line-height: 18px;\n}\n.ff-select-wrapper .ff-select__no_border {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select__no_border:hover {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-error-msg {\n  padding-left: 8px;\n  letter-spacing: 0.5px;\n}";
-styleInject(css_248z$V);
+var css_248z$W = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-select-wrapper .ff-select .ff-select-inputField, .ff-select-wrapper .ff-select .ff-select-labels {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-select-wrapper .ff-select__focus .ff-select-labels, .ff-select-wrapper .ff-select__error .ff-select-labels {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-select-wrapper {\n  min-height: 24px;\n  min-width: 50px;\n}\n.ff-select-wrapper .ff-select {\n  height: 100%;\n  border: 1px solid var(--ff-select-border-color);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-evenly;\n  position: relative;\n  box-sizing: border-box;\n}\n.ff-select-wrapper .ff-select:hover {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-labels {\n  color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-text-hover-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-input-icon {\n  margin-left: 6px;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField {\n  width: calc(100% - 8px);\n  height: 100%;\n  padding: 0 0 0 8px;\n  border: none;\n  outline: none;\n  letter-spacing: 0.5px;\n  z-index: 10;\n  background: transparent;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__disabled {\n  cursor: not-allowed;\n  color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__readonly {\n  cursor: pointer;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__icon {\n  width: calc(100% - 36px);\n  padding: 4;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper {\n  cursor: pointer;\n  height: 100%;\n  padding: 0 8px 0 0;\n  display: flex;\n  align-items: center;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-border-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper__disabled {\n  cursor: not-allowed;\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-labels {\n  position: absolute;\n  left: 8px;\n  color: var(--ff-select-border-color);\n  letter-spacing: 0.5px;\n  line-height: 18px;\n  transition: 0.18s ease all;\n  border-radius: 4px;\n}\n.ff-select-wrapper .ff-select .ff-select-labels__icon {\n  left: 24px;\n}\n.ff-select-wrapper .ff-select .ff-select-labels__active {\n  transform: translateY(-16px);\n  transition: 0.18s ease all;\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  z-index: 100000;\n  left: 8px;\n}\n.ff-select-wrapper .ff-select__focus {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-labels {\n  color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-labels {\n  transform: translateY(-16px);\n  transition: 0.18s ease all;\n  color: var(--ff-select-brand-color);\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  line-height: 18px;\n  z-index: 100000;\n  left: 8px;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows {\n  transform: rotate(180deg);\n  transition: 0.18s ease all;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__disabled {\n  cursor: not-allowed;\n}\n.ff-select-wrapper .ff-select__disabled:hover {\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-labels {\n  color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-border-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error {\n  border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover {\n  border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-labels {\n  color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-default-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error__focused:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error .ff-select-labels {\n  transform: translateY(-16px);\n  transition: 0.3s ease all;\n  color: var(--error_light);\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  line-height: 18px;\n  left: 8px;\n}\n.ff-select-wrapper .ff-select__no_border {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select__no_border:hover {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-error-msg {\n  padding-left: 8px;\n  letter-spacing: 0.5px;\n}";
+styleInject(css_248z$W);
 
 const dropdownDefaultCSSData = {
   margin: 6,
@@ -2492,8 +2526,8 @@ const dropdownDefaultCSSData = {
   dropDownWrapperPadding: 0
 };
 
-var css_248z$U = ".ff-select-dropdown-wrapper {\n  max-height: 160px;\n  z-index: 999999;\n  position: absolute;\n  min-width: 50px;\n  border-radius: 4px;\n  border: 1px solid var(--ff-select-option-border-color);\n  margin-top: 4px;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  background-color: var(--ff-select-background-color);\n  overflow: hidden auto;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-track {\n  background: var(--ff-select-scroll-track-bg);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option {\n  box-sizing: border-box;\n  cursor: pointer;\n  padding: 0px 8px;\n  border-radius: 4px;\n  min-height: 32px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option__selected, .ff-select-dropdown-wrapper .ff-select-dropdown-option:hover {\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-no-option {\n  box-sizing: border-box;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}";
-styleInject(css_248z$U);
+var css_248z$V = ".ff-select-dropdown-wrapper {\n  max-height: 160px;\n  z-index: 999999;\n  position: absolute;\n  min-width: 50px;\n  border-radius: 4px;\n  border: 1px solid var(--ff-select-option-border-color);\n  margin-top: 4px;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  background-color: var(--ff-select-background-color);\n  overflow: hidden auto;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-track {\n  background: var(--ff-select-scroll-track-bg);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option {\n  box-sizing: border-box;\n  cursor: pointer;\n  padding: 0px 8px;\n  border-radius: 4px;\n  min-height: 32px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container {\n  display: flex;\n  align-items: center;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container__icon {\n  margin-right: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option__selected, .ff-select-dropdown-wrapper .ff-select-dropdown-option:hover {\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-no-option {\n  box-sizing: border-box;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}";
+styleInject(css_248z$V);
 
 const ffid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => ((char === 'x' ? Math.random() * 16 : Math.random() * 16 & 0x3 | 0x8) | 0).toString(16));
 
@@ -2522,7 +2556,8 @@ const Dropdown$1 = ({
   selectArrowRef,
   heightFromTop,
   selectedOption,
-  valueAccessor
+  valueAccessor,
+  showIcon = false
 }) => {
   const themeContext = React.useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -2553,28 +2588,34 @@ const Dropdown$1 = ({
       return {
         left: positionX,
         top: positionY + heightFromTop,
-        width: width + 30,
+        width: showIcon ? width + 56 : width + 30,
         zIndex: optionZIndex,
-        marginLeft: '-2px'
+        marginLeft: showIcon ? '-29px' : '-2px'
       };
     }
     return {
       zIndex: optionZIndex,
       left: positionX,
-      width: width + 30,
+      width: showIcon ? width + 56 : width + 30,
       top: positionY - selectInputHeight - dropdownContainerHeight + 4 * margin,
-      marginLeft: '-2px'
+      marginLeft: showIcon ? '-29px' : '-2px'
     };
   };
-  const getOptionLabel = label => {
+  const getOptionLabel = (label, icon) => {
     if (/*#__PURE__*/React.isValidElement(label)) {
       return label;
     }
-    return jsxRuntime.jsx(Typography, {
+    return jsxRuntime.jsxs(Typography, {
       as: "div",
       lineHeight: "30px",
       color: "var(--ff-select-text-color)",
-      children: label
+      className: classNames({
+        'ff-select-dropdown-icon-container': showIcon
+      }),
+      children: [showIcon && jsxRuntime.jsx(Icon, {
+        name: icon,
+        className: "ff-select-dropdown-icon-container__icon"
+      }), label]
     });
   };
   return jsxRuntime.jsx("div", {
@@ -2590,7 +2631,7 @@ const Dropdown$1 = ({
           if ('disable' in option && option['disable']) return;
           onSelectOptionSelector(option);
         },
-        children: getOptionLabel(getLabel(option, labelAccessor))
+        children: getOptionLabel(getLabel(option, labelAccessor), 'iconName' in option && option['iconName'])
       }, ffid())) : jsxRuntime.jsx(Typography, {
         textAlign: "center",
         as: "div",
@@ -2661,11 +2702,19 @@ const Select$1 = ({
   height = 32,
   width = '100%',
   onBlur = () => {},
-  disableInput = false
+  disableInput = false,
+  showIcon = false
 }) => {
   const selectWidth = typeof width === 'number' ? `${width}px` : width;
   const [showDropdownOptions, setShowDropdownOptions] = React.useState(false);
-  const [searchedOption, setSearchedOption] = React.useState('');
+  const [searchedOption, setSearchedOption] = React.useState({
+    searchedText: '',
+    searchedIcon: ''
+  });
+  const {
+    searchedText,
+    searchedIcon
+  } = searchedOption;
   const [selectOptionList, setSelectOptionList] = React.useState([]);
   const [dropdownPosition, setDropdownPosition] = React.useState({
     positionX: 0,
@@ -2680,7 +2729,10 @@ const Select$1 = ({
   const calculatePosition = usePortalPosition(inputRef, showDropdownOptions);
   const handleIconClick = () => {
     setShowDropdownOptions(!showDropdownOptions);
-    setSearchedOption(getValue$1(selectedOption, valueAccessor));
+    setSearchedOption({
+      ...searchedOption,
+      searchedText: getValue$1(selectedOption, valueAccessor)
+    });
     setSelectOptionList(optionsList);
     if (!showDropdownOptions && inputRef.current) {
       inputRef.current.focus();
@@ -2696,7 +2748,10 @@ const Select$1 = ({
       return typeof valueData === 'string' ? valueData.toLowerCase().includes(value.toLowerCase().trim()) : valueData === Number(value);
     });
     setSelectOptionList(filteredOptions);
-    setSearchedOption(value);
+    setSearchedOption({
+      ...searchedOption,
+      searchedText: value
+    });
   };
   const onSelectUpdatePosition = () => {
     if (!showDropdownOptions || !DropdownRef?.current || disabled) return;
@@ -2724,14 +2779,20 @@ const Select$1 = ({
       fromBottom: 0,
       width: 0
     });
-    setSearchedOption(getValue$1(selectedOption, valueAccessor));
+    setSearchedOption({
+      searchedText: getValue$1(selectedOption, valueAccessor),
+      searchedIcon: selectedOption.iconName
+    });
     setSelectOptionList(optionsList);
     onBlur();
   };
   const onSelectOptionSelector = option => {
     if (disabled) return;
     onSelectBlur();
-    setSearchedOption(getValue$1(option, valueAccessor));
+    setSearchedOption({
+      searchedText: getValue$1(selectedOption, valueAccessor),
+      searchedIcon: selectedOption.iconName
+    });
     if (onChange) {
       onChange(option);
     }
@@ -2755,7 +2816,10 @@ const Select$1 = ({
     };
   }, [showDropdownOptions]);
   React.useEffect(() => {
-    setSearchedOption(getValue$1(selectedOption, valueAccessor));
+    setSearchedOption({
+      searchedText: getValue$1(selectedOption, valueAccessor),
+      searchedIcon: selectedOption.iconName
+    });
   }, [selectedOption]);
   React.useEffect(() => {
     if (checkEmpty(optionsList)) return;
@@ -2776,15 +2840,20 @@ const Select$1 = ({
         'ff-select__error__focused': !!errorMsg && showDropdownOptions,
         'ff-select__no_border': !showBorder
       }),
-      children: [jsxRuntime.jsx("input", {
+      children: [showIcon && jsxRuntime.jsx(Icon, {
+        name: searchedIcon,
+        className: "ff-select-input-icon"
+      }), jsxRuntime.jsx("input", {
         type: "text",
         ref: inputRef,
         id: "select-input-element",
         className: classNames('ff-select-inputField', {
-          'ff-select-inputField__disabled': disabled
+          'ff-select-inputField__disabled': disabled,
+          'ff-select-inputField__readonly': disableInput,
+          'ff-select-inputField__icon': showIcon
         }),
         onFocus: handleFocus,
-        value: searchedOption,
+        value: searchedText,
         autoCorrect: "off",
         autoComplete: "off",
         spellCheck: "false",
@@ -2810,6 +2879,7 @@ const Select$1 = ({
       }), showLabel && jsxRuntime.jsx(Typography, {
         as: "span",
         className: classNames('ff-select-labels', {
+          'ff-select-labels__icon': showIcon,
           'ff-select-labels__active': searchedOption
         }),
         fontSize: searchedOption || showDropdownOptions ? 8 : 12,
@@ -2836,14 +2906,15 @@ const Select$1 = ({
         onSelectBlur: onSelectBlur,
         onSelectOptionSelector: onSelectOptionSelector,
         heightFromTop: height,
-        selectedOption: searchedOption
+        selectedOption: searchedOption,
+        showIcon: showIcon
       }), document.body)
     })]
   });
 };
 
-var css_248z$T = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-textarea-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n  display: flex;\n  color: var(--text-area-default-color);\n  justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n  padding: 8px;\n  width: 100%;\n  min-height: 80px;\n  gap: 0px;\n  border: 1px solid var(--default-icon-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n  font-weight: 400;\n}\n.ff-textarea-container .ff-textarea--resize {\n  resize: none;\n}\n.ff-textarea-container .ff-textarea:disabled, .ff-textarea-container .ff-textarea-label-container:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ff-textarea-container .ff-textarea:disabled:hover, .ff-textarea-container .ff-textarea-label-container:disabled:hover {\n  border-color: var(--default-icon-color);\n  color: inherit;\n}\n.ff-textarea-container .ff-textarea::placeholder, .ff-textarea-container .ff-textarea-label-container::placeholder {\n  opacity: 0;\n}\n.ff-textarea-container .ff-textarea--danger {\n  border-color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea--transparentBackground {\n  background: transparent;\n}\n.ff-textarea-container .ff-textarea-label-container {\n  display: flex;\n  position: absolute;\n  border: none;\n  outline: none;\n  margin-top: 1px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label {\n  padding: 1px;\n  height: 10px;\n  width: auto;\n  background-color: var(--drawer-footer-bg);\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label--danger {\n  color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea-label-container .required-asterisk {\n  color: var(--error_light);\n}\n.ff-textarea-container:hover .ff-textarea-label {\n  color: var(--text-color);\n}\n.ff-textarea-container:hover .ff-textarea, .ff-textarea-container:hover .ff-textarea-label-container {\n  border-color: var(--text-color);\n}\n.ff-textarea-container:focus-within .ff-textarea-label-container {\n  font-weight: 400;\n  line-height: 12px;\n  letter-spacing: 0.5px;\n  text-align: left;\n  top: -6px;\n  background-color: transparent;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container:focus-within .ff-textarea-label--primary {\n  color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea--primary {\n  border-color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-textarea-container .ff-textarea-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-textarea-container .ff-textarea-message--danger {\n  color: var(--error_light);\n}\n.ff-textarea-container--float .ff-textarea-label-container {\n  letter-spacing: 0.5px;\n  top: -6px;\n  background-color: transparent;\n  line-height: 12px;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container--disabled {\n  cursor: not-allowed;\n}\n.ff-textarea-container--disabled:hover .ff-textarea-label {\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container--disabled:hover .ff-textarea, .ff-textarea-container--disabled:hover .ff-textarea-container .ff-textarea-label-container, .ff-textarea-container .ff-textarea-container--disabled:hover .ff-textarea-label-container {\n  border-color: var(--default-icon-color);\n}\n.ff-textarea-container--disabled .ff-textarea-label-container {\n  cursor: not-allowed;\n}";
-styleInject(css_248z$T);
+var css_248z$U = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-textarea-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n  display: flex;\n  color: var(--text-area-default-color);\n  justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n  padding: 8px;\n  width: 100%;\n  min-height: 80px;\n  gap: 0px;\n  border: 1px solid var(--default-icon-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n  font-weight: 400;\n}\n.ff-textarea-container .ff-textarea--resize {\n  resize: none;\n}\n.ff-textarea-container .ff-textarea:disabled, .ff-textarea-container .ff-textarea-label-container:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ff-textarea-container .ff-textarea:disabled:hover, .ff-textarea-container .ff-textarea-label-container:disabled:hover {\n  border-color: var(--default-icon-color);\n  color: inherit;\n}\n.ff-textarea-container .ff-textarea::placeholder, .ff-textarea-container .ff-textarea-label-container::placeholder {\n  opacity: 0;\n}\n.ff-textarea-container .ff-textarea--danger {\n  border-color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea--transparentBackground {\n  background: transparent;\n}\n.ff-textarea-container .ff-textarea-label-container {\n  display: flex;\n  position: absolute;\n  border: none;\n  outline: none;\n  margin-top: 1px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label {\n  padding: 1px;\n  height: 10px;\n  width: auto;\n  background-color: var(--drawer-footer-bg);\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label--danger {\n  color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea-label-container .required-asterisk {\n  color: var(--error_light);\n}\n.ff-textarea-container:hover .ff-textarea-label {\n  color: var(--text-color);\n}\n.ff-textarea-container:hover .ff-textarea, .ff-textarea-container:hover .ff-textarea-label-container {\n  border-color: var(--text-color);\n}\n.ff-textarea-container:focus-within .ff-textarea-label-container {\n  font-weight: 400;\n  line-height: 12px;\n  letter-spacing: 0.5px;\n  text-align: left;\n  top: -6px;\n  background-color: transparent;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container:focus-within .ff-textarea-label--primary {\n  color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea--primary {\n  border-color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-textarea-container .ff-textarea-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-textarea-container .ff-textarea-message--danger {\n  color: var(--error_light);\n}\n.ff-textarea-container--float .ff-textarea-label-container {\n  letter-spacing: 0.5px;\n  top: -6px;\n  background-color: transparent;\n  line-height: 12px;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container--disabled {\n  cursor: not-allowed;\n}\n.ff-textarea-container--disabled:hover .ff-textarea-label {\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container--disabled:hover .ff-textarea, .ff-textarea-container--disabled:hover .ff-textarea-container .ff-textarea-label-container, .ff-textarea-container .ff-textarea-container--disabled:hover .ff-textarea-label-container {\n  border-color: var(--default-icon-color);\n}\n.ff-textarea-container--disabled .ff-textarea-label-container {\n  cursor: not-allowed;\n}";
+styleInject(css_248z$U);
 
 const Textarea = ({
   capacity = 200,
@@ -2913,8 +2984,8 @@ const Textarea = ({
   });
 };
 
-var css_248z$S = ".ff-status-button {\n  border: none;\n  border-radius: 4px;\n  padding: 0 4px;\n  cursor: pointer;\n  width: 80px;\n  height: 16px;\n}\n.ff-status-button__text {\n  color: inherit;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 76px;\n  text-transform: capitalize;\n}\n.ff-status-button--passed {\n  background-color: var(--status-button-bg-passed);\n  color: var(--status-button-text-passed);\n}\n.ff-status-button--failed {\n  background-color: var(--status-button-bg-failed);\n  color: var(--status-button-text-failed);\n}\n.ff-status-button--running {\n  background-color: var(--status-button-bg-running);\n  color: var(--status-button-text-running);\n}\n.ff-status-button--skipped {\n  background-color: var(--status-button-bg-skipped);\n  color: var(--status-button-text-skipped);\n}\n.ff-status-button--warning {\n  background-color: var(--status-button-bg-warning);\n  color: var(--status-button-text-warning);\n}\n.ff-status-button--terminated {\n  background-color: var(--status-button-bg-terminated);\n  color: var(--status-button-text-terminated);\n}\n.ff-status-button--partially-executed {\n  background-color: var(--status-button-bg-partiallyExecuted);\n  color: var(--status-button-text-partiallyExecuted);\n}\n.ff-status-button--aborted {\n  background-color: var(--status-button-bg-aborted);\n  color: var(--status-button-text-aborted);\n}\n.ff-status-button--not-executed {\n  background-color: var(--status-button-bg-notExecuted);\n  color: var(--status-button-text-notExecuted);\n}\n.ff-status-button:disabled {\n  opacity: 50%;\n  cursor: not-allowed;\n}";
-styleInject(css_248z$S);
+var css_248z$T = ".ff-status-button {\n  border: none;\n  border-radius: 4px;\n  padding: 0 4px;\n  cursor: pointer;\n  width: 80px;\n  height: 16px;\n}\n.ff-status-button__text {\n  color: inherit;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 76px;\n  text-transform: capitalize;\n}\n.ff-status-button--passed {\n  background-color: var(--status-button-bg-passed);\n  color: var(--status-button-text-passed);\n}\n.ff-status-button--failed {\n  background-color: var(--status-button-bg-failed);\n  color: var(--status-button-text-failed);\n}\n.ff-status-button--running {\n  background-color: var(--status-button-bg-running);\n  color: var(--status-button-text-running);\n}\n.ff-status-button--skipped {\n  background-color: var(--status-button-bg-skipped);\n  color: var(--status-button-text-skipped);\n}\n.ff-status-button--warning {\n  background-color: var(--status-button-bg-warning);\n  color: var(--status-button-text-warning);\n}\n.ff-status-button--terminated {\n  background-color: var(--status-button-bg-terminated);\n  color: var(--status-button-text-terminated);\n}\n.ff-status-button--partially-executed {\n  background-color: var(--status-button-bg-partiallyExecuted);\n  color: var(--status-button-text-partiallyExecuted);\n}\n.ff-status-button--aborted {\n  background-color: var(--status-button-bg-aborted);\n  color: var(--status-button-text-aborted);\n}\n.ff-status-button--not-executed {\n  background-color: var(--status-button-bg-notExecuted);\n  color: var(--status-button-text-notExecuted);\n}\n.ff-status-button:disabled {\n  opacity: 50%;\n  cursor: not-allowed;\n}";
+styleInject(css_248z$T);
 
 const StatusButton = ({
   status = 'passed',
@@ -2947,8 +3018,8 @@ const StatusButton = ({
   });
 };
 
-var css_248z$R = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-option-card .ff-options {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-menu-option-container {\n  cursor: pointer;\n  position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n  background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n  background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n  background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--brand-color);\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n  background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n  background-color: var(--menu-variant-dark-icon-color);\n}\n\n.ff-option-card {\n  position: fixed;\n  margin: 4px;\n  border: 1px solid var(--option-card-border-color);\n  background: var(--option-card-bg-color);\n  overflow: hidden;\n  min-height: 32px;\n  min-width: 110px;\n  width: max-content;\n  border-radius: 4px;\n}\n.ff-option-card--primary {\n  background: var(--brand-color);\n  color: var(--primary-button-text-color);\n}\n.ff-option-card--primary svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-option-card--primary :hover {\n  color: var(--brand-color);\n}\n.ff-option-card--primary :hover svg path {\n  fill: var(--brand-color);\n}\n.ff-option-card .ff-options {\n  cursor: pointer;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n}\n.ff-option-card .ff-options:hover {\n  background-color: var(--hover-color);\n}\n.ff-option-card .ff-options label {\n  cursor: pointer;\n}\n.ff-option-card .ff-disable-option {\n  opacity: 0.5;\n  cursor: no-drop;\n}\n.ff-option-card .ff-disable-option label {\n  cursor: no-drop;\n}";
-styleInject(css_248z$R);
+var css_248z$S = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-option-card .ff-options {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-menu-option-container {\n  cursor: pointer;\n  position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n  background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n  background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n  background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--brand-color);\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n  background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n  background-color: var(--menu-variant-dark-icon-color);\n}\n\n.ff-option-card {\n  position: fixed;\n  margin: 4px;\n  border: 1px solid var(--option-card-border-color);\n  background: var(--option-card-bg-color);\n  overflow: hidden;\n  min-height: 32px;\n  min-width: 110px;\n  width: max-content;\n  border-radius: 4px;\n}\n.ff-option-card--primary {\n  background: var(--brand-color);\n  color: var(--primary-button-text-color);\n}\n.ff-option-card--primary svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-option-card--primary :hover {\n  color: var(--brand-color);\n}\n.ff-option-card--primary :hover svg path {\n  fill: var(--brand-color);\n}\n.ff-option-card .ff-options {\n  cursor: pointer;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n}\n.ff-option-card .ff-options:hover {\n  background-color: var(--hover-color);\n}\n.ff-option-card .ff-options label {\n  cursor: pointer;\n}\n.ff-option-card .ff-disable-option {\n  opacity: 0.5;\n  cursor: no-drop;\n}\n.ff-option-card .ff-disable-option label {\n  cursor: no-drop;\n}";
+styleInject(css_248z$S);
 
 const Option$1 = ({
   option,
@@ -3131,8 +3202,8 @@ const MenuOption = ({
   });
 };
 
-var css_248z$Q = ".ff-fixed-header-table {\n  overflow-y: auto;\n}\n\n.ff-table-icon {\n  position: absolute;\n  top: 10px;\n  right: 0;\n  margin-right: 10px;\n  z-index: 100;\n  cursor: pointer;\n}\n\n.ff-table {\n  width: 100%;\n}\n.ff-table th,\n.ff-table td {\n  text-align: left;\n  font-size: 12px;\n  padding: 9px 8px;\n}\n.ff-table thead tr th {\n  border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-table thead tr th .ff-label-checkbox-container {\n  display: flex;\n  align-items: center;\n}\n.ff-table thead tr th .ff-label-checkbox-container .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table tbody tr .action-column {\n  opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n  padding-left: 10px;\n  opacity: 0;\n  display: flex;\n  justify-content: flex-end;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  transform: translateX(20px);\n}\n.ff-table tbody tr:hover {\n  background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container {\n  opacity: 1;\n  transform: translateX(0);\n}\n.ff-table tbody tr td {\n  position: relative;\n  color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n  cursor: pointer;\n}\n.ff-table tbody tr td .ff-data-checkbox-container {\n  display: flex;\n  align-items: center;\n}\n.ff-table tbody tr td .ff-data-checkbox-container .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table .primary-bg {\n  background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n  background-color: var(--slider-table-color);\n}\n.ff-table .default-bg {\n  background-color: transparent;\n}\n.ff-table .default-color {\n  color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n  color: var(--brand-color);\n}\n\n.border-borderRadius {\n  border: 1px solid var(--slider-table-color);\n  border-radius: 5px;\n  border-collapse: none !important;\n}\n\n.ff-fixed-header {\n  position: sticky !important;\n  top: 0;\n  z-index: 99;\n  background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\ntbody tr.disabled-row {\n  opacity: 0.5;\n  cursor: not-allowed;\n}";
-styleInject(css_248z$Q);
+var css_248z$R = ".ff-fixed-header-table {\n  overflow-y: auto;\n}\n\n.ff-table-icon {\n  position: absolute;\n  top: 10px;\n  right: 0;\n  margin-right: 10px;\n  z-index: 100;\n  cursor: pointer;\n}\n\n.ff-table {\n  width: 100%;\n}\n.ff-table th,\n.ff-table td {\n  text-align: left;\n  font-size: 12px;\n  padding: 9px 8px;\n}\n.ff-table thead tr th {\n  border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-table thead tr th .ff-label-checkbox-container {\n  display: flex;\n  align-items: center;\n}\n.ff-table thead tr th .ff-label-checkbox-container .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table tbody tr .action-column {\n  opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n  padding-left: 10px;\n  opacity: 0;\n  display: flex;\n  justify-content: flex-end;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  transform: translateX(20px);\n}\n.ff-table tbody tr:hover {\n  background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container {\n  opacity: 1;\n  transform: translateX(0);\n}\n.ff-table tbody tr td {\n  position: relative;\n  color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n  cursor: pointer;\n}\n.ff-table tbody tr td .ff-data-checkbox-container {\n  display: flex;\n  align-items: center;\n}\n.ff-table tbody tr td .ff-data-checkbox-container .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table .primary-bg {\n  background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n  background-color: var(--slider-table-color);\n}\n.ff-table .default-bg {\n  background-color: transparent;\n}\n.ff-table .default-color {\n  color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n  color: var(--brand-color);\n}\n\n.border-borderRadius {\n  border: 1px solid var(--slider-table-color);\n  border-radius: 5px;\n  border-collapse: none !important;\n}\n\n.ff-fixed-header {\n  position: sticky !important;\n  top: 0;\n  z-index: 99;\n  background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\ntbody tr.disabled-row {\n  opacity: 0.5;\n  cursor: not-allowed;\n}";
+styleInject(css_248z$R);
 
 const isFunction$2 = functionToCheck => {
   return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
@@ -3350,11 +3421,11 @@ const Table$1 = ({
   });
 };
 
-var css_248z$P = ".ff-add-button-container {\n  position: relative;\n  border: none;\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  background-color: transparent;\n}\n.ff-add-button-container.ff-hovered-add-button--primary {\n  background-color: var(--hover-color);\n}\n.ff-add-button-container .ff-hovered-add-icon--primary svg path {\n  fill: var(--add-icon-hover-color);\n}\n.ff-add-button-container .ff-add-icon--primary svg path {\n  fill: var(--brand-color);\n}\n.ff-add-button-container .ff-add-button {\n  position: absolute;\n  border: none;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  background: none;\n}";
-styleInject(css_248z$P);
+var css_248z$Q = ".ff-add-button-container {\n  position: relative;\n  border: none;\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  background-color: transparent;\n}\n.ff-add-button-container.ff-hovered-add-button--primary {\n  background-color: var(--hover-color);\n}\n.ff-add-button-container .ff-hovered-add-icon--primary svg path {\n  fill: var(--add-icon-hover-color);\n}\n.ff-add-button-container .ff-add-icon--primary svg path {\n  fill: var(--brand-color);\n}\n.ff-add-button-container .ff-add-button {\n  position: absolute;\n  border: none;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  background: none;\n}";
+styleInject(css_248z$Q);
 
-var css_248z$O = ".ff-arrow-buttons-container {\n  position: absolute;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n}\n.ff-arrow-buttons-container.ff-down-right-top, .ff-arrow-buttons-container.ff-down-top {\n  height: 80px;\n  width: 52px;\n  transform: translateY(calc(-50% + 12px));\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--right, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--right {\n  top: 28px;\n  right: 2px;\n  animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--top, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--top {\n  top: 2px;\n  animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--down, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--down {\n  bottom: 2px;\n  animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right-top {\n  height: 52px;\n  width: 52px;\n  transform: translateY(-54%);\n}\n.ff-arrow-buttons-container.ff-right-top .ff-arrow-button--right {\n  top: 28px;\n  right: 2px;\n  animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right-top .ff-arrow-button--top {\n  top: 2px;\n  animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right {\n  height: 52px;\n  width: 52px;\n}\n.ff-arrow-buttons-container.ff-down-right .ff-arrow-button--right {\n  top: 0px;\n  right: 2px;\n  animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right .ff-arrow-button--down {\n  bottom: 2px;\n  animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-top {\n  height: 52px;\n  width: 24px;\n  transform: translateY(-54%);\n}\n.ff-arrow-buttons-container.ff-top .ff-arrow-button--top {\n  top: 2px;\n  animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right {\n  height: 24px;\n  width: 52px;\n}\n.ff-arrow-buttons-container.ff-right .ff-arrow-button--right {\n  right: 2px;\n  animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down {\n  height: 52px;\n  width: 24px;\n}\n.ff-arrow-buttons-container.ff-down .ff-arrow-button--down {\n  bottom: 2px;\n  animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container .ff-arrow-button {\n  background: var(--arrow-button-bg-color);\n  border: 0.5px solid var(--arrows-button-border-color);\n  padding: 0;\n  cursor: pointer;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  border-radius: 4px;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.3s ease;\n  position: absolute;\n}\n.ff-arrow-buttons-container .ff-arrow-button--top {\n  top: 0px;\n  left: 0;\n}\n.ff-arrow-buttons-container .ff-arrow-button--down {\n  bottom: 0px;\n  left: 0;\n}\n@keyframes slideTop {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  50% {\n    transform: translateY(-10px);\n    opacity: 0.5;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n@keyframes slideRight {\n  from {\n    transform: translateX(-20px);\n    opacity: 0;\n  }\n  50% {\n    transform: translateX(10px);\n    opacity: 0.5;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n@keyframes slideDown {\n  from {\n    transform: translateY(-20px);\n    opacity: 0;\n  }\n  50% {\n    transform: translateY(10px);\n    opacity: 0.5;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}";
-styleInject(css_248z$O);
+var css_248z$P = ".ff-arrow-buttons-container {\n  position: absolute;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n}\n.ff-arrow-buttons-container.ff-down-right-top, .ff-arrow-buttons-container.ff-down-top {\n  height: 80px;\n  width: 52px;\n  transform: translateY(calc(-50% + 12px));\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--right, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--right {\n  top: 28px;\n  right: 2px;\n  animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--top, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--top {\n  top: 2px;\n  animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--down, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--down {\n  bottom: 2px;\n  animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right-top {\n  height: 52px;\n  width: 52px;\n  transform: translateY(-54%);\n}\n.ff-arrow-buttons-container.ff-right-top .ff-arrow-button--right {\n  top: 28px;\n  right: 2px;\n  animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right-top .ff-arrow-button--top {\n  top: 2px;\n  animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right {\n  height: 52px;\n  width: 52px;\n}\n.ff-arrow-buttons-container.ff-down-right .ff-arrow-button--right {\n  top: 0px;\n  right: 2px;\n  animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right .ff-arrow-button--down {\n  bottom: 2px;\n  animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-top {\n  height: 52px;\n  width: 24px;\n  transform: translateY(-54%);\n}\n.ff-arrow-buttons-container.ff-top .ff-arrow-button--top {\n  top: 2px;\n  animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right {\n  height: 24px;\n  width: 52px;\n}\n.ff-arrow-buttons-container.ff-right .ff-arrow-button--right {\n  right: 2px;\n  animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down {\n  height: 52px;\n  width: 24px;\n}\n.ff-arrow-buttons-container.ff-down .ff-arrow-button--down {\n  bottom: 2px;\n  animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container .ff-arrow-button {\n  background: var(--arrow-button-bg-color);\n  border: 0.5px solid var(--arrows-button-border-color);\n  padding: 0;\n  cursor: pointer;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  border-radius: 4px;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.3s ease;\n  position: absolute;\n}\n.ff-arrow-buttons-container .ff-arrow-button--top {\n  top: 0px;\n  left: 0;\n}\n.ff-arrow-buttons-container .ff-arrow-button--down {\n  bottom: 0px;\n  left: 0;\n}\n@keyframes slideTop {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  50% {\n    transform: translateY(-10px);\n    opacity: 0.5;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n@keyframes slideRight {\n  from {\n    transform: translateX(-20px);\n    opacity: 0;\n  }\n  50% {\n    transform: translateX(10px);\n    opacity: 0.5;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n@keyframes slideDown {\n  from {\n    transform: translateY(-20px);\n    opacity: 0;\n  }\n  50% {\n    transform: translateY(10px);\n    opacity: 0.5;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}";
+styleInject(css_248z$P);
 
 const ArrowsButton = ({
   direction,
@@ -3491,8 +3562,8 @@ const AddButton = ({
   });
 };
 
-var css_248z$N = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-donut-chart-svg-container svg text:nth-of-type(1), .ff-status-item {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL, .ff-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-donut-chart-svg-container svg text:nth-of-type(3) {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-donut-chart-section {\n  display: flex;\n  align-items: center;\n  padding: 8px;\n}\n\n.ff-donut-chart-svg-container {\n  display: flex;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(3) {\n  font-weight: 500;\n}\n\n.ff-status-container {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.ff-status-item {\n  display: flex;\n  gap: 40px;\n  justify-content: space-between;\n  opacity: 1;\n}\n.ff-status-item.ff-highlighted {\n  opacity: 1;\n}\n.ff-status-item.ff-fade {\n  opacity: 10%;\n}\n.ff-status-item .ff-status-text {\n  font-weight: 500;\n  color: var(--status-skipped-text-color);\n}\n.ff-status-item .ff-status-details-script-count {\n  display: flex;\n  gap: 4px;\n  font-weight: 600;\n}\n.ff-status-item .ff-status-details-script-percentage {\n  font-weight: 400;\n  color: var(--brand2-color);\n}\n\n.ff-status-label {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.ff-status-details {\n  display: flex;\n  gap: 4px;\n}\n\n.ff-status-color {\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  opacity: 80%;\n}";
-styleInject(css_248z$N);
+var css_248z$O = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-donut-chart-svg-container svg text:nth-of-type(1), .ff-status-item {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL, .ff-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-donut-chart-svg-container svg text:nth-of-type(3) {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-donut-chart-section {\n  display: flex;\n  align-items: center;\n  padding: 8px;\n}\n\n.ff-donut-chart-svg-container {\n  display: flex;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(3) {\n  font-weight: 500;\n}\n\n.ff-status-container {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.ff-status-item {\n  display: flex;\n  gap: 40px;\n  justify-content: space-between;\n  opacity: 1;\n}\n.ff-status-item.ff-highlighted {\n  opacity: 1;\n}\n.ff-status-item.ff-fade {\n  opacity: 10%;\n}\n.ff-status-item .ff-status-text {\n  font-weight: 500;\n  color: var(--status-skipped-text-color);\n}\n.ff-status-item .ff-status-details-script-count {\n  display: flex;\n  gap: 4px;\n  font-weight: 600;\n}\n.ff-status-item .ff-status-details-script-percentage {\n  font-weight: 400;\n  color: var(--brand2-color);\n}\n\n.ff-status-label {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.ff-status-details {\n  display: flex;\n  gap: 4px;\n}\n\n.ff-status-color {\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  opacity: 80%;\n}";
+styleInject(css_248z$O);
 
 const calculateArc$4 = (x, y, radius, startAngle, endAngle) => {
   const startX = x + radius * Math.cos(startAngle);
@@ -3541,7 +3612,7 @@ const DonutChart = ({
   // Calculate angles and gaps
   const TOTAL_GAP_ANGLE = gapAngle * nonZeroValues.length;
   let remainingAngle = 2 * Math.PI - TOTAL_GAP_ANGLE;
-  let currentAngle = Math.PI / 2;
+  let currentAngle = -Math.PI / 2;
   const MIN_PERCENTAGE = 1;
   const MIN_ANGLE = MIN_PERCENTAGE / 100 * (2 * Math.PI);
   // Adjust for small angles
@@ -3573,7 +3644,7 @@ const DonutChart = ({
         strokeWidth: lineWidth,
         onMouseEnter: () => handleMouseEnter(normalizedStatus),
         onMouseLeave: handleMouseLeave,
-        strokeOpacity: 0.8
+        strokeOpacity: hoveredStatus === null || hoveredStatus === normalizedStatus ? 0.8 : 0.3
       }), hoveredStatus === normalizedStatus && jsxRuntime.jsx("path", {
         d: outerArcPath,
         fill: "none",
@@ -3589,6 +3660,8 @@ const DonutChart = ({
     const percentage = (statusData?.value || 0) / total * 100;
     return jsxRuntime.jsxs("div", {
       className: `ff-status-item ${hoveredStatus === null || hoveredStatus === statusKey ? 'ff-highlighted' : 'ff-fade'}`,
+      onMouseEnter: () => handleMouseEnter(statusKey),
+      onMouseLeave: handleMouseLeave,
       children: [jsxRuntime.jsxs("div", {
         className: "ff-status-label",
         children: [jsxRuntime.jsx("div", {
@@ -3845,8 +3918,8 @@ const useFileDropzone = options => {
   };
 };
 
-var css_248z$M = ".ff-file-dropzone-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n  padding: 16px 0;\n  border-radius: 8px;\n  background: var(--file-dropzone-default-color);\n  border: 1px dashed var(--brand-color);\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n  gap: 8px;\n  transition: background-color 0.2s ease;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone:hover, .ff-file-dropzone-wrapper .ff-file-dropzone--active {\n  background-color: var(--file-dropzone-selected-color);\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__icon {\n  height: 80px;\n  width: 80px;\n  display: grid;\n  place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn {\n  margin: 0 auto;\n  position: relative;\n  font-weight: 600;\n  line-height: 15px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 640px;\n  max-height: 300px;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n  padding: 2px;\n  -ms-overflow-style: none;\n  scrollbar-width: thin;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper ::-webkit-scrollbar {\n  width: 2px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px;\n  border-radius: 4px;\n  background-color: var(--file-details-bg);\n  box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);\n  overflow: hidden;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  width: 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}";
-styleInject(css_248z$M);
+var css_248z$N = ".ff-file-dropzone-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n  padding: 16px 0;\n  border-radius: 8px;\n  background: var(--file-dropzone-default-color);\n  border: 1px dashed var(--brand-color);\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n  gap: 8px;\n  transition: background-color 0.2s ease;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone:hover, .ff-file-dropzone-wrapper .ff-file-dropzone--active {\n  background-color: var(--file-dropzone-selected-color);\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__icon {\n  height: 80px;\n  width: 80px;\n  display: grid;\n  place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn {\n  margin: 0 auto;\n  position: relative;\n  font-weight: 600;\n  line-height: 15px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  max-height: 300px;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n  padding: 2px;\n  -ms-overflow-style: none;\n  scrollbar-width: thin;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper ::-webkit-scrollbar {\n  width: 2px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px;\n  border-radius: 4px;\n  background-color: var(--file-details-bg);\n  box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);\n  overflow: hidden;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  width: 87%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info .ff-file-info__icon {\n  display: grid;\n  place-items: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  justify-content: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper__name {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: block;\n  color: var(--text-color);\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-replace, .ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-remove {\n  height: 24px;\n  width: 24px;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n}";
+styleInject(css_248z$N);
 
 const Dropzone = ({
   icon,
@@ -8653,8 +8726,8 @@ const Forms = ({
 };
 const ForwardedForms = /*#__PURE__*/React.forwardRef(Forms);
 
-var css_248z$L = ".fontXs, .ff-input-with-dropdown-container .ff-helper-text {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-input-with-dropdown-container {\n  display: flex;\n  flex-direction: column;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown {\n  display: flex;\n  border: 1px solid var(--input-default-border-color);\n  border-radius: 4px;\n  padding: 0;\n  position: relative;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-input-with-dropdown--left {\n  display: flex;\n  flex-direction: row-reverse;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-input-with-dropdown--right {\n  display: flex;\n  flex-direction: row;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-input--left-dropdown {\n  width: 698px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n  position: absolute;\n  z-index: 9;\n  color: var(--input-default-border-color);\n  top: 6px;\n  left: 7px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label .ff-required-asterisk {\n  color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--filled {\n  color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--no-hover {\n  color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--error {\n  color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n  position: relative;\n  padding: 6px 7px;\n  line-height: 18px;\n  border: none;\n  outline: none;\n  border-right: 1px solid var(--input-default-border-color);\n  border-radius: 4px 0 0 4px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-outer-spin-button, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::placeholder {\n  opacity: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input:disabled {\n  cursor: not-allowed;\n  background: transparent;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input--left-dropdown::placeholder {\n  opacity: 1;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--no-hover {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown {\n  min-width: 120px;\n  border: none;\n  outline: none;\n  margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown:disabled {\n  cursor: not-allowed;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown--left {\n  min-width: 94px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .seperatorline {\n  height: 26px;\n  margin-top: 3px;\n  border-right: 0.5px solid var(--brand-color);\n  flex-shrink: 0;\n  border-radius: 2px;\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown {\n  border-color: var(--brand-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--filled {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--disabled {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label {\n  color: var(--input-hover-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--filled {\n  color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--disabled {\n  color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--error {\n  color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input {\n  border-color: var(--brand-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--filled {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--disabled {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown {\n  border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label {\n  top: -9px;\n  background-color: var(--input-label-bg-color);\n  padding: 0px 2px;\n  color: var(--input-active-text-color);\n  line-height: 15px;\n  font-size: 10px !important;\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label--error {\n  color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input {\n  border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input::placeholder {\n  opacity: 1;\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container {\n  border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n  top: -9px;\n  background-color: var(--input-label-bg-color);\n  padding: 0px 2px;\n  line-height: 15px;\n  font-size: 10px !important;\n}\n.ff-input-with-dropdown-container--filled span {\n  font-size: 8px;\n}\n.ff-input-with-dropdown-container--filled .required-asterisk {\n  color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-helper-text {\n  color: var(--input-error-text-color);\n  padding: 0 11px;\n}";
-styleInject(css_248z$L);
+var css_248z$M = ".fontXs, .ff-input-with-dropdown-container .ff-helper-text {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-input-with-dropdown-container {\n  display: flex;\n  flex-direction: column;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown {\n  display: flex;\n  border: 1px solid var(--input-default-border-color);\n  border-radius: 4px;\n  padding: 0;\n  position: relative;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-input-with-dropdown--left {\n  display: flex;\n  flex-direction: row-reverse;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-input-with-dropdown--right {\n  display: flex;\n  flex-direction: row;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-input--left-dropdown {\n  width: 698px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n  position: absolute;\n  z-index: 9;\n  color: var(--input-default-border-color);\n  top: 6px;\n  left: 7px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label .ff-required-asterisk {\n  color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--filled {\n  color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--no-hover {\n  color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--error {\n  color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n  position: relative;\n  padding: 6px 7px;\n  line-height: 18px;\n  border: none;\n  outline: none;\n  border-right: 1px solid var(--input-default-border-color);\n  border-radius: 4px 0 0 4px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-outer-spin-button, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::placeholder {\n  opacity: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input:disabled {\n  cursor: not-allowed;\n  background: transparent;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input--left-dropdown::placeholder {\n  opacity: 1;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--no-hover {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown {\n  min-width: 120px;\n  border: none;\n  outline: none;\n  margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown:disabled {\n  cursor: not-allowed;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown--left {\n  min-width: 94px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .seperatorline {\n  height: 26px;\n  margin-top: 3px;\n  border-right: 0.5px solid var(--brand-color);\n  flex-shrink: 0;\n  border-radius: 2px;\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown {\n  border-color: var(--brand-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--filled {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--disabled {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label {\n  color: var(--input-hover-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--filled {\n  color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--disabled {\n  color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--error {\n  color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input {\n  border-color: var(--brand-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--filled {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--disabled {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown {\n  border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label {\n  top: -9px;\n  background-color: var(--input-label-bg-color);\n  padding: 0px 2px;\n  color: var(--input-active-text-color);\n  line-height: 15px;\n  font-size: 10px !important;\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label--error {\n  color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input {\n  border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input::placeholder {\n  opacity: 1;\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container {\n  border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n  top: -9px;\n  background-color: var(--input-label-bg-color);\n  padding: 0px 2px;\n  line-height: 15px;\n  font-size: 10px !important;\n}\n.ff-input-with-dropdown-container--filled span {\n  font-size: 8px;\n}\n.ff-input-with-dropdown-container--filled .required-asterisk {\n  color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-helper-text {\n  color: var(--input-error-text-color);\n  padding: 0 11px;\n}";
+styleInject(css_248z$M);
 
 const InputWithDropdown = ({
   name = '',
@@ -8759,8 +8832,8 @@ const InputWithDropdown = ({
   });
 };
 
-var css_248z$K = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-radio-wrapper .ff-radio {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-radio-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-radio-wrapper .ff-radio {\n  position: relative;\n  color: var(--text-color);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input {\n  display: none;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom {\n  box-sizing: content-box;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 1px solid var(--radio-button-border);\n  position: relative;\n  margin-right: 8px;\n  transition: border-color background-color;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::before {\n  content: \"\";\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: #fbfdff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  transition: background-color 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::after {\n  content: \"\";\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: 4px solid #f7edff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom {\n  border: 1px solid var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::before {\n  background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::after {\n  opacity: 1;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom {\n  border-color: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom::before {\n  background: var(--brand-color);\n  height: 12px;\n  width: 12px;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom {\n  border: 1px solid var(--radio-button-border);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::before {\n  background: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::after {\n  border: 4px solid var(--radio-button-hover);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom {\n  border-color: var(--brand-color);\n  background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom::before {\n  background: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio--disabled {\n  cursor: default;\n}\n.ff-radio-wrapper .ff-radio--disabled .ff-radio-custom {\n  opacity: 0.5;\n}";
-styleInject(css_248z$K);
+var css_248z$L = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-radio-wrapper .ff-radio {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-radio-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-radio-wrapper .ff-radio {\n  position: relative;\n  color: var(--text-color);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input {\n  display: none;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom {\n  box-sizing: content-box;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 1px solid var(--radio-button-border);\n  position: relative;\n  margin-right: 8px;\n  transition: border-color background-color;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::before {\n  content: \"\";\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: #fbfdff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  transition: background-color 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::after {\n  content: \"\";\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: 4px solid #f7edff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom {\n  border: 1px solid var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::before {\n  background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::after {\n  opacity: 1;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom {\n  border-color: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom::before {\n  background: var(--brand-color);\n  height: 12px;\n  width: 12px;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom {\n  border: 1px solid var(--radio-button-border);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::before {\n  background: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::after {\n  border: 4px solid var(--radio-button-hover);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom {\n  border-color: var(--brand-color);\n  background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom::before {\n  background: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio--disabled {\n  cursor: default;\n}\n.ff-radio-wrapper .ff-radio--disabled .ff-radio-custom {\n  opacity: 0.5;\n}";
+styleInject(css_248z$L);
 
 const RadioButton = ({
   label,
@@ -8800,8 +8873,8 @@ const RadioButton = ({
   });
 };
 
-var css_248z$J = ".ff-radio-group {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n}\n\n.ff-radio-label-wrapper {\n  position: relative;\n  top: 2px;\n}\n\n.ff-required-asterisk {\n  color: var(--input-error-text-color);\n}";
-styleInject(css_248z$J);
+var css_248z$K = ".ff-radio-group {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n}\n\n.ff-radio-label-wrapper {\n  position: relative;\n  top: 2px;\n}\n\n.ff-required-asterisk {\n  color: var(--input-error-text-color);\n}";
+styleInject(css_248z$K);
 
 const RadioGroup = ({
   options,
@@ -8837,8 +8910,8 @@ const RadioGroup = ({
   });
 };
 
-var css_248z$I = ".ff-mini-modal-overlay {\n  position: fixed;\n  inset: 0;\n  width: 100vw;\n  height: 100vh;\n}\n\n.ff-mini-edit-modal-container {\n  width: fit-content;\n  padding: 0;\n  position: absolute;\n  visibility: hidden;\n}\n.ff-mini-edit-modal-container.modalVisible {\n  visibility: visible;\n}\n.ff-mini-edit-modal-container.animatedModal {\n  animation: slideDown 0.5s ease, opacity 0.5s ease;\n}\n.ff-mini-edit-modal-container .popover-arrow {\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  z-index: 102;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top {\n  bottom: 100%;\n  left: 30px;\n  border-width: 0 10px 10px 10px;\n  padding: 0 3px 0 0;\n  border-color: transparent transparent var(--ff-mini-modal-border) transparent;\n  filter: drop-shadow(0 -1px 1px var(--ff-mini-modal-arrow-shadow));\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top::before {\n  content: \"\";\n  position: absolute;\n  width: 3px;\n  height: 4px;\n  border-radius: 50px;\n  background-color: var(--ff-mini-modal-border);\n  top: -0.5px;\n  left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left {\n  left: -15px;\n  border-width: 10px 10px 10px 0;\n  border-color: transparent var(--ff-mini-modal-border) transparent transparent;\n  filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));\n  padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left::before {\n  content: \"\";\n  position: absolute;\n  width: 4px;\n  height: 3px;\n  border-radius: 50px;\n  background-color: var(--ff-mini-modal-border);\n  top: 0;\n  left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom {\n  top: 100%;\n  left: 30px;\n  border-width: 10px 10px 0 10px;\n  border-color: var(--ff-mini-modal-border) transparent transparent transparent;\n  filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));\n  padding: 0 3px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom::before {\n  content: \"\";\n  position: absolute;\n  width: 3px;\n  height: 3px;\n  border-radius: 50px;\n  background-color: var(--ff-mini-modal-border);\n  top: -2px;\n  left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right {\n  right: -10px;\n  top: 66px;\n  border-width: 10px 0 10px 10px;\n  border-color: transparent transparent transparent var(--ff-mini-modal-border);\n  filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));\n  padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right::before {\n  content: \"\";\n  position: absolute;\n  width: 3px;\n  height: 3px;\n  border-radius: 50px;\n  background-color: var(--ff-mini-modal-border);\n  top: 0;\n  left: -2px;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-top-arrow {\n  top: 10%;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-middle-arrow {\n  top: 45%;\n}\n.ff-mini-edit-modal-container .wrapped-div {\n  height: 35px;\n  background-color: transparent;\n  outline: 8px solid var(--ff-mini-modal-border);\n  outline-offset: -8px;\n  position: absolute;\n  top: -34px;\n  border-radius: 7px 7px 0 0;\n}\n.ff-mini-edit-modal-container .wrapped-div::before, .ff-mini-edit-modal-container .wrapped-div::after {\n  position: absolute;\n  content: \"\";\n  width: 13px;\n  height: 13px;\n  background: transparent;\n  border-radius: 50%;\n  bottom: 0;\n  box-shadow: 8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .wrapped-div::before {\n  left: -13px;\n  clip-path: polygon(100% 100%, 110% 45%, 0% 70%, 0% 100%);\n}\n.ff-mini-edit-modal-container .wrapped-div::after {\n  right: -13px;\n  clip-path: polygon(-5% 100%, 0% 40%, 100% 70%, 100% 100%);\n  box-shadow: -8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .mini-edit-modal {\n  background: var(--ff-mini-modal-border);\n  position: relative;\n  max-height: fit-content;\n  padding: 4px;\n  width: 100%;\n  margin: 0 0 0 -5px;\n  height: 100%;\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-wrapper-shadow {\n  box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-arrow-shadow {\n  box-shadow: 0px 0px 16px 0px var(--ff-mini-modal-arrow-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal header {\n  border-radius: 4px 4px 0 0;\n}\n.ff-mini-edit-modal-container .mini-edit-modal footer {\n  border-radius: 0 0 4px 4px;\n}\n.ff-mini-edit-modal-container .mini-edit-modal .modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 5px;\n  background-color: var(--ff-mini-modal-footer-background);\n  height: 24px;\n  padding: 0 10px 0 0;\n  transition: transform 0.3s ease-in-out;\n}\n@keyframes slideDown {\n  0% {\n    transform: translateY(-50px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n.ff-mini-modal-buttons-flex {\n  display: flex;\n}\n\n.ff-mini-modal-gap-10 {\n  gap: 10px;\n}\n\n.ff-mini-edit-model-icon {\n  color: var(--ff-mini-modal-box-shadow);\n  border: 2px solid var(--ff-mini-modal-box-shadow);\n  border-radius: 4px;\n}";
-styleInject(css_248z$I);
+var css_248z$J = ".ff-mini-modal-overlay {\n  position: fixed;\n  inset: 0;\n  width: 100vw;\n  height: 100vh;\n}\n\n.ff-mini-edit-modal-container {\n  width: fit-content;\n  padding: 0;\n  position: absolute;\n  visibility: hidden;\n}\n.ff-mini-edit-modal-container.modalVisible {\n  visibility: visible;\n}\n.ff-mini-edit-modal-container.animatedModal {\n  animation: slideDown 0.5s ease, opacity 0.5s ease;\n}\n.ff-mini-edit-modal-container .popover-arrow {\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  z-index: 102;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top {\n  bottom: 100%;\n  left: 30px;\n  padding: 0 3px 0 0;\n  border-color: transparent transparent var(--ff-mini-modal-border) transparent;\n  filter: drop-shadow(0 -1px 1px var(--ff-mini-modal-arrow-shadow));\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top::before {\n  content: \"\";\n  position: absolute;\n  width: 3px;\n  height: 4px;\n  border-radius: 50px;\n  background-color: var(--ff-mini-modal-border);\n  top: -0.5px;\n  left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left {\n  left: -15px;\n  border-color: transparent var(--ff-mini-modal-border) transparent transparent;\n  filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));\n  padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left::before {\n  content: \"\";\n  position: absolute;\n  width: 4px;\n  height: 3px;\n  border-radius: 50px;\n  background-color: var(--ff-mini-modal-border);\n  top: 0;\n  left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom {\n  top: 100%;\n  left: 30px;\n  border-color: var(--ff-mini-modal-border) transparent transparent transparent;\n  filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));\n  padding: 0 3px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom::before {\n  content: \"\";\n  position: absolute;\n  width: 3px;\n  height: 3px;\n  border-radius: 50px;\n  background-color: var(--ff-mini-modal-border);\n  top: -2px;\n  left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right {\n  right: -10px;\n  top: 66px;\n  border-color: transparent transparent transparent var(--ff-mini-modal-border);\n  filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));\n  padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right::before {\n  content: \"\";\n  position: absolute;\n  width: 3px;\n  height: 3px;\n  border-radius: 50px;\n  background-color: var(--ff-mini-modal-border);\n  top: 0;\n  left: -2px;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-top-arrow {\n  top: 10%;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-middle-arrow {\n  top: 45%;\n}\n.ff-mini-edit-modal-container .wrapped-div {\n  height: 35px;\n  background-color: transparent;\n  outline: 8px solid var(--ff-mini-modal-border);\n  outline-offset: -8px;\n  position: absolute;\n  top: -34px;\n  border-radius: 7px 7px 0 0;\n}\n.ff-mini-edit-modal-container .wrapped-div::before, .ff-mini-edit-modal-container .wrapped-div::after {\n  position: absolute;\n  content: \"\";\n  width: 13px;\n  height: 13px;\n  background: transparent;\n  border-radius: 50%;\n  bottom: 0;\n  box-shadow: 8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .wrapped-div::before {\n  left: -13px;\n  clip-path: polygon(100% 100%, 110% 45%, 0% 70%, 0% 100%);\n}\n.ff-mini-edit-modal-container .wrapped-div::after {\n  right: -13px;\n  clip-path: polygon(-5% 100%, 0% 40%, 100% 70%, 100% 100%);\n  box-shadow: -8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .mini-edit-modal {\n  background: var(--ff-mini-modal-border);\n  position: relative;\n  max-height: fit-content;\n  padding: 4px;\n  width: 100%;\n  margin: 0 0 0 -5px;\n  height: 100%;\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-wrapper-shadow {\n  box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-arrow-shadow {\n  box-shadow: 0px 0px 16px 0px var(--ff-mini-modal-arrow-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal header {\n  border-radius: 4px 4px 0 0;\n}\n.ff-mini-edit-modal-container .mini-edit-modal footer {\n  border-radius: 0 0 4px 4px;\n}\n.ff-mini-edit-modal-container .mini-edit-modal .modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 5px;\n  background-color: var(--ff-mini-modal-footer-background);\n  height: 24px;\n  padding: 0 10px 0 0;\n  transition: transform 0.3s ease-in-out;\n}\n@keyframes slideDown {\n  0% {\n    transform: translateY(-50px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n.ff-mini-modal-buttons-flex {\n  display: flex;\n}\n\n.ff-mini-modal-gap-10 {\n  gap: 10px;\n}\n\n.ff-mini-edit-model-icon {\n  color: var(--ff-mini-modal-box-shadow);\n  border: 2px solid var(--ff-mini-modal-box-shadow);\n  border-radius: 4px;\n}";
+styleInject(css_248z$J);
 
 const MiniModal = /*#__PURE__*/React.forwardRef(({
   anchorRef,
@@ -8861,6 +8934,7 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
   extraLeftSpace,
   isIconModel,
   wrapperProperties,
+  arrowProperties,
   arrowZIndex,
   overlay,
   outSideClick
@@ -8871,6 +8945,20 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
   });
   const [isVisible, setIsVisible] = React.useState(false);
   const modalRef = React.useRef(null);
+  const {
+    width: modalWidth,
+    height: modalHeight,
+    borderRadius: modalBorderRadius = 4,
+    zIndex: modalZIndex = 99,
+    boxShadow: modalBoxShadow,
+    left: modalLeft,
+    top: modalTop
+  } = modalProperties || {};
+  const {
+    left: popOverLeft,
+    top: popOverTop,
+    size: popOverSize = 10
+  } = arrowProperties || {};
   // Function to calculate available space
   const getAvailableSpace = rect => {
     const {
@@ -9004,13 +9092,6 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
       window.removeEventListener('scroll', calculatePosition);
     };
   }, [calculatePosition]);
-  const {
-    width: modalWidth,
-    height: modalHeight,
-    borderRadius: modalBorderRadius = 4,
-    zIndex: modalZIndex = 99,
-    boxShadow: modalBoxShadow
-  } = modalProperties || {};
   const {
     width: wrapperWidth = 35,
     zIndex: wrapperZIndex = 101,
@@ -9039,13 +9120,16 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
         animatedModal: isAnimated
       }),
       style: {
-        top: `${calculatedModalTop}px`,
-        left: `${calculatedModalLeft}px`
+        top: `${modalTop ?? calculatedModalTop}px`,
+        left: `${modalLeft ?? calculatedModalLeft}px`
       },
       children: [isPopOver && jsxRuntime.jsx("div", {
         className: `popover-arrow popover-arrow-${modalPosition === 'right' ? 'left' : modalPosition === 'top' ? 'bottom' : modalPosition === 'left' ? 'right' : 'top'} ${getArrowClassName()}`,
         style: {
-          zIndex: `${arrowZIndex}`
+          zIndex: `${arrowZIndex}`,
+          top: `${popOverTop && popOverTop}px`,
+          left: `${popOverLeft && popOverLeft}px`,
+          borderWidth: `${modalPosition === 'right' ? `${popOverSize}px ${popOverSize}px ${popOverSize}px 0` : modalPosition === 'top' ? `${popOverSize}px ${popOverSize}px 0 ${popOverSize}px` : modalPosition === 'left' ? `${popOverSize}px 0 ${popOverSize}px ${popOverSize}px` : `0 ${popOverSize}px ${popOverSize}px ${popOverSize}px`}`
         }
       }), isWrapped && jsxRuntime.jsx("div", {
         className: 'wrapped-div',
@@ -9101,8 +9185,8 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
   }), document.body);
 });
 
-var css_248z$H = "html,\n* {\n  font-family: \"Open Sans\";\n}\n\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\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}";
-styleInject(css_248z$H);
+var css_248z$I = ".tree-table-space-block {\n  display: inline-block;\n  width: 20px;\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  display: table-row;\n}\n\n.btn-toggle.expand {\n  cursor: pointer;\n}\n.btn-toggle.is-close {\n  background: #f1f1f1;\n  border: 1px solid transparent;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before {\n  display: none;\n}\n.btn-toggle::after {\n  display: none;\n}\n\n.tree-table-wrap {\n  width: 100%;\n}\n\nthead {\n  position: sticky;\n  top: 12px;\n}\n\ntbody {\n  overflow: scroll;\n}\n\n.tree-table {\n  border: 1px solid #f1f1f1;\n  table-layout: fixed;\n  width: 100%;\n  border-collapse: collapse;\n  overflow: scroll;\n}\n.tree-table tr .table-tree-row-action {\n  display: none;\n}\n.tree-table tr:hover {\n  background-color: var(--hover-color);\n}\n.tree-table tr:hover .table-tree-row-action {\n  display: inline-flex;\n  align-items: center;\n}\n.tree-table th {\n  color: var(--brand-color);\n  text-align: center;\n  padding: 10px 0;\n  background: var(--slider-table-color);\n  font-size: 13px;\n  width: 400px;\n  text-align: left;\n}\n.tree-table th:first-child {\n  width: 400px;\n  position: sticky;\n  left: 0;\n}\n.tree-table td {\n  font-size: 14px;\n  color: var(--brand-color);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  text-align: left;\n  height: 32px;\n}\n.tree-table td:first-child {\n  overflow: initial;\n  width: 400px;\n  position: sticky;\n  left: 0;\n  background-color: white;\n}\n.tree-table td:first-child:hover {\n  background-color: var(--hover-color);\n}\n.tree-table td .tree-table-space-block {\n  border: 1px solid transparent;\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  line-height: 16px;\n  text-align: center;\n  vertical-align: top;\n  font-size: 19px;\n  position: relative;\n  box-sizing: border-box;\n  margin-top: 7px;\n  border-radius: 50%;\n}\n.tree-table td .tree-table-space-block:first-child {\n  margin-left: 7px;\n}\n.tree-table td .tree-table-space-block.btn-toggle {\n  position: relative;\n  cursor: pointer;\n  width: 22px;\n  height: 22px;\n  z-index: 12;\n}\n.tree-table td .tree-table-space-block.btn-toggle::before {\n  display: none;\n}\n.tree-table td .tree-table-space-block.last-block::before {\n  display: none;\n}\n.tree-table td .tree-table-space-block.last-block::after {\n  position: absolute;\n  content: \"\";\n  width: 12px;\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n  left: -10px;\n}\n.tree-table td .tree-table-space-block.no-folder {\n  width: 8px;\n}\n.tree-table td .tree-table-space-block.no-folder::after {\n  position: absolute;\n  content: \"\";\n  width: 18px;\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n  left: -10px;\n}\n.tree-table td .tree-table-space-block:not(.last-block)::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 40px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -12px;\n  z-index: -1;\n}\n\n.tree-table-td-content {\n  display: inline-flex;\n  align-items: center;\n  padding: 7px;\n  font-size: 12px;\n  font-family: \"Poppins\";\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  visibility: visible;\n}\n\n.tree-row-expanded svg,\n.tree-row-collapsed svg {\n  height: 12px;\n  width: 12px;\n}\n.tree-row-expanded svg path,\n.tree-row-collapsed svg path {\n  fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n  transform: rotate(-90deg);\n  transition: all;\n}";
+styleInject(css_248z$I);
 
 // Helper to render spaces for levels
 const renderSpaces = level => Array.from({
@@ -9128,14 +9212,13 @@ const TableCell = /*#__PURE__*/React.memo(({
   col,
   node,
   level,
-  isExpanded,
   selected,
   select,
   onCheckBoxChange,
   onToggleExpand
 }) => jsxRuntime.jsxs("td", {
   children: [col.isTree && renderSpaces(level + 1), col.isTree && jsxRuntime.jsx("span", {
-    className: `tree-table-space-block last-block  ${isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.folder ? '' : 'no-folder'}`,
+    className: `tree-table-space-block last-block  ${node.isExpanded ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.folder ? '' : 'no-folder'}`,
     onClick: () => onToggleExpand(node),
     children: node.folder && jsxRuntime.jsx(SvgArrowsDownIcon, {})
   }), jsxRuntime.jsxs("span", {
@@ -9159,7 +9242,6 @@ const TableRow = /*#__PURE__*/React.memo(({
   node,
   level,
   columnsData,
-  isExpanded,
   selected,
   select,
   onRowClick,
@@ -9173,7 +9255,6 @@ const TableRow = /*#__PURE__*/React.memo(({
     col: col,
     node: node,
     level: level,
-    isExpanded: isExpanded,
     selected: selected,
     select: select,
     onCheckBoxChange: onCheckBoxChange,
@@ -9214,7 +9295,6 @@ const TableHead = /*#__PURE__*/React.memo(({
 const TableBody = /*#__PURE__*/React.memo(({
   flattenedTreeData,
   columnsData,
-  expandedNodes,
   selected,
   select,
   onRowClick,
@@ -9225,12 +9305,10 @@ const TableBody = /*#__PURE__*/React.memo(({
     node,
     level
   }) => {
-    const isExpanded = expandedNodes.includes(node?.id);
     return jsxRuntime.jsx(TableRow, {
       node: node,
       level: level,
       columnsData: columnsData,
-      isExpanded: isExpanded,
       selected: selected,
       select: select,
       onRowClick: onRowClick,
@@ -9247,14 +9325,13 @@ const TreeTable = ({
   select = null,
   onChange,
   onClick,
-  expandedNodes = [],
   onExpand
 }) => {
-  const handleToggleExpand = React.useCallback(node => onExpand?.(!expandedNodes.includes(node?.id), node?.id), [expandedNodes, onExpand]);
+  const handleToggleExpand = React.useCallback(node => onExpand?.(true, node?.id), [onExpand]);
   const handleCheckBoxChange = React.useCallback((type, node) => {
     const nodeId = node.id;
     if (type === 'radio') {
-      onChange?.([nodeId]);
+      onChange?.('true', [nodeId]);
     } else {
       let updatedSelected = [...selected];
       if (!updatedSelected.includes(nodeId)) {
@@ -9264,7 +9341,7 @@ const TreeTable = ({
         const childIds = getAllChildIds(nodeId, treeData);
         updatedSelected = updatedSelected.filter(id => !childIds.includes(id));
       }
-      onChange?.(updatedSelected);
+      onChange?.('true', updatedSelected);
     }
   }, [selected, treeData, onChange]);
   const handleRowClick = React.useCallback((e, node) => onClick?.(e, node), [onClick]);
@@ -9277,7 +9354,6 @@ const TreeTable = ({
       }), jsxRuntime.jsx(TableBody, {
         flattenedTreeData: treeData,
         columnsData: columnsData,
-        expandedNodes: expandedNodes,
         selected: selected,
         select: select,
         onRowClick: handleRowClick,
@@ -9288,8 +9364,8 @@ const TreeTable = ({
   });
 };
 
-var css_248z$G = ":root {\n  --tooltip-bg-color: #1e161f;\n  --status-approved-text-color: #016102;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-text-color: #3c3838;\n  --status-approved-bg-color: #c6efcd;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-warning-bg-color: #fae2c6;\n  --status-skipped-bg-color: #c4c3c3;\n  --brand-color: #71347b;\n  --icons-default-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --default-color: #747474;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --system-color--error: #c50303;\n  --hover-color: #f7ebff;\n  --brand2-color: #610b86;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --description-text-color: #d9d9d9;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --text-color: #1e161f;\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --error-light: #e42525;\n  --tabs-label-default-color: tabs-label-default-color;\n  --tabs-label-active-color: tabs-label-active-color;\n  --tabs-border-color: tabs-border-color;\n  --tabs-bg-color: tabs-bg-color;\n  --tab-bg-color: tab-bg-color;\n  --toggle-button-bg-color: #ffffff;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-strip-color: #cfd1e2;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --toggle-strip-color: #cfd1e2;\n  --add-icon-hover-color: #431b4a;\n  --arrows-button-border-color: #ded1e5;\n  --arrow-button-bg-color: #ffffff;\n  --text-bg-highlight: #f5fb00;\n  --slider-table-color: #efe1f9;\n  --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-tabs-container {\n  box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row--default {\n  display: flex;\n  gap: 8px;\n  border: 1px solid var(--tabs-border-color);\n  border-radius: 8px 8px 0 0;\n  padding: 7px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n  border: none;\n  background: none;\n  padding: 0 4px;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-label {\n  padding-bottom: 4px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar {\n  width: 100%;\n  border-radius: 2px 2px 0 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar--active {\n  border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ff-tabs-container .ff-tab-row--capsule {\n  display: flex;\n  gap: 8px;\n  border: 1px solid var(--tabs-border-color);\n  border-radius: 8px;\n  padding: 3px 4px;\n  background-color: var(--tabs-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule {\n  background: transparent;\n  border: none;\n  padding: 3px 4px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule.active {\n  background-color: var(--tab-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule .ff-tab-bar {\n  display: none;\n}\n.ff-tabs-container .ff-tab-row--no-border {\n  border: none;\n}\n.ff-tabs-container .ff-tab-content {\n  width: inherit;\n}";
-styleInject(css_248z$G);
+var css_248z$H = ":root {\n  --tooltip-bg-color: #1e161f;\n  --status-approved-text-color: #016102;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-text-color: #3c3838;\n  --status-approved-bg-color: #c6efcd;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-warning-bg-color: #fae2c6;\n  --status-skipped-bg-color: #c4c3c3;\n  --brand-color: #71347b;\n  --icons-default-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --default-color: #747474;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --system-color--error: #c50303;\n  --hover-color: #f7ebff;\n  --brand2-color: #610b86;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --description-text-color: #d9d9d9;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --text-color: #1e161f;\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --error-light: #e42525;\n  --tabs-label-default-color: tabs-label-default-color;\n  --tabs-label-active-color: tabs-label-active-color;\n  --tabs-border-color: tabs-border-color;\n  --tabs-bg-color: tabs-bg-color;\n  --tab-bg-color: tab-bg-color;\n  --toggle-button-bg-color: #ffffff;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-strip-color: #cfd1e2;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --toggle-strip-color: #cfd1e2;\n  --add-icon-hover-color: #431b4a;\n  --arrows-button-border-color: #ded1e5;\n  --arrow-button-bg-color: #ffffff;\n  --text-bg-highlight: #f5fb00;\n  --slider-table-color: #efe1f9;\n  --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-tabs-container {\n  box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row--default {\n  display: flex;\n  gap: 8px;\n  border: 1px solid var(--tabs-border-color);\n  border-radius: 8px 8px 0 0;\n  padding: 7px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n  border: none;\n  background: none;\n  padding: 0 4px;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-label {\n  padding-bottom: 4px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar {\n  width: 100%;\n  border-radius: 2px 2px 0 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar--active {\n  border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ff-tabs-container .ff-tab-row--capsule {\n  display: flex;\n  gap: 8px;\n  border: 1px solid var(--tabs-border-color);\n  border-radius: 8px;\n  padding: 3px 4px;\n  background-color: var(--tabs-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule {\n  background: transparent;\n  border: none;\n  padding: 3px 4px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule.active {\n  background-color: var(--tab-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule .ff-tab-bar {\n  display: none;\n}\n.ff-tabs-container .ff-tab-row--no-border {\n  border: none;\n}\n.ff-tabs-container .ff-tab-content {\n  width: inherit;\n}";
+styleInject(css_248z$H);
 
 const Tabs = ({
   variant = 'default',
@@ -9334,8 +9410,8 @@ const Tabs = ({
   });
 };
 
-var css_248z$F = ".ff-highlight-bg {\n  background-color: var(--text-bg-highlight);\n}";
-styleInject(css_248z$F);
+var css_248z$G = ".ff-highlight-bg {\n  background-color: var(--text-bg-highlight);\n}";
+styleInject(css_248z$G);
 
 // Function to escape special characters in the search term
 const escapeRegExp = text => {
@@ -9358,8 +9434,8 @@ const HighlightText = ({
   });
 };
 
-var css_248z$E = ".fontXs, .ff-search-container .ff-search-input {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-search-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-search-container .ff-search-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 4px;\n}\n.ff-search-container .ff-search-icon:hover {\n  background-color: var(--ff-search-field-hover-color);\n}\n.ff-search-container .ff-search-icon .ff-icon-container svg path {\n  fill: var(--brand-color);\n}\n.ff-search-container .ff-search-input {\n  border: none;\n  color: var(--tooltip-bg-color);\n  line-height: 12px;\n  visibility: hidden;\n  transition: width 0.4s ease;\n}\n.ff-search-container .ff-search-input:focus {\n  outline: none;\n  border: none;\n}\n.ff-search-container .ff-search-input:hover {\n  border: none;\n}\n.ff-search-container.disabled {\n  opacity: 0.5;\n}\n.ff-search-container.expanded {\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-search-icon:hover {\n  background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-vertical-line {\n  height: 8px;\n  width: 1px;\n  border-radius: 1px;\n  background-color: var(--border-color);\n}\n.ff-search-container.expanded .ff-search-input {\n  visibility: visible;\n  margin-left: 4px;\n}\n.ff-search-container.expanded .ff-search-input::placeholder {\n  color: var(--ff-search-filed-placeholder-text);\n}\n.ff-search-container.expanded .ff-search-icon {\n  border: none;\n  cursor: default;\n  margin-right: 4px;\n}\n.ff-search-container.expanded .ff-search-clear-button {\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  width: 22px;\n  padding-top: 1px;\n}\n.ff-search-container.expanded .ff-search-close-icon {\n  margin: 4px;\n  cursor: pointer;\n}\n.ff-search-container.expanded .ff-search-close-icon .ff-icon-container svg path {\n  fill: var(--ff-search-filed-close-Icon);\n}";
-styleInject(css_248z$E);
+var css_248z$F = ".fontXs, .ff-search-container .ff-search-input {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-search-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-search-container .ff-search-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 4px;\n}\n.ff-search-container .ff-search-icon:hover {\n  background-color: var(--ff-search-field-hover-color);\n}\n.ff-search-container .ff-search-icon .ff-icon-container svg path {\n  fill: var(--brand-color);\n}\n.ff-search-container .ff-search-input {\n  border: none;\n  color: var(--tooltip-bg-color);\n  line-height: 12px;\n  visibility: hidden;\n  transition: width 0.4s ease;\n}\n.ff-search-container .ff-search-input:focus {\n  outline: none;\n  border: none;\n}\n.ff-search-container .ff-search-input:hover {\n  border: none;\n}\n.ff-search-container.disabled {\n  opacity: 0.5;\n}\n.ff-search-container.expanded {\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-search-icon:hover {\n  background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-vertical-line {\n  height: 8px;\n  width: 1px;\n  border-radius: 1px;\n  background-color: var(--border-color);\n}\n.ff-search-container.expanded .ff-search-input {\n  visibility: visible;\n  margin-left: 4px;\n}\n.ff-search-container.expanded .ff-search-input::placeholder {\n  color: var(--ff-search-filed-placeholder-text);\n}\n.ff-search-container.expanded .ff-search-icon {\n  border: none;\n  cursor: default;\n  margin-right: 4px;\n}\n.ff-search-container.expanded .ff-search-clear-button {\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  width: 22px;\n  padding-top: 1px;\n}\n.ff-search-container.expanded .ff-search-close-icon {\n  margin: 4px;\n  cursor: pointer;\n}\n.ff-search-container.expanded .ff-search-close-icon .ff-icon-container svg path {\n  fill: var(--ff-search-filed-close-Icon);\n}";
+styleInject(css_248z$F);
 
 const Search = ({
   placeholder = 'Search',
@@ -12856,6 +12932,53 @@ function setYear(date, year, options) {
   return date_;
 }
 
+const FIVE_WEEKS = 5;
+const FOUR_WEEKS = 4;
+/**
+ * Return the number of weeks to display in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+function getBroadcastWeeksInMonth(month, dateLib) {
+  // Get the first day of the month
+  const firstDayOfMonth = dateLib.startOfMonth(month);
+  // Get the day of the week for the first day of the month (1-7, where 1 is Monday)
+  const firstDayOfWeek = firstDayOfMonth.getDay() > 0 ? firstDayOfMonth.getDay() : 7;
+  const broadcastStartDate = dateLib.addDays(month, -firstDayOfWeek + 1);
+  const lastDateOfLastWeek = dateLib.addDays(broadcastStartDate, FIVE_WEEKS * 7 - 1);
+  const numberOfWeeks = month.getMonth() === lastDateOfLastWeek.getMonth() ? FIVE_WEEKS : FOUR_WEEKS;
+  return numberOfWeeks;
+}
+
+/**
+ * Return the start date of the week in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+function startOfBroadcastWeek(date, dateLib) {
+  const firstOfMonth = dateLib.startOfMonth(date);
+  const dayOfWeek = firstOfMonth.getDay();
+  if (dayOfWeek === 1) {
+    return firstOfMonth;
+  } else if (dayOfWeek === 0) {
+    return dateLib.addDays(firstOfMonth, -1 * 6);
+  } else {
+    return dateLib.addDays(firstOfMonth, -1 * (dayOfWeek - 1));
+  }
+}
+
+/**
+ * Return the end date of the week in the broadcast calendar.
+ *
+ * @since 9.4.0
+ */
+function endOfBroadcastWeek(date, dateLib) {
+  const startDate = startOfBroadcastWeek(date, dateLib);
+  const numberOfWeeks = getBroadcastWeeksInMonth(date, dateLib);
+  const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
+  return endDate;
+}
+
 /**
  * A wrapper class around [date-fns](http://date-fns.org) sharing the same
  * options. Methods of this class can be overridden using the
@@ -12936,6 +13059,15 @@ class DateLib {
     this.differenceInCalendarMonths = (dateLeft, dateRight) => {
       return this.overrides?.differenceInCalendarMonths ? this.overrides.differenceInCalendarMonths(dateLeft, dateRight) : differenceInCalendarMonths(dateLeft, dateRight);
     };
+    /**
+     * Returns the end of the broadcast week for the given date.
+     *
+     * @param date The original date.
+     * @returns The end of the broadcast week.
+     */
+    this.endOfBroadcastWeek = date => {
+      return this.overrides?.endOfBroadcastWeek ? this.overrides.endOfBroadcastWeek(date, this) : endOfBroadcastWeek(date, this);
+    };
     /**
      * Returns the end of the ISO week for the given date.
      *
@@ -13097,6 +13229,15 @@ class DateLib {
     this.setYear = (date, year) => {
       return this.overrides?.setYear ? this.overrides.setYear(date, year) : setYear(date, year);
     };
+    /**
+     * Returns the start of the broadcast week for the given date.
+     *
+     * @param date The original date.
+     * @returns The start of the broadcast week.
+     */
+    this.startOfBroadcastWeek = date => {
+      return this.overrides?.startOfBroadcastWeek ? this.overrides.startOfBroadcastWeek(date, this) : startOfBroadcastWeek(date, this);
+    };
     /**
      * Returns the start of the day for the given date.
      *
@@ -13682,7 +13823,8 @@ function getDataAttributes(props) {
     "data-mode": props.mode ?? undefined,
     "data-required": "required" in props ? props.required : undefined,
     "data-multiple-months": props.numberOfMonths && props.numberOfMonths > 1 || undefined,
-    "data-week-numbers": props.showWeekNumber || undefined
+    "data-week-numbers": props.showWeekNumber || undefined,
+    "data-broadcast-calendar": props.broadcastCalendar || undefined
   };
   Object.entries(props).forEach(([key, val]) => {
     if (key.startsWith("data-")) {
@@ -13748,7 +13890,7 @@ function formatDay(date, options, dateLib) {
  */
 function formatMonthDropdown(/** The month number to format. */
 monthNumber, /** The locale to use for formatting. */
-locale = enUS) {
+locale) {
   return locale.localize?.month(monthNumber);
 }
 
@@ -13852,7 +13994,7 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
     return a - b;
   });
   const options = sortedMonths.map(value => {
-    const label = formatters.formatMonthDropdown(value, dateLib.options.locale);
+    const label = formatters.formatMonthDropdown(value, dateLib.options.locale ?? enUS);
     const month = dateLib.Date ? new dateLib.Date(year, value) : new Date(year, value);
     const disabled = navStart && month < startOfMonth(navStart) || navEnd && month > startOfMonth(navEnd) || false;
     return {
@@ -14227,7 +14369,8 @@ function tzName(tz, date) {
  */
 function getWeekdays(/** The date library. */
 dateLib, /** Use ISOWeek instead of locale/ */
-ISOWeek, timeZone) {
+ISOWeek, timeZone, /** @since 9.4.0 */
+broadcastCalendar) {
   const date = timeZone ? TZDate.tz(timeZone) : dateLib.Date ? new dateLib.Date() : new Date();
   const start = ISOWeek ? dateLib.startOfISOWeek(date) : dateLib.startOfWeek(date);
   const days = [];
@@ -14430,29 +14573,30 @@ var defaultLabels = /*#__PURE__*/Object.freeze({
   labelYearDropdown: labelYearDropdown
 });
 
-/** The number of days in a month when having 6 weeks. */
-const NrOfDaysWithFixedWeeks = 42;
 /** Return all the dates to display in the calendar. */
 function getDates(displayMonths, maxDate, props, dateLib) {
   const firstMonth = displayMonths[0];
   const lastMonth = displayMonths[displayMonths.length - 1];
   const {
     ISOWeek,
-    fixedWeeks
+    fixedWeeks,
+    broadcastCalendar
   } = props ?? {};
   const {
-    startOfWeek,
-    endOfWeek,
-    startOfISOWeek,
-    endOfISOWeek,
     addDays,
     differenceInCalendarDays,
     differenceInCalendarMonths,
+    endOfBroadcastWeek,
+    endOfISOWeek,
+    endOfMonth,
+    endOfWeek,
     isAfter,
-    endOfMonth
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
-  const startWeekFirstDate = ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
-  const endWeekLastDate = ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
+  const startWeekFirstDate = broadcastCalendar ? startOfBroadcastWeek(firstMonth, dateLib) : ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
+  const endWeekLastDate = broadcastCalendar ? endOfBroadcastWeek(lastMonth, dateLib) : ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
   const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
   const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
   const dates = [];
@@ -14464,9 +14608,11 @@ function getDates(displayMonths, maxDate, props, dateLib) {
     dates.push(date);
   }
   // If fixed weeks is enabled, add the extra dates to the array
-  const extraDates = NrOfDaysWithFixedWeeks * nOfMonths;
+  const nrOfDaysWithFixedWeeks = broadcastCalendar ? 35 : 42;
+  const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
   if (fixedWeeks && dates.length < extraDates) {
-    for (let i = 0; i < 7; i++) {
+    const daysToAdd = extraDates - dates.length;
+    for (let i = 0; i < daysToAdd; i++) {
       const date = addDays(dates[dates.length - 1], 1);
       dates.push(date);
     }
@@ -14577,25 +14723,29 @@ displayMonths, /** The dates to display in the calendar. */
 dates, /** Options from the props context. */
 props, dateLib) {
   const {
-    startOfWeek,
-    endOfWeek,
-    startOfISOWeek,
+    addDays,
+    endOfBroadcastWeek,
     endOfISOWeek,
     endOfMonth,
-    addDays,
+    endOfWeek,
+    getISOWeek,
     getWeek,
-    getISOWeek
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
   const dayPickerMonths = displayMonths.reduce((months, month) => {
-    const firstDateOfFirstWeek = props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
-    const lastDateOfLastWeek = props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
+    const firstDateOfFirstWeek = props.broadcastCalendar ? startOfBroadcastWeek(month, dateLib) : props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
+    const lastDateOfLastWeek = props.broadcastCalendar ? endOfBroadcastWeek(month, dateLib) : props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
     /** The dates to display in the month. */
     const monthDates = dates.filter(date => {
       return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
     });
-    if (props.fixedWeeks && monthDates.length < 42) {
+    const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
+    if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
       const extraDates = dates.filter(date => {
-        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7);
+        const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
+        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, daysToAdd);
       });
       monthDates.push(...extraDates);
     }
@@ -15033,27 +15183,30 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
 /** Return the next date that should be focused. */
 function getFocusableDate(moveBy, moveDir, refDate, navStart, navEnd, props, dateLib) {
   const {
-    ISOWeek
+    ISOWeek,
+    broadcastCalendar
   } = props;
   const {
     addDays,
     addMonths,
-    addYears,
     addWeeks,
-    startOfISOWeek,
+    addYears,
+    endOfBroadcastWeek,
     endOfISOWeek,
-    startOfWeek,
     endOfWeek,
     max,
-    min
+    min,
+    startOfBroadcastWeek,
+    startOfISOWeek,
+    startOfWeek
   } = dateLib;
   const moveFns = {
     day: addDays,
     week: addWeeks,
     month: addMonths,
     year: addYears,
-    startOfWeek: date => ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
-    endOfWeek: date => ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
+    startOfWeek: date => broadcastCalendar ? startOfBroadcastWeek(date, dateLib) : ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
+    endOfWeek: date => broadcastCalendar ? endOfBroadcastWeek(date, dateLib) : ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
   };
   let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
   if (moveDir === "before" && navStart) {
@@ -15119,6 +15272,8 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
 /**
  * Return a function to get the modifiers for a given day.
  *
+ * NOTE: this is not an hook, but a factory for `getModifiers`.
+ *
  * @private
  */
 function useGetModifiers(days, props, dateLib) {
@@ -15127,12 +15282,19 @@ function useGetModifiers(days, props, dateLib) {
     hidden,
     modifiers,
     showOutsideDays,
+    broadcastCalendar,
     today
   } = props;
   const {
     isSameDay,
-    isSameMonth
+    isSameMonth,
+    startOfMonth,
+    isBefore,
+    endOfMonth,
+    isAfter
   } = dateLib;
+  const startMonth = props.startMonth && startOfMonth(props.startMonth);
+  const endMonth = props.endMonth && endOfMonth(props.endMonth);
   const internalModifiersMap = {
     [DayFlag.focused]: [],
     [DayFlag.outside]: [],
@@ -15141,20 +15303,18 @@ function useGetModifiers(days, props, dateLib) {
     [DayFlag.today]: []
   };
   const customModifiersMap = {};
-  const selectionModifiersMap = {
-    [SelectionState.range_end]: [],
-    [SelectionState.range_middle]: [],
-    [SelectionState.range_start]: [],
-    [SelectionState.selected]: []
-  };
   for (const day of days) {
     const {
       date,
       displayMonth
     } = day;
     const isOutside = Boolean(displayMonth && !isSameMonth(date, displayMonth));
+    const isBeforeStartMonth = Boolean(startMonth && isBefore(date, startMonth));
+    const isAfterEndMonth = Boolean(endMonth && isAfter(date, endMonth));
     const isDisabled = Boolean(disabled && dateMatchModifiers(date, disabled, dateLib));
-    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || !showOutsideDays && isOutside;
+    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || isBeforeStartMonth || isAfterEndMonth ||
+    // Broadcast calendar will show outside days as default
+    !broadcastCalendar && !showOutsideDays && isOutside || broadcastCalendar && showOutsideDays === false && isOutside;
     const isToday = isSameDay(date, today ?? (props.timeZone ? TZDate.tz(props.timeZone) : dateLib.Date ? new dateLib.Date() : new Date()));
     if (isOutside) internalModifiersMap.outside.push(day);
     if (isDisabled) internalModifiersMap.disabled.push(day);
@@ -15183,27 +15343,16 @@ function useGetModifiers(days, props, dateLib) {
       [DayFlag.outside]: false,
       [DayFlag.today]: false
     };
-    const selectionStates = {
-      [SelectionState.range_end]: false,
-      [SelectionState.range_middle]: false,
-      [SelectionState.range_start]: false,
-      [SelectionState.selected]: false
-    };
     const customModifiers = {};
     // Find the modifiers for the given day
     for (const name in internalModifiersMap) {
       const days = internalModifiersMap[name];
       dayFlags[name] = days.some(d => d === day);
     }
-    for (const name in selectionModifiersMap) {
-      const days = selectionModifiersMap[name];
-      selectionStates[name] = days.some(d => d === day);
-    }
     for (const name in customModifiersMap) {
       customModifiers[name] = customModifiersMap[name].some(d => d === day);
     }
     return {
-      ...selectionStates,
       ...dayFlags,
       // custom modifiers should override all the previous ones
       ...customModifiers
@@ -15608,7 +15757,7 @@ function DayPicker(props) {
     };
     const dateLib = new DateLib({
       locale,
-      weekStartsOn: props.weekStartsOn,
+      weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
       firstWeekContainsDate: props.firstWeekContainsDate,
       useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
       useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
@@ -15627,7 +15776,7 @@ function DayPicker(props) {
         ...props.classNames
       }
     };
-  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn]);
+  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn, props.broadcastCalendar]);
   const {
     captionLayout,
     mode,
@@ -17380,8 +17529,8 @@ const TimePicker = ({
   });
 };
 
-var css_248z$D = "@import 'react-day-picker/style.css';\n.fontXs, .ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n/* Custom date picker styling */\n.ff-date-picker {\n  position: relative;\n}\n.ff-date-picker .rdp-root {\n  --rdp-accent-color: var(--brand-color);\n  --rdp-day-height: 24px;\n  --rdp-day-width: 36px;\n  font-family: \"Poppins\";\n  font-size: 12px;\n  --rdp-font-family: \"Poppins\", sans-serif;\n}\n.ff-date-picker .ff-cursor-pointer {\n  cursor: pointer;\n}\n.ff-date-picker .ff-datepicker-input-container {\n  display: flex;\n  gap: 10px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n  padding: 4px 8px;\n  padding-left: 2rem;\n  height: 32px;\n  border-radius: 5px;\n  border: 1px solid var(--border-color);\n  color: var(--status-skipped-text-color);\n  line-height: 15px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input:focus,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input:focus {\n  outline: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-calendar-icon,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-clock-icon {\n  position: absolute;\n  top: 50%;\n  transform: translate(25%, -50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field {\n  flex: 1;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input {\n  width: 100%;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field {\n  flex: 0 0 120px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field .ff-time-input {\n  width: 100%;\n}\n.ff-date-picker .ff-date-picker-container {\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  border-radius: 8px;\n  padding: 4px;\n  box-sizing: border-box;\n  background-color: var(--tab-bg-color);\n  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);\n  gap: 8px;\n  z-index: 10;\n}\n.ff-date-picker .ff-date-picker-container .ff-calendar-container {\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n  height: 240px;\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls {\n  padding: 4px;\n  display: flex;\n  justify-content: end;\n  gap: 8px;\n  border-top: 1px solid var(--border-color);\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls .ff-date-picker-button {\n  font-weight: 600;\n  line-height: 15px;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button {\n  margin: 0 5px;\n  border: 1px solid var(--border-color);\n  background-color: var(--toggle-button-bg-color);\n  box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);\n  padding: 0px;\n  border-radius: 30%;\n  cursor: pointer;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button:disabled {\n  cursor: auto;\n  opacity: 0.5;\n}\n.ff-date-picker .ff-calendar .ff-calendar-haeder {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  color: var(--text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid,\n.ff-date-picker .ff-calendar .ff-custom-month_grid {\n  width: calc((var(--rdp-day-width) + 4px) * 7);\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n  padding: 5px;\n  max-width: 100%;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month {\n  padding: 10px 0;\n  text-align: center;\n  cursor: pointer;\n  border-radius: 8px;\n  background-color: #f9f9f9;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--selected {\n  background-color: var(--brand-color);\n  color: var(--primary-button-text-color);\n}\n.ff-date-picker .ff-calendar .rdp-weekdays th {\n  color: #6f7c8e;\n  font-weight: 400;\n}\n.ff-date-picker .ff-calendar .rdp-day {\n  padding: 2px;\n  font-weight: 500;\n}\n.ff-date-picker .ff-calendar .rdp-day_button {\n  border-radius: 4px;\n  padding: 3px 9px;\n}\n.ff-date-picker .ff-calendar .rdp-day_button:hover {\n  background-color: var(--hover-color);\n}\n.ff-date-picker .ff-calendar .rdp-selected {\n  font: inherit;\n}\n.ff-date-picker .ff-calendar .rdp-selected .rdp-day_button {\n  background: var(--rdp-accent-color);\n  color: var(--drawer-footer-bg);\n  border: none;\n}\n.ff-date-picker .ff-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n  border: 2px solid var(--rdp-accent-color);\n}\n.ff-date-picker .ff-time-picker-container {\n  position: relative;\n  width: 150px;\n  height: 100%;\n  overflow-y: hidden;\n  border-left: 1px solid #ccc;\n  padding: 10px 5px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container::-webkit-scrollbar {\n  display: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields {\n  display: flex;\n  height: 14%;\n  width: 100%;\n  margin-bottom: 5px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container {\n  display: flex;\n  border: 1px solid var(--border-color);\n  border-right: 0;\n  border-radius: 4px 0 0 4px;\n  width: 55%;\n  position: relative;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n  border: none;\n  padding: 5px;\n  width: 100%;\n  text-align: center;\n  border-radius: 4px 0 0 4px;\n  font-weight: 400;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input::placeholder {\n  opacity: 0;\n  line-height: 18px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input-label {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.2s ease all;\n  color: var(--input-default-label-color);\n  pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label {\n  top: 0;\n  left: 5px;\n  color: var(--brand-color);\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0 2px;\n  font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n  border-color: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label {\n  top: 0;\n  left: 5px;\n  color: var(--brand-color);\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0 2px;\n  font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n  border-color: var(--input-error-text-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n  outline: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container {\n  position: relative;\n  width: 45%;\n  display: flex;\n  border: 1px solid var(--border-color);\n  border-radius: 0 4px 4px 0;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-select {\n  display: flex;\n  align-items: center;\n  padding: 0 5px;\n  width: 100%;\n  border-radius: 4px;\n  background-color: white;\n  cursor: pointer;\n  border: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n  border-color: var(--brand-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon {\n  margin-left: auto;\n  pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon svg path {\n  fill: var(--default-icon-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n  position: fixed;\n  z-index: 100;\n  min-width: 60px;\n  margin: 4px 0 0;\n  padding: 0;\n  list-style: none;\n  border: 1px solid var(--ff-select-background-color);\n  border-radius: 4px;\n  background-color: var(--primary-button-text-color);\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item {\n  padding: 8px;\n  color: var(--text-color);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item:hover {\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options {\n  height: 86%;\n  overflow-y: auto;\n  padding-right: 5px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n  background-color: var(--hover-color);\n  border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options .ff-time-option {\n  padding: 10px 12px;\n  cursor: pointer;\n  text-align: center;\n  border-radius: 8px;\n  background-color: rgb(249, 249, 249);\n  margin: 10px 0;\n}";
-styleInject(css_248z$D);
+var css_248z$E = "@import 'react-day-picker/style.css';\n.fontXs, .ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n/* Custom date picker styling */\n.ff-date-picker {\n  position: relative;\n}\n.ff-date-picker .rdp-root {\n  --rdp-accent-color: var(--brand-color);\n  --rdp-day-height: 24px;\n  --rdp-day-width: 36px;\n  font-family: \"Poppins\";\n  font-size: 12px;\n  --rdp-font-family: \"Poppins\", sans-serif;\n}\n.ff-date-picker .ff-cursor-pointer {\n  cursor: pointer;\n}\n.ff-date-picker .ff-datepicker-input-container {\n  display: flex;\n  gap: 10px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n  padding: 4px 8px;\n  padding-left: 2rem;\n  height: 32px;\n  border-radius: 5px;\n  border: 1px solid var(--border-color);\n  color: var(--status-skipped-text-color);\n  line-height: 15px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input:focus,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input:focus {\n  outline: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-calendar-icon,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-clock-icon {\n  position: absolute;\n  top: 50%;\n  transform: translate(25%, -50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field {\n  flex: 1;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input {\n  width: 100%;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field {\n  flex: 0 0 120px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field .ff-time-input {\n  width: 100%;\n}\n.ff-date-picker .ff-date-picker-container {\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  border-radius: 8px;\n  padding: 4px;\n  box-sizing: border-box;\n  background-color: var(--tab-bg-color);\n  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);\n  gap: 8px;\n  z-index: 10;\n}\n.ff-date-picker .ff-date-picker-container .ff-calendar-container {\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n  height: 240px;\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls {\n  padding: 4px;\n  display: flex;\n  justify-content: end;\n  gap: 8px;\n  border-top: 1px solid var(--border-color);\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls .ff-date-picker-button {\n  font-weight: 600;\n  line-height: 15px;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button {\n  margin: 0 5px;\n  border: 1px solid var(--border-color);\n  background-color: var(--toggle-button-bg-color);\n  box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);\n  padding: 0px;\n  border-radius: 30%;\n  cursor: pointer;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button:disabled {\n  cursor: auto;\n  opacity: 0.5;\n}\n.ff-date-picker .ff-calendar .ff-calendar-haeder {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  color: var(--text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid,\n.ff-date-picker .ff-calendar .ff-custom-month_grid {\n  width: calc((var(--rdp-day-width) + 4px) * 7);\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n  padding: 5px;\n  max-width: 100%;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month {\n  padding: 10px 0;\n  text-align: center;\n  cursor: pointer;\n  border-radius: 8px;\n  background-color: #f9f9f9;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--selected {\n  background-color: var(--brand-color);\n  color: var(--primary-button-text-color);\n}\n.ff-date-picker .ff-calendar .rdp-weekdays th {\n  color: #6f7c8e;\n  font-weight: 400;\n}\n.ff-date-picker .ff-calendar .rdp-day {\n  padding: 2px;\n  font-weight: 500;\n}\n.ff-date-picker .ff-calendar .rdp-day_button {\n  border-radius: 4px;\n  padding: 3px 9px;\n}\n.ff-date-picker .ff-calendar .rdp-day_button:hover {\n  background-color: var(--hover-color);\n}\n.ff-date-picker .ff-calendar .rdp-selected {\n  font: inherit;\n}\n.ff-date-picker .ff-calendar .rdp-selected .rdp-day_button {\n  background: var(--rdp-accent-color);\n  color: var(--drawer-footer-bg);\n  border: none;\n}\n.ff-date-picker .ff-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n  border: 2px solid var(--rdp-accent-color);\n}\n.ff-date-picker .ff-time-picker-container {\n  position: relative;\n  width: 150px;\n  height: 100%;\n  overflow-y: hidden;\n  border-left: 1px solid #ccc;\n  padding: 10px 5px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container::-webkit-scrollbar {\n  display: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields {\n  display: flex;\n  height: 14%;\n  width: 100%;\n  margin-bottom: 5px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container {\n  display: flex;\n  border: 1px solid var(--border-color);\n  border-right: 0;\n  border-radius: 4px 0 0 4px;\n  width: 55%;\n  position: relative;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n  border: none;\n  padding: 5px;\n  width: 100%;\n  text-align: center;\n  border-radius: 4px 0 0 4px;\n  font-weight: 400;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input::placeholder {\n  opacity: 0;\n  line-height: 18px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input-label {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.2s ease all;\n  color: var(--input-default-label-color);\n  pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label {\n  top: 0;\n  left: 5px;\n  color: var(--brand-color);\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0 2px;\n  font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n  border-color: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label {\n  top: 0;\n  left: 5px;\n  color: var(--brand-color);\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0 2px;\n  font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n  border-color: var(--input-error-text-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n  outline: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container {\n  position: relative;\n  width: 45%;\n  display: flex;\n  border: 1px solid var(--border-color);\n  border-radius: 0 4px 4px 0;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-select {\n  display: flex;\n  align-items: center;\n  padding: 0 5px;\n  width: 100%;\n  border-radius: 4px;\n  background-color: white;\n  cursor: pointer;\n  border: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n  border-color: var(--brand-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon {\n  margin-left: auto;\n  pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon svg path {\n  fill: var(--default-icon-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n  position: fixed;\n  z-index: 100;\n  min-width: 60px;\n  margin: 4px 0 0;\n  padding: 0;\n  list-style: none;\n  border: 1px solid var(--ff-select-background-color);\n  border-radius: 4px;\n  background-color: var(--primary-button-text-color);\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item {\n  padding: 8px;\n  color: var(--text-color);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item:hover {\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options {\n  height: 86%;\n  overflow-y: auto;\n  padding-right: 5px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n  background-color: var(--hover-color);\n  border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options .ff-time-option {\n  padding: 10px 12px;\n  cursor: pointer;\n  text-align: center;\n  border-radius: 8px;\n  background-color: rgb(249, 249, 249);\n  margin: 10px 0;\n}";
+styleInject(css_248z$E);
 
 const CustomDatePicker = ({
   minDate,
@@ -17935,17 +18084,19 @@ const StateDropdown = ({
   });
 };
 
-var css_248z$C = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-plus-icon {\n  border-radius: 16px;\n  border-style: none;\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  gap: 8px;\n  background-color: var(--secondary-icon-color);\n  padding: 2px 8px 2px 2px;\n  border: 1px solid transparent;\n}\n.ff-plus-icon .button-icon {\n  width: 20px;\n  height: 20px;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  background-color: var(--hover-color);\n}\n.ff-plus-icon .button-icon .ff-icon-color path {\n  color: var(--secondary-icon-color);\n}\n.ff-plus-icon .icon-name {\n  color: var(--primary-icon-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-plus-icon:hover {\n  border: 1px solid var(--secondary-icon-color);\n  background-color: var(--hover-color);\n}\n.ff-plus-icon:hover .icon-name {\n  font-weight: 600;\n  color: var(--secondary-icon-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-plus-icon:hover .button-icon {\n  width: 20px;\n  height: 20px;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon:hover .button-icon .ff-icon-color path {\n  color: var(--primary-icon-color);\n}";
-styleInject(css_248z$C);
+var css_248z$D = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-plus-icon {\n  border-radius: 16px;\n  border-style: none;\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  gap: 8px;\n  background-color: var(--hover-color);\n  padding: 2px 8px 2px 2px;\n  border: 1px solid var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon {\n  width: 20px;\n  height: 20px;\n  border: 1px solid var(--primary-icon-color);\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon .ff-icon-color path {\n  color: var(--primary-icon-color);\n}\n.ff-plus-icon .icon-name {\n  color: var(--secondary-icon-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-plus-icon:hover {\n  border: 1px solid transparent;\n  background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon:hover .icon-name {\n  font-weight: 600;\n  color: var(--primary-icon-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-plus-icon:hover .button-icon {\n  width: 20px;\n  height: 20px;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  background-color: var(--hover-color);\n}\n.ff-plus-icon:hover .button-icon .ff-icon-color path {\n  color: var(--secondary-icon-color);\n}";
+styleInject(css_248z$D);
 
 const IconButton = ({
   label,
   iconName = 'plus_user_icon',
-  onClick
+  onClick,
+  ref
 }) => {
   return jsxRuntime.jsxs("button", {
     onClick: onClick,
     className: classNames('ff-plus-icon'),
+    ref: ref,
     children: [jsxRuntime.jsx("div", {
       className: classNames('button-icon'),
       children: jsxRuntime.jsx(Icon, {
@@ -17964,8 +18115,8 @@ const IconButton = ({
   });
 };
 
-var css_248z$B = ".ff-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--modal-background-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  flex-direction: column;\n}\n\n.ff-modal-container {\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.ff-modal-content {\n  background: var(--ff-mini-modal-border);\n  position: relative;\n  max-width: 100%;\n  padding: 16px;\n}\n.ff-modal-content .ff-modal-header {\n  height: 32px;\n  width: 100%;\n}\n\n.modal-bottom-border {\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n\n.modal-top-border {\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n}\n\n.ff-modal-footer {\n  background-color: var(--expandable-menu-option-bg);\n  max-width: 100%;\n  width: 100%;\n  height: 32px;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 16px;\n}";
-styleInject(css_248z$B);
+var css_248z$C = ".ff-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--modal-background-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  flex-direction: column;\n}\n\n.ff-modal-container {\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.ff-modal-content {\n  background: var(--ff-mini-modal-border);\n  position: relative;\n  max-width: 100%;\n  padding: 16px;\n}\n.ff-modal-content .ff-modal-header {\n  height: 32px;\n  width: 100%;\n}\n\n.modal-bottom-border {\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n\n.modal-top-border {\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n}\n\n.ff-modal-footer {\n  background-color: var(--expandable-menu-option-bg);\n  max-width: 100%;\n  width: 100%;\n  height: 32px;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 16px;\n}";
+styleInject(css_248z$C);
 
 const Modal = ({
   isOpen,
@@ -18383,6 +18534,8 @@ function LiveRegion(_ref) {
   // Hide element visually but keep it readable by screen readers
   const visuallyHidden = {
     position: 'fixed',
+    top: 0,
+    left: 0,
     width: 1,
     height: 1,
     margin: -1,
@@ -19675,6 +19828,9 @@ class AbstractPointerSensor {
       passive: false
     });
     this.listeners.add(events.end.name, this.handleEnd);
+    if (events.cancel) {
+      this.listeners.add(events.cancel.name, this.handleCancel);
+    }
     this.windowListeners.add(EventName.Resize, this.handleCancel);
     this.windowListeners.add(EventName.DragStart, preventDefault);
     this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
@@ -19794,6 +19950,9 @@ class AbstractPointerSensor {
   }
 }
 const events = {
+  cancel: {
+    name: 'pointercancel'
+  },
   move: {
     name: 'pointermove'
   },
@@ -19866,6 +20025,9 @@ MouseSensor.activators = [{
   }
 }];
 const events$2 = {
+  cancel: {
+    name: 'touchcancel'
+  },
   move: {
     name: 'touchmove'
   },
@@ -20067,11 +20229,11 @@ function useScrollIntent(_ref2) {
   }, [disabled, delta, previousDelta]);
 }
 function useCachedNode(draggableNodes, id) {
-  const draggableNode = id !== null ? draggableNodes.get(id) : undefined;
+  const draggableNode = id != null ? draggableNodes.get(id) : undefined;
   const node = draggableNode ? draggableNode.node.current : null;
   return useLazyMemo(cachedNode => {
     var _ref;
-    if (id === null) {
+    if (id == null) {
       return null;
     } // In some cases, the draggable node can unmount while dragging
     // This is the case for virtualized lists. In those situations,
@@ -20279,7 +20441,26 @@ function useRect(element, measure, fallbackRect) {
   if (measure === void 0) {
     measure = defaultMeasure;
   }
-  const [rect, measureRect] = React.useReducer(reducer, null);
+  const [rect, setRect] = React.useState(null);
+  function measureRect() {
+    setRect(currentRect => {
+      if (!element) {
+        return null;
+      }
+      if (element.isConnected === false) {
+        var _ref;
+
+        // Fall back to last rect we measured if the element is
+        // no longer connected to the DOM.
+        return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
+      }
+      const newRect = measure(element);
+      if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
+        return currentRect;
+      }
+      return newRect;
+    });
+  }
   const mutationObserver = useMutationObserver({
     callback(records) {
       if (!element) {
@@ -20314,23 +20495,6 @@ function useRect(element, measure, fallbackRect) {
     }
   }, [element]);
   return rect;
-  function reducer(currentRect) {
-    if (!element) {
-      return null;
-    }
-    if (element.isConnected === false) {
-      var _ref;
-
-      // Fall back to last rect we measured if the element is
-      // no longer connected to the DOM.
-      return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
-    }
-    const newRect = measure(element);
-    if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
-      return currentRect;
-    }
-    return newRect;
-  }
 }
 function useRectDelta(rect) {
   const initialRect = useInitialValue(rect);
@@ -20476,28 +20640,24 @@ function useRects(elements, measure) {
   }
   const [firstElement] = elements;
   const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
-  const [rects, measureRects] = React.useReducer(reducer, defaultValue$2);
+  const [rects, setRects] = React.useState(defaultValue$2);
+  function measureRects() {
+    setRects(() => {
+      if (!elements.length) {
+        return defaultValue$2;
+      }
+      return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
+    });
+  }
   const resizeObserver = useResizeObserver({
     callback: measureRects
   });
-  if (elements.length > 0 && rects === defaultValue$2) {
-    measureRects();
-  }
   useIsomorphicLayoutEffect$1(() => {
-    if (elements.length) {
-      elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
-    } else {
-      resizeObserver == null ? void 0 : resizeObserver.disconnect();
-      measureRects();
-    }
+    resizeObserver == null ? void 0 : resizeObserver.disconnect();
+    measureRects();
+    elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
   }, [elements]);
   return rects;
-  function reducer() {
-    if (!elements.length) {
-      return defaultValue$2;
-    }
-    return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
-  }
 }
 function getMeasurableNode(node) {
   if (!node) {
@@ -20664,7 +20824,7 @@ function reducer$1(state, action) {
         }
       };
     case Action.DragMove:
-      if (!state.draggable.active) {
+      if (state.draggable.active == null) {
         return state;
       }
       return {
@@ -20936,7 +21096,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
       containers: droppableContainers
     }
   } = state;
-  const node = activeId ? draggableNodes.get(activeId) : null;
+  const node = activeId != null ? draggableNodes.get(activeId) : null;
   const activeRects = React.useRef({
     initial: null,
     translated: null
@@ -20971,7 +21131,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
   const autoScrollOptions = getAutoScrollerOptions();
   const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
   useLayoutShiftScrollCompensation({
-    activeNode: activeId ? draggableNodes.get(activeId) : null,
+    activeNode: activeId != null ? draggableNodes.get(activeId) : null,
     config: autoScrollOptions.layoutShiftCompensation,
     initialRect: initialActiveNodeRect,
     measure: measuringConfiguration.draggable.measure
@@ -21049,6 +21209,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
 
   const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
   const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
+  const activeSensorRef = React.useRef(null);
   const instantiateSensor = React.useCallback((event, _ref2) => {
     let {
       sensor: Sensor,
@@ -21083,6 +21244,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
           onDragStart
         } = latestProps.current;
         const event = {
+          activatorEvent,
           active: {
             id,
             data: draggableNode.data,
@@ -21101,6 +21263,8 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
             type: 'onDragStart',
             event
           });
+          setActiveSensor(activeSensorRef.current);
+          setActivatorEvent(activatorEvent);
         });
       },
       onMove(coordinates) {
@@ -21112,10 +21276,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
       onEnd: createHandler(Action.DragEnd),
       onCancel: createHandler(Action.DragCancel)
     });
-    reactDom.unstable_batchedUpdates(() => {
-      setActiveSensor(sensorInstance);
-      setActivatorEvent(event.nativeEvent);
-    });
+    activeSensorRef.current = sensorInstance;
     function createHandler(type) {
       return async function handler() {
         const {
@@ -21152,6 +21313,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
           setOver(null);
           setActiveSensor(null);
           setActivatorEvent(null);
+          activeSensorRef.current = null;
           const eventName = type === Action.DragEnd ? 'onDragEnd' : 'onDragCancel';
           if (event) {
             const handler = latestProps.current[eventName];
@@ -21373,7 +21535,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
 });
 const NullContext = /*#__PURE__*/React.createContext(null);
 const defaultRole = 'button';
-const ID_PREFIX$1 = 'Droppable';
+const ID_PREFIX$1 = 'Draggable';
 function useDraggable(_ref) {
   let {
     id,
@@ -21520,7 +21682,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  useIsomorphicLayoutEffect$1(() => {
+  React.useEffect(() => {
     dispatch({
       type: Action.RegisterDroppable,
       element: {
@@ -21935,6 +22097,7 @@ var DNDCore = /*#__PURE__*/Object.freeze({
   defaultCoordinates: defaultCoordinates,
   defaultDropAnimation: defaultDropAnimationConfiguration,
   defaultDropAnimationSideEffects: defaultDropAnimationSideEffects,
+  defaultKeyboardCoordinateGetter: defaultKeyboardCoordinateGetter,
   defaultScreenReaderInstructions: defaultScreenReaderInstructions,
   getClientRect: getClientRect,
   getFirstCollision: getFirstCollision,
@@ -22661,8 +22824,8 @@ const DragAndDrop = {
   DNDUtilities
 };
 
-var css_248z$A = ".ff_variable_input_container .ff_label_container {\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_input_label {\n  color: var(--error);\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_required_asterisk {\n  color: var(--error);\n}\n.ff_variable_input_container .ff_required_asterisk {\n  color: var(--input-error-text-color);\n  font-size: 1.1em;\n  margin-right: 4px;\n}\n.ff_variable_input_container .ff_input_label {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--text-color);\n}\n.ff_variable_input_container .ff_input_label.ff_no_hover {\n  color: var(--toggle-disable-icon-color);\n}\n.ff_variable_input_container .ff_input_label.ff_disabled_label {\n  color: var(--toggle-disable-icon-color);\n  cursor: not-allowed;\n}\n.ff_variable_input_container .ff_input_label.ff_danger_label {\n  color: var(--error);\n}\n.ff_variable_input_container .ff_content_editable {\n  min-width: 8rem;\n  border: 1px solid var(--input-default-border-color);\n  padding: 8px;\n  min-height: 30px;\n  border-radius: 4px;\n  font-size: 14px;\n  line-height: 20px;\n  transition: border-color 0.2s ease;\n  position: relative;\n  text-align: left;\n  display: flex;\n  align-items: center;\n  overflow: auto;\n}\n.ff_variable_input_container .ff_content_editable .ff_var_red {\n  color: var(--status-rejected-text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_def_color {\n  color: var(--text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_green {\n  color: var(--status-success-text-color);\n}\n.ff_variable_input_container .ff_content_editable::after {\n  content: \"*\";\n  color: var(--input-error-text-color);\n  font-size: 1.2em;\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  display: none;\n}\n.ff_variable_input_container .ff_content_editable.ff_required::after {\n  display: inline;\n}\n.ff_variable_input_container .ff_content_editable.ff_required_empty:focus-within, .ff_variable_input_container .ff_content_editable.ff_required_empty:focus {\n  border-color: var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_content_editable:empty::before {\n  content: attr(data-placeholder);\n  color: var(--ff-search-filed-placeholder-text);\n  position: absolute;\n  user-select: none;\n  pointer-events: none;\n  font-size: medium;\n}\n.ff_variable_input_container .ff_content_editable.ff_disabled {\n  pointer-events: none;\n  opacity: 0.5;\n  background-color: var(--input-default-border-color);\n}\n.ff_variable_input_container .ff_content_editable.ff_invalid_input {\n  border: 1px solid var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_suggestions {\n  border: 1px solid var(--input-default-border-color);\n  margin-top: 4px;\n  padding: 4px;\n  border-radius: 4px;\n  list-style-type: none;\n  background-color: var(--ff-select-background-color);\n  max-height: 150px;\n  overflow-y: auto;\n}\n.ff_variable_input_container .ff_suggestion_item {\n  padding: 4px;\n  cursor: pointer;\n}\n.ff_variable_input_container .ff_suggestion_item:hover {\n  background-color: var(--ff-select-background-color);\n}";
-styleInject(css_248z$A);
+var css_248z$B = ".ff_variable_input_container .ff_label_container {\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_input_label {\n  color: var(--error);\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_required_asterisk {\n  color: var(--error);\n}\n.ff_variable_input_container .ff_required_asterisk {\n  color: var(--input-error-text-color);\n  font-size: 1.1em;\n  margin-right: 4px;\n}\n.ff_variable_input_container .ff_input_label {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--text-color);\n}\n.ff_variable_input_container .ff_input_label.ff_no_hover {\n  color: var(--toggle-disable-icon-color);\n}\n.ff_variable_input_container .ff_input_label.ff_disabled_label {\n  color: var(--toggle-disable-icon-color);\n  cursor: not-allowed;\n}\n.ff_variable_input_container .ff_input_label.ff_danger_label {\n  color: var(--error);\n}\n.ff_variable_input_container .ff_content_editable {\n  min-width: 8rem;\n  border: 1px solid var(--input-default-border-color);\n  padding: 8px;\n  min-height: 30px;\n  border-radius: 4px;\n  font-size: 14px;\n  line-height: 20px;\n  transition: border-color 0.2s ease;\n  position: relative;\n  text-align: left;\n  display: flex;\n  align-items: center;\n  overflow: auto;\n}\n.ff_variable_input_container .ff_content_editable .ff_var_red {\n  color: var(--status-rejected-text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_def_color {\n  color: var(--text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_green {\n  color: var(--status-success-text-color);\n}\n.ff_variable_input_container .ff_content_editable::after {\n  content: \"*\";\n  color: var(--input-error-text-color);\n  font-size: 1.2em;\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  display: none;\n}\n.ff_variable_input_container .ff_content_editable.ff_required::after {\n  display: inline;\n}\n.ff_variable_input_container .ff_content_editable.ff_required_empty:focus-within, .ff_variable_input_container .ff_content_editable.ff_required_empty:focus {\n  border-color: var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_content_editable:empty::before {\n  content: attr(data-placeholder);\n  color: var(--ff-search-filed-placeholder-text);\n  position: absolute;\n  user-select: none;\n  pointer-events: none;\n  font-size: medium;\n}\n.ff_variable_input_container .ff_content_editable.ff_disabled {\n  pointer-events: none;\n  opacity: 0.5;\n  background-color: var(--input-default-border-color);\n}\n.ff_variable_input_container .ff_content_editable.ff_invalid_input {\n  border: 1px solid var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_suggestions {\n  border: 1px solid var(--input-default-border-color);\n  margin-top: 4px;\n  padding: 4px;\n  border-radius: 4px;\n  list-style-type: none;\n  background-color: var(--ff-select-background-color);\n  max-height: 150px;\n  overflow-y: auto;\n}\n.ff_variable_input_container .ff_suggestion_item {\n  padding: 4px;\n  cursor: pointer;\n}\n.ff_variable_input_container .ff_suggestion_item:hover {\n  background-color: var(--ff-select-background-color);\n}";
+styleInject(css_248z$B);
 
 const VariableInput = ({
   type = 'url',
@@ -22940,8 +23103,8 @@ const VariableInput = ({
   });
 };
 
-var css_248z$z = ".ff-all-project {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n.ff-all-project .ff-all-project-dropdown {\n  width: fit-content;\n  border-radius: 16px;\n  background-color: var(--ff-all-projects-default-color);\n  color: var(--expandable-menu-default-bg);\n  line-height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  padding: 3px;\n  cursor: pointer;\n}\n.ff-all-project .ff-all-project-dropdown--selected {\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n}\n.ff-all-project .ff-all-project-dropdown--selected .ff-all-project-container {\n  border-radius: 20px;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n  background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n  text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label {\n  position: relative;\n  white-space: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label:hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label::after {\n  content: \"\";\n  position: absolute;\n  top: 20px;\n  left: 0%;\n  width: 0%;\n  height: 2px;\n  background-color: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container {\n  display: flex;\n  padding: 4px;\n  gap: 4px;\n  justify-content: center;\n  text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container .label-icon {\n  height: 16px;\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-all-project .ff-projects-dropdown {\n  width: 202px;\n  position: absolute;\n  top: 50px;\n  padding: 1px;\n  border: 0.5px solid var(--expandable-menu-default-bg);\n  border-radius: 4px;\n  background-color: var(--secondary-icon-color);\n  color: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search {\n  width: 100%;\n  margin-bottom: 1px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input {\n  height: 30px;\n  width: inherit;\n  border-radius: 4px;\n  border-style: none;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input::placeholder {\n  padding-left: 28px;\n  font-size: 8px;\n  line-height: 12px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search span {\n  position: absolute;\n  top: 11px;\n  left: 8px;\n}\n.ff-all-project .ff-projects-dropdown .scroll {\n  max-height: 150px;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar {\n  width: 2px;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar-thumb {\n  background: var(--primary-icon-color);\n  border-radius: 2px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: flex-start;\n  gap: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover {\n  background-color: var(--primary-icon-color);\n  color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover svg path {\n  fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: flex-start;\n  gap: 4px;\n  white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover {\n  background-color: var(--primary-icon-color);\n  color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover svg path {\n  fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: flex-start;\n  gap: 4px;\n  background-color: var(--primary-icon-color);\n  color: var(--secondary-icon-color);\n  border-radius: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option .ff-projects-icons svg path {\n  fill: var(--secondary-icon-color);\n}\n\n@keyframes oscillate-border-width {\n  0% {\n    width: 50%;\n    left: 25%;\n  }\n  50% {\n    width: 70%;\n    left: 15%;\n  }\n  100% {\n    width: 50%;\n    left: 25%;\n  }\n}";
-styleInject(css_248z$z);
+var css_248z$A = ".ff-all-project {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n.ff-all-project .ff-all-project-dropdown {\n  width: fit-content;\n  border-radius: 16px;\n  background-color: var(--ff-all-projects-default-color);\n  color: var(--expandable-menu-default-bg);\n  line-height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  padding: 3px;\n  cursor: pointer;\n}\n.ff-all-project .ff-all-project-dropdown--selected {\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n}\n.ff-all-project .ff-all-project-dropdown--selected .ff-all-project-container {\n  border-radius: 20px;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n  background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n  text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label {\n  position: relative;\n  white-space: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label:hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label::after {\n  content: \"\";\n  position: absolute;\n  top: 20px;\n  left: 0%;\n  width: 0%;\n  height: 2px;\n  background-color: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container {\n  display: flex;\n  padding: 4px;\n  gap: 4px;\n  justify-content: center;\n  text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container .label-icon {\n  height: 16px;\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-all-project .ff-projects-dropdown {\n  width: 202px;\n  position: absolute;\n  top: 50px;\n  padding: 1px;\n  border: 0.5px solid var(--expandable-menu-default-bg);\n  border-radius: 4px;\n  background-color: var(--secondary-icon-color);\n  color: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search {\n  width: 100%;\n  margin-bottom: 1px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input {\n  height: 30px;\n  width: inherit;\n  border-radius: 4px;\n  border-style: none;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input::placeholder {\n  padding-left: 28px;\n  font-size: 8px;\n  line-height: 12px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search span {\n  position: absolute;\n  top: 11px;\n  left: 8px;\n}\n.ff-all-project .ff-projects-dropdown .scroll {\n  max-height: 150px;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar {\n  width: 2px;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar-thumb {\n  background: var(--primary-icon-color);\n  border-radius: 2px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: flex-start;\n  gap: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover {\n  background-color: var(--primary-icon-color);\n  color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover svg path {\n  fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: flex-start;\n  gap: 4px;\n  white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover {\n  background-color: var(--primary-icon-color);\n  color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover svg path {\n  fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: flex-start;\n  gap: 4px;\n  background-color: var(--primary-icon-color);\n  color: var(--secondary-icon-color);\n  border-radius: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option .ff-projects-icons svg path {\n  fill: var(--secondary-icon-color);\n}\n\n@keyframes oscillate-border-width {\n  0% {\n    width: 50%;\n    left: 25%;\n  }\n  50% {\n    width: 70%;\n    left: 15%;\n  }\n  100% {\n    width: 50%;\n    left: 25%;\n  }\n}";
+styleInject(css_248z$A);
 
 const AllProjectsDropdown = ({
   onClick = () => {},
@@ -23076,8 +23239,8 @@ const AllProjectsDropdown = ({
   });
 };
 
-var css_248z$y = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-pie-chart-container .ff-pie-chart-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-pie-chart-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  font-size: var(--fontSize);\n}\n.ff-pie-chart-container .ff-pie-chart-border {\n  display: inline-block;\n  border: 2px solid var(--pie-chart-border-color);\n  border-radius: 50%;\n}\n.ff-pie-chart-container .ff-pie-chart-tooltip {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -100%);\n  padding: 8px;\n  border-radius: 4px;\n  background-color: var(--tooltip-bg-color);\n  color: var(--primary-icon-color);\n  font-weight: 400;\n  pointer-events: none;\n}\n.ff-pie-chart-container .ff-pie-chart-legend {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 16px;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-value {\n  color: var(--drawer-title-color);\n}";
-styleInject(css_248z$y);
+var css_248z$z = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-pie-chart-container .ff-pie-chart-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-pie-chart-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  font-size: var(--fontSize);\n}\n.ff-pie-chart-container .ff-pie-chart-border {\n  display: inline-block;\n  border: 2px solid var(--pie-chart-border-color);\n  border-radius: 50%;\n}\n.ff-pie-chart-container .ff-pie-chart-tooltip {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -100%);\n  padding: 8px;\n  border-radius: 4px;\n  background-color: var(--tooltip-bg-color);\n  color: var(--primary-icon-color);\n  font-weight: 400;\n  pointer-events: none;\n}\n.ff-pie-chart-container .ff-pie-chart-legend {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 16px;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-value {\n  color: var(--drawer-title-color);\n}";
+styleInject(css_248z$z);
 
 const calculateArc$3 = ({
   x,
@@ -23231,8 +23394,8 @@ const PieChart = ({
   });
 };
 
-var css_248z$x = ".ff-app-header-main {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header {\n  display: flex;\n  flex-basis: 100%;\n  justify-content: space-between;\n  background-color: var(--brand-color);\n  padding-left: 8px;\n  height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n  padding: 4px;\n  height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n  display: flex;\n  align-items: center;\n  background-color: var(--brand-color);\n  transform: translateY(12px);\n  border-radius: 20px;\n  padding: 5px;\n  z-index: 1000;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n  display: flex;\n  align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n  margin-left: 8px;\n  padding: 7px;\n  color: var(--ff-header-text-color);\n  cursor: pointer;\n  display: flex;\n  position: relative;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  background: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n  white-space: nowrap;\n  align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n  padding: 3px;\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n  transition: width 3s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n  background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n  border-radius: 20px;\n  padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n  margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n  margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n  color: var(--ff-header-submenu-text-color);\n  align-content: center;\n  position: relative;\n  white-space: nowrap;\n  padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n  color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 20%;\n  width: 70%;\n  height: 2px;\n  border-radius: 4px;\n  box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n  display: flex;\n  align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n  margin-right: 6px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n  display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n  padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n  background: var(--brand-color);\n  border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n  background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n  fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n  width: 40px;\n  display: flex;\n  justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n  cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n  height: 24px;\n  padding: 8px;\n  align-content: center;\n}\n\n@keyframes oscillate-border-width {\n  0% {\n    width: 50%;\n    left: 25%;\n  }\n  50% {\n    width: 70%;\n    left: 15%;\n  }\n  100% {\n    width: 50%;\n    left: 25%;\n  }\n}";
-styleInject(css_248z$x);
+var css_248z$y = ".ff-app-header-main {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header {\n  display: flex;\n  flex-basis: 100%;\n  justify-content: space-between;\n  background-color: var(--brand-color);\n  padding-left: 8px;\n  height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n  padding: 4px;\n  height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n  display: flex;\n  align-items: center;\n  background-color: var(--brand-color);\n  transform: translateY(12px);\n  border-radius: 20px;\n  padding: 5px;\n  z-index: 1000;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n  display: flex;\n  align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n  margin-left: 8px;\n  padding: 7px;\n  color: var(--ff-header-text-color);\n  cursor: pointer;\n  display: flex;\n  position: relative;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  background: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n  white-space: nowrap;\n  align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n  padding: 3px;\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n  transition: width 3s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n  background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n  border-radius: 20px;\n  padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n  margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n  margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n  color: var(--ff-header-submenu-text-color);\n  align-content: center;\n  position: relative;\n  white-space: nowrap;\n  padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n  color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 20%;\n  width: 70%;\n  height: 2px;\n  border-radius: 4px;\n  box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n  display: flex;\n  align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n  margin-right: 6px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n  display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n  padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n  background: var(--brand-color);\n  border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n  background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n  fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n  width: 40px;\n  display: flex;\n  justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n  cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n  height: 24px;\n  padding: 8px;\n  align-content: center;\n}\n\n@keyframes oscillate-border-width {\n  0% {\n    width: 50%;\n    left: 25%;\n  }\n  50% {\n    width: 70%;\n    left: 15%;\n  }\n  100% {\n    width: 50%;\n    left: 25%;\n  }\n}";
+styleInject(css_248z$y);
 
 const AppHeader = ({
   logoIconName = 'fireflink_icon',
@@ -23370,8 +23533,8 @@ const AppHeader = ({
   });
 };
 
-var css_248z$w = ".ff_rounded_lg {\n  border-radius: 8px;\n}\n\n.ff_paper_basic_style {\n  padding: 20px;\n  background-color: var(--ff-paper-dark-background-color);\n}\n\n.ff_paper_default_style {\n  padding: 20px;\n  background-color: var(--ff-paper-background-color);\n}";
-styleInject(css_248z$w);
+var css_248z$x = ".ff_rounded_lg {\n  border-radius: 8px;\n}\n\n.ff_paper_basic_style {\n  padding: 20px;\n  background-color: var(--ff-paper-dark-background-color);\n}\n\n.ff_paper_default_style {\n  padding: 20px;\n  background-color: var(--ff-paper-background-color);\n}";
+styleInject(css_248z$x);
 
 const Paper = ({
   children,
@@ -23387,8 +23550,8 @@ const Paper = ({
   });
 };
 
-var css_248z$v = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n  flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n  flex-direction: row-reverse;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n  flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n  text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n  position: absolute;\n  padding: 5px;\n  border-radius: 4px;\n  pointer-events: none;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n  display: grid;\n  gap: 10px;\n  grid-auto-rows: 1fr;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend {\n  grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend.ff-side-legend {\n  grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend .ff-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n  grid-template-columns: repeat(2, 130px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 15px;\n  min-width: 25px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n  margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend {\n  grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend.ff-side-legend {\n  grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend .ff-legend-item {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  margin-left: 1rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table {\n  width: 100%;\n  min-width: 300px;\n  border-collapse: collapse;\n  text-align: left;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header {\n  font-weight: bold;\n  background-color: var(--tabs-bg-color);\n  color: var(--input-hover-border-color);\n  padding: 0.5rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n  text-align: right;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 1rem;\n  min-width: 22px;\n  height: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  padding: 0.5rem;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n  display: flex;\n  align-items: baseline;\n  gap: 5px;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  text-align: right;\n}";
-styleInject(css_248z$v);
+var css_248z$w = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n  flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n  flex-direction: row-reverse;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n  flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n  text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n  position: absolute;\n  padding: 5px;\n  border-radius: 4px;\n  pointer-events: none;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n  display: grid;\n  gap: 10px;\n  grid-auto-rows: 1fr;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend {\n  grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend.ff-side-legend {\n  grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend .ff-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n  grid-template-columns: repeat(2, 130px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 15px;\n  min-width: 25px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n  margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend {\n  grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend.ff-side-legend {\n  grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend .ff-legend-item {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  margin-left: 1rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table {\n  width: 100%;\n  min-width: 300px;\n  border-collapse: collapse;\n  text-align: left;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header {\n  font-weight: bold;\n  background-color: var(--tabs-bg-color);\n  color: var(--input-hover-border-color);\n  padding: 0.5rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n  text-align: right;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 1rem;\n  min-width: 22px;\n  height: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  padding: 0.5rem;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n  display: flex;\n  align-items: baseline;\n  gap: 5px;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  text-align: right;\n}";
+styleInject(css_248z$w);
 
 const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
   const startX = x + radius * Math.cos(startAngle);
@@ -25486,8 +25649,8 @@ var RecaptchaWrapper = makeAsyncScript(getURL, {
   } : {}
 })(ReCAPTCHA);
 
-var css_248z$u = ".ff-recaptcha-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.ff-recaptcha-wrapper .ff-recaptcha-error {\n  color: var(--input-error-text-color);\n  font-size: 12px;\n  margin-top: 4px;\n}";
-styleInject(css_248z$u);
+var css_248z$v = ".ff-recaptcha-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.ff-recaptcha-wrapper .ff-recaptcha-error {\n  color: var(--input-error-text-color);\n  font-size: 12px;\n  margin-top: 4px;\n}";
+styleInject(css_248z$v);
 
 const Recaptcha = /*#__PURE__*/React.forwardRef(({
   onVerify,
@@ -25530,8 +25693,8 @@ const nlpDropdownDefaultCSSData = {
   dropDownWrapperPadding: 0
 };
 
-var css_248z$t = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper {\n  max-height: 160px;\n  z-index: 100;\n  position: absolute;\n  min-width: 100px;\n  border: 1px solid var(--ff-select-option-border-color);\n  box-sizing: border-box;\n  margin-top: 4px;\n  border-radius: 4px;\n  background-color: var(--ff-select-background-color);\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  overflow: hidden auto;\n  display: flex;\n  justify-content: space-between;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-wrapper1 {\n  max-height: 160px;\n  z-index: 100;\n  min-width: auto;\n  box-sizing: border-box;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-track {\n  background-color: transparent;\n  border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option {\n  width: calc(100% - 18px);\n  border: 1px solid transparent;\n  border-radius: 4px;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option:hover {\n  border-color: var(--ff-select-background-color);\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-no-option {\n  width: calc(100% - 16px);\n  margin: 0;\n  overflow: hidden;\n  padding: 0px 8px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data {\n  width: 200px;\n  height: 134px;\n  border: 1px solid transparent;\n  border-radius: 5px;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  overflow: scroll;\n}";
-styleInject(css_248z$t);
+var css_248z$u = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper {\n  max-height: 160px;\n  z-index: 100;\n  position: absolute;\n  min-width: 100px;\n  border: 1px solid var(--ff-select-option-border-color);\n  box-sizing: border-box;\n  margin-top: 4px;\n  border-radius: 4px;\n  background-color: var(--ff-select-background-color);\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  overflow: hidden auto;\n  display: flex;\n  justify-content: space-between;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-wrapper1 {\n  max-height: 160px;\n  z-index: 100;\n  min-width: auto;\n  box-sizing: border-box;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-track {\n  background-color: transparent;\n  border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option {\n  width: calc(100% - 18px);\n  border: 1px solid transparent;\n  border-radius: 4px;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option:hover {\n  border-color: var(--ff-select-background-color);\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-no-option {\n  width: calc(100% - 16px);\n  margin: 0;\n  overflow: hidden;\n  padding: 0px 8px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data {\n  width: 200px;\n  height: 134px;\n  border: 1px solid transparent;\n  border-radius: 5px;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  overflow: scroll;\n}";
+styleInject(css_248z$u);
 
 const NlpDropdown = ({
   onSelectBlur,
@@ -25695,8 +25858,8 @@ const NlpDropdown = ({
   });
 };
 
-var css_248z$s = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-nlp-input-wrapper .ff-nlp-input, .ff-nlp-input-wrapper .ff-nlp-input-input {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend, .ff-nlp-input-wrapper .ff-nlp-input-label--active {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-nlp-input-wrapper {\n  position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  min-height: 32px;\n  min-width: 489px;\n  display: flex;\n  align-items: end;\n  position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset {\n  margin: 0;\n  padding: 25px 0px 0px 8px;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  border-radius: 4px;\n  display: block;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-label {\n  padding: 30px 0px 0px 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--default {\n  opacity: 0;\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--active {\n  opacity: 1;\n  border-color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--option {\n  opacity: 1;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--error {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n  padding: 0 2px;\n  letter-spacing: 0.5px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--active {\n  transition: opacity 0.25s ease-out, transform 0.25s ease-out, font-size 0.25s ease-out, padding 0.25s ease-out;\n  opacity: 1;\n  color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--option {\n  opacity: 1;\n  color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--error {\n  color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--required {\n  margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input {\n  position: absolute;\n  top: 6px;\n  right: auto;\n  bottom: auto;\n  left: auto;\n  width: calc(100% - 38px);\n  min-height: calc(100% - 8px);\n  padding: 0 28px 0 8px;\n  border-radius: 4px;\n  border: 1px solid transparent;\n  z-index: 100;\n  background: transparent;\n  outline: none;\n  color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input:hover ~ .ff-nlp-input-label {\n  color: var(--ff-nlp-input-text-hover-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default {\n  opacity: 1;\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover {\n  border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option {\n  border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option .ff-nlp-input-legend--option {\n  color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-label {\n  min-height: calc(100% - 2px);\n  margin-top: 0px;\n  top: 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active:hover {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border {\n  border: none;\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover ~ .ff-nlp-input-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable {\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover {\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover ~ .ff-nlp-input-label--default {\n  color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error:hover {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n  position: absolute;\n  top: 13px;\n  right: auto;\n  bottom: auto;\n  left: 8px;\n  z-index: 1;\n  font-size: 12px;\n  top: 60%;\n  padding-left: 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 1;\n  color: var(--ff-nlp-input-default-color);\n  transform: translateY(-50%);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--active {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n  transform: translateY(-150%);\n  padding: 0 6px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--required {\n  margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow {\n  position: absolute;\n  top: 60%;\n  height: 100%;\n  right: 10px;\n  transform: rotateX(180deg) translateY(50%);\n  cursor: pointer;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--no-label {\n  top: 50%;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--down {\n  transform: rotateX(0deg) translateY(-50%);\n  z-index: 101;\n}\n.ff-nlp-input-wrapper-error-text {\n  position: absolute;\n  top: auto;\n  right: auto;\n  bottom: -14px;\n  left: 12px;\n  white-space: nowrap;\n}";
-styleInject(css_248z$s);
+var css_248z$t = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-nlp-input-wrapper .ff-nlp-input, .ff-nlp-input-wrapper .ff-nlp-input-input {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend, .ff-nlp-input-wrapper .ff-nlp-input-label--active {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-nlp-input-wrapper {\n  position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  min-height: 32px;\n  min-width: 489px;\n  display: flex;\n  align-items: end;\n  position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset {\n  margin: 0;\n  padding: 25px 0px 0px 8px;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  border-radius: 4px;\n  display: block;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-label {\n  padding: 30px 0px 0px 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--default {\n  opacity: 0;\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--active {\n  opacity: 1;\n  border-color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--option {\n  opacity: 1;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--error {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n  padding: 0 2px;\n  letter-spacing: 0.5px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--active {\n  transition: opacity 0.25s ease-out, transform 0.25s ease-out, font-size 0.25s ease-out, padding 0.25s ease-out;\n  opacity: 1;\n  color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--option {\n  opacity: 1;\n  color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--error {\n  color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--required {\n  margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input {\n  position: absolute;\n  top: 6px;\n  right: auto;\n  bottom: auto;\n  left: auto;\n  width: calc(100% - 38px);\n  min-height: calc(100% - 8px);\n  padding: 0 28px 0 8px;\n  border-radius: 4px;\n  border: 1px solid transparent;\n  z-index: 100;\n  background: transparent;\n  outline: none;\n  color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input:hover ~ .ff-nlp-input-label {\n  color: var(--ff-nlp-input-text-hover-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default {\n  opacity: 1;\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover {\n  border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option {\n  border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option .ff-nlp-input-legend--option {\n  color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-label {\n  min-height: calc(100% - 2px);\n  margin-top: 0px;\n  top: 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active:hover {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border {\n  border: none;\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover ~ .ff-nlp-input-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable {\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover {\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover ~ .ff-nlp-input-label--default {\n  color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error:hover {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n  position: absolute;\n  top: 13px;\n  right: auto;\n  bottom: auto;\n  left: 8px;\n  z-index: 1;\n  font-size: 12px;\n  top: 60%;\n  padding-left: 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 1;\n  color: var(--ff-nlp-input-default-color);\n  transform: translateY(-50%);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--active {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n  transform: translateY(-150%);\n  padding: 0 6px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--required {\n  margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow {\n  position: absolute;\n  top: 60%;\n  height: 100%;\n  right: 10px;\n  transform: rotateX(180deg) translateY(50%);\n  cursor: pointer;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--no-label {\n  top: 50%;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--down {\n  transform: rotateX(0deg) translateY(-50%);\n  z-index: 101;\n}\n.ff-nlp-input-wrapper-error-text {\n  position: absolute;\n  top: auto;\n  right: auto;\n  bottom: -14px;\n  left: 12px;\n  white-space: nowrap;\n}";
+styleInject(css_248z$t);
 
 const nlpInputReducer = (state, action) => {
   switch (action.type) {
@@ -26007,8 +26170,8 @@ const NlpInput = ({
   });
 };
 
-var css_248z$r = ".ff-icon-radio-group {\n  width: 237px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  gap: 47px;\n  position: relative;\n}\n\n.ff-icon-radio-button {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  position: relative;\n}\n.ff-icon-radio-button.selected {\n  background-color: var(--brand-color);\n}\n.ff-icon-radio-button.disabled {\n  opacity: 50%;\n  cursor: not-allowed;\n}\n.ff-icon-radio-button .icon-container {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid var(--border-color);\n  background: var(--drawer-footer-bg);\n}\n.ff-icon-radio-button .icon-container:hover {\n  background: var(--border-color);\n}\n.ff-icon-radio-button .icon-container.selected {\n  background-color: var(--brand-color);\n}\n.ff-icon-radio-button .icon-container .icon {\n  width: 14px;\n  height: 14px;\n}\n\n.line-connector {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background-color: var(--border-color);\n  z-index: -1;\n  border-radius: 2px 0px 0px 0px;\n  opacity: 0px;\n}";
-styleInject(css_248z$r);
+var css_248z$s = ".ff-icon-radio-group {\n  width: 237px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  gap: 47px;\n  position: relative;\n}\n\n.ff-icon-radio-button {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  position: relative;\n}\n.ff-icon-radio-button.selected {\n  background-color: var(--brand-color);\n}\n.ff-icon-radio-button.disabled {\n  opacity: 50%;\n  cursor: not-allowed;\n}\n.ff-icon-radio-button .icon-container {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid var(--border-color);\n  background: var(--drawer-footer-bg);\n}\n.ff-icon-radio-button .icon-container:hover {\n  background: var(--border-color);\n}\n.ff-icon-radio-button .icon-container.selected {\n  background-color: var(--brand-color);\n}\n.ff-icon-radio-button .icon-container .icon {\n  width: 14px;\n  height: 14px;\n}\n\n.line-connector {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background-color: var(--border-color);\n  z-index: -1;\n  border-radius: 2px 0px 0px 0px;\n  opacity: 0px;\n}";
+styleInject(css_248z$s);
 
 const IconRadioGroup = ({
   items,
@@ -26059,8 +26222,8 @@ const IconRadioGroup = ({
   });
 };
 
-var css_248z$q = ".ff-machine-input-field-wrapper {\n  min-width: 100px;\n  height: 32px;\n  position: relative;\n  cursor: pointer;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n  height: 100%;\n  width: 100%;\n  border: 1px solid var(--ff-machine-input-field-border-color);\n  padding: 0 8px 0 0;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n  display: flex;\n  align-items: center;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-icon {\n  margin-left: 4px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  min-width: 30px;\n  max-width: 70px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse {\n  direction: ltr;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n  flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n  flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-label {\n  position: absolute;\n  top: -6px;\n  left: 8px;\n  background-color: var(--ff-machine-input-field-border-color);\n  border-radius: 4px;\n  padding: 1px 2px;\n  height: 12px;\n}";
-styleInject(css_248z$q);
+var css_248z$r = ".ff-machine-input-field-wrapper {\n  min-width: 100px;\n  height: 32px;\n  position: relative;\n  cursor: pointer;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n  height: 100%;\n  width: 100%;\n  border: 1px solid var(--ff-machine-input-field-border-color);\n  padding: 0 8px 0 0;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n  display: flex;\n  align-items: center;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-icon {\n  margin-left: 4px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  min-width: 30px;\n  max-width: 70px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse {\n  direction: ltr;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n  flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n  flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-label {\n  position: absolute;\n  top: -6px;\n  left: 8px;\n  background-color: var(--ff-machine-input-field-border-color);\n  border-radius: 4px;\n  padding: 1px 2px;\n  height: 12px;\n}";
+styleInject(css_248z$r);
 
 const MachineInputField = /*#__PURE__*/React.forwardRef(({
   width = '',
@@ -26126,11 +26289,11 @@ const MachineInputField = /*#__PURE__*/React.forwardRef(({
 });
 MachineInputField.displayName = 'MachineInputField';
 
-var css_248z$p = ".ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper {\n  height: 66px;\n  box-sizing: border-box;\n  width: fit-content;\n  margin-bottom: 16px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-sequential-select-branch {\n  width: 240px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper {\n  margin: 0;\n  width: 40px;\n  border-top: 1px solid var(--ff-connecting-branch-color);\n  position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper .ff-branch-arrow {\n  width: 6px;\n  height: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  clip-path: polygon(100% 50%, 0 100%, 0 0);\n  position: absolute;\n  right: -1px;\n  top: -3px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-select-branch-point {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background-color: var(--ff-connecting-branch-color);\n  position: absolute;\n  left: -3px;\n  z-index: 102;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down {\n  position: absolute;\n  height: 38px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-point {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background-color: var(--ff-connecting-branch-color);\n  position: absolute;\n  left: -2px;\n  z-index: 102;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-arrow {\n  width: 0;\n  height: 62px;\n  top: calc(50% + 1px);\n  border-left: 1px solid var(--ff-connecting-branch-color);\n  z-index: 102;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist {\n  box-sizing: border-box;\n  width: 240px;\n  display: flex;\n  justify-content: space-between;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper {\n  display: flex;\n  align-items: center;\n  margin-right: 12px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper .ff-scope-text {\n  text-transform: capitalize;\n  margin: 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper {\n  display: flex;\n  align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper #ff-sequential-machine-datalist {\n  display: flex;\n  align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-dataset-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-run-delete-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n  cursor: pointer;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n  margin: 0 12px 0 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-sequential-branches-wrapper {\n  box-sizing: border-box;\n  width: fit-content;\n  height: fit-content;\n}";
-styleInject(css_248z$p);
+var css_248z$q = ".ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper {\n  height: 66px;\n  box-sizing: border-box;\n  width: fit-content;\n  margin-bottom: 16px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-sequential-select-branch {\n  width: 240px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper {\n  margin: 0;\n  width: 40px;\n  border-top: 1px solid var(--ff-connecting-branch-color);\n  position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper .ff-branch-arrow {\n  width: 6px;\n  height: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  clip-path: polygon(100% 50%, 0 100%, 0 0);\n  position: absolute;\n  right: -1px;\n  top: -3px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-select-branch-point {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background-color: var(--ff-connecting-branch-color);\n  position: absolute;\n  left: -3px;\n  z-index: 102;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down {\n  position: absolute;\n  height: 38px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-point {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background-color: var(--ff-connecting-branch-color);\n  position: absolute;\n  left: -2px;\n  z-index: 102;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-arrow {\n  width: 0;\n  height: 62px;\n  top: calc(50% + 1px);\n  border-left: 1px solid var(--ff-connecting-branch-color);\n  z-index: 102;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist {\n  box-sizing: border-box;\n  width: 240px;\n  display: flex;\n  justify-content: space-between;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper {\n  display: flex;\n  align-items: center;\n  margin-right: 12px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper .ff-scope-text {\n  text-transform: capitalize;\n  margin: 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper {\n  display: flex;\n  align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper #ff-sequential-machine-datalist {\n  display: flex;\n  align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-dataset-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-run-delete-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n  cursor: pointer;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n  margin: 0 12px 0 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-sequential-branches-wrapper {\n  box-sizing: border-box;\n  width: fit-content;\n  height: fit-content;\n}";
+styleInject(css_248z$q);
 
-var css_248z$o = ".ff-connecting-branch-grid,\n.ff-connecting-branch-grid-reverse {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: 24px 180px 40px 180px 24px;\n  height: 66px;\n  margin-bottom: 16px;\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper {\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow {\n  position: absolute;\n  height: 6px;\n  width: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  z-index: 2;\n  clip-path: polygon(0 0, 0% 100%, 100% 50%);\n  top: calc(25% - 3px);\n  right: -2px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse {\n  position: absolute;\n  height: 6px;\n  width: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  z-index: 2;\n  left: -2px;\n  top: calc(25% - 3px);\n  clip-path: polygon(0 50%, 100% 100%, 100% 0);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container {\n  width: 100%;\n  height: 25%;\n  border: 1px solid var(--ff-connecting-branch-color);\n  border-top: none;\n  border-right: none;\n  border-bottom-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse {\n  width: 100%;\n  height: 25%;\n  border: 1px solid var(--ff-connecting-branch-color);\n  border-top: none;\n  border-left: none;\n  border-bottom-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist {\n  display: flex;\n  padding-top: 4px;\n  height: 24px;\n  justify-content: flex-end;\n  width: 100%;\n  align-items: center;\n  flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-dataset-list-branch {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-icon {\n  margin-right: 4px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-text {\n  margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-delete-icon {\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse {\n  display: flex;\n  padding-top: 4px;\n  height: 24px;\n  justify-content: flex-end;\n  width: 100%;\n  align-items: center;\n  flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-icon {\n  margin-right: 4px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-text {\n  margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon {\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper {\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  border-radius: 50%;\n  z-index: 2;\n  right: -2px;\n  top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  border-radius: 50%;\n  z-index: 2;\n  left: -2px;\n  top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow {\n  height: 0;\n  width: 100%;\n  margin-top: calc(50% - 3px);\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  clip-path: polygon(0 0, 0% 100%, 100% 50%);\n  top: calc(25% - 3px);\n  right: -2px;\n  z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  clip-path: polygon(0 50%, 100% 100%, 100% 0);\n  top: calc(25% - 3px);\n  left: -1px;\n  z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow {\n  width: 100%;\n  height: 100%;\n  margin-top: 17px;\n  border-top: 1px solid var(--ff-connecting-branch-color);\n  border-right: 1px solid var(--ff-connecting-branch-color);\n  border-top-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow-reverse {\n  width: 100%;\n  height: 100%;\n  margin-top: 17px;\n  border-top: 1px solid var(--ff-connecting-branch-color);\n  border-left: 1px solid var(--ff-connecting-branch-color);\n  border-top-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-browser-button,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-browser-button {\n  height: 32px;\n  display: flex;\n  align-items: center;\n}\n\n.ff-connecting-branch-grid-reverse {\n  direction: rtl;\n  margin: 0 0 16px 0;\n}";
-styleInject(css_248z$o);
+var css_248z$p = ".ff-connecting-branch-grid,\n.ff-connecting-branch-grid-reverse {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: 24px 180px 40px 180px 24px;\n  height: 66px;\n  margin-bottom: 16px;\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper {\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow {\n  position: absolute;\n  height: 6px;\n  width: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  z-index: 2;\n  clip-path: polygon(0 0, 0% 100%, 100% 50%);\n  top: calc(25% - 3px);\n  right: -2px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse {\n  position: absolute;\n  height: 6px;\n  width: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  z-index: 2;\n  left: -2px;\n  top: calc(25% - 3px);\n  clip-path: polygon(0 50%, 100% 100%, 100% 0);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container {\n  width: 100%;\n  height: 25%;\n  border: 1px solid var(--ff-connecting-branch-color);\n  border-top: none;\n  border-right: none;\n  border-bottom-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse {\n  width: 100%;\n  height: 25%;\n  border: 1px solid var(--ff-connecting-branch-color);\n  border-top: none;\n  border-left: none;\n  border-bottom-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist {\n  display: flex;\n  padding-top: 4px;\n  height: 24px;\n  justify-content: flex-end;\n  width: 100%;\n  align-items: center;\n  flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-dataset-list-branch {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-icon {\n  margin-right: 4px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-text {\n  margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-delete-icon {\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse {\n  display: flex;\n  padding-top: 4px;\n  height: 24px;\n  justify-content: flex-end;\n  width: 100%;\n  align-items: center;\n  flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-icon {\n  margin-right: 4px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-text {\n  margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon {\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper {\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  border-radius: 50%;\n  z-index: 2;\n  right: -2px;\n  top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  border-radius: 50%;\n  z-index: 2;\n  left: -2px;\n  top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow {\n  height: 0;\n  width: 100%;\n  margin-top: calc(50% - 3px);\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  clip-path: polygon(0 0, 0% 100%, 100% 50%);\n  top: calc(25% - 3px);\n  right: -2px;\n  z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  clip-path: polygon(0 50%, 100% 100%, 100% 0);\n  top: calc(25% - 3px);\n  left: -1px;\n  z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow {\n  width: 100%;\n  height: 100%;\n  margin-top: 17px;\n  border-top: 1px solid var(--ff-connecting-branch-color);\n  border-right: 1px solid var(--ff-connecting-branch-color);\n  border-top-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow-reverse {\n  width: 100%;\n  height: 100%;\n  margin-top: 17px;\n  border-top: 1px solid var(--ff-connecting-branch-color);\n  border-left: 1px solid var(--ff-connecting-branch-color);\n  border-top-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-browser-button,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-browser-button {\n  height: 32px;\n  display: flex;\n  align-items: center;\n}\n\n.ff-connecting-branch-grid-reverse {\n  direction: rtl;\n  margin: 0 0 16px 0;\n}";
+styleInject(css_248z$p);
 
 const Branches = ({
   machineInstances,
@@ -26291,8 +26454,8 @@ const Branches = ({
   });
 };
 
-var css_248z$n = ".ff-connecting-branch-grid-wrapper {\n  box-sizing: border-box;\n}";
-styleInject(css_248z$n);
+var css_248z$o = ".ff-connecting-branch-grid-wrapper {\n  box-sizing: border-box;\n}";
+styleInject(css_248z$o);
 
 const ConnectingBranches = ({
   machineBranchInstances,
@@ -26463,8 +26626,8 @@ const SequentialConnectingBranch = ({
   });
 };
 
-var css_248z$m = ".ff-input-field {\n  display: none;\n}\n\n.ff-attachment-files {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  line-height: 15px;\n}";
-styleInject(css_248z$m);
+var css_248z$n = ".ff-input-field {\n  display: none;\n}\n\n.ff-attachment-files {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  line-height: 15px;\n}";
+styleInject(css_248z$n);
 
 const AttachmentButton = ({
   label,
@@ -26639,8 +26802,8 @@ const toast = {
   alert: (arg1, arg2) => openToast('alert', arg1, arg2)
 };
 
-var css_248z$l = "/* Container Styling */\n.toggle-container {\n  display: flex;\n  background-color: var(--base-bg-color);\n  height: 24px;\n  border-radius: 6px;\n  padding: 4px 2px;\n  overflow: hidden;\n  width: fit-content;\n  box-shadow: 1px 1px 2px 0px var(--base-bg-color), inset -1px -1px 2px var(--base-bg-color), inset 1px -1px 2px var(--ff-toggle-switch-shadow-color), inset -1px 2px 0px var(--ff-toggle-switch-shadow-color);\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n}\n\n/* Button Styling */\n.toggle-button {\n  padding: 4px 2px;\n  font-size: 10px;\n  font-weight: 500;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: var(--base-bg-color);\n  color: var(--ff-toggle-switch-off-color);\n  outline: none;\n  transition: all 0.3s ease;\n  min-width: 24px;\n  height: 20px;\n  text-align: center;\n  box-shadow: inset 1px 1px 2px 0 var(--base-bg-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), 1px -1px 2px 0 var(--ff-chips-blur-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Active Button */\n.toggle-button.active {\n  background-color: var(--ff-line-number-bg);\n  color: var(--base-bg-color);\n  box-shadow: inset -1px -1px 2px 0 var(--ff-chips-blur-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Button Hover Effect */\n.toggle-button:hover {\n  background-color: var(--hover-color);\n  color: var(--brand-color);\n}";
-styleInject(css_248z$l);
+var css_248z$m = "/* Container Styling */\n.toggle-container {\n  display: flex;\n  background-color: var(--base-bg-color);\n  height: 24px;\n  border-radius: 6px;\n  padding: 4px 2px;\n  overflow: hidden;\n  width: fit-content;\n  box-shadow: 1px 1px 2px 0px var(--base-bg-color), inset -1px -1px 2px var(--base-bg-color), inset 1px -1px 2px var(--ff-toggle-switch-shadow-color), inset -1px 2px 0px var(--ff-toggle-switch-shadow-color);\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n}\n\n/* Button Styling */\n.toggle-button {\n  padding: 4px 2px;\n  font-size: 10px;\n  font-weight: 500;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: var(--base-bg-color);\n  color: var(--ff-toggle-switch-off-color);\n  outline: none;\n  transition: all 0.3s ease;\n  min-width: 24px;\n  height: 20px;\n  text-align: center;\n  box-shadow: inset 1px 1px 2px 0 var(--base-bg-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), 1px -1px 2px 0 var(--ff-chips-blur-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Active Button */\n.toggle-button.active {\n  background-color: var(--ff-line-number-bg);\n  color: var(--base-bg-color);\n  box-shadow: inset -1px -1px 2px 0 var(--ff-chips-blur-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Button Hover Effect */\n.toggle-button:hover {\n  background-color: var(--hover-color);\n  color: var(--brand-color);\n}";
+styleInject(css_248z$m);
 
 const ToggleSwitch = ({
   selected = "text",
@@ -26662,8 +26825,8 @@ const ToggleSwitch = ({
   });
 };
 
-var css_248z$k = ".ff-avatar {\n  border-radius: 50%;\n  overflow: hidden;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--ff-avatar-background-color);\n}\n.ff-avatar--small {\n  width: 32px;\n  height: 32px;\n}\n.ff-avatar--medium {\n  width: 48px;\n  height: 48px;\n}\n.ff-avatar--large {\n  width: 64px;\n  height: 64px;\n}";
-styleInject(css_248z$k);
+var css_248z$l = ".ff-avatar {\n  border-radius: 50%;\n  overflow: hidden;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--ff-avatar-background-color);\n}\n.ff-avatar--small {\n  width: 32px;\n  height: 32px;\n}\n.ff-avatar--medium {\n  width: 48px;\n  height: 48px;\n}\n.ff-avatar--large {\n  width: 64px;\n  height: 64px;\n}\n.ff-avatar .ff-avatar-label {\n  font-weight: bold;\n  text-align: center;\n}";
+styleInject(css_248z$l);
 
 const Avatar = ({
   variant = "small",
@@ -26671,8 +26834,11 @@ const Avatar = ({
   iconColor = 'var(--avatar-icon-color)',
   customAvatarSize,
   customIconSize,
-  backgroundColor
+  backgroundColor,
+  label,
+  labelFontSize
 }) => {
+  const truncatedLabel = label?.slice(0, 2);
   return jsxRuntime.jsx("div", {
     className: `ff-avatar ff-avatar--${variant}`,
     style: {
@@ -26680,7 +26846,14 @@ const Avatar = ({
       width: `${customAvatarSize}px`,
       backgroundColor
     },
-    children: jsxRuntime.jsx(Icon, {
+    children: label ? jsxRuntime.jsx("span", {
+      className: "ff-avatar-label",
+      style: {
+        fontSize: labelFontSize || '14px',
+        color: iconColor
+      },
+      children: truncatedLabel
+    }) : jsxRuntime.jsx(Icon, {
       name: iconName,
       height: customIconSize,
       width: customIconSize,
@@ -26689,8 +26862,8 @@ const Avatar = ({
   });
 };
 
-var css_248z$j = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown, .ff-label-edit-text-field .ff-text-dropdown-field {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n}\n.ff-label-edit-text-field .ff-label-text-field {\n  display: flex;\n  gap: 10px;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  position: absolute;\n  top: 0;\n  left: 10px;\n  transform: translateY(-50%);\n  transition: all 0.2s ease;\n  color: var(--label-edit-text-label-color);\n  background: var(--label-edit-text-background-color);\n  padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n  top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n  padding: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown {\n  border: 1px solid var(--label-edit-text-label-color);\n  outline: none;\n  width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field {\n  position: relative;\n  padding: 0 4px;\n  border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field {\n  flex: 2;\n  border: 1px solid var(--label-edit-text-label-color);\n  border-radius: 4px 0 0 4px;\n  border-right: none;\n  border-width: thin;\n  padding-left: 5px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field:focus-visible {\n  outline: none;\n}\n.ff-label-edit-text-field .dropdown {\n  border-radius: 0 4px 4px 0;\n  flex: 1;\n  height: inherit;\n}\n.ff-label-edit-text-field .ff-icon-container {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n  cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n  margin: 0;\n  color: var(--label-edit-error-text);\n}";
-styleInject(css_248z$j);
+var css_248z$k = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown, .ff-label-edit-text-field .ff-text-dropdown-field {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n}\n.ff-label-edit-text-field .ff-label-text-field {\n  display: flex;\n  gap: 10px;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  position: absolute;\n  top: 0;\n  left: 10px;\n  transform: translateY(-50%);\n  transition: all 0.2s ease;\n  color: var(--label-edit-text-label-color);\n  background: var(--label-edit-text-background-color);\n  padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n  top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n  padding: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown {\n  border: 1px solid var(--label-edit-text-label-color);\n  outline: none;\n  width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field {\n  position: relative;\n  padding: 0 4px;\n  border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field {\n  flex: 2;\n  border: 1px solid var(--label-edit-text-label-color);\n  border-radius: 4px 0 0 4px;\n  border-right: none;\n  border-width: thin;\n  padding-left: 5px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field:focus-visible {\n  outline: none;\n}\n.ff-label-edit-text-field .dropdown {\n  border-radius: 0 4px 4px 0;\n  flex: 1;\n  height: inherit;\n}\n.ff-label-edit-text-field .ff-icon-container {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n  cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n  margin: 0;\n  color: var(--label-edit-error-text);\n}";
+styleInject(css_248z$k);
 
 const getErrorMessage$1 = (inputValue, text, customError, customErrorCondition) => {
   if (inputValue === text) {
@@ -26893,8 +27066,8 @@ const LabelEditTextField = ({
   });
 };
 
-var css_248z$i = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n}\n.ff-label-edit-text-field .display-text-container {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button {\n  padding: 4px 8px;\n  background-color: var(--button-background-color);\n  color: var(--button-text-color);\n  border: 1px solid var(--button-border-color);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 12px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button:hover {\n  background-color: var(--button-hover-background-color);\n}\n.ff-label-edit-text-field .ff-label-text-field {\n  display: flex;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  position: absolute;\n  top: 0;\n  left: 10px;\n  transform: translateY(-50%);\n  transition: all 0.2s ease;\n  color: var(--label-edit-text-label-color);\n  background: var(--label-edit-text-background-color);\n  padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n  top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field {\n  outline: none;\n  width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field-error-border {\n  border: 1px solid var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-border {\n  border: 1px solid var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field-error-text {\n  color: var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-text {\n  color: var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field {\n  padding: 0 4px;\n  border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-icon-container {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n  cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n  color: var(--label-edit-error-text);\n  margin: 0;\n}";
-styleInject(css_248z$i);
+var css_248z$j = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n}\n.ff-label-edit-text-field .display-text-container {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button {\n  padding: 4px 8px;\n  background-color: var(--button-background-color);\n  color: var(--button-text-color);\n  border: 1px solid var(--button-border-color);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 12px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button:hover {\n  background-color: var(--button-hover-background-color);\n}\n.ff-label-edit-text-field .ff-label-text-field {\n  display: flex;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  position: absolute;\n  top: 0;\n  left: 10px;\n  transform: translateY(-50%);\n  transition: all 0.2s ease;\n  color: var(--label-edit-text-label-color);\n  background: var(--label-edit-text-background-color);\n  padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n  top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field {\n  outline: none;\n  width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field-error-border {\n  border: 1px solid var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-border {\n  border: 1px solid var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field-error-text {\n  color: var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-text {\n  color: var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field {\n  padding: 0 4px;\n  border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-icon-container {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n  cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n  color: var(--label-edit-error-text);\n  margin: 0;\n}";
+styleInject(css_248z$j);
 
 const capitalize = text => {
   if (!text) return '';
@@ -31231,15 +31404,15 @@ const Copied = () => {
   });
 };
 
-var css_248z$h = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-excel {\n  display: flex;\n  flex-direction: column;\n}\n\n.ff-spreadsheet {\n  --background-color: var(--drawer-footer-bg);\n  --text-color: var(--text-color);\n  --readonly-text-color: var(--toggle-strip-active);\n  --outline-color: var(--toggle-strip-active);\n  --outline-background-color: var(--overlay-bg);\n  --border-color: var(--toggle-strip-color);\n  --header-background-color: var(--pop-up-background-blur);\n  --elevation: var(--brand-color);\n  position: relative;\n  overflow: visible;\n  background: var(--background-color);\n  color: var(--text-color);\n  display: inline-block;\n}\n\n.ff-spreadsheet-active-cell {\n  position: absolute;\n  border: 2px solid var(--outline-color);\n  box-sizing: border-box;\n}\n\n.ff-spreadsheet-active-cell--edit {\n  background: var(--background-color);\n  box-shadow: var(--elevation);\n}\n\n.ff-spreadsheet-table {\n  overflow: scroll;\n  margin-top: 20px;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n.ff-spreadsheet-table::-webkit-scrollbar {\n  height: 0px;\n}\n\n.ff-spreadsheet-cell {\n  outline: none;\n  position: relative;\n  z-index: 0;\n}\n\n.ff-spreadsheet-active-cell .Selection_dot {\n  background-color: var(--elevation);\n  height: 7px;\n  width: 7px;\n  border-radius: 50%;\n  position: absolute;\n  right: -3px;\n  z-index: 10;\n  bottom: -3px;\n  cursor: crosshair;\n}\n\n.ff-spreadsheet-cell--readonly {\n  color: var(--readonly-text-color);\n}\n\n.ff-spreadsheet-cell,\n.ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  overflow: hidden;\n  word-break: keep-all;\n  white-space: nowrap;\n  text-align: left;\n  box-sizing: border-box;\n  user-select: none;\n}\n\n.ff-spreadsheet-header {\n  background: var(--header-background-color);\n  color: var(--readonly-text-color);\n  text-align: center;\n}\n\n.corner_indicator {\n  margin: 0px 0px 0px 15px;\n}\n\n.ff-spreadsheet-header--selected {\n  background: var(--brand-color);\n  color: var(--tooltip-text-color);\n}\n\n.ff-spreadsheet-header,\n.ff-spreadsheet-data-viewer,\n.ff-spreadsheet-data-editor input {\n  padding: 4px;\n  box-sizing: border-box;\n}\n\n.ff-spreadsheet-data-viewer--preserve-breaks {\n  white-space: pre-wrap;\n}\n\n.ff-spreadsheet-data-editor,\n.ff-spreadsheet-data-editor input {\n  width: 100%;\n  height: 100%;\n}\n\n.ff-spreadsheet-data-editor input {\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  margin: 0;\n}\n\n.ff-spreadsheet-data-viewer--boolean {\n  text-align: center;\n}\n\n.ff-spreadsheet-floating-rect {\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n.ff-spreadsheet-floating-rect--hidden {\n  display: none;\n}\n\n.ff-spreadsheet-floating-rect--selected {\n  background: var(--outline-background-color);\n  border: 2px var(--outline-color) solid;\n}\n\n.ff-spreadsheet-floating-rect--dragging {\n  border: none;\n}\n\n.ff-spreadsheet-floating-rect--copied {\n  border: 2px var(--outline-color) dashed;\n}";
+var css_248z$i = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-excel {\n  display: flex;\n  flex-direction: column;\n}\n\n.ff-spreadsheet {\n  --background-color: var(--drawer-footer-bg);\n  --text-color: var(--text-color);\n  --readonly-text-color: var(--toggle-strip-active);\n  --outline-color: var(--toggle-strip-active);\n  --outline-background-color: var(--overlay-bg);\n  --border-color: var(--toggle-strip-color);\n  --header-background-color: var(--pop-up-background-blur);\n  --elevation: var(--brand-color);\n  position: relative;\n  overflow: visible;\n  background: var(--background-color);\n  color: var(--text-color);\n  display: inline-block;\n}\n\n.ff-spreadsheet-active-cell {\n  position: absolute;\n  border: 2px solid var(--outline-color);\n  box-sizing: border-box;\n}\n\n.ff-spreadsheet-active-cell--edit {\n  background: var(--background-color);\n  box-shadow: var(--elevation);\n}\n\n.ff-spreadsheet-table {\n  overflow: scroll;\n  margin-top: 20px;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n.ff-spreadsheet-table::-webkit-scrollbar {\n  height: 0px;\n}\n\n.ff-spreadsheet-cell {\n  outline: none;\n  position: relative;\n  z-index: 0;\n}\n\n.ff-spreadsheet-active-cell .Selection_dot {\n  background-color: var(--elevation);\n  height: 7px;\n  width: 7px;\n  border-radius: 50%;\n  position: absolute;\n  right: -3px;\n  z-index: 10;\n  bottom: -3px;\n  cursor: crosshair;\n}\n\n.ff-spreadsheet-cell--readonly {\n  color: var(--readonly-text-color);\n}\n\n.ff-spreadsheet-cell,\n.ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  overflow: hidden;\n  word-break: keep-all;\n  white-space: nowrap;\n  text-align: left;\n  box-sizing: border-box;\n  user-select: none;\n}\n\n.ff-spreadsheet-header {\n  background: var(--header-background-color);\n  color: var(--readonly-text-color);\n  text-align: center;\n}\n\n.corner_indicator {\n  margin: 0px 0px 0px 15px;\n}\n\n.ff-spreadsheet-header--selected {\n  background: var(--brand-color);\n  color: var(--tooltip-text-color);\n}\n\n.ff-spreadsheet-header,\n.ff-spreadsheet-data-viewer,\n.ff-spreadsheet-data-editor input {\n  padding: 4px;\n  box-sizing: border-box;\n}\n\n.ff-spreadsheet-data-viewer--preserve-breaks {\n  white-space: pre-wrap;\n}\n\n.ff-spreadsheet-data-editor,\n.ff-spreadsheet-data-editor input {\n  width: 100%;\n  height: 100%;\n}\n\n.ff-spreadsheet-data-editor input {\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  margin: 0;\n}\n\n.ff-spreadsheet-data-viewer--boolean {\n  text-align: center;\n}\n\n.ff-spreadsheet-floating-rect {\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n.ff-spreadsheet-floating-rect--hidden {\n  display: none;\n}\n\n.ff-spreadsheet-floating-rect--selected {\n  background: var(--outline-background-color);\n  border: 2px var(--outline-color) solid;\n}\n\n.ff-spreadsheet-floating-rect--dragging {\n  border: none;\n}\n\n.ff-spreadsheet-floating-rect--copied {\n  border: 2px var(--outline-color) dashed;\n}";
+styleInject(css_248z$i);
+
+var css_248z$h = ".ff-excel-toolbar {\n  display: flex;\n  height: 32px;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-divider {\n  width: 1px;\n  height: 24px;\n  background-color: var(--excel-toolbar-divider);\n  margin: 0 24px;\n  border-radius: 1px;\n  z-index: 1000;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font {\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-family {\n  width: 120px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-size {\n  width: 56px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text {\n  width: 100px;\n  height: 24px;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text .ff-excel-toolbar-icon-underline {\n  display: flex;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon {\n  width: 88px;\n  height: 24px;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n  border-radius: 4px;\n  background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n  background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n  border-radius: 4px;\n  background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n  background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu {\n  display: flex;\n  align-items: center;\n  width: 36px;\n  height: 24px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu .ff-excel-toolbar-menu-option {\n  display: flex;\n  align-items: center;\n}";
 styleInject(css_248z$h);
 
-var css_248z$g = ".ff-excel-toolbar {\n  display: flex;\n  height: 32px;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-divider {\n  width: 1px;\n  height: 24px;\n  background-color: var(--excel-toolbar-divider);\n  margin: 0 24px;\n  border-radius: 1px;\n  z-index: 1000;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font {\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-family {\n  width: 120px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-size {\n  width: 56px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text {\n  width: 100px;\n  height: 24px;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text .ff-excel-toolbar-icon-underline {\n  display: flex;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon {\n  width: 88px;\n  height: 24px;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n  border-radius: 4px;\n  background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n  background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n  border-radius: 4px;\n  background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n  background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu {\n  display: flex;\n  align-items: center;\n  width: 36px;\n  height: 24px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu .ff-excel-toolbar-menu-option {\n  display: flex;\n  align-items: center;\n}";
+var css_248z$g = ".ff-excel-color-selector {\n  position: absolute;\n  background-color: var(--error_light);\n  width: 14px;\n  height: 3px;\n  bottom: 3px;\n  z-index: 200;\n  cursor: pointer;\n}\n.ff-excel-color-selector .ff-excel-color-selector-picker {\n  width: 100%;\n  height: 0;\n  padding: 0;\n  visibility: hidden;\n}";
 styleInject(css_248z$g);
 
-var css_248z$f = ".ff-excel-color-selector {\n  position: absolute;\n  background-color: var(--error_light);\n  width: 14px;\n  height: 3px;\n  bottom: 3px;\n  z-index: 200;\n  cursor: pointer;\n}\n.ff-excel-color-selector .ff-excel-color-selector-picker {\n  width: 100%;\n  height: 0;\n  padding: 0;\n  visibility: hidden;\n}";
-styleInject(css_248z$f);
-
 const ColorBarSelector = ({
   getColorValue,
   disabled
@@ -31986,11 +32159,11 @@ const Spreadsheet = props => {
   });
 };
 
-var css_248z$e = ".ff-excel-page {\n  width: 100%;\n  display: flex;\n  margin-top: 40px;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-excel-page .ff-excel-book {\n  position: relative;\n  width: 100%;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar {\n  margin-left: 60px;\n  display: flex;\n  height: 36px;\n  align-items: center;\n  color: var(--brand2-color);\n  margin-top: -2px;\n  box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-add-sheet-icon {\n  padding: 4px 6px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container {\n  height: 36px;\n  width: 860px;\n  display: flex;\n  overflow-x: auto;\n  align-items: center;\n  scrollbar-width: none;\n  scrollbar-color: var(--hover-color) transparent;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-thumb {\n  border-radius: 5px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar {\n  height: 0px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list {\n  margin-top: 2px;\n  padding: 10px 9px;\n  min-width: max-content;\n  cursor: pointer;\n  display: flex;\n  background-color: var(--hover-color);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list.active {\n  background-color: var(--excel-sheet-button-color);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list:focus {\n  outline: none;\n  text-decoration: none;\n}";
-styleInject(css_248z$e);
+var css_248z$f = ".ff-excel-page {\n  width: 100%;\n  display: flex;\n  margin-top: 40px;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-excel-page .ff-excel-book {\n  position: relative;\n  width: 100%;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar {\n  margin-left: 60px;\n  display: flex;\n  height: 36px;\n  align-items: center;\n  color: var(--brand2-color);\n  margin-top: -2px;\n  box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-add-sheet-icon {\n  padding: 4px 6px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container {\n  height: 36px;\n  width: 860px;\n  display: flex;\n  overflow-x: auto;\n  align-items: center;\n  scrollbar-width: none;\n  scrollbar-color: var(--hover-color) transparent;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-thumb {\n  border-radius: 5px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar {\n  height: 0px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list {\n  margin-top: 2px;\n  padding: 10px 9px;\n  min-width: max-content;\n  cursor: pointer;\n  display: flex;\n  background-color: var(--hover-color);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list.active {\n  background-color: var(--excel-sheet-button-color);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list:focus {\n  outline: none;\n  text-decoration: none;\n}";
+styleInject(css_248z$f);
 
-var css_248z$d = ".ff-excel-menu {\n  position: absolute;\n  border: 1px solid var(--option-card-border-color);\n  background: var(--option-card-bg-color);\n  border-radius: 4px;\n  margin: 2px;\n  min-height: 32px;\n  min-width: 111px;\n  white-space: nowrap;\n  z-index: 100;\n}\n.ff-excel-menu .ff-excel-menu-options {\n  color: var(--text-color);\n  cursor: pointer;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n}\n.ff-excel-menu .ff-excel-menu-options:hover {\n  background-color: var(--hover-color);\n}\n.ff-excel-menu .ff-excel-menu-options label {\n  cursor: pointer;\n}";
-styleInject(css_248z$d);
+var css_248z$e = ".ff-excel-menu {\n  position: absolute;\n  border: 1px solid var(--option-card-border-color);\n  background: var(--option-card-bg-color);\n  border-radius: 4px;\n  margin: 2px;\n  min-height: 32px;\n  min-width: 111px;\n  white-space: nowrap;\n  z-index: 100;\n}\n.ff-excel-menu .ff-excel-menu-options {\n  color: var(--text-color);\n  cursor: pointer;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n}\n.ff-excel-menu .ff-excel-menu-options:hover {\n  background-color: var(--hover-color);\n}\n.ff-excel-menu .ff-excel-menu-options label {\n  cursor: pointer;\n}";
+styleInject(css_248z$e);
 
 const ExcelContextMenu = ({
   contextMenu
@@ -32429,8 +32602,8 @@ const ExcelFile = ({
   });
 };
 
-var css_248z$c = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-Module-chip {\n  width: 75px;\n  height: 32px;\n  border: 0.5px solid;\n  border-radius: 16px;\n  color: var(--brand-color);\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-Module-chip .ff-Module-label-chip--active {\n  color: var(--ff-header-text-color);\n}\n.ff-Module-chip--active {\n  background: var(--brand-color);\n}";
-styleInject(css_248z$c);
+var css_248z$d = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-Module-chip {\n  width: 75px;\n  height: 32px;\n  border: 0.5px solid;\n  border-radius: 16px;\n  color: var(--brand-color);\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-Module-chip .ff-Module-label-chip--active {\n  color: var(--ff-header-text-color);\n}\n.ff-Module-chip--active {\n  background: var(--brand-color);\n}";
+styleInject(css_248z$d);
 
 const ModuleChip = ({
   label = '',
@@ -32456,8 +32629,8 @@ const ModuleChip = ({
   });
 };
 
-var css_248z$b = ".fontXs, .ff-icon-radial-chart-container svg text {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-icon-radial-chart-container {\n  position: relative;\n}\n.ff-icon-radial-chart-container svg .ff-radial-chart-icon-padding {\n  padding: 0px;\n}\n.ff-icon-radial-chart-container svg text {\n  font-size: var(--fontSize) !important;\n  font-weight: 400;\n}\n.ff-icon-radial-chart-container .ff-icon-radial-chart-tooltip {\n  position: fixed;\n  padding: 5px;\n  border-radius: 4px;\n  pointer-events: none;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n}";
-styleInject(css_248z$b);
+var css_248z$c = ".fontXs, .ff-icon-radial-chart-container svg text {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-icon-radial-chart-container {\n  position: relative;\n}\n.ff-icon-radial-chart-container svg .ff-radial-chart-icon-padding {\n  padding: 0px;\n}\n.ff-icon-radial-chart-container svg text {\n  font-size: var(--fontSize) !important;\n  font-weight: 400;\n}\n.ff-icon-radial-chart-container .ff-icon-radial-chart-tooltip {\n  position: fixed;\n  padding: 5px;\n  border-radius: 4px;\n  pointer-events: none;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n}";
+styleInject(css_248z$c);
 
 // Function to generate SVG arc paths
 const calculateArc$1 = ({
@@ -32605,19 +32778,29 @@ const IconRadialChart = ({
   });
 };
 
-var css_248z$a = ".ff-attach-image-container {\n  position: relative;\n  display: inline-block;\n}\n.ff-attach-image-container .ff-image-wrapper {\n  position: relative;\n  width: 79px;\n  height: 75px;\n}\n.ff-attach-image-container .ff-image-wrapper img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  opacity: 0;\n  background-color: rgba(0, 0, 0, 0.7);\n  transition: opacity 0.4s ease;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-top-icons {\n  position: absolute;\n  top: 1px;\n  right: 1px;\n  display: flex;\n  gap: 4px;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-top-icons .ff-icon-container {\n  width: 8px;\n  height: 8px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  border-radius: 4px;\n  background-color: transparent;\n  transition: background-color 0.3s ease;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-expand-icon-container {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  border-radius: 4px;\n  background-color: transparent;\n  transition: background-color 0.3s ease;\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-hover-icons {\n  opacity: 1;\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-icon-container, .ff-attach-image-container .ff-image-wrapper:hover .ff-top-icons .ff-icon-container {\n  border-radius: 4px;\n  background-color: var(--ff-icon-hover-bg-color);\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-expand-icon-container {\n  background-color: var(--ff-icon-hover-bg-color);\n}";
-styleInject(css_248z$a);
+var css_248z$b = ".ff-attach-image-container {\n  position: relative;\n  display: inline-block;\n}\n.ff-attach-image-container .ff-image-wrapper {\n  position: relative;\n  width: 79px;\n  height: 75px;\n}\n.ff-attach-image-container .ff-image-wrapper img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  opacity: 0;\n  background-color: rgba(0, 0, 0, 0.7);\n  transition: opacity 0.4s ease;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-top-icons {\n  position: absolute;\n  top: 1px;\n  right: 1px;\n  display: flex;\n  gap: 4px;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-top-icons .ff-icon-container {\n  width: 8px;\n  height: 8px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  border-radius: 4px;\n  background-color: transparent;\n  transition: background-color 0.3s ease;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-expand-icon-container {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  border-radius: 4px;\n  background-color: transparent;\n  transition: background-color 0.3s ease;\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-hover-icons {\n  opacity: 1;\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-icon-container, .ff-attach-image-container .ff-image-wrapper:hover .ff-top-icons .ff-icon-container {\n  border-radius: 4px;\n  background-color: var(--ff-icon-hover-bg-color);\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-expand-icon-container {\n  background-color: var(--ff-icon-hover-bg-color);\n}";
+styleInject(css_248z$b);
 
 const AttachImage = ({
   imageSrc,
   onExpandClick,
   onDeleteClick,
-  onDownloadClick
+  onDownloadClick,
+  height = '75px',
+  width = '79px'
 }) => {
   return jsxRuntime.jsx("div", {
     className: "ff-attach-image-container",
+    style: {
+      height,
+      width
+    },
     children: jsxRuntime.jsxs("div", {
       className: "ff-image-wrapper",
+      style: {
+        height,
+        width
+      },
       children: [jsxRuntime.jsx("img", {
         src: imageSrc,
         alt: "Attached"
@@ -32670,8 +32853,8 @@ const AttachImage = ({
   });
 };
 
-var css_248z$9 = ".ff-card-container {\n  width: 120px;\n  height: 93px;\n  display: flex;\n  align-items: center;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  overflow: hidden;\n  cursor: pointer;\n}\n.ff-card-container:hover.passed {\n  border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n  border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n  border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n  border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n  border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n  width: 24px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: start;\n  align-items: center;\n  border-right: 1px solid var(--border-color);\n  gap: 30px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n  transform: rotate(-90deg);\n  transform-origin: center;\n  display: inline-block;\n}\n.ff-card-container.passed .ff-status-bar {\n  background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n  background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n  background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n  background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n  background-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-content {\n  flex: 1;\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n  margin-bottom: 4px;\n  color: inherit;\n}\n.ff-card-container.passed .ff-number {\n  color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-number {\n  color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-number {\n  color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-number {\n  color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-number {\n  color: var(--ff-card-flaky-status-bg-color);\n}";
-styleInject(css_248z$9);
+var css_248z$a = ".ff-card-container {\n  width: 120px;\n  height: 93px;\n  display: flex;\n  align-items: center;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  overflow: hidden;\n  cursor: pointer;\n}\n.ff-card-container:hover.passed {\n  border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n  border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n  border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n  border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n  border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n  width: 24px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: start;\n  align-items: center;\n  border-right: 1px solid var(--border-color);\n  gap: 30px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n  transform: rotate(-90deg);\n  transform-origin: center;\n  display: inline-block;\n}\n.ff-card-container.passed .ff-status-bar {\n  background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n  background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n  background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n  background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n  background-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-content {\n  flex: 1;\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n  margin-bottom: 4px;\n  color: inherit;\n}\n.ff-card-container.passed .ff-number {\n  color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-number {\n  color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-number {\n  color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-number {\n  color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-number {\n  color: var(--ff-card-flaky-status-bg-color);\n}";
+styleInject(css_248z$a);
 
 const StatusCard = ({
   icon,
@@ -32720,8 +32903,8 @@ const StatusCard = ({
   });
 };
 
-var css_248z$8 = ".ff-variable-dropdown {\n  position: absolute;\n  width: 200px;\n  height: 300px;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--variable-dropdown-bg);\n  border: 1px solid var(--border-color);\n  border-radius: 3px;\n  z-index: 9999;\n}\n\n.ff-variable-option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  cursor: pointer;\n}\n.ff-variable-option:hover {\n  background-color: var(--hover-color);\n}";
-styleInject(css_248z$8);
+var css_248z$9 = ".ff-variable-dropdown {\n  position: absolute;\n  width: 200px;\n  height: 300px;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--variable-dropdown-bg);\n  border: 1px solid var(--border-color);\n  border-radius: 3px;\n  z-index: 9999;\n}\n\n.ff-variable-option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  cursor: pointer;\n}\n.ff-variable-option:hover {\n  background-color: var(--hover-color);\n}";
+styleInject(css_248z$9);
 
 const VariableDropdown = ({
   optionsList = [],
@@ -32753,8 +32936,8 @@ const VariableDropdown = ({
   });
 };
 
-var css_248z$7 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-line-chart-inner-tooltip, .ff--line-chart-x-line-data, .ff-line-chart-y-axis-text, .ff-line-chart-date {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-line-chart-x-axis-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-line-chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.ff-line-chart-text {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n}\n.ff-line-chart-text .smooth-dot {\n  transition: cx 0.2s ease, cy 0.2s ease;\n}\n\n.ff-line-chart-yAxisLabel {\n  display: flex;\n  white-space: nowrap;\n  transform: rotate(270deg) translateX(60px);\n  transform-origin: right center;\n}\n\n.ff-line-chart-svg {\n  width: inherit;\n}\n\n.ff-line-chart-text1 {\n  transform-origin: center;\n  transform: rotate(-90deg);\n  transition: transform 1s ease-in-out;\n  position: relative;\n  left: 163px;\n  min-width: 10px;\n  color: var(--drawer-title-color);\n}\n\n.ff-line-chart-tooltip {\n  position: absolute;\n  background-color: var(--tooltip-bg-color);\n  border-radius: 4px;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  min-width: 30px;\n  min-height: 30px;\n  justify-content: center;\n  align-items: flex-start;\n  row-gap: 10px;\n  padding: 8px !important;\n}\n\n.ff-line-chart-status-dot {\n  width: 16px;\n  height: 16px;\n  border-radius: 100%;\n}\n\n.ff-line-chart-inner-tooltip {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  color: var(--arrow-button-bg-color);\n}\n\n.ff-line-chart-date {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  border-bottom: 1px solid var(--arrow-button-bg-color);\n  color: var(--arrow-button-bg-color);\n}\n\n.ff-line-chart-x-axis-label {\n  font-weight: 600;\n}";
-styleInject(css_248z$7);
+var css_248z$8 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-line-chart-inner-tooltip, .ff--line-chart-x-line-data, .ff-line-chart-y-axis-text, .ff-line-chart-date {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-line-chart-x-axis-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-line-chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.ff-line-chart-text {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n}\n.ff-line-chart-text .smooth-dot {\n  transition: cx 0.2s ease, cy 0.2s ease;\n}\n\n.ff-line-chart-yAxisLabel {\n  display: flex;\n  white-space: nowrap;\n  transform: rotate(270deg) translateX(60px);\n  transform-origin: right center;\n}\n\n.ff-line-chart-svg {\n  width: inherit;\n}\n\n.ff-line-chart-text1 {\n  transform-origin: center;\n  transform: rotate(-90deg);\n  transition: transform 1s ease-in-out;\n  position: relative;\n  left: 163px;\n  min-width: 10px;\n  color: var(--drawer-title-color);\n}\n\n.ff-line-chart-tooltip {\n  position: absolute;\n  background-color: var(--tooltip-bg-color);\n  border-radius: 4px;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  min-width: 30px;\n  min-height: 30px;\n  justify-content: center;\n  align-items: flex-start;\n  row-gap: 10px;\n  padding: 8px !important;\n}\n\n.ff-line-chart-status-dot {\n  width: 16px;\n  height: 16px;\n  border-radius: 100%;\n}\n\n.ff-line-chart-inner-tooltip {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  color: var(--arrow-button-bg-color);\n}\n\n.ff-line-chart-date {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  border-bottom: 1px solid var(--arrow-button-bg-color);\n  color: var(--arrow-button-bg-color);\n}\n\n.ff-line-chart-x-axis-label {\n  font-weight: 600;\n}";
+styleInject(css_248z$8);
 
 const LineChart = ({
   data,
@@ -32993,8 +33176,8 @@ const LineChart = ({
   });
 };
 
-var css_248z$6 = ":root {\n  --tooltip-bg-color: #1e161f;\n  --status-approved-text-color: #016102;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-text-color: #3c3838;\n  --status-approved-bg-color: #c6efcd;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-warning-bg-color: #fae2c6;\n  --status-skipped-bg-color: #c4c3c3;\n  --brand-color: #71347b;\n  --icons-default-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --default-color: #747474;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --system-color--error: #c50303;\n  --hover-color: #f7ebff;\n  --brand2-color: #610b86;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --description-text-color: #d9d9d9;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --text-color: #1e161f;\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --error-light: #e42525;\n  --tabs-label-default-color: tabs-label-default-color;\n  --tabs-label-active-color: tabs-label-active-color;\n  --tabs-border-color: tabs-border-color;\n  --tabs-bg-color: tabs-bg-color;\n  --tab-bg-color: tab-bg-color;\n  --toggle-button-bg-color: #ffffff;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-strip-color: #cfd1e2;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --toggle-strip-color: #cfd1e2;\n  --add-icon-hover-color: #431b4a;\n  --arrows-button-border-color: #ded1e5;\n  --arrow-button-bg-color: #ffffff;\n  --text-bg-highlight: #f5fb00;\n  --slider-table-color: #efe1f9;\n  --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-download-client-overlay {\n  width: 378px;\n  height: 217px;\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  z-index: 9999;\n}\n.ff-download-client-overlay .ff-download-client-container {\n  width: 370px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  flex-direction: column;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  border: 1px solid var(--download-client-border-color);\n  margin-left: 5px;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-header {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: space-between;\n  padding: 7px 4px;\n  margin-bottom: 8px;\n  border-radius: 4px 4px 0 0;\n  background-color: var(--download-client-header-bg-color);\n  box-sizing: border-box;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-header .ff-header-arrow {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 10px;\n  right: 70px;\n  width: 10px;\n  height: 10px;\n  background-color: var(--download-client-icon-container-bg-color);\n  transform: translateY(-50%) rotate(-45deg);\n  z-index: -999;\n  border: 1px solid var(--download-client-header-bg-color);\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  flex-direction: column;\n  padding-left: 8px;\n  padding-right: 24px;\n  gap: 8px;\n  margin-bottom: 8px;\n  color: var(--popup-text-color);\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content .ff-download-install,\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content .ff-choose-os {\n  padding: 4px 0;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-actions {\n  width: 240px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  gap: 12px;\n  margin-bottom: 17px;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-actions .ff-icons-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  width: 64px;\n  height: 64px;\n  border-radius: 8px;\n  border: 1px solid var(--download-client-icon-container-border-color);\n  background-color: var(--download-client-icon-container-bg-color);\n  cursor: pointer;\n  box-shadow: 0px 0px 10px 0px var(--download-client-icon-container-box-shadow-color);\n}";
-styleInject(css_248z$6);
+var css_248z$7 = ":root {\n  --tooltip-bg-color: #1e161f;\n  --status-approved-text-color: #016102;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-text-color: #3c3838;\n  --status-approved-bg-color: #c6efcd;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-warning-bg-color: #fae2c6;\n  --status-skipped-bg-color: #c4c3c3;\n  --brand-color: #71347b;\n  --icons-default-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --default-color: #747474;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --system-color--error: #c50303;\n  --hover-color: #f7ebff;\n  --brand2-color: #610b86;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --description-text-color: #d9d9d9;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --text-color: #1e161f;\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --error-light: #e42525;\n  --tabs-label-default-color: tabs-label-default-color;\n  --tabs-label-active-color: tabs-label-active-color;\n  --tabs-border-color: tabs-border-color;\n  --tabs-bg-color: tabs-bg-color;\n  --tab-bg-color: tab-bg-color;\n  --toggle-button-bg-color: #ffffff;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-strip-color: #cfd1e2;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --toggle-strip-color: #cfd1e2;\n  --add-icon-hover-color: #431b4a;\n  --arrows-button-border-color: #ded1e5;\n  --arrow-button-bg-color: #ffffff;\n  --text-bg-highlight: #f5fb00;\n  --slider-table-color: #efe1f9;\n  --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-download-client-overlay {\n  width: 378px;\n  height: 217px;\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  z-index: 9999;\n}\n.ff-download-client-overlay .ff-download-client-container {\n  width: 370px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  flex-direction: column;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  border: 1px solid var(--download-client-border-color);\n  margin-left: 5px;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-header {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: space-between;\n  padding: 7px 4px;\n  margin-bottom: 8px;\n  border-radius: 4px 4px 0 0;\n  background-color: var(--download-client-header-bg-color);\n  box-sizing: border-box;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-header .ff-header-arrow {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 10px;\n  right: 70px;\n  width: 10px;\n  height: 10px;\n  background-color: var(--download-client-icon-container-bg-color);\n  transform: translateY(-50%) rotate(-45deg);\n  z-index: -999;\n  border: 1px solid var(--download-client-header-bg-color);\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  flex-direction: column;\n  padding-left: 8px;\n  padding-right: 24px;\n  gap: 8px;\n  margin-bottom: 8px;\n  color: var(--popup-text-color);\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content .ff-download-install,\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content .ff-choose-os {\n  padding: 4px 0;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-actions {\n  width: 240px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  gap: 12px;\n  margin-bottom: 17px;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-actions .ff-icons-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  width: 64px;\n  height: 64px;\n  border-radius: 8px;\n  border: 1px solid var(--download-client-icon-container-border-color);\n  background-color: var(--download-client-icon-container-bg-color);\n  cursor: pointer;\n  box-shadow: 0px 0px 10px 0px var(--download-client-icon-container-box-shadow-color);\n}";
+styleInject(css_248z$7);
 
 const DownloadClient = ({
   onClose,
@@ -33091,8 +33274,8 @@ const DownloadClient = ({
   });
 };
 
-var css_248z$5 = ".ff_fieldSet_container .ff_fieldSet {\n  border-color: var(--ff-connecting-branch-modal-border);\n  border-radius: 5px;\n}\n.ff_fieldSet_container .ff_fieldSet .ff_legend_container {\n  display: flex;\n}";
-styleInject(css_248z$5);
+var css_248z$6 = ".ff_fieldSet_container .ff_fieldSet {\n  border-color: var(--ff-connecting-branch-modal-border);\n  border-radius: 5px;\n}\n.ff_fieldSet_container .ff_fieldSet .ff_legend_container {\n  display: flex;\n}";
+styleInject(css_248z$6);
 
 const FieldSet = ({
   legendName,
@@ -33124,6 +33307,93 @@ const FieldSet = ({
   });
 };
 
+var css_248z$5 = ".ff-create-variable-slider {\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.ff-create-variable-slider .ff-hide-value-content {\n  display: flex;\n  align-items: center;\n}\n\n.ff-create-slider-footer {\n  width: 100%;\n  gap: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}";
+styleInject(css_248z$5);
+
+const CreateVariableSlider = ({
+  isOpen,
+  variableTypesList = [],
+  onClose,
+  onNameChange,
+  onValueChange,
+  variableName,
+  value,
+  onVariableTypeChange,
+  selectedVariableType,
+  hideValue = false,
+  onHideChange,
+  handleSubmit
+}) => {
+  const FooterContent = () => {
+    return jsxRuntime.jsxs("div", {
+      className: "ff-create-slider-footer",
+      children: [jsxRuntime.jsx(Button$1, {
+        onClick: onClose,
+        label: "Cancel",
+        variant: "tertiary"
+      }), jsxRuntime.jsx(Button$1, {
+        variant: "primary",
+        label: "create",
+        type: "submit",
+        onClick: handleSubmit,
+        disabled: checkEmpty(variableName) || checkEmpty(value)
+      })]
+    });
+  };
+  return jsxRuntime.jsx(Drawer, {
+    onClose: onClose,
+    isOpen: isOpen,
+    title: "Create Variable",
+    width: "284px",
+    height: "222px",
+    top: "35%",
+    right: 8,
+    isFooterRequired: true,
+    overlay: true,
+    footerContent: jsxRuntime.jsx(FooterContent, {}),
+    children: jsxRuntime.jsxs("div", {
+      className: "ff-create-variable-slider",
+      children: [jsxRuntime.jsx(Input, {
+        label: "Variable Name",
+        required: true,
+        type: "text",
+        name: "variable name",
+        value: variableName,
+        onChange: event => onNameChange(event.target.value)
+      }), jsxRuntime.jsx(Select$1, {
+        label: "Variable Type",
+        required: true,
+        onChange: option => onVariableTypeChange(option),
+        selectedOption: selectedVariableType,
+        optionsList: variableTypesList,
+        optionZIndex: 99999
+      }), jsxRuntime.jsx(Input, {
+        label: "Variable Value",
+        required: true,
+        type: "text",
+        name: "value",
+        value: value,
+        onChange: event => onValueChange(event.target.value)
+      }), jsxRuntime.jsxs("div", {
+        className: "ff-hide-value-content",
+        children: [jsxRuntime.jsx(Checkbox, {
+          onChange: event => onHideChange(event.target.checked),
+          name: "hide value",
+          label: "Hide Value",
+          checked: hideValue
+        }), jsxRuntime.jsx(Tooltip, {
+          title: "Once the value is hidden, it cannot be undone",
+          children: jsxRuntime.jsx(Icon, {
+            name: "info",
+            width: 12,
+            height: 12
+          })
+        })]
+      })]
+    })
+  });
+};
+
 function findAndInsert(data, key, targetId, newEntry, insertPosition, childrenKey = 'children' // Allow dynamic key for nested children
 ) {
   function recursiveSearch(items) {
@@ -46163,6 +46433,7 @@ exports.Chip = Chip;
 exports.Col = Col;
 exports.ConnectingBranch = ConnectingBranch;
 exports.Container = Container;
+exports.CreateVariableSlider = CreateVariableSlider;
 exports.DashboardDonutChart = DashboardDonutChart;
 exports.DatePicker = CustomDatePicker;
 exports.DonutChart = DonutChart;