pixel-react 1.6.3 → 1.6.6

package/lib/index.esm.js

@@ -28,11 +28,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$1e = ":root {\n  --tooltip-bg-color: #1e161f;\n  --status-approved-text-color: #016102;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-text-color: #3c3838;\n  --status-approved-bg-color: #c6efcd;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-warning-bg-color: #fae2c6;\n  --status-skipped-bg-color: #c4c3c3;\n  --brand-color: #71347b;\n  --icons-default-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --default-color: #747474;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --system-color--error: #c50303;\n  --hover-color: #f7ebff;\n  --brand2-color: #610b86;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --description-text-color: #d9d9d9;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --text-color: #1e161f;\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --error-light: #e42525;\n  --tabs-label-default-color: tabs-label-default-color;\n  --tabs-label-active-color: tabs-label-active-color;\n  --tabs-border-color: tabs-border-color;\n  --tabs-bg-color: tabs-bg-color;\n  --tab-bg-color: tab-bg-color;\n  --toggle-button-bg-color: #ffffff;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-strip-color: #cfd1e2;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --toggle-strip-color: #cfd1e2;\n  --add-icon-hover-color: #431b4a;\n  --arrows-button-border-color: #ded1e5;\n  --arrow-button-bg-color: #ffffff;\n  --text-bg-highlight: #f5fb00;\n  --slider-table-color: #efe1f9;\n  --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs, .ff-button, .ff-button--small, .ff-button--medium {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-button--large {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-button {\n  width: auto;\n  background-color: var(--primary-button-text-color);\n  border-radius: 4px;\n  padding: 4px 8px;\n  text-align: center;\n  text-decoration: none;\n  font-weight: 500;\n  cursor: pointer;\n  display: flex;\n  gap: 4px;\n  justify-content: center;\n  align-items: center;\n  border: 2px solid transparent;\n}\n.ff-button--transparent {\n  background-color: transparent;\n}\n.ff-button--primary, .ff-button--delete, .ff-button--secondary {\n  position: relative;\n  cursor: pointer;\n  border-radius: 4px;\n  z-index: 1;\n  border: none;\n  overflow: hidden;\n}\n.ff-button--primary:before, .ff-button--delete:before, .ff-button--secondary:before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 4px;\n  padding: 0.6px;\n  background: var(--primary-button-border);\n  mask: linear-gradient(var(--primary-button-text-color) 0 0) content-box, linear-gradient(var(--primary-button-text-color) 0 0);\n  mask-composite: exclude;\n  -webkit-mask: linear-gradient(var(--primary-button-text-color) 0 0) content-box, linear-gradient(var(--primary-button-text-color) 0 0);\n  -webkit-mask-composite: destination-out;\n  z-index: -1;\n}\n.ff-button--primary:hover, .ff-button--delete:hover, .ff-button--secondary:hover {\n  background: var(--primary-button-hover);\n}\n.ff-button--primary:disabled, .ff-button--delete:disabled, .ff-button--secondary:disabled {\n  opacity: 50%;\n  cursor: no-drop;\n}\n.ff-button--primary:disabled:before, .ff-button--delete:disabled:before, .ff-button--secondary:disabled:before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 4px;\n  padding: 0.6px;\n  -webkit-mask-composite: destination-out;\n  mask-composite: exclude;\n  z-index: -1;\n}\n.ff-button--primary {\n  background: var(--primary-button-color);\n}\n.ff-button--primary:before {\n  background: var(--primary-button-border);\n}\n.ff-button--primary:hover {\n  background: var(--primary-button-hover);\n}\n.ff-button--delete {\n  background: var(--delete-button-color);\n  color: var(--primary-button-text-color);\n}\n.ff-button--delete:before {\n  background: var(--delete-button-border);\n}\n.ff-button--delete:hover {\n  background: var(--delete-button-hover);\n}\n.ff-button--warning {\n  background: var(--warning-button-color);\n  border: var(--warning-button-border);\n}\n.ff-button--secondary:before {\n  background: var(--primary-button-border);\n}\n.ff-button--secondary:hover {\n  background: var(--secondary-button-hover);\n}\n.ff-button--tertiary {\n  border: none;\n  background: var(--tertiary-button-color);\n}\n.ff-button--tertiary:hover {\n  background: var(--tertiary-button-hover);\n}\n.ff-button--tertiary:disabled {\n  opacity: 0.5;\n  cursor: no-drop;\n}\n.ff-button--small {\n  font-weight: 500;\n  padding: 4.5px 8px;\n  line-height: 15px;\n}\n.ff-button--medium {\n  font-weight: 500;\n  padding: 6px 12px;\n}\n.ff-button--large {\n  padding: 8px 16px;\n}\n.ff-button-primary--text {\n  color: var(--primary-button-text-color);\n}\n.ff-button-secondary--text, .ff-button-tertiary--text {\n  background: var(--secondary-button-color-text);\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n}";
+styleInject(css_248z$1e);
 
-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$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}";
+styleInject(css_248z$1d);
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -107,7 +107,7 @@ function requireClassnames() {
 }
 
 var classnamesExports = requireClassnames();
-var classNames = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
+var cx = /*@__PURE__*/getDefaultExportFromCjs(classnamesExports);
 
 const SvgManageApps = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M4.68101 0.17616H1.84874C1.35861 0.176782 0.888742 0.37176 0.542171 0.718331C0.1956 1.0649 0.000622608 1.53477 0 2.0249V4.85751C0.000622608 5.34763 0.1956 5.8175 0.542171 6.16407C0.888742 6.51064 1.35861 6.70562 1.84874 6.70624H4.68101C5.17113 6.70562 5.64101 6.51064 5.98758 6.16407C6.33415 5.8175 6.52913 5.34763 6.52975 4.85751V2.0249C6.52913 1.53477 6.33415 1.0649 5.98758 0.718331C5.64101 0.37176 5.17113 0.176782 4.68101 0.17616ZM5.52135 4.85683C5.52135 5.0797 5.43281 5.29345 5.27522 5.45104C5.11762 5.60863 4.90388 5.69717 4.68101 5.69717H1.84874C1.62587 5.69717 1.41213 5.60863 1.25453 5.45104C1.09694 5.29345 1.0084 5.0797 1.0084 4.85683V2.0249C1.0084 1.80203 1.09694 1.58829 1.25453 1.43069C1.41213 1.2731 1.62587 1.18456 1.84874 1.18456H4.68101C4.90388 1.18456 5.11762 1.2731 5.27522 1.43069C5.43281 1.58829 5.52135 1.80203 5.52135 2.0249V4.85683ZM4.68101 7.6054H1.84874C1.35861 7.60603 0.888742 7.801 0.542171 8.14758C0.1956 8.49415 0.000622608 8.96402 0 9.45414V12.2861C0.000622608 12.7762 0.1956 13.2461 0.542171 13.5926C0.888742 13.9392 1.35861 14.1342 1.84874 14.1348H4.68101C5.17113 14.1342 5.64101 13.9392 5.98758 13.5926C6.33415 13.2461 6.52913 12.7762 6.52975 12.2861V9.45414C6.52913 8.96402 6.33415 8.49415 5.98758 8.14758C5.64101 7.801 5.17113 7.60603 4.68101 7.6054ZM5.52135 12.2861C5.52135 12.3964 5.49961 12.5057 5.45738 12.6077C5.41515 12.7096 5.35325 12.8023 5.27522 12.8803C5.19718 12.9583 5.10455 13.0202 5.00259 13.0624C4.90064 13.1047 4.79136 13.1264 4.68101 13.1264H1.84874C1.73839 13.1264 1.62911 13.1047 1.52716 13.0624C1.4252 13.0202 1.33256 12.9583 1.25453 12.8803C1.1765 12.8023 1.1146 12.7096 1.07237 12.6077C1.03014 12.5057 1.0084 12.3964 1.0084 12.2861V9.45414C1.0084 9.23127 1.09694 9.01753 1.25453 8.85994C1.41213 8.70234 1.62587 8.61381 1.84874 8.61381H4.68101C4.90388 8.61381 5.11762 8.70234 5.27522 8.85994C5.43281 9.01753 5.52135 9.23127 5.52135 9.45414V12.2861ZM12.1096 7.6054H9.27798C8.78786 7.60603 8.31799 7.801 7.97142 8.14758C7.62485 8.49415 7.42987 8.96402 7.42924 9.45414V12.2861C7.42987 12.7762 7.62485 13.2461 7.97142 13.5926C8.31799 13.9392 8.78786 14.1342 9.27798 14.1348H12.1099C12.6 14.1342 13.0699 13.9392 13.4165 13.5926C13.7631 13.2461 13.958 12.7762 13.9587 12.2861V9.45414C13.958 8.96402 13.7631 8.49415 13.4165 8.14758C13.0699 7.801 12.5997 7.60603 12.1096 7.6054ZM12.9499 12.2861C12.9499 12.3964 12.9282 12.5057 12.886 12.6077C12.8437 12.7096 12.7818 12.8023 12.7038 12.8803C12.6258 12.9583 12.5331 13.0202 12.4312 13.0624C12.3292 13.1047 12.2199 13.1264 12.1096 13.1264H9.27798C9.16763 13.1264 9.05836 13.1047 8.9564 13.0624C8.85445 13.0202 8.76181 12.9583 8.68378 12.8803C8.60574 12.8023 8.54385 12.7096 8.50162 12.6077C8.45938 12.5057 8.43765 12.3964 8.43765 12.2861V9.45414C8.43765 9.23127 8.52618 9.01753 8.68378 8.85994C8.84137 8.70234 9.05511 8.61381 9.27798 8.61381H12.1099C12.3328 8.61381 12.5465 8.70234 12.7041 8.85994C12.8617 9.01753 12.9503 9.23127 12.9503 9.45414L12.9499 12.2861ZM10.0333 4.64843C10.2352 4.75904 10.4618 4.81685 10.6921 4.8165C10.8236 4.81641 10.9545 4.79762 11.0807 4.7607C11.3415 4.68363 11.5737 4.5311 11.7481 4.32232C11.9224 4.11354 12.031 3.85785 12.0603 3.58744C12.0896 3.31703 12.0382 3.044 11.9127 2.80273C11.7871 2.56147 11.5929 2.36276 11.3546 2.23162C11.1156 2.10126 10.8434 2.0446 10.5722 2.06879C10.3011 2.09299 10.0431 2.19695 9.83099 2.36756C9.61885 2.53817 9.46199 2.7678 9.3802 3.02746C9.29841 3.28712 9.29536 3.56519 9.37143 3.82658C9.42167 4.00064 9.50608 4.16296 9.61971 4.30406C9.73334 4.44516 9.87393 4.56223 10.0333 4.64843ZM10.3694 3.26423C10.4043 3.19977 10.4575 3.14712 10.5223 3.11295C10.5871 3.07878 10.6606 3.06465 10.7335 3.07233C10.8063 3.08001 10.8753 3.10917 10.9315 3.15611C10.9878 3.20304 11.0289 3.26563 11.0495 3.33594C11.0701 3.40625 11.0694 3.4811 11.0474 3.55099C11.0254 3.62088 10.9832 3.68267 10.926 3.72851C10.8688 3.77434 10.7993 3.80216 10.7263 3.80843C10.6533 3.8147 10.5801 3.79914 10.516 3.76372C10.4306 3.7166 10.3673 3.63768 10.3399 3.54414C10.3125 3.45059 10.3231 3.34999 10.3694 3.26423ZM7.8484 3.6649C7.66681 3.87999 7.53258 4.13093 7.45445 4.40137C7.4348 4.46861 7.42937 4.5392 7.43852 4.60865C7.44766 4.67809 7.47118 4.74488 7.50756 4.80473L8.01714 5.64171C8.05372 5.70158 8.10233 5.7532 8.15991 5.7933C8.21748 5.8334 8.28276 5.8611 8.3516 5.87465C8.62766 5.92932 8.91214 5.92531 9.18656 5.86288L9.46454 6.01482C9.55983 6.27991 9.71013 6.52184 9.90555 6.72473C9.95263 6.77404 10.0092 6.81328 10.0719 6.84009C10.1346 6.86689 10.2021 6.88071 10.2703 6.8807H10.283L11.2625 6.85784C11.3328 6.8564 11.402 6.84029 11.4657 6.81054C11.5293 6.78078 11.5861 6.73805 11.6323 6.68507C11.8184 6.47337 11.9576 6.22467 12.0407 5.95532L12.3096 5.79095C12.587 5.8413 12.872 5.8319 13.1455 5.76339C13.2136 5.74685 13.2774 5.71626 13.3329 5.6736C13.3884 5.63094 13.4344 5.57714 13.4679 5.51566L13.9385 4.65616C13.9721 4.59445 13.9925 4.52639 13.9983 4.45635C14.0041 4.38631 13.9952 4.31583 13.9721 4.24944C13.8813 3.98328 13.7356 3.73914 13.5445 3.5328L13.5375 3.21582C13.719 3.0008 13.8532 2.74999 13.9314 2.47969C13.951 2.41243 13.9564 2.34183 13.9472 2.27238C13.938 2.20293 13.9144 2.13616 13.878 2.07633L13.3687 1.23902C13.3321 1.1788 13.2833 1.12693 13.2254 1.08675C13.1675 1.04657 13.1018 1.01897 13.0326 1.00574C12.7567 0.951465 12.4726 0.955472 12.1983 1.0175L11.92 0.865236C11.8249 0.600338 11.6747 0.358612 11.4793 0.155992C11.4303 0.105986 11.3717 0.0663956 11.307 0.0395949C11.2423 0.0127941 11.1729 -0.000664814 11.1029 2.52534e-05L10.123 0.0225464C10.053 0.024258 9.98413 0.0405346 9.92076 0.0703391C9.85739 0.100144 9.80093 0.142822 9.75496 0.195656C9.56895 0.407298 9.42977 0.655868 9.34656 0.925068L9.07765 1.08944C8.80064 1.03965 8.51625 1.04881 8.24303 1.11633C8.1748 1.13293 8.1108 1.16361 8.05511 1.20638C7.99943 1.24916 7.9533 1.30309 7.91966 1.36473L7.44908 2.22423C7.41537 2.28585 7.39496 2.35386 7.38916 2.42386C7.38338 2.49386 7.39233 2.56429 7.41546 2.63061C7.50607 2.897 7.65162 3.14138 7.84269 3.34792L7.8484 3.6649ZM8.68471 2.06759C8.7334 2.0645 8.78224 2.0645 8.83093 2.06759C8.91103 2.12395 9.00588 2.15563 9.10377 2.15874C9.20167 2.16184 9.29833 2.13623 9.38185 2.08507L10.0928 1.65246C10.1764 1.60164 10.2435 1.52757 10.2857 1.43929C10.328 1.35101 10.3436 1.25234 10.3308 1.15532C10.3496 1.1102 10.3721 1.06669 10.398 1.02524L10.8787 1.01414C10.9064 1.05432 10.9308 1.0967 10.9516 1.14087C10.9432 1.23837 10.9633 1.33622 11.0096 1.42247C11.0559 1.50872 11.1262 1.57964 11.2121 1.62658L11.9425 2.02591C12.0284 2.07291 12.1261 2.0939 12.2237 2.08632C12.3213 2.07874 12.4145 2.04291 12.4921 1.98322C12.5404 1.97678 12.5893 1.97453 12.638 1.9765L12.8877 2.38725C12.8667 2.43137 12.8422 2.47374 12.8145 2.51398C12.7259 2.55541 12.6513 2.6217 12.5997 2.70477C12.5482 2.78785 12.5219 2.88412 12.524 2.98187L12.5432 3.81414C12.5455 3.912 12.5762 4.00707 12.6316 4.08777C12.687 4.16847 12.7646 4.2313 12.8551 4.2686C12.8846 4.30753 12.911 4.34866 12.9341 4.39162L12.7032 4.81381C12.6547 4.81807 12.6058 4.81807 12.5573 4.81381C12.4771 4.75779 12.3822 4.72633 12.2844 4.72329C12.1866 4.72025 12.09 4.74574 12.0064 4.79666L11.2955 5.22927C11.2116 5.27992 11.1443 5.35391 11.1018 5.4422C11.0593 5.53049 11.0434 5.62925 11.0561 5.72641C11.0372 5.7715 11.0148 5.815 10.9889 5.8565L10.5082 5.86759C10.4805 5.82736 10.456 5.78499 10.435 5.74087C10.4435 5.64334 10.4234 5.54544 10.3772 5.45913C10.331 5.37282 10.2607 5.30183 10.1748 5.25482L9.44437 4.85515C9.35848 4.8082 9.26077 4.78727 9.16318 4.79491C9.06559 4.80255 8.97233 4.83843 8.89479 4.89818C8.8464 4.9041 8.79764 4.90646 8.74891 4.90524L8.50151 4.49448C8.52271 4.45027 8.54732 4.40779 8.57513 4.36742C8.66369 4.32599 8.7383 4.2597 8.78986 4.17662C8.84142 4.09355 8.86772 3.99727 8.86555 3.89952L8.84639 3.06759C8.84418 2.96968 8.81351 2.87453 8.75811 2.79377C8.70272 2.713 8.625 2.65012 8.53446 2.6128C8.50488 2.57385 8.47847 2.5326 8.45546 2.48944L8.68471 2.06759Z", fill: "currentColor" }));
 
@@ -433,7 +433,7 @@ const SvgSafariIcon = (props) => /* @__PURE__ */ React.createElement("svg", { wi
 
 const SvgMaximizeScript = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_2947_11413)" }, /* @__PURE__ */ React.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.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.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.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_2947_11413" }, /* @__PURE__ */ React.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.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_1306_9986)" }, /* @__PURE__ */ React.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.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_1306_9986" }, /* @__PURE__ */ React.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.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 14 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M12.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.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "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.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.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" }));
 
@@ -557,6 +557,8 @@ const SvgRemoveUser = (props) => /* @__PURE__ */ React.createElement("svg", { wi
 
 const SvgAddArchive = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M7.63602 0.975634L7.63602 0.975628C7.39589 0.735534 7.07618 0.603125 6.73666 0.603125H2.17188C1.47046 0.603125 0.9 1.17358 0.9 1.875V14.125C0.9 14.8264 1.47046 15.3969 2.17188 15.3969H15.8281C16.5295 15.3969 17.1 14.8264 17.1 14.125V3.75C17.1 3.04858 16.5295 2.47812 15.8281 2.47812H9.13848L7.63602 0.975634ZM9.23643 6.79895L9.23646 6.79893L10.8368 5.19853C10.9509 5.08447 11.1021 5.02187 11.2633 5.02187H15.8281C16.1606 5.02187 16.4312 5.29251 16.4312 5.625V14.125C16.4312 14.4575 16.1606 14.7281 15.8281 14.7281H2.17188C1.83941 14.7281 1.56875 14.4575 1.56875 14.125V7.5C1.56875 7.16751 1.83941 6.89687 2.17188 6.89687H9C9.08869 6.89687 9.1737 6.86164 9.23643 6.79895ZM2.17188 1.27188H6.73666C6.89795 1.27188 7.04908 1.33447 7.16313 1.44852L8.76354 3.04893C8.82626 3.11165 8.91129 3.14687 9 3.14687H15.8281C16.1606 3.14687 16.4312 3.41751 16.4312 3.75V4.5055C16.3469 4.4599 16.2569 4.42353 16.1625 4.39778V3.75C16.1625 3.56534 16.0128 3.41563 15.8281 3.41563H2.17188C1.98717 3.41563 1.8375 3.56534 1.8375 3.75V6.27278C1.74309 6.29853 1.65306 6.3349 1.56875 6.3805V1.875C1.56875 1.54251 1.83941 1.27188 2.17188 1.27188ZM4.04688 4.35313C3.86217 4.35313 3.7125 4.50284 3.7125 4.6875C3.7125 4.87216 3.86217 5.02187 4.04688 5.02187H10.0677L8.86152 6.22813H2.50625V5.02187H3.10938C3.29408 5.02187 3.44375 4.87216 3.44375 4.6875C3.44375 4.50284 3.29408 4.35313 3.10938 4.35313H2.50625V4.08437H15.4937V4.35313H4.04688Z", fill: "currentColor", stroke: "currentColor", strokeWidth: 0.2 }), /* @__PURE__ */ React.createElement("mask", { id: "path-2-outside-1_6891_65", maskUnits: "userSpaceOnUse", x: 9.35828, y: 7.65503, width: 6, height: 6, fill: "black" }, /* @__PURE__ */ React.createElement("rect", { fill: "white", x: 9.35828, y: 7.65503, width: 6, height: 6 }), /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.0806 10.5744V9.05659C13.0806 8.83483 12.9008 8.65503 12.6791 8.65503C12.4573 8.65503 12.2775 8.83483 12.2775 9.05659V10.5744H10.7598C10.5381 10.5744 10.3583 10.7542 10.3583 10.976C10.3583 11.1978 10.5381 11.3776 10.7598 11.3776H12.2775V12.8953C12.2775 13.1171 12.4573 13.2969 12.6791 13.2969C12.9008 13.2969 13.0806 13.1171 13.0806 12.8953V11.3776H14.5986C14.8203 11.3776 15.0001 11.1978 15.0001 10.976C15.0001 10.7542 14.8203 10.5744 14.5986 10.5744H13.0806Z" })), /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.0806 10.5744V9.05659C13.0806 8.83483 12.9008 8.65503 12.6791 8.65503C12.4573 8.65503 12.2775 8.83483 12.2775 9.05659V10.5744H10.7598C10.5381 10.5744 10.3583 10.7542 10.3583 10.976C10.3583 11.1978 10.5381 11.3776 10.7598 11.3776H12.2775V12.8953C12.2775 13.1171 12.4573 13.2969 12.6791 13.2969C12.9008 13.2969 13.0806 13.1171 13.0806 12.8953V11.3776H14.5986C14.8203 11.3776 15.0001 11.1978 15.0001 10.976C15.0001 10.7542 14.8203 10.5744 14.5986 10.5744H13.0806Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M13.0806 10.5744H12.8806V10.7744H13.0806V10.5744ZM12.6791 8.65503V8.45503V8.65503ZM12.2775 10.5744V10.7744H12.4775V10.5744H12.2775ZM12.2775 11.3776H12.4775V11.1776H12.2775V11.3776ZM13.0806 11.3776V11.1776H12.8806V11.3776H13.0806ZM12.8806 9.05659V10.5744H13.2806V9.05659H12.8806ZM12.6791 8.85503C12.7904 8.85503 12.8806 8.94528 12.8806 9.05659H13.2806C13.2806 8.72437 13.0113 8.45503 12.6791 8.45503V8.85503ZM12.4775 9.05659C12.4775 8.94528 12.5678 8.85503 12.6791 8.85503V8.45503C12.3468 8.45503 12.0775 8.72437 12.0775 9.05659H12.4775ZM12.4775 10.5744V9.05659H12.0775V10.5744H12.4775ZM10.7598 10.7744H12.2775V10.3744H10.7598V10.7744ZM10.5583 10.976C10.5583 10.8647 10.6485 10.7744 10.7598 10.7744V10.3744C10.4276 10.3744 10.1583 10.6438 10.1583 10.976H10.5583ZM10.7598 11.1776C10.6485 11.1776 10.5583 11.0873 10.5583 10.976H10.1583C10.1583 11.3082 10.4276 11.5776 10.7598 11.5776V11.1776ZM12.2775 11.1776H10.7598V11.5776H12.2775V11.1776ZM12.4775 12.8953V11.3776H12.0775V12.8953H12.4775ZM12.6791 13.0969C12.5678 13.0969 12.4775 13.0066 12.4775 12.8953H12.0775C12.0775 13.2275 12.3468 13.4969 12.6791 13.4969V13.0969ZM12.8806 12.8953C12.8806 13.0066 12.7904 13.0969 12.6791 13.0969V13.4969C13.0113 13.4969 13.2806 13.2275 13.2806 12.8953H12.8806ZM12.8806 11.3776V12.8953H13.2806V11.3776H12.8806ZM14.5986 11.1776H13.0806V11.5776H14.5986V11.1776ZM14.8001 10.976C14.8001 11.0873 14.7099 11.1776 14.5986 11.1776V11.5776C14.9308 11.5776 15.2001 11.3082 15.2001 10.976H14.8001ZM14.5986 10.7744C14.7099 10.7744 14.8001 10.8647 14.8001 10.976H15.2001C15.2001 10.6438 14.9308 10.3744 14.5986 10.3744V10.7744ZM13.0806 10.7744H14.5986V10.3744H13.0806V10.7744Z", fill: "currentColor", mask: "url(#path-2-outside-1_6891_65)" }));
 
+const SvgAddVariable = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_2947_12355)" }, /* @__PURE__ */ React.createElement("path", { d: "M18.9799 6.39074L18.98 6.39066C18.7152 6.10024 18.2958 5.91202 17.667 5.90136L17.6603 5.90125L17.6603 5.9012C16.7479 5.87338 15.9951 6.10031 15.384 6.55729C14.8289 6.97239 14.3593 7.60115 14.001 8.47483C14.1534 8.44887 14.311 8.43399 14.4753 8.43399C14.7848 8.43399 15.4004 8.4707 15.7695 8.94829L15.7739 8.95398L15.7738 8.95401C16.0596 9.33506 16.0442 9.83443 15.9167 10.2879L15.9148 10.2946L15.9148 10.2946C15.8487 10.5177 15.679 10.8655 15.4767 11.2396C15.2662 11.629 14.996 12.0907 14.702 12.5597L14.6993 12.5642L14.6992 12.5641C14.3347 13.1325 14.0495 13.5548 13.8362 13.8381C13.7308 13.9781 13.633 14.0977 13.5448 14.1867C13.5013 14.2305 13.4477 14.2797 13.3864 14.3213C13.3393 14.3532 13.2162 14.4313 13.0475 14.4313H13.0397L13.0319 14.431C12.8602 14.4257 12.7414 14.342 12.6857 14.295C12.6251 14.244 12.5814 14.1877 12.5526 14.1463C12.4942 14.0624 12.4444 13.9627 12.4024 13.8684C12.3162 13.6746 12.2242 13.4139 12.1312 13.1216C11.9437 12.5321 11.7335 11.7536 11.5367 10.9805C11.3395 10.2054 11.1536 9.42727 11.015 8.8353C10.9456 8.53916 10.888 8.28929 10.8466 8.10947L10.7974 7.89575C10.79 7.86356 10.7853 7.8436 10.7827 7.83267C10.7809 7.82467 10.7801 7.82151 10.7803 7.82195C10.5797 7.09733 10.4571 6.68312 10.2663 6.42424C10.1851 6.31391 10.0959 6.24128 9.9786 6.19094C9.85381 6.13739 9.67159 6.09837 9.39186 6.09837C9.26627 6.09837 9.03076 6.1623 8.67253 6.3451C8.32974 6.52003 7.92898 6.77495 7.49123 7.08709C6.6167 7.71068 5.63791 8.53124 4.74865 9.31012L4.74603 9.31241L4.74602 9.3124L4.52935 9.49953L4.77034 9.803C5.04584 9.59868 5.33341 9.39361 5.60844 9.23668C5.8837 9.07963 6.21683 8.9283 6.55433 8.92635C7.08046 8.91574 7.42074 9.32093 7.64468 9.72599C7.88424 10.1593 8.10594 10.7953 8.33533 11.6321C8.78297 13.251 9.33179 14.9994 9.93252 16.3357C10.2341 17.0064 10.537 17.5465 10.8305 17.9111C11.1399 18.2955 11.3524 18.3793 11.4597 18.3793C12.0402 18.3793 12.7242 18.1366 13.5576 17.509C14.3917 16.8809 15.3418 15.8921 16.4423 14.4632L18.9799 6.39074ZM18.9799 6.39074L18.9874 6.39862M18.9799 6.39074L18.9874 6.39862M18.9874 6.39862C19.338 6.76673 19.549 7.45607 19.4903 8.5376L19.4902 8.5376M18.9874 6.39862L19.4902 8.5376M19.4902 8.5376L19.4899 8.54442M19.4902 8.5376L19.4899 8.54442M19.4899 8.54442C19.4633 9.19952 19.2114 10.0239 18.6981 11.0281M19.4899 8.54442L18.6981 11.0281M18.6981 11.0281C18.1875 12.0271 17.4345 13.1728 16.4424 14.4631L18.6981 11.0281Z", fill: "none", stroke: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M17.4708 14.7507H19.8999V16.1833H17.4708H17.3708V16.2833V18.7793H15.8044V16.2833V16.1833H15.7044H13.2753V14.7507H15.7044H15.8044V14.6507V12.1547H17.3708V14.6507V14.7507H17.4708Z", fill: "currentColor", stroke: "white", strokeWidth: 0.2 })), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_2947_12355" }, /* @__PURE__ */ React.createElement("path", { d: "M0 4C0 1.79086 1.79086 0 4 0H20C22.2091 0 24 1.79086 24 4V20C24 22.2091 22.2091 24 20 24H4C1.79086 24 0 22.2091 0 20V4Z", fill: "none" }))));
+
 const SvgDashboardIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M10.5453 15.652C10.2568 15.3525 9.8837 15.1313 9.4568 15.029L7.91394 14.6593V13.7174H6.02987V14.6623L4.49101 15.0299C3.48478 15.2703 2.7749 16.1697 2.7749 17.2042V19.725H6.18598L10.5453 15.652Z", fill: "#78D2FA" }), /* @__PURE__ */ React.createElement("path", { d: "M7.95401 13.7174V14.6847L6.97624 17.0268L5.99951 14.6881V13.7174H7.95401Z", fill: "#FFB487" }), /* @__PURE__ */ React.createElement("path", { d: "M9.0732 10.4723V11.7769C9.0732 12.9367 8.13296 13.8769 6.97312 13.8769C5.81328 13.8769 4.87305 12.9367 4.87305 11.7769V10.4723H9.0732Z", fill: "#FFCDAC" }), /* @__PURE__ */ React.createElement("path", { d: "M9.0732 10.885V10.3794C9.0732 9.21962 8.13296 8.27942 6.97312 8.27942C5.81328 8.27942 4.87305 9.21962 4.87305 10.3794V10.885H6.32066C7.22718 10.885 8.11672 10.6388 8.89432 10.1729", fill: "#878791" }), /* @__PURE__ */ React.createElement("path", { d: "M13.4541 15.652C13.7426 15.3525 14.1157 15.1313 14.5426 15.029L16.0854 14.6593V13.7174H17.9695V14.6623L19.5084 15.0299C20.5146 15.2703 21.2245 16.1697 21.2245 17.2042V19.725H17.8134L13.4541 15.652Z", fill: "#A5DC69" }), /* @__PURE__ */ React.createElement("path", { d: "M10.6856 15.6151L8.53663 16.1301C7.13608 16.4657 6.14844 17.7179 6.14844 19.1581V21.225H17.8436V19.1599C17.8436 17.7189 16.8548 16.4662 15.4532 16.1313L13.3099 15.6193L10.6856 15.6151Z", fill: "#FF5A5A" }), /* @__PURE__ */ React.createElement("path", { d: "M17.9999 13.7174V14.6881L17.0232 17.0268L16.0454 14.6847V13.7174H17.9999Z", fill: "#FFB487" }), /* @__PURE__ */ React.createElement("path", { d: "M12.0002 18.6277L13.3993 15.4511C13.2955 15.2767 13.2363 15.0738 13.2363 14.8589V14.5536H10.7626V14.859C10.7626 15.0735 10.7036 15.2761 10.6001 15.4503L12.0002 18.6277Z", fill: "#FFB487" }), /* @__PURE__ */ React.createElement("path", { d: "M14.9247 9.58215V11.6004C14.9247 13.2158 13.6151 14.5254 11.9997 14.5254C10.3843 14.5254 9.07471 13.2158 9.07471 11.6004V9.58215H14.9247Z", fill: "#FFCDAC" }), /* @__PURE__ */ React.createElement("path", { d: "M11.9997 6.72888C10.3843 6.72888 9.07471 8.03846 9.07471 9.65388V10.358H10.5048C11.4555 10.358 12.3574 9.93708 12.968 9.20842L14.9247 10.358V9.65388C14.9248 8.03846 13.6152 6.72888 11.9997 6.72888Z", fill: "#F5B955" }), /* @__PURE__ */ React.createElement("path", { d: "M14.9263 10.4723V11.7769C14.9263 12.9367 15.8665 13.8769 17.0263 13.8769C18.1862 13.8769 19.1264 12.9367 19.1264 11.7769V10.4723H14.9263Z", fill: "#FFCDAC" }), /* @__PURE__ */ React.createElement("path", { d: "M14.9263 10.885V10.3794C14.9263 9.21962 15.8665 8.27942 17.0263 8.27942C18.1862 8.27942 19.1264 9.21962 19.1264 10.3794V10.885H17.6788C16.7723 10.885 15.8827 10.6388 15.1051 10.1729", fill: "#878791" }), /* @__PURE__ */ React.createElement("path", { d: "M11.9906 20.85C11.8917 20.85 11.7947 20.8901 11.7249 20.9599C11.655 21.0296 11.6147 21.1264 11.6147 21.225C11.6147 21.3236 11.6549 21.4204 11.7249 21.4901C11.7947 21.5599 11.8917 21.6 11.9906 21.6C12.0895 21.6 12.1864 21.5599 12.2563 21.4901C12.3262 21.4204 12.3665 21.3236 12.3665 21.225C12.3665 21.1264 12.3263 21.0296 12.2563 20.9599C12.1864 20.8901 12.0895 20.85 11.9906 20.85Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M19.5959 14.6652L18.345 14.3663V13.8701C19.0393 13.4313 19.5018 12.6573 19.5018 11.7769V10.3794C19.5018 9.01469 18.3915 7.90443 17.0267 7.90443C16.2905 7.90443 15.6287 8.22791 15.175 8.73974C14.7775 7.36338 13.5064 6.35388 12.0038 6.35388H12.0038C10.4987 6.35388 9.22588 7.36657 8.83067 8.74631C8.37677 8.23068 7.71256 7.90443 6.97322 7.90443C5.60844 7.90443 4.49814 9.01473 4.49814 10.3794V11.7769C4.49814 12.6573 4.96059 13.4313 5.65494 13.8701V14.3663L4.40402 14.6652C3.224 14.947 2.3999 15.9911 2.3999 17.2042V19.725C2.3999 19.9321 2.56783 20.1 2.7749 20.1H5.77351V21.225C5.77351 21.4321 5.94144 21.6 6.14851 21.6H10.2624C10.4695 21.6 10.6374 21.4321 10.6374 21.225C10.6374 21.0179 10.4695 20.85 10.2624 20.85H8.5883V19.1995C8.5883 18.9924 8.42038 18.8245 8.2133 18.8245C8.00623 18.8245 7.8383 18.9924 7.8383 19.1995V20.85H6.52348V19.1581C6.52348 17.8863 7.38725 16.7911 8.62404 16.4947L10.4684 16.0528L11.6551 18.7526C11.715 18.8888 11.8496 18.9767 11.9984 18.9767H11.9984C12.1471 18.9767 12.2818 18.8888 12.3417 18.7527L13.5272 16.0567L15.3662 16.4961C16.6041 16.7917 17.4686 17.8872 17.4686 19.1598V19.5783C17.4495 19.6234 17.4388 19.6729 17.4388 19.725C17.4388 19.777 17.4495 19.8266 17.4686 19.8716V20.85H16.1615V19.1995C16.1615 18.9924 15.9936 18.8245 15.7865 18.8245C15.5794 18.8245 15.4115 18.9924 15.4115 19.1995V20.85H13.5749C13.3679 20.85 13.1999 21.0179 13.1999 21.225C13.1999 21.4321 13.3679 21.6 13.5749 21.6H17.8436C18.0507 21.6 18.2186 21.4321 18.2186 21.225V20.1H21.2249C21.432 20.1 21.5999 19.9321 21.5999 19.725V17.2042C21.5999 15.9911 20.7758 14.947 19.5959 14.6652ZM17.5958 14.6826L17.0233 16.0535L16.4584 14.7006C16.4599 14.687 16.461 14.6733 16.461 14.6596C16.461 14.6561 16.461 14.6526 16.4609 14.6491V14.1859C16.6427 14.2287 16.832 14.2519 17.0267 14.2519C17.2222 14.2519 17.4124 14.2284 17.5949 14.1853V14.6623C17.5949 14.6691 17.5954 14.6758 17.5958 14.6826ZM10.3106 14.9838C10.0752 14.8378 9.81692 14.7297 9.54422 14.6643L8.28894 14.3635V13.8717C8.60113 13.675 8.86629 13.4105 9.06395 13.099C9.34666 13.6513 9.78058 14.1138 10.3106 14.432V14.9838ZM9.45365 11.6004V10.7331H10.5088C11.466 10.7331 12.3731 10.3548 13.0433 9.68527L14.5516 10.5714V11.6884C14.505 13.0539 13.3804 14.1505 12.0038 14.1505C10.5976 14.1504 9.45365 13.0065 9.45365 11.6004ZM13.6849 14.439C14.2183 14.122 14.6552 13.6591 14.9401 13.1056C15.1373 13.4142 15.4009 13.6763 15.7109 13.8717V14.3635L14.4556 14.6643C14.1812 14.7301 13.9215 14.8392 13.6849 14.9865L13.6849 14.439ZM17.0267 13.5019C16.0755 13.5019 15.3016 12.7281 15.3016 11.7769V11.7157C15.3029 11.6775 15.3038 10.7074 15.3038 10.7074C16.0411 11.07 16.8538 11.26 17.6792 11.26H18.7518V11.777C18.7517 12.7281 17.9779 13.5019 17.0267 13.5019ZM17.0267 8.65443C17.9779 8.65443 18.7517 9.42828 18.7517 10.3794V10.4723V10.51H17.6791C16.8689 10.51 16.0727 10.2972 15.3711 9.89399C15.5813 9.17842 16.2439 8.65443 17.0267 8.65443ZM9.45365 9.65392C9.45365 8.24782 10.5976 7.10392 12.0038 7.10392C13.4099 7.10392 14.5538 8.24786 14.5538 9.65392V9.70282L13.162 8.88513C13.0041 8.79232 12.8023 8.82723 12.6847 8.96759C12.1439 9.61289 11.3509 9.98302 10.5089 9.98302H9.45365V9.65392ZM5.24806 10.3794C5.24806 9.42824 6.02195 8.65443 6.97314 8.65443C7.75588 8.65443 8.4185 9.17842 8.62869 9.89403C7.92703 10.2972 7.1309 10.51 6.32064 10.51H5.24806V10.4723V10.3794ZM5.24806 11.26H6.32068C7.14688 11.26 7.96044 11.0696 8.69822 10.7064V11.7769C8.69822 12.7281 7.92433 13.5019 6.97314 13.5019C6.02195 13.5019 5.24806 12.7281 5.24806 11.7769V11.26ZM6.97314 14.2519C7.16784 14.2519 7.35707 14.2286 7.53894 14.1859V14.6386C7.53853 14.6456 7.53834 14.6527 7.53834 14.6597C7.53834 14.6715 7.53947 14.6833 7.54059 14.695L6.97322 16.0535L6.4037 14.6893C6.40434 14.6803 6.40487 14.6714 6.40487 14.6623V14.1854C6.58745 14.2284 6.77758 14.2519 6.97314 14.2519ZM5.77351 19.1581V19.35H4.6499V17.6839C4.6499 17.4768 4.48198 17.3089 4.2749 17.3089C4.06783 17.3089 3.8999 17.4768 3.8999 17.6839V19.35H3.1499V17.2042C3.1499 16.3396 3.73723 15.5955 4.57817 15.3946L5.76684 15.1107L6.54264 16.969C6.05743 17.5717 5.77351 18.3358 5.77351 19.1581ZM8.44929 15.7654C8.22785 15.8185 8.01624 15.8923 7.81531 15.9834L8.18056 15.1088L9.36943 15.3937C9.46164 15.4158 9.55149 15.445 9.63845 15.4804L8.44929 15.7654ZM11.9985 17.67L11.0606 15.5363V14.7629C11.3596 14.8522 11.6761 14.9004 12.0037 14.9004C12.327 14.9004 12.6395 14.8535 12.9349 14.7664V15.5405L11.9985 17.67ZM14.3545 15.4833C14.4436 15.4465 14.5357 15.4164 14.6304 15.3937L15.8164 15.1095L16.1831 15.988C15.9796 15.8953 15.7651 15.8203 15.5404 15.7666L14.3545 15.4833ZM20.8499 19.35H20.0999V17.6839C20.0999 17.4768 19.932 17.3089 19.7249 17.3089C19.5178 17.3089 19.3499 17.4768 19.3499 17.6839V19.35H18.2186V19.1599C18.2186 18.3387 17.9357 17.5757 17.4518 16.9734L18.2301 15.11L19.4216 15.3946C20.2626 15.5955 20.8499 16.3396 20.8499 17.2042V19.35Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M10.7426 11.0719C10.6437 11.0719 10.5467 11.112 10.4768 11.1818C10.4069 11.2515 10.3667 11.3483 10.3667 11.4469C10.3667 11.5455 10.4069 11.6423 10.4768 11.712C10.5468 11.7818 10.6437 11.8219 10.7426 11.8219C10.8418 11.8219 10.9384 11.7818 11.0083 11.712C11.0786 11.6423 11.1184 11.5455 11.1184 11.4469C11.1184 11.3483 11.0786 11.2515 11.0083 11.1818C10.9384 11.112 10.8414 11.0719 10.7426 11.0719Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M13.2504 11.8219C13.3492 11.8219 13.4462 11.7818 13.5161 11.712C13.5864 11.6423 13.6262 11.5455 13.6262 11.4469C13.6262 11.3483 13.5864 11.2515 13.5161 11.1818C13.4462 11.112 13.3492 11.0719 13.2504 11.0719C13.1515 11.0719 13.0546 11.112 12.9846 11.1818C12.9147 11.2515 12.8745 11.3483 12.8745 11.4469C12.8745 11.5455 12.9147 11.6423 12.9846 11.712C13.0546 11.7818 13.1515 11.8219 13.2504 11.8219Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M12.7217 12.4441C12.5752 12.2976 12.3378 12.2976 12.1913 12.4441C12.0804 12.5549 11.9 12.5549 11.7891 12.4441C11.6426 12.2976 11.4053 12.2976 11.2588 12.4441C11.1123 12.5905 11.1123 12.8279 11.2588 12.9744C11.4604 13.1761 11.7253 13.2769 11.9902 13.2769C12.2551 13.2769 12.52 13.1761 12.7216 12.9744C12.8681 12.8279 12.8681 12.5905 12.7217 12.4441Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M17.6479 5.17505H17.9052C18.1122 5.17505 18.2802 5.00716 18.2802 4.80005C18.2802 4.59294 18.1122 4.42505 17.9052 4.42505H17.6479C17.4409 4.42505 17.2729 4.59294 17.2729 4.80005C17.2729 5.00716 17.4409 5.17505 17.6479 5.17505Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M19.4673 5.17505H19.7245C19.9316 5.17505 20.0995 5.00716 20.0995 4.80005C20.0995 4.59294 19.9316 4.42505 19.7245 4.42505H19.4673C19.2602 4.42505 19.0923 4.59294 19.0923 4.80005C19.0923 5.00716 19.2602 5.17505 19.4673 5.17505Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M18.6874 6.21339C18.8949 6.21339 19.0633 6.0455 19.0633 5.83839V5.58118C19.0633 5.37406 18.8949 5.20618 18.6874 5.20618C18.4798 5.20618 18.3115 5.37406 18.3115 5.58118V5.83839C18.3115 6.0455 18.4798 6.21339 18.6874 6.21339Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M18.6874 4.39381C18.8949 4.39381 19.0633 4.22592 19.0633 4.01881V3.7616C19.0633 3.55448 18.8949 3.3866 18.6874 3.3866C18.4798 3.3866 18.3115 3.55448 18.3115 3.7616V4.01881C18.3115 4.22592 18.4798 4.39381 18.6874 4.39381Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M4.25391 5.17505H4.51108C4.71816 5.17505 4.88608 5.00716 4.88608 4.80005C4.88608 4.59294 4.71816 4.42505 4.51108 4.42505H4.25391C4.04683 4.42505 3.87891 4.59294 3.87891 4.80005C3.87891 5.00716 4.04683 5.17505 4.25391 5.17505Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M6.07324 5.17505H6.33042C6.53749 5.17505 6.70542 5.00716 6.70542 4.80005C6.70542 4.59294 6.53749 4.42505 6.33042 4.42505H6.07324C5.86617 4.42505 5.69824 4.59294 5.69824 4.80005C5.69824 5.00716 5.86613 5.17505 6.07324 5.17505Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M5.29286 6.21339C5.50041 6.21339 5.66873 6.0455 5.66873 5.83839V5.58118C5.66873 5.37406 5.50041 5.20618 5.29286 5.20618C5.08531 5.20618 4.91699 5.37406 4.91699 5.58118V5.83839C4.91699 6.0455 5.08527 6.21339 5.29286 6.21339Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M5.29286 4.39381C5.50041 4.39381 5.66873 4.22592 5.66873 4.01881V3.7616C5.66873 3.55448 5.50041 3.3866 5.29286 3.3866C5.08531 3.3866 4.91699 3.55448 4.91699 3.7616V4.01881C4.91699 4.22592 5.08527 4.39381 5.29286 4.39381Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M12.0004 5.56487C12.2079 5.56487 12.3762 5.39698 12.3762 5.18987V4.20325C12.3762 3.99613 12.2079 3.82825 12.0004 3.82825C11.7928 3.82825 11.6245 3.99613 11.6245 4.20325V5.18987C11.6245 5.39698 11.7928 5.56487 12.0004 5.56487Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M12.0004 3.15002C12.0992 3.15002 12.1962 3.1099 12.2661 3.04015C12.336 2.9704 12.3762 2.87365 12.3762 2.77502C12.3762 2.6764 12.336 2.57965 12.2661 2.5099C12.1962 2.44015 12.0992 2.40002 12.0004 2.40002C11.9015 2.40002 11.8046 2.44015 11.7346 2.5099C11.6647 2.57965 11.6245 2.6764 11.6245 2.77502C11.6245 2.87365 11.6647 2.9704 11.7346 3.04015C11.8046 3.1099 11.9015 3.15002 12.0004 3.15002Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M10.1552 4.43482C10.2285 4.50805 10.3244 4.54465 10.4204 4.54465C10.5163 4.54465 10.6123 4.50805 10.6855 4.43482C10.832 4.28838 10.832 4.05093 10.6855 3.90445L10.1368 3.35568C9.9903 3.20924 9.75292 3.20924 9.60641 3.35568C9.45997 3.50212 9.45997 3.73957 9.60641 3.88604L10.1552 4.43482Z", fill: "black" }), /* @__PURE__ */ React.createElement("path", { d: "M13.5606 4.54236C13.6566 4.54236 13.7525 4.50576 13.8257 4.43252L14.3929 3.86541C14.5393 3.71897 14.5393 3.48152 14.3929 3.33505C14.2464 3.18861 14.009 3.18861 13.8625 3.33505L13.2954 3.90216C13.1489 4.0486 13.1489 4.28605 13.2954 4.43252C13.3687 4.50576 13.4646 4.54236 13.5606 4.54236Z", fill: "black" }));
 
 const SvgInfoUser = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M8 0C3.57895 0 0 3.57895 0 8C0 12.4211 3.57895 16 8 16C12.4211 16 16 12.4211 16 8C16 3.57895 12.4211 0 8 0ZM8 14.4211C4.47368 14.4211 1.57895 11.5263 1.57895 8C1.57895 4.47368 4.47368 1.57895 8 1.57895C11.5263 1.57895 14.4211 4.47368 14.4211 8C14.4211 11.5263 11.5263 14.4211 8 14.4211Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M8.42106 6.73685H7.57895C7.42106 6.73685 7.3158 6.84211 7.3158 7V11.7895C7.3158 11.9474 7.42106 12.0526 7.57895 12.0526H8.42106C8.57895 12.0526 8.68422 11.9474 8.68422 11.7895V7C8.68422 6.84211 8.57895 6.73685 8.42106 6.73685Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M7.31577 4.21053C7.10524 4.42105 7.05261 4.63158 7.05261 4.89474C7.05261 5.15789 7.15788 5.42105 7.31577 5.57895C7.47366 5.78947 7.73682 5.89474 7.99998 5.89474C8.26314 5.89474 8.5263 5.78947 8.68419 5.63158C8.84209 5.47368 8.94735 5.21053 8.94735 4.94737C8.94735 4.68421 8.84209 4.42105 8.68419 4.26316C8.31577 3.84211 7.68419 3.84211 7.31577 4.21053Z", fill: "currentColor" }));
@@ -565,11 +567,11 @@ const SvgWebServiceIcon = (props) => /* @__PURE__ */ React.createElement("svg",
 
 const SvgProjectStatusIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 18 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.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.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.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.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.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.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.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.createElement("path", { d: "M12.5911 6.93419L9 10.6251V9.01177L11.7849 6.14966L12.5911 6.93419Z", fill: "#C6E1EC" }));
 
-const SvgCaptureIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "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.createElement("path", { d: "M11 11H14V12H12V14H11V11Z", fill: "currentcolor" }), /* @__PURE__ */ React.createElement("rect", { x: 12, y: 12, width: 2, height: 2, fill: "" }), /* @__PURE__ */ React.createElement("rect", { x: 11.4622, y: 12.2595, width: 1, height: 2.5193, transform: "rotate(-49.0426 11.4622 12.2595)", fill: "currentcolor" }));
+const SvgCaptureIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.1549 0.000732422H13.7586C14.9937 0.000732422 15.9985 1.00484 15.9985 2.23906V4.84434H14.5308V2.23906C14.5308 1.81416 14.1844 1.46849 13.7586 1.46849H11.1549V0.000732422ZM14.5323 6.31234H16V9.68819H14.5323V6.31234ZM2.23832 0.00245581C1.0041 0.00245581 0 1.0073 0 2.24236V4.84606H1.46775V2.24236C1.46775 1.81658 1.81342 1.47021 2.23832 1.47021H4.8436V0.00245581H2.23832ZM6.31136 0.000732422H9.68721V1.46849H6.31136V0.000732422ZM9.68721 14.5317H6.31136V15.9995H9.68721V14.5317ZM1.46933 13.7609C1.46933 14.1858 1.81574 14.5315 2.24152 14.5315H4.84518V15.9992H2.24148C1.00642 15.9992 0.00157977 14.9951 0.00157977 13.7609V11.1556H1.46933V13.7609ZM1.46775 6.31234H0V9.68819H1.46775V6.31234ZM10.2911 9.09126L15.7113 14.5114L14.5217 15.7094L9.10151 10.2893L9.47274 11.0908V13.394L7.90351 13.3856V7.89326H13.4127L13.3958 9.46249H11.1348L10.2911 9.09126Z", fill: "currentcolor" }));
 
 const SvgRotateIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_4584_14070)" }, /* @__PURE__ */ React.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.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_4584_14070" }, /* @__PURE__ */ React.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.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 12 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("rect", { x: 2.4209, width: 4.26667, height: 4.26667, rx: 2.13333, fill: "currentcolor" }), /* @__PURE__ */ React.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 SvgTapIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 12 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("rect", { x: 2.63159, width: 4.01569, height: 4.01569, rx: 2.00784, fill: "currentcolor" }), /* @__PURE__ */ React.createElement("path", { d: "M11.0197 9.0159V13.4297C11.0197 14.8491 9.92939 15.9999 8.58599 15.9999H5.95346C5.18997 15.9999 4.45292 15.6711 3.94115 15.0723C3.7089 14.8007 3.48361 14.4734 3.31812 14.0917L1.07774 9.59277C0.859449 9.15263 1.0218 8.61456 1.43236 8.38619C2.0387 8.05005 2.78828 8.29518 3.10674 8.93664L3.81599 10.3605V4.88128C3.81599 4.34258 4.23319 3.87581 4.74357 3.89047C5.22412 3.90531 5.6169 4.31983 5.6169 4.84016V7.79462C5.6169 7.26915 6.02019 6.84493 6.51806 6.84493C7.01305 6.84493 7.41782 7.26694 7.41782 7.79462V8.31425C7.41782 7.78876 7.82111 7.36454 8.31897 7.36454C8.81491 7.36454 9.21875 7.78769 9.21875 8.31425V9.01588C9.21875 8.49038 9.62204 8.06619 10.1199 8.06619C10.6159 8.06619 11.0197 8.48933 11.0197 9.0159Z", stroke: "currentcolor", strokeLinejoin: "round" }));
 
 const SvgRefreshIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "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.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" }));
 
@@ -624,7 +626,7 @@ Components['delete'] = SvgDelete;
 Components['details'] = SvgDetails;
 Components['impactList'] = SvgImpactList;
 Components['beautify_icon'] = SvgBeautifyIcon;
-Components['add_variable'] = SvgAddVariableIcon;
+Components['add_variable_icon'] = SvgAddVariableIcon;
 Components['replace_file'] = SvgReplaceFile;
 Components['formate_painter'] = SvgFormatePainter;
 Components['bold'] = SvgBold;
@@ -794,6 +796,7 @@ Components['no_data'] = SvgNoData;
 Components['add_user'] = SvgAddUser;
 Components['add_to_archive'] = SvgAddArchive;
 Components['remove_user'] = SvgRemoveUser;
+Components['add_variable'] = SvgAddVariable;
 Components['dashboard_icon'] = SvgDashboardIcon; //TODO:this is temporary icon
 Components['info_user'] = SvgInfoUser;
 Components['web_service_icon'] = SvgWebServiceIcon;
@@ -806,8 +809,8 @@ 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$1c = ".ff-icon-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px;\n  box-sizing: content-box;\n}\n.ff-icon-container.ff-icon-danger:hover {\n  background-color: var(--ff-icon-color-danger-variant);\n}\n.ff-icon-container.ff-icon-dark {\n  background-color: var(--brand-color);\n  border-radius: 4px;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover {\n  background-color: white;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n\n.ff-icon-click {\n  cursor: pointer;\n  box-sizing: content-box;\n}\n.ff-icon-click:hover {\n  border-radius: 4px;\n  background-color: var(--ff-icon-hover-fill-color);\n}\n.ff-icon-click:hover > svg {\n  color: var(--brand-color);\n}\n\n.ff-icon-disabled {\n  cursor: no-drop;\n}\n.ff-icon-disabled > svg {\n  color: var(--toggle-strip-color);\n}\n.ff-icon-disabled:hover {\n  box-shadow: none;\n}\n.ff-icon-disabled:hover > svg {\n  color: var(--toggle-strip-color);\n}";
+styleInject(css_248z$1c);
 
 const Icon = /*#__PURE__*/forwardRef(({
   name,
@@ -850,7 +853,7 @@ const Icon = /*#__PURE__*/forwardRef(({
       height: `${iconHeight}px`,
       width: `${iconWidth}px`
     },
-    className: classNames('ff-icon-container', {
+    className: cx('ff-icon-container', {
       'ff-icon-click': hoverEffect,
       'ff-icon-disabled': disabled,
       'ff-icon-dark': variant === 'dark',
@@ -883,8 +886,8 @@ const Icon = /*#__PURE__*/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$1b = ".ff-text {\n  font-family: \"Poppins\", sans-serif;\n  font-size: 16px;\n}\n.ff-text--regular {\n  font-weight: 400;\n}\n.ff-text--medium {\n  font-weight: 500;\n}\n.ff-text--semi-bold {\n  font-weight: 600;\n}\n.ff-text--bold {\n  font-weight: 700;\n}\n.ff-text .required-asterisk {\n  color: var(--input-error-text-color);\n  padding-right: 4px;\n}";
+styleInject(css_248z$1b);
 
 const Typography = ({
   fontWeight = 'regular',
@@ -947,7 +950,7 @@ const Button$1 = /*#__PURE__*/forwardRef(({
   return jsxs("button", {
     type: type,
     ref: ref,
-    className: classNames('ff-button', `ff-button--${size}`, `ff-button--${variant}`, `${className}`, 'button'),
+    className: cx('ff-button', `ff-button--${size}`, `ff-button--${variant}`, `${className}`, 'button'),
     style: {
       backgroundColor,
       ...style
@@ -958,14 +961,14 @@ const Button$1 = /*#__PURE__*/forwardRef(({
     children: [iconPosition === 'left' && renderIcon(), jsx(Typography, {
       fontSize: 10,
       fontWeight: "semi-bold",
-      className: classNames(`ff-button-${variant}--text`),
+      className: cx(`ff-button-${variant}--text`),
       children: label
     }), iconPosition === 'right' && renderIcon(), children]
   });
 });
 
-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$1a = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-drawer-container .ff-overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--drawer-title-color);\n  opacity: 0.5;\n  z-index: 999;\n}\n.ff-drawer-container .child-drawer-overlay {\n  z-index: 999;\n}\n.ff-drawer-container .ff-drawer {\n  margin-bottom: 4px;\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  top: 87px;\n  background-color: var(--primary-button-text-color);\n  z-index: 999;\n  transform: translateX(100%);\n  opacity: 0;\n}\n.ff-drawer-container .ff-drawer--open {\n  transform: translateX(0);\n  opacity: 1;\n}\n.ff-drawer-container .ff-drawer--small {\n  width: 444px;\n}\n.ff-drawer-container .ff-drawer--medium {\n  width: 666px;\n}\n.ff-drawer-container .ff-drawer--large {\n  width: 888px;\n}\n.ff-drawer-container .ff-drawer--x-large {\n  width: calc(100vw - 10px);\n}\n.ff-drawer-container .ff-drawer--open, .ff-drawer-container .ff-drawer--medium, .ff-drawer-container .ff-drawer--large, .ff-drawer-container .ff-drawer--x-large {\n  transition: all 0.4s ease-in-out;\n  border-radius: 5px;\n  border: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header {\n  padding: 4px 8px 4px 8px;\n  display: flex;\n  gap: 10px;\n  border-bottom: 1px solid var(--border-color);\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n  font-weight: 600;\n  color: var(--drawer-title-color);\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-close-icon {\n  height: 16px;\n  width: 16px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  height: 24px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-expand-collapse-button {\n  cursor: pointer;\n  background-color: var(--button-bg-color);\n  outline: none;\n  border: none;\n  margin: 0;\n  border: 1px solid transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-action-section .ff-action-button .ff-custom-header {\n  background-color: var(--drawer-footer-bg);\n  padding: 4px 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-body {\n  background-color: var(--drawer-footer-bg);\n  overflow-y: auto;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  padding: 4px 8px 4px 8px;\n  display: flex;\n  justify-content: space-between;\n  border-top: 1px solid var(--drawer-footer-border);\n  z-index: 1000;\n  background-color: var(--base-bg-color);\n  transform: translateY(3px);\n  border-radius: 0 0 4px 4px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .button-container {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n}\n.ff-drawer-container .ff-drawer .ff-drawer-footer .ff-custom-footer {\n  background-color: var(--drawer-footer-bg);\n  padding: 4px 8px;\n}";
+styleInject(css_248z$1a);
 
 function useEscapeKey(key) {
   return callBack => {
@@ -983,8 +986,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$19 = ":root {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #71347b;\n  --text-color: #1e161f;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #71347b;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #71347b;\n  --border-color: #f0e7f4;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-machine-input-field-border-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-avatar-background-color: #71347b;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-running-status-color: #2055de;\n  --ff-machine-active-status-color: #4caf50;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n}\n\n:root {\n  --base-bg-color: #1e1a22;\n  --brand-color: #71347b;\n  --text-color: #e8e0e9;\n  --description-text: #d9d9d9;\n  --click-able-text-color: #e8e0e9;\n  --custom-table-header-bg-color: #EFE1F9;\n  --icons-default-color: #e8e0e9;\n  --border-color: #333234;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n  --slider-table-color: #272428;\n  --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n  --drawer-footer-border: #333234;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #2a2a2a;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active-color: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(18, 18, 18, 0.6);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n  --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n  --secondary-button-text-color: #71347b;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n  --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --default-icon-color: #a3a3a3;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n  --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n  --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n  --file-details-bg: #0d0d0d;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --pie-chart-border-color: #b6b6b6;\n  --button-bg-color: #f6ebff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --confirm-tick-icon-color: #5CA700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-icon-color-dark-variant: #ffffff;\n  --avatar-background-color: #71347b;\n  --avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #333234;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4B494C;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-search-field-hover-color: #F7ECF8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #C50303;\n  --ff-machine-active-status-color: #4CAF50;\n  --ff-machine-running-status-color: #2055DE;\n  --download-client-border-color: #F0E7F4;\n  --download-client-header-bg-color: #EDE6F2;\n  --download-client-content-text-color: #592F7C;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #F0E7F4;\n  --download-client-icon-container-bg-color: #FFFFFF;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #F9D5FF;\n  --partial-public-chip-bg-color: #FCC27D;\n  --private-chip-bg-color: #DBC3EF;\n  --disabled-chip-bg-color: #C4C3C3;\n  --impact-list-text-color: #14041C;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #E3CCF5;\n}\n\n.ff-light-theme {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #71347b;\n  --text-color: #1e161f;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #71347b;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #71347b;\n  --border-color: #f0e7f4;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-machine-input-field-border-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-avatar-background-color: #71347b;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-running-status-color: #2055de;\n  --ff-machine-active-status-color: #4caf50;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n}\n\n.ff-dark-theme {\n  --base-bg-color: #1e1a22;\n  --brand-color: #71347b;\n  --text-color: #e8e0e9;\n  --description-text: #d9d9d9;\n  --click-able-text-color: #e8e0e9;\n  --custom-table-header-bg-color: #EFE1F9;\n  --icons-default-color: #e8e0e9;\n  --border-color: #333234;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n  --slider-table-color: #272428;\n  --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n  --drawer-footer-border: #333234;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #2a2a2a;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active-color: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(18, 18, 18, 0.6);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n  --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n  --secondary-button-text-color: #71347b;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n  --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --default-icon-color: #a3a3a3;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n  --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n  --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n  --file-details-bg: #0d0d0d;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --license_expireSoon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --pie-chart-border-color: #b6b6b6;\n  --button-bg-color: #f6ebff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --confirm-tick-icon-color: #5CA700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-icon-color-dark-variant: #ffffff;\n  --avatar-background-color: #71347b;\n  --avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #333234;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4B494C;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-search-field-hover-color: #F7ECF8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #C50303;\n  --ff-machine-active-status-color: #4CAF50;\n  --ff-machine-running-status-color: #2055DE;\n  --download-client-border-color: #F0E7F4;\n  --download-client-header-bg-color: #EDE6F2;\n  --download-client-content-text-color: #592F7C;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #F0E7F4;\n  --download-client-icon-container-bg-color: #FFFFFF;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #F9D5FF;\n  --partial-public-chip-bg-color: #FCC27D;\n  --private-chip-bg-color: #DBC3EF;\n  --disabled-chip-bg-color: #C4C3C3;\n  --impact-list-text-color: #14041C;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #E3CCF5;\n}";
+styleInject(css_248z$19);
 
 const ThemeContext = /*#__PURE__*/createContext$1(undefined);
 const ThemeProvider = ({
@@ -1036,7 +1039,10 @@ const Drawer = ({
   rightTertiaryButtonProps = {},
   zIndex = 999,
   secondLayerZIndex = false,
-  top
+  top,
+  height,
+  width,
+  right = 0
 }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const handleEsc = useEscapeKey('Escape');
@@ -1065,19 +1071,22 @@ const Drawer = ({
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
   return /*#__PURE__*/createPortal(jsxs("div", {
-    className: classNames('ff-drawer-container', currentTheme),
+    className: cx('ff-drawer-container', currentTheme),
     children: [overlay && jsx("div", {
-      className: classNames(secondLayerZIndex && 'child-drawer-overlay', 'ff-overlay')
+      className: cx(secondLayerZIndex && 'child-drawer-overlay', 'ff-overlay')
     }), jsxs("div", {
-      className: classNames('ff-drawer', `ff-drawer--${drawerSize}`, {
+      className: cx('ff-drawer', `ff-drawer--${drawerSize}`, {
         'ff-drawer--open': isOpen
       }),
       style: {
         zIndex,
-        top
+        top,
+        height,
+        width,
+        right
       },
       children: [showHeader && jsx("div", {
-        className: classNames('ff-drawer-header', {
+        className: cx('ff-drawer-header', {
           'ff-custom-header': customHeader
         }),
         children: customHeader ? jsx("div", {
@@ -1126,12 +1135,12 @@ const Drawer = ({
           })]
         })
       }), jsx("div", {
-        className: classNames('ff-drawer-body', {
+        className: cx('ff-drawer-body', {
           'no-footer': !isFooterRequired
         }),
         children: children
       }), isFooterRequired && jsx("div", {
-        className: classNames('ff-drawer-footer', {
+        className: cx('ff-drawer-footer', {
           'ff-custom-footer': customFooter
         }),
         children: customFooter || footerContent || jsxs(Fragment, {
@@ -1178,14 +1187,14 @@ 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}";
-styleInject(css_248z$16);
+var css_248z$18 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-accordion {\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  min-width: fit-content;\n}\n.ff-accordion .accordion-header {\n  display: flex;\n  justify-content: space-between;\n  min-height: 32px;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-accordion .accordion-header .header-title {\n  padding: 8px;\n}\n.ff-accordion .accordion-header .accordion-arrow {\n  display: flex;\n  padding: 8px;\n  align-items: center;\n  transition: transform 0.3s ease;\n}\n.ff-accordion .accordion-header .accordion-arrow.expanded {\n  transform: rotate(180deg);\n}\n.ff-accordion .accordion-header .accordion-arrow:hover {\n  color: var(--tooltip-bg-color);\n}\n.ff-accordion .accordion-header.expanded {\n  background-color: var(--hover-color);\n  border-bottom: 1px solid var(--hover-color);\n}\n.ff-accordion .accordion-header:hover {\n  background-color: var(--hover-color);\n}\n.ff-accordion .accordion-content {\n  padding: 8px;\n}";
+styleInject(css_248z$18);
 
-var css_248z$15 = "/* global.css or component CSS */\nbody {\n  font-family: \"Poppins\", sans-serif;\n}";
-styleInject(css_248z$15);
+var css_248z$17 = "/* global.css or component CSS */\nbody {\n  font-family: \"Poppins\", sans-serif;\n}";
+styleInject(css_248z$17);
 
-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);
+var css_248z$16 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-tooltip-container {\n  cursor: pointer;\n  display: inline-block;\n}\n\n.ff-tooltip {\n  position: fixed;\n  width: max-content;\n  max-width: 60vw;\n  word-wrap: break-word;\n  background-color: var(--tooltip-bg-color);\n  line-height: 18px;\n  color: var(--tooltip-text-color);\n  text-align: center;\n  border-radius: 5px;\n  padding: 4px 8px;\n  opacity: 0;\n  z-index: 10000;\n}\n.ff-tooltip--visible {\n  opacity: 1;\n  transition: opacity 0.3s;\n}";
+styleInject(css_248z$16);
 
 const checkEmpty = value => {
   // Check for null or undefined
@@ -1340,7 +1349,7 @@ const Tooltip = ({
   }, [isVisible]);
   return jsxs("div", {
     ref: tooltipContainerRef,
-    className: classNames('ff-tooltip-container', currentTheme),
+    className: cx('ff-tooltip-container', currentTheme),
     onMouseEnter: () => setIsVisible(true),
     onMouseLeave: () => setIsVisible(false),
     children: [children, isVisible && !disabled && !isTitleEmpty(title) && /*#__PURE__*/createPortal(jsx("div", {
@@ -1348,7 +1357,7 @@ const Tooltip = ({
       style: {
         ...styles[placement]
       },
-      className: classNames('ff-tooltip', currentTheme, {
+      className: cx('ff-tooltip', currentTheme, {
         'ff-tooltip--visible': isVisible
       }),
       children: title
@@ -1408,8 +1417,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$15 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .default-label {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .active-default-label, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .error-text {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-multiselect-container-with-icon {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 8px;\n  width: 100%;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper {\n  flex-grow: 1;\n  box-sizing: border-box;\n  transition: all 0.3s ease;\n  cursor: pointer;\n  position: relative;\n  border: 1px solid var(--default-icon-color);\n  border-radius: 4px;\n  background: var(--drawer-footer-bg);\n  min-width: 150px;\n  height: 32px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect {\n  position: relative;\n  padding: 6px 3px;\n  border: none;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main {\n  display: flex;\n  flex: 1;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .default-label {\n  font-family: Poppins;\n  font-weight: 400;\n  letter-spacing: 0.5px;\n  transition: all 0.3s ease;\n  color: var(--default-icon-color);\n  line-height: 18px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .active-default-label {\n  font-size: 8px !important;\n  height: 8px;\n  font-family: Poppins;\n  font-weight: 400;\n  letter-spacing: 0.5px;\n  transition: all 0.3s ease;\n  background-color: var(--multi-select-label-bg);\n  line-height: 12px;\n  color: var(--default-icon-color);\n  padding: 0 4px;\n  position: absolute;\n  left: 8px;\n  top: -6px;\n  pointer-events: none;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 5px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  border: 0.5px solid var(--tabs-border-color);\n  padding-left: 4px;\n  gap: 4px;\n  height: 16px;\n  border-radius: 15px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n  line-height: 14px;\n  color: var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label.label-padding {\n  padding-right: 3px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-close-icon {\n  color: var(--brand-color);\n  cursor: pointer;\n  padding: 0px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container {\n  flex: 1;\n  min-width: 20px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input {\n  width: 100%;\n  min-width: 30px;\n  max-width: calc(100% - 0px);\n  padding: 2px;\n  box-sizing: border-box;\n  border: none;\n  font-size: 12px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-input-container input:focus {\n  outline: none;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect .ff-multiselect-more-chip {\n  display: flex;\n  align-items: center;\n  width: 16px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow {\n  transition: transform 0.3s ease;\n  transform: rotate(360deg);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow svg path {\n  transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__toggle .ff-select-arrow--opened-dropdown {\n  transform: rotate(180deg);\n  transition: transform 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover {\n  border: 1px solid var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--tooltip-bg-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper:hover .ff-select-arrow svg path {\n  fill: var(--tooltip-bg-color);\n  transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--with-options {\n  height: fit-content;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown {\n  border: 1px solid var(--brand-color);\n  height: fit-content;\n  cursor: default;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover {\n  border: 1px solid var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--opened-dropdown:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--brand-color);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error {\n  border: 1px solid var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover {\n  border: 1px solid var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--error:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--error-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled {\n  pointer-events: none;\n  border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover {\n  border: 1px solid var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .default-label,\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-multiselect .ff-multiselect__main .active-default-label {\n  color: var(--multi-select-border);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-select-arrow svg path {\n  fill: var(--multi-select-border);\n  transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled:hover .ff-select-arrow svg path {\n  fill: var(--multi-select-border);\n  transition: all 0.3s ease;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper--disabled .ff-multiselect__main .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n  color: var(--text-color-light);\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .error-text {\n  position: absolute;\n  margin-top: 4px;\n  left: 12px;\n  color: var(--error-light);\n  letter-spacing: 0.5px;\n}\n.ff-multiselect-container-with-icon .ff-manage-labels-text {\n  position: absolute;\n  right: 0;\n  margin-top: 4px;\n}\n.ff-multiselect-container-with-icon .ff-label-plus-icon {\n  cursor: pointer;\n}";
+styleInject(css_248z$15);
 
 const dropdownDefaultCSSData$1 = {
   verticalMargin: 4,
@@ -1417,11 +1426,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$14 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-multiselect-dropdown-container .no-options, .ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-multiselect-dropdown-container {\n  position: absolute;\n  background: var(--drawer-footer-bg);\n  z-index: 1000;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  border: 0.5px solid var(--ff-select-option-border-color);\n  border-radius: 4px;\n  box-sizing: border-box;\n  margin-block: 4px;\n  max-height: 160px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper {\n  max-height: 128px;\n  overflow-y: auto;\n  border-radius: 2px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 40px;\n  border-radius: 12px 0px 0px 0px;\n  background: var(--description-text);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-track {\n  background: var(--ff-select-scroll-track-bg);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb {\n  background: var(--ff-select-scroll-thumb-color);\n  border-radius: 10px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb:hover {\n  background: var(--ff-select-scroll-thumb-hover);\n}\n.ff-multiselect-dropdown-container .no-options {\n  color: var(--pop-up-background-blur);\n  text-align: center;\n  margin: 0;\n  padding: 10px;\n  line-height: 12px;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  height: 32px;\n  padding: 4px 8px;\n  gap: 4px;\n  border-radius: 4px 0px 0px 0px;\n  background-color: white;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n  color: var(--ff-select-text-color);\n}\n.ff-multiselect-dropdown-container .dropdown-option-container:hover {\n  background-color: var(--hover-color);\n}\n.ff-multiselect-dropdown-container:focus {\n  outline: none;\n}\n.ff-multiselect-dropdown-container .select-button-container {\n  box-sizing: border-box;\n  width: 100%;\n  border-top: 1px solid var(--slider-table-color);\n  height: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}";
+styleInject(css_248z$14);
 
-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$13 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-checkbox--overlay {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  cursor: pointer;\n  position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n  display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--checkbox-border-color);\n  box-sizing: border-box;\n  border-radius: 2px;\n  margin-right: 4px;\n  background-color: var(--checkbox-bg-color);\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::before {\n  content: \"\";\n  width: 9px;\n  height: 2px;\n  background-color: var(--checkbox-partial-color);\n  border-radius: 2px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(180deg);\n  opacity: 0;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::after {\n  content: \"\";\n  width: 16px;\n  height: 16px;\n  border: 4px solid var(--checkbox-hover-color);\n  border-radius: 4px;\n  position: absolute;\n  opacity: 0;\n  background-color: var(--checkbox-hover-color);\n  z-index: -1;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover {\n  border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom {\n  background: var(--brand-color);\n  border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--passed {\n  background-color: var(--ff-card-passed-status-bg-color);\n  border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--failed {\n  background-color: var(--ff-card-failed-status-bg-color);\n  border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--warning {\n  background-color: var(--ff-card-warning-status-bg-color);\n  border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--skipped {\n  background-color: var(--ff-card-skipped-status-bg-color);\n  border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--flaky {\n  background-color: var(-- ff-card-flaky-status-bg-color);\n  border-color: var(-- ff-card-flaky-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom {\n  background: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--passed {\n  background: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--failed {\n  background: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--warning {\n  background: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--skipped {\n  background: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--flaky {\n  background: var(-- ff-card-flaky-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom {\n  opacity: 0.5;\n  cursor: not-allowed;\n  border: 1px solid var(--checkbox-border-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom::after {\n  opacity: 0;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial {\n  background-color: var(--brand-color);\n  border: none;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial::before {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover {\n  background-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox--passed {\n  border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--failed {\n  border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--warning {\n  border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--skipped {\n  border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--flaky {\n  border-color: var(-- ff-card-flaky-status-bg-color);\n}";
+styleInject(css_248z$13);
 
 const Checkbox = ({
   id,
@@ -1430,7 +1439,8 @@ const Checkbox = ({
   disabled = false,
   checked: initialChecked = false,
   partial = false,
-  onChange
+  onChange,
+  variant
 }) => {
   const [checked, setChecked] = useState(initialChecked);
   useEffect(() => {
@@ -1448,9 +1458,11 @@ const Checkbox = ({
       onChange: onChange,
       disabled: disabled
     }), jsx("span", {
-      className: classNames('ff-checkbox-custom', {
+      className: cx('ff-checkbox-custom', {
         'ff-checkbox-checked': checked,
-        'ff-storybook-checkbox--partial': partial && !checked
+        'ff-storybook-checkbox--partial': partial && !checked,
+        [`ff-checkbox--${variant}`]: variant,
+        [`ff-checkbox-checked--${variant}`]: checked && variant
       }),
       children: checked && jsx(Icon, {
         name: "tick",
@@ -1520,7 +1532,7 @@ const Dropdown$2 = /*#__PURE__*/forwardRef(({
   return jsxs("div", {
     role: "listbox",
     ref: ref,
-    className: classNames('ff-multiselect-dropdown-container', {
+    className: cx('ff-multiselect-dropdown-container', {
       [currentTheme || '']: true
     }),
     style: {
@@ -1816,7 +1828,7 @@ const MultiSelect = ({
     className: `ff-multiselect-container-with-icon ${className}`,
     children: [jsxs("div", {
       ref: selectWrapper,
-      className: classNames('ff-multiselect-wrapper', {
+      className: cx('ff-multiselect-wrapper', {
         'ff-multiselect-wrapper--with-options': selectedOptions?.length,
         'ff-multiselect-wrapper--opened-dropdown': isOpen,
         'ff-multiselect-wrapper--error': isFieldSkipped && required || inputError,
@@ -1829,7 +1841,7 @@ const MultiSelect = ({
           className: "ff-multiselect__main",
           children: [checkEmpty(highlightedMachine) ? jsx(Typography, {
             as: "span",
-            className: classNames({
+            className: cx({
               'active-default-label': isOpen || checkEmpty(highlightedMachine) && !withSelectButton && selectedOptions?.length || isFieldSkipped && required,
               'default-label': !isOpen && !selectedOptions?.length
             }),
@@ -1891,7 +1903,7 @@ const MultiSelect = ({
           className: "ff-multiselect__toggle",
           children: jsx(Icon, {
             name: "arrow_down",
-            className: classNames({
+            className: cx({
               'ff-select-arrow--opened-dropdown': isOpen,
               'ff-select-arrow': !isOpen
             }),
@@ -1932,8 +1944,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$12 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-toaster-overlay {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  pointer-events: none;\n  justify-content: flex-end;\n  align-items: flex-end;\n}\n.ff-toaster-overlay .ff-toaster {\n  background-color: var(--drawer-footer-bg);\n  display: flex;\n  border-radius: 10px;\n  margin: 16px;\n  pointer-events: auto;\n  min-width: 320px;\n  max-width: 600px;\n  gap: 8px;\n  box-shadow: 0px 1px 4px 0px var(--toaster-boxshadow);\n  animation: slideInToasterBottomRight 0.5s forwards;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container {\n  padding: 8px;\n  display: flex;\n  border-radius: 10px;\n  gap: 8px;\n  width: 100%;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 8px;\n  padding: 1px;\n  -webkit-mask: linear-gradient(var(--drawer-footer-bg) 0 0) content-box, linear-gradient(var(--drawer-footer-bg) 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  z-index: -1;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 4px;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__title {\n  max-width: 500px;\n  word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__message {\n  max-width: 500px;\n  word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__prompt {\n  margin-top: 4px;\n  display: flex;\n  gap: 10px;\n}\n.ff-toaster-overlay .ff-toaster--success::before {\n  background: var(--toaster-success-border);\n}\n.ff-toaster-overlay .ff-toaster--warning::before {\n  background: var(--toaster-warning-border);\n}\n.ff-toaster-overlay .ff-toaster--info::before {\n  background: var(--toaster-info-border);\n}\n.ff-toaster-overlay .ff-toaster--danger::before, .ff-toaster-overlay .ff-toaster--confirm::before {\n  background: var(--toaster-danger_confirm-border);\n}\n.ff-toaster-overlay .ff-toaster .ff-close-icon-wrapper {\n  box-sizing: border-box;\n  cursor: pointer;\n  height: fit-content;\n  width: fit-content;\n  border-radius: 8px;\n  padding: 8px;\n  background: var(--toast-close-icon-wrapper-bg);\n  margin-left: auto;\n}\n.ff-toaster-overlay.exiting {\n  animation: slideOutToasterBottomRight 0.5s forwards;\n}\n\n@keyframes slideOutToasterBottomRight {\n  from {\n    transform: translateX(0%);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n@keyframes slideInToasterBottomRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0%);\n  }\n}\n.fireflink-stories-toaster-container .fireflink-stories-toaster-container-row {\n  display: flex;\n  gap: 5px;\n  margin: 15px;\n}";
+styleInject(css_248z$12);
 
 const Toaster = ({
   isOpen = false,
@@ -1989,7 +2001,7 @@ const Toaster = ({
   return /*#__PURE__*/createPortal(jsx("div", {
     role: "alert",
     "aria-live": "assertive",
-    className: classNames('ff-toaster-overlay', {
+    className: cx('ff-toaster-overlay', {
       exiting: isExiting,
       [currentTheme || '']: true
     }),
@@ -1997,7 +2009,7 @@ const Toaster = ({
       zIndex
     },
     children: jsx("div", {
-      className: classNames('ff-toaster', {
+      className: cx('ff-toaster', {
         exiting: isExiting
       }),
       children: jsxs("div", {
@@ -2042,8 +2054,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$11 = "/* Container */\n.ff-container {\n  margin-right: auto;\n  margin-left: auto;\n  width: 90%;\n  display: grid;\n}\n\n.ff-container-fluid {\n  width: 100%;\n  margin-right: auto;\n  margin-left: auto;\n  display: grid;\n}\n\n/* Row */\n.ff-row {\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n}\n\n/* Column sizes based on a 12-column layout */\n.ff-col {\n  grid-column: span 12;\n}\n\n.ff-col-1 {\n  grid-column: span 1;\n}\n\n.ff-col-2 {\n  grid-column: span 2;\n}\n\n.ff-col-3 {\n  grid-column: span 3;\n}\n\n.ff-col-4 {\n  grid-column: span 4;\n}\n\n.ff-col-5 {\n  grid-column: span 5;\n}\n\n.ff-col-6 {\n  grid-column: span 6;\n}\n\n.ff-col-7 {\n  grid-column: span 7;\n}\n\n.ff-col-8 {\n  grid-column: span 8;\n}\n\n.ff-col-9 {\n  grid-column: span 9;\n}\n\n.ff-col-10 {\n  grid-column: span 10;\n}\n\n.ff-col-11 {\n  grid-column: span 11;\n}\n\n.ff-col-12 {\n  grid-column: span 12;\n}\n\n@media (max-width: 768px) {\n  /* Stacking columns on small screens */\n  .ff-col {\n    grid-column: span 12;\n  }\n}";
+styleInject(css_248z$11);
 
 const Container = ({
   children,
@@ -2053,7 +2065,7 @@ const Container = ({
 }) => {
   const containerClassName = fluid ? 'ff-container-fluid' : 'ff-container';
   return jsx("div", {
-    className: classNames(containerClassName, className),
+    className: cx(containerClassName, className),
     style: {
       gap
     },
@@ -2066,7 +2078,7 @@ const Row$1 = ({
   className = ''
 }) => {
   return jsx("div", {
-    className: classNames('ff-row', className),
+    className: cx('ff-row', className),
     style: {
       gap
     },
@@ -2080,13 +2092,13 @@ const Col = ({
 }) => {
   const colClassName = `ff-col-${size}`;
   return jsx("div", {
-    className: classNames(colClassName, className),
+    className: cx(colClassName, className),
     children: children
   });
 };
 
-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$10 = ".ff--switch-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff--switch-container .ff--switch-checkbox {\n  height: 0;\n  width: 0;\n  display: none;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button {\n  right: -1px;\n  border: 1px solid var(--brand-color);\n  background: var(--toggle-button-bg-color);\n  transition: all 0.3s;\n  box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label .ff--switch-button .ff-checked-icon--primary svg path {\n  fill: var(--brand-color);\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label--primary {\n  background: var(--brand-color);\n  transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-checkbox:checked + .ff--switch-label:disabled {\n  cursor: default;\n  color: var(--disable-color);\n  background: var(--disable-color);\n}\n.ff--switch-container .ff--switch-checkbox:disabled {\n  cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  border-radius: 8px;\n  position: relative;\n  background: var(--toggle-strip-color);\n  transition: all 0.3s;\n}\n.ff--switch-container .ff--switch-label--disabled {\n  opacity: 0.5;\n  cursor: no-drop;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button {\n  position: absolute;\n  left: 0;\n  border: 1px solid var(--toggle-strip-color);\n  display: flex;\n  background: var(--toggle-button-bg-color);\n  border-radius: 50%;\n  box-shadow: 0px 0px 2px 0px var(--toggle-strip-shadow);\n  transition: all 0.3s;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n.ff--switch-container .ff--switch-label .ff--switch-button .ff-unchecked-icon--primary svg path {\n  fill: var(--toggle-disable-icon-color);\n}\n.ff--switch-container .default--small {\n  width: 24px;\n  height: 10px;\n}\n.ff--switch-container .default--small .ff--switch-button {\n  width: 16px;\n  height: 16px;\n  transform: translateX(0);\n}\n.ff--switch-container .default--small .ff--switch-button.checked {\n  transform: translateX(10px);\n}\n.ff--switch-container .default--medium {\n  width: 32px;\n  height: 14px;\n}\n.ff--switch-container .default--medium .ff--switch-button {\n  width: 20px;\n  height: 20px;\n  transform: translateX(0);\n}\n.ff--switch-container .default--medium .ff--switch-button.checked {\n  transform: translateX(14px);\n}\n.ff--switch-container .default--large {\n  width: 40px;\n  height: 16px;\n}\n.ff--switch-container .default--large .ff--switch-button {\n  width: 24px;\n  height: 24px;\n  transform: translateX(0);\n}\n.ff--switch-container .default--large .ff--switch-button.checked {\n  transform: translateX(16px);\n}";
+styleInject(css_248z$10);
 
 const Toggle = ({
   onChange,
@@ -2140,12 +2152,12 @@ const Toggle = ({
       onChange: handleChange,
       checked: checked
     }), jsx("label", {
-      className: classNames(`ff--switch-label default--${size} ff--switch-label--${variant}`, {
+      className: cx(`ff--switch-label default--${size} ff--switch-label--${variant}`, {
         'ff--switch-label--disabled': disabled
       }),
       htmlFor: `ff-toggle-${id}`,
       children: jsx("span", {
-        className: classNames(`ff--switch-button ff--switch-button--${size}`, {
+        className: cx(`ff--switch-button ff--switch-button--${size}`, {
           checked: checked
         }),
         children: checked ? jsx(Icon, {
@@ -2164,8 +2176,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 = '',
@@ -2183,7 +2195,7 @@ const Chip = ({
       onMouseEnter: handleOnMouseEnter,
       onMouseLeave: handleOnMouseLeave,
       onClick: onClick,
-      className: classNames(`ff-default-chip-style ff-default-chip-style--${variant}`, {
+      className: cx(`ff-default-chip-style ff-default-chip-style--${variant}`, {
         ['ff-default-chip-style--fullText']: !!fullText
       }),
       children: labelText && jsx(Typography, {
@@ -2194,10 +2206,10 @@ 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$_ = ".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$_);
 
-const Input = ({
+const Input = /*#__PURE__*/forwardRef(({
   type = 'text',
   variant = 'primary',
   name = '',
@@ -2220,23 +2232,23 @@ const Input = ({
   size = 'small',
   isLabelRequired = true,
   ...props
-}) => {
+}, ref) => {
   const isValueFilled = !checkEmpty(value);
   return jsxs("div", {
-    className: classNames('ff-input-container', {
+    className: cx('ff-input-container', {
       'ff-input-container--float': isValueFilled,
       'ff-input-container--disabled': !!disabled
     }),
     children: [isLabelRequired && jsxs("label", {
       htmlFor: name,
-      className: classNames(`ff-input-label-container ff-input-label-container--${size}`, {
+      className: cx(`ff-input-label-container ff-input-label-container--${size}`, {
         'ff-input-label-container--danger': !!error
       }),
       children: [required && jsx("span", {
         className: "required-asterisk",
         children: "*"
       }), jsx("span", {
-        className: classNames(`ff-input-label ff-input-label--${variant}`, {
+        className: cx(`ff-input-label ff-input-label--${variant}`, {
           'ff-input-label--no-hover': !!value,
           'ff-input-label--disabled': !!disabled,
           'ff-input-label--danger': !!error
@@ -2244,12 +2256,13 @@ const Input = ({
         children: label
       })]
     }), jsx("input", {
+      ref: ref,
       name: name,
       value: value,
       type: type,
       spellCheck: false,
       id: name,
-      className: classNames(`ff-input ff-input-${variant} default-input ff-input--${size}`, {
+      className: cx(`ff-input ff-input-${variant} default-input ff-input--${size}`, {
         ['ff-input--transparentBackground']: !!transparentBackground,
         'ff-input--no-hover': !!value,
         'ff-input--disabled': !!disabled,
@@ -2267,16 +2280,16 @@ const Input = ({
       max: maxValue,
       ...props
     }), helperText && error && jsx("span", {
-      className: classNames('ff-input-message', {
+      className: cx('ff-input-message', {
         'ff-input-message--danger': !!error
       }),
       children: helperText
     })]
   });
-};
+});
 
-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$Z = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-radial-chart-container svg text {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-radial-chart-container {\n  cursor: pointer;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n.ff-radial-chart-container svg {\n  vertical-align: middle;\n}\n.ff-radial-chart-container svg text {\n  font-size: var(--fontSize) !important;\n  font-weight: 400;\n}";
+styleInject(css_248z$Z);
 
 const useColorMappings$1 = () => useMemo(() => {
   return {
@@ -2385,41 +2398,45 @@ const RadialChart = ({
         percentage
       } = calculateArcAngles$1(status.value, total, currentAngle, radius);
       currentAngle = endAngle;
-      return 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: jsxs("g", {
-          transform: `translate(${radius + lineWidth}, ${radius + lineWidth})`,
-          children: [jsx("path", {
-            d: backgroundArcPath,
-            fill: "none",
-            stroke: backgroundColorMapping[normalizedStatus],
-            strokeWidth: lineWidth
-          }), jsx("path", {
-            d: foregroundArcPath,
-            fill: "none",
-            stroke: colorMapping[normalizedStatus],
-            strokeWidth: lineWidth
-          }), jsx("text", {
-            x: "0",
-            y: "0",
-            fill: colorMapping[normalizedStatus],
-            textAnchor: "middle",
-            dominantBaseline: "central",
-            children: `${Math.round(percentage * 100)}%`
-          })]
-        })
-      }, status.status);
+      return jsx(Tooltip, {
+        title: `${status.status}: ${Math.round(percentage * 100)}%`,
+        zIndex: 1000,
+        children: 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: jsxs("g", {
+            transform: `translate(${radius + lineWidth}, ${radius + lineWidth})`,
+            children: [jsx("path", {
+              d: backgroundArcPath,
+              fill: "none",
+              stroke: backgroundColorMapping[normalizedStatus],
+              strokeWidth: lineWidth
+            }), jsx("path", {
+              d: foregroundArcPath,
+              fill: "none",
+              stroke: colorMapping[normalizedStatus],
+              strokeWidth: lineWidth
+            }), 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$Y = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-expandable-chip-menu--medium, .ff-expandable-chip-menu .ff-sub-chip--medium {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-expandable-chip-menu {\n  display: inline-flex;\n  gap: 16px;\n  align-items: center;\n  border-radius: 16px;\n  cursor: pointer;\n  overflow: hidden;\n  width: auto;\n  padding: 4px 8px;\n  transition: all 0.3s ease;\n}\n.ff-expandable-chip-menu--primary {\n  border: 0.5px solid var(--brand-color);\n  background-color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-label-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 4px;\n  white-space: nowrap;\n  padding: 2px 0;\n}\n.ff-expandable-chip-menu .ff-label-chip .arrow-icon {\n  height: 14px;\n  width: 14px;\n  display: grid;\n  place-items: center;\n}\n.ff-expandable-chip-menu .ff-label-chip--primary {\n  color: var(--brand-color);\n}\n.ff-expandable-chip-menu--disabled {\n  opacity: 0.5;\n}\n.ff-expandable-chip-menu--disabled:disabled {\n  pointer-events: none;\n}\n.ff-expandable-chip-menu--medium {\n  line-height: 18px;\n}\n.ff-expandable-chip-menu .ff-sub-chips {\n  display: flex;\n  gap: 8px;\n  max-width: 500px;\n  overflow-x: auto;\n  -ms-overflow-style: none;\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 0.3s ease, opacity 0.3s ease;\n  opacity: 0;\n}\n.ff-expandable-chip-menu .ff-sub-chips::-webkit-scrollbar {\n  display: none;\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chips {\n  transform: scaleX(1);\n  opacity: 1;\n}\n.ff-expandable-chip-menu .ff-sub-chip {\n  padding: 2px 8px;\n  border-radius: 12px;\n  white-space: nowrap;\n  transition: background-color 0.3s ease, color 0.3s ease;\n  opacity: 0;\n  transform: translateX(-10px);\n  animation: fadeIn 0.5s ease forwards;\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary {\n  background: var(--expandable-menu-option-bg);\n  color: var(--brand-color);\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary:hover, .ff-expandable-chip-menu .ff-sub-chip--primary.selected {\n  background-color: var(--brand-color);\n  color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-sub-chip--medium {\n  line-height: 18px;\n}\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n    transform: translateX(-10px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chip {\n  animation: fadeIn 0.5s ease forwards;\n}";
+styleInject(css_248z$Y);
 
 const ExpandableMenu = ({
   label = '',
@@ -2456,7 +2473,7 @@ const ExpandableMenu = ({
   };
   const hasExpanded = isExpanded || isHovered;
   return jsxs("div", {
-    className: classNames('ff-expandable-chip-menu', `ff-expandable-chip-menu--${variant}`, {
+    className: cx('ff-expandable-chip-menu', `ff-expandable-chip-menu--${variant}`, {
       'ff-expandable-chip-menu--disabled': disable,
       expanded: hasExpanded
     }),
@@ -2472,11 +2489,11 @@ const ExpandableMenu = ({
         children: icon
       })]
     }), hasExpanded && !checkEmpty(subMenus) && jsx("div", {
-      className: classNames('ff-sub-chips', {
+      className: cx('ff-sub-chips', {
         expanded: hasExpanded
       }),
       children: subMenus.map((chip, index) => jsx("div", {
-        className: classNames('ff-sub-chip', `ff-sub-chip--${variant}`, `ff-sub-chip--${size}`, {
+        className: cx('ff-sub-chip', `ff-sub-chip--${variant}`, `ff-sub-chip--${size}`, {
           selected: selectedMenu === chip
         }),
         onClick: () => handleSelectedMenu(chip),
@@ -2486,8 +2503,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-inputField__readonly {\n  cursor: pointer;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper {\n  cursor: pointer;\n  height: 100%;\n  padding: 0 8px 0 0;\n  display: flex;\n  align-items: center;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-border-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper__disabled {\n  cursor: not-allowed;\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-labels {\n  position: absolute;\n  left: 8px;\n  color: var(--ff-select-border-color);\n  letter-spacing: 0.5px;\n  line-height: 18px;\n  transition: 0.18s ease all;\n  border-radius: 4px;\n}\n.ff-select-wrapper .ff-select .ff-select-labels__active {\n  transform: translateY(-16px);\n  transition: 0.18s ease all;\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  z-index: 100000;\n}\n.ff-select-wrapper .ff-select__focus {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-labels {\n  color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-labels {\n  transform: translateY(-16px);\n  transition: 0.18s ease all;\n  color: var(--ff-select-brand-color);\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  line-height: 18px;\n  z-index: 100000;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows {\n  transform: rotate(180deg);\n  transition: 0.18s ease all;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__disabled {\n  cursor: not-allowed;\n}\n.ff-select-wrapper .ff-select__disabled:hover {\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-labels {\n  color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-border-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error {\n  border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover {\n  border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-labels {\n  color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-default-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error__focused:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error .ff-select-labels {\n  transform: translateY(-16px);\n  transition: 0.3s ease all;\n  color: var(--error_light);\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  line-height: 18px;\n}\n.ff-select-wrapper .ff-select__no_border {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select__no_border:hover {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-error-msg {\n  padding-left: 8px;\n  letter-spacing: 0.5px;\n}";
-styleInject(css_248z$V);
+var css_248z$X = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-select-wrapper .ff-select .ff-select-inputField, .ff-select-wrapper .ff-select .ff-select-labels {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-select-wrapper .ff-select__focus .ff-select-labels, .ff-select-wrapper .ff-select__error .ff-select-labels {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-select-wrapper {\n  min-height: 24px;\n  min-width: 50px;\n}\n.ff-select-wrapper .ff-select {\n  height: 100%;\n  border: 1px solid var(--ff-select-border-color);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-evenly;\n  position: relative;\n  box-sizing: border-box;\n}\n.ff-select-wrapper .ff-select:hover {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-labels {\n  color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-text-hover-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-input-icon {\n  margin-left: 6px;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField {\n  width: calc(100% - 8px);\n  height: 100%;\n  padding: 0 0 0 8px;\n  border: none;\n  outline: none;\n  letter-spacing: 0.5px;\n  z-index: 10;\n  background: transparent;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__disabled {\n  cursor: not-allowed;\n  color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__readonly {\n  cursor: pointer;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__icon {\n  width: calc(100% - 36px);\n  padding: 4;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper {\n  cursor: pointer;\n  height: 100%;\n  padding: 0 8px 0 0;\n  display: flex;\n  align-items: center;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-border-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper__disabled {\n  cursor: not-allowed;\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-labels {\n  position: absolute;\n  left: 8px;\n  color: var(--ff-select-border-color);\n  letter-spacing: 0.5px;\n  line-height: 18px;\n  transition: 0.18s ease all;\n  border-radius: 4px;\n}\n.ff-select-wrapper .ff-select .ff-select-labels__icon {\n  left: 24px;\n}\n.ff-select-wrapper .ff-select .ff-select-labels__active {\n  transform: translateY(-16px);\n  transition: 0.18s ease all;\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  z-index: 100000;\n  left: 8px;\n}\n.ff-select-wrapper .ff-select__focus {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-labels {\n  color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-labels {\n  transform: translateY(-16px);\n  transition: 0.18s ease all;\n  color: var(--ff-select-brand-color);\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  line-height: 18px;\n  z-index: 100000;\n  left: 8px;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows {\n  transform: rotate(180deg);\n  transition: 0.18s ease all;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__disabled {\n  cursor: not-allowed;\n}\n.ff-select-wrapper .ff-select__disabled:hover {\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-labels {\n  color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-border-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error {\n  border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover {\n  border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-labels {\n  color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-default-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error__focused:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error .ff-select-labels {\n  transform: translateY(-16px);\n  transition: 0.3s ease all;\n  color: var(--error_light);\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  line-height: 18px;\n  left: 8px;\n}\n.ff-select-wrapper .ff-select__no_border {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select__no_border:hover {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-error-msg {\n  padding-left: 8px;\n  letter-spacing: 0.5px;\n}";
+styleInject(css_248z$X);
 
 const dropdownDefaultCSSData = {
   margin: 6,
@@ -2496,8 +2513,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$W = ".ff-select-dropdown-wrapper {\n  max-height: 160px;\n  z-index: 999999;\n  position: absolute;\n  min-width: 50px;\n  border-radius: 4px;\n  border: 1px solid var(--ff-select-option-border-color);\n  margin-top: 4px;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  background-color: var(--ff-select-background-color);\n  overflow: hidden auto;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper::-webkit-scrollbar-track {\n  background: var(--ff-select-scroll-track-bg);\n  border-radius: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option {\n  box-sizing: border-box;\n  cursor: pointer;\n  padding: 0px 8px;\n  border-radius: 4px;\n  min-height: 32px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container {\n  display: flex;\n  align-items: center;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option .ff-select-dropdown-icon-container__icon {\n  margin-right: 4px;\n}\n.ff-select-dropdown-wrapper .ff-select-dropdown-option__selected, .ff-select-dropdown-wrapper .ff-select-dropdown-option:hover {\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-select-dropdown-wrapper .ff-select-no-option {\n  box-sizing: border-box;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}";
+styleInject(css_248z$W);
 
 const ffid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => ((char === 'x' ? Math.random() * 16 : Math.random() * 16 & 0x3 | 0x8) | 0).toString(16));
 
@@ -2526,7 +2543,8 @@ const Dropdown$1 = ({
   selectArrowRef,
   heightFromTop,
   selectedOption,
-  valueAccessor
+  valueAccessor,
+  showIcon = false
 }) => {
   const themeContext = useContext(ThemeContext);
   const currentTheme = themeContext?.currentTheme;
@@ -2557,50 +2575,56 @@ 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__default.isValidElement(label)) {
       return label;
     }
-    return jsx(Typography, {
+    return jsxs(Typography, {
       as: "div",
       lineHeight: "30px",
       color: "var(--ff-select-text-color)",
-      children: label
+      className: cx({
+        'ff-select-dropdown-icon-container': showIcon
+      }),
+      children: [showIcon && jsx(Icon, {
+        name: icon,
+        className: "ff-select-dropdown-icon-container__icon"
+      }), label]
     });
   };
   return jsx("div", {
-    className: classNames('ff-select-dropdown-wrapper', currentTheme),
+    className: cx('ff-select-dropdown-wrapper', currentTheme),
     ref: optionsWrapperRef,
     style: updateDropdownPosition(),
     children: jsx("div", {
       children: !checkEmpty(options) ? options.map(option => jsx("div", {
-        className: classNames('ff-select-dropdown-option', {
+        className: cx('ff-select-dropdown-option', {
           'ff-select-dropdown-option__selected': getValue$1(option, valueAccessor) === selectedOption
         }, currentTheme),
         onClick: () => {
           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())) : jsx(Typography, {
         textAlign: "center",
         as: "div",
         lineHeight: "32px",
         color: "var(--ff-select-text-color)",
-        className: classNames('ff-select-no-option', currentTheme),
+        className: cx('ff-select-no-option', currentTheme),
         children: "No Results found"
       })
     })
@@ -2665,11 +2689,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] = useState(false);
-  const [searchedOption, setSearchedOption] = useState('');
+  const [searchedOption, setSearchedOption] = useState({
+    searchedText: '',
+    searchedIcon: ''
+  });
+  const {
+    searchedText,
+    searchedIcon
+  } = searchedOption;
   const [selectOptionList, setSelectOptionList] = useState([]);
   const [dropdownPosition, setDropdownPosition] = useState({
     positionX: 0,
@@ -2684,7 +2716,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();
@@ -2700,7 +2735,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;
@@ -2728,14 +2766,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);
     }
@@ -2759,7 +2803,10 @@ const Select$1 = ({
     };
   }, [showDropdownOptions]);
   useEffect(() => {
-    setSearchedOption(getValue$1(selectedOption, valueAccessor));
+    setSearchedOption({
+      searchedText: getValue$1(selectedOption, valueAccessor),
+      searchedIcon: selectedOption.iconName
+    });
   }, [selectedOption]);
   useEffect(() => {
     if (checkEmpty(optionsList)) return;
@@ -2773,23 +2820,27 @@ const Select$1 = ({
       width: `${selectWidth}`
     },
     children: [jsxs("div", {
-      className: classNames('ff-select', {
+      className: cx('ff-select', {
         'ff-select__focus': showDropdownOptions,
         'ff-select__disabled': disabled,
         'ff-select__error': !!errorMsg,
         'ff-select__error__focused': !!errorMsg && showDropdownOptions,
         'ff-select__no_border': !showBorder
       }),
-      children: [jsx("input", {
+      children: [showIcon && jsx(Icon, {
+        name: searchedIcon,
+        className: "ff-select-input-icon"
+      }), jsx("input", {
         type: "text",
         ref: inputRef,
         id: "select-input-element",
-        className: classNames('ff-select-inputField', {
+        className: cx('ff-select-inputField', {
           'ff-select-inputField__disabled': disabled,
-          'ff-select-inputField__readonly': disableInput
+          'ff-select-inputField__readonly': disableInput,
+          'ff-select-inputField__icon': showIcon
         }),
         onFocus: handleFocus,
-        value: searchedOption,
+        value: searchedText,
         autoCorrect: "off",
         autoComplete: "off",
         spellCheck: "false",
@@ -2802,7 +2853,7 @@ const Select$1 = ({
         readOnly: disableInput
       }), optionsRequired && jsx("div", {
         ref: selectArrowRef,
-        className: classNames('ff-select-arrows-wrapper', {
+        className: cx('ff-select-arrows-wrapper', {
           'ff-select-arrows-wrapper__disabled': disabled
         }),
         onClick: handleIconClick,
@@ -2814,7 +2865,8 @@ const Select$1 = ({
         })
       }), showLabel && jsx(Typography, {
         as: "span",
-        className: classNames('ff-select-labels', {
+        className: cx('ff-select-labels', {
+          'ff-select-labels__icon': showIcon,
           'ff-select-labels__active': searchedOption
         }),
         fontSize: searchedOption || showDropdownOptions ? 8 : 12,
@@ -2841,14 +2893,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$V = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-textarea-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n  display: flex;\n  color: var(--text-area-default-color);\n  justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n  padding: 8px;\n  width: 100%;\n  min-height: 80px;\n  gap: 0px;\n  border: 1px solid var(--default-icon-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n  font-weight: 400;\n}\n.ff-textarea-container .ff-textarea--resize {\n  resize: none;\n}\n.ff-textarea-container .ff-textarea:disabled, .ff-textarea-container .ff-textarea-label-container:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ff-textarea-container .ff-textarea:disabled:hover, .ff-textarea-container .ff-textarea-label-container:disabled:hover {\n  border-color: var(--default-icon-color);\n  color: inherit;\n}\n.ff-textarea-container .ff-textarea::placeholder, .ff-textarea-container .ff-textarea-label-container::placeholder {\n  opacity: 0;\n}\n.ff-textarea-container .ff-textarea--danger {\n  border-color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea--transparentBackground {\n  background: transparent;\n}\n.ff-textarea-container .ff-textarea-label-container {\n  display: flex;\n  position: absolute;\n  border: none;\n  outline: none;\n  margin-top: 1px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label {\n  padding: 1px;\n  height: 10px;\n  width: auto;\n  background-color: var(--drawer-footer-bg);\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label--danger {\n  color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea-label-container .required-asterisk {\n  color: var(--error_light);\n}\n.ff-textarea-container:hover .ff-textarea-label {\n  color: var(--text-color);\n}\n.ff-textarea-container:hover .ff-textarea, .ff-textarea-container:hover .ff-textarea-label-container {\n  border-color: var(--text-color);\n}\n.ff-textarea-container:focus-within .ff-textarea-label-container {\n  font-weight: 400;\n  line-height: 12px;\n  letter-spacing: 0.5px;\n  text-align: left;\n  top: -6px;\n  background-color: transparent;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container:focus-within .ff-textarea-label--primary {\n  color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea--primary {\n  border-color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-textarea-container .ff-textarea-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-textarea-container .ff-textarea-message--danger {\n  color: var(--error_light);\n}\n.ff-textarea-container--float .ff-textarea-label-container {\n  letter-spacing: 0.5px;\n  top: -6px;\n  background-color: transparent;\n  line-height: 12px;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container--disabled {\n  cursor: not-allowed;\n}\n.ff-textarea-container--disabled:hover .ff-textarea-label {\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container--disabled:hover .ff-textarea, .ff-textarea-container--disabled:hover .ff-textarea-container .ff-textarea-label-container, .ff-textarea-container .ff-textarea-container--disabled:hover .ff-textarea-label-container {\n  border-color: var(--default-icon-color);\n}\n.ff-textarea-container--disabled .ff-textarea-label-container {\n  cursor: not-allowed;\n}";
+styleInject(css_248z$V);
 
 const Textarea = ({
   capacity = 200,
@@ -2871,17 +2924,17 @@ const Textarea = ({
   ...props
 }) => {
   return jsxs("div", {
-    className: classNames('ff-textarea-container', {
+    className: cx('ff-textarea-container', {
       'ff-textarea-container--disabled': disabled,
       'ff-textarea-container--float': !!value
     }),
     children: [jsx("label", {
       htmlFor: name,
-      className: classNames('ff-textarea-label-container', {
+      className: cx('ff-textarea-label-container', {
         'ff-textarea-label-container--danger': error
       }),
       children: jsxs("span", {
-        className: classNames(`ff-textarea-label ff-textarea-label--${variant}`, {
+        className: cx(`ff-textarea-label ff-textarea-label--${variant}`, {
           'ff-textarea-label--danger': error
         }),
         children: [required && jsx("span", {
@@ -2894,7 +2947,7 @@ const Textarea = ({
       name: name,
       value: value,
       id: name,
-      className: classNames(`ff-textarea ff-textarea--${variant}`, className, {
+      className: cx(`ff-textarea ff-textarea--${variant}`, className, {
         'ff-textarea--danger': error,
         'ff-textarea--resize': !resize
       }),
@@ -2918,8 +2971,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$U = ".ff-status-button {\n  border: none;\n  border-radius: 4px;\n  padding: 0 4px;\n  cursor: pointer;\n  width: 80px;\n  height: 16px;\n}\n.ff-status-button__text {\n  color: inherit;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 76px;\n  text-transform: capitalize;\n}\n.ff-status-button--passed {\n  background-color: var(--status-button-bg-passed);\n  color: var(--status-button-text-passed);\n}\n.ff-status-button--failed {\n  background-color: var(--status-button-bg-failed);\n  color: var(--status-button-text-failed);\n}\n.ff-status-button--running {\n  background-color: var(--status-button-bg-running);\n  color: var(--status-button-text-running);\n}\n.ff-status-button--skipped {\n  background-color: var(--status-button-bg-skipped);\n  color: var(--status-button-text-skipped);\n}\n.ff-status-button--warning {\n  background-color: var(--status-button-bg-warning);\n  color: var(--status-button-text-warning);\n}\n.ff-status-button--terminated {\n  background-color: var(--status-button-bg-terminated);\n  color: var(--status-button-text-terminated);\n}\n.ff-status-button--partially-executed {\n  background-color: var(--status-button-bg-partiallyExecuted);\n  color: var(--status-button-text-partiallyExecuted);\n}\n.ff-status-button--aborted {\n  background-color: var(--status-button-bg-aborted);\n  color: var(--status-button-text-aborted);\n}\n.ff-status-button--not-executed {\n  background-color: var(--status-button-bg-notExecuted);\n  color: var(--status-button-text-notExecuted);\n}\n.ff-status-button:disabled {\n  opacity: 50%;\n  cursor: not-allowed;\n}";
+styleInject(css_248z$U);
 
 const StatusButton = ({
   status = 'passed',
@@ -2935,7 +2988,7 @@ const StatusButton = ({
     title: hasTooltip ? label : '',
     placement: "bottom",
     children: jsx("button", {
-      className: classNames('ff-status-button', `ff-status-button--${status}`, className),
+      className: cx('ff-status-button', `ff-status-button--${status}`, className),
       style: style,
       onClick: onClick,
       disabled: disabled,
@@ -2952,14 +3005,14 @@ 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$T = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-option-card .ff-options {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-menu-option-container {\n  cursor: pointer;\n  position: relative;\n}\n.ff-menu-option-container .ff-icon-label {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container:hover {\n  background-color: var(--hover-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark {\n  background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover {\n  background-color: var(--menu-variant-dark-icon-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container.dark:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: var(--brand-color);\n  cursor: pointer;\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked:hover {\n  background-color: var(--brand-color);\n}\n.ff-menu-option-container .ff-icon-label .ff-menuicon-container-clicked.dark {\n  background-color: var(--menu-variant-dark-icon-color);\n}\n\n.ff-option-card {\n  position: fixed;\n  margin: 4px;\n  border: 1px solid var(--option-card-border-color);\n  background: var(--option-card-bg-color);\n  overflow: hidden;\n  min-height: 32px;\n  min-width: 110px;\n  width: max-content;\n  border-radius: 4px;\n}\n.ff-option-card--primary {\n  background: var(--brand-color);\n  color: var(--primary-button-text-color);\n}\n.ff-option-card--primary svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-option-card--primary :hover {\n  color: var(--brand-color);\n}\n.ff-option-card--primary :hover svg path {\n  fill: var(--brand-color);\n}\n.ff-option-card .ff-options {\n  cursor: pointer;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n}\n.ff-option-card .ff-options:hover {\n  background-color: var(--hover-color);\n}\n.ff-option-card .ff-options label {\n  cursor: pointer;\n}\n.ff-option-card .ff-disable-option {\n  opacity: 0.5;\n  cursor: no-drop;\n}\n.ff-option-card .ff-disable-option label {\n  cursor: no-drop;\n}";
+styleInject(css_248z$T);
 
 const Option$1 = ({
   option,
   onClick
 }) => jsxs("div", {
-  className: classNames('ff-options', {
+  className: cx('ff-options', {
     'ff-disable-option': option.disable
   }),
   onClick: () => !option.disable && onClick(option),
@@ -3028,7 +3081,7 @@ const OptionCard = ({
     }
   })();
   return /*#__PURE__*/createPortal(jsx("div", {
-    className: classNames('ff-option-card', [{
+    className: cx('ff-option-card', [{
       'ff-option-card--primary': variant === 'primary'
     }], currentTheme),
     style: {
@@ -3100,7 +3153,7 @@ const MenuOption = ({
       children: jsxs("div", {
         className: "ff-icon-label",
         children: [jsx("div", {
-          className: classNames('ff-menuicon-container', {
+          className: cx('ff-menuicon-container', {
             'ff-menuicon-container-clicked': isClicked,
             dark: variant === 'dark'
           }),
@@ -3136,8 +3189,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$S = ".ff-fixed-header-table {\n  overflow-y: auto;\n}\n\n.ff-table-icon {\n  position: absolute;\n  top: 10px;\n  right: 0;\n  margin-right: 10px;\n  z-index: 100;\n  cursor: pointer;\n}\n\n.ff-table {\n  width: 100%;\n}\n.ff-table th,\n.ff-table td {\n  text-align: left;\n  font-size: 12px;\n  padding: 9px 8px;\n}\n.ff-table thead tr th {\n  border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-table thead tr th .ff-label-checkbox-container {\n  display: flex;\n  align-items: center;\n}\n.ff-table thead tr th .ff-label-checkbox-container .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table tbody tr .action-column {\n  opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n  padding-left: 10px;\n  opacity: 0;\n  display: flex;\n  justify-content: flex-end;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  transform: translateX(20px);\n}\n.ff-table tbody tr:hover {\n  background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container {\n  opacity: 1;\n  transform: translateX(0);\n}\n.ff-table tbody tr td {\n  position: relative;\n  color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n  cursor: pointer;\n}\n.ff-table tbody tr td .ff-data-checkbox-container {\n  display: flex;\n  align-items: center;\n}\n.ff-table tbody tr td .ff-data-checkbox-container .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table .primary-bg {\n  background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n  background-color: var(--slider-table-color);\n}\n.ff-table .default-bg {\n  background-color: transparent;\n}\n.ff-table .default-color {\n  color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n  color: var(--brand-color);\n}\n\n.border-borderRadius {\n  border: 1px solid var(--slider-table-color);\n  border-radius: 5px;\n  border-collapse: none !important;\n}\n\n.ff-fixed-header {\n  position: sticky !important;\n  top: 0;\n  z-index: 99;\n  background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\ntbody tr.disabled-row {\n  opacity: 0.5;\n  cursor: not-allowed;\n}";
+styleInject(css_248z$S);
 
 const isFunction$2 = functionToCheck => {
   return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
@@ -3269,7 +3322,7 @@ const Table$1 = ({
       height: height,
       position: 'relative'
     },
-    className: classNames(className, {
+    className: cx(className, {
       'ff-fixed-header-table': withFixedHeader,
       'border-borderRadius': borderWithRadius
     }),
@@ -3282,15 +3335,15 @@ const Table$1 = ({
         onClick: headerIconOnClick
       })
     }), jsxs("table", {
-      className: classNames(`ff-table`),
+      className: cx(`ff-table`),
       cellSpacing: 0,
       children: [jsx("thead", {
-        className: classNames({
+        className: cx({
           'ff-fixed-header': withFixedHeader
         }, tableHeadClass),
         children: jsx("tr", {
           children: columns.map((column, index) => jsx("th", {
-            className: classNames(`${headerType && `${headerType}-bg`}`, `${headerTextColor && `${headerTextColor}-color`}`),
+            className: cx(`${headerType && `${headerType}-bg`}`, `${headerTextColor && `${headerTextColor}-color`}`),
             style: {
               width: column?.width
             },
@@ -3317,13 +3370,13 @@ const Table$1 = ({
         })
       }), jsx("tbody", {
         children: data.length > 0 && data.map((row, index) => jsx("tr", {
-          className: classNames(tableBodyRowClass, {
+          className: cx(tableBodyRowClass, {
             'disabled-row': row.disabled
           }),
           children: columns.map((column, i) => {
             return jsx("td", {
               onClick: () => hanleOnclick(column, row),
-              className: classNames(column.className, {
+              className: cx(column.className, {
                 'clickable-cell': column.onClick
               }),
               children: jsxs(Typography, {
@@ -3355,11 +3408,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$R = ".ff-add-button-container {\n  position: relative;\n  border: none;\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  background-color: transparent;\n}\n.ff-add-button-container.ff-hovered-add-button--primary {\n  background-color: var(--hover-color);\n}\n.ff-add-button-container .ff-hovered-add-icon--primary svg path {\n  fill: var(--add-icon-hover-color);\n}\n.ff-add-button-container .ff-add-icon--primary svg path {\n  fill: var(--brand-color);\n}\n.ff-add-button-container .ff-add-button {\n  position: absolute;\n  border: none;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 4px;\n  background: none;\n}";
+styleInject(css_248z$R);
 
-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$Q = ".ff-arrow-buttons-container {\n  position: absolute;\n  transition: opacity 0.3s ease;\n  pointer-events: none;\n}\n.ff-arrow-buttons-container.ff-down-right-top, .ff-arrow-buttons-container.ff-down-top {\n  height: 80px;\n  width: 52px;\n  transform: translateY(calc(-50% + 12px));\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--right, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--right {\n  top: 28px;\n  right: 2px;\n  animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--top, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--top {\n  top: 2px;\n  animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right-top .ff-arrow-button--down, .ff-arrow-buttons-container.ff-down-top .ff-arrow-button--down {\n  bottom: 2px;\n  animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right-top {\n  height: 52px;\n  width: 52px;\n  transform: translateY(-54%);\n}\n.ff-arrow-buttons-container.ff-right-top .ff-arrow-button--right {\n  top: 28px;\n  right: 2px;\n  animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right-top .ff-arrow-button--top {\n  top: 2px;\n  animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right {\n  height: 52px;\n  width: 52px;\n}\n.ff-arrow-buttons-container.ff-down-right .ff-arrow-button--right {\n  top: 0px;\n  right: 2px;\n  animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down-right .ff-arrow-button--down {\n  bottom: 2px;\n  animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-top {\n  height: 52px;\n  width: 24px;\n  transform: translateY(-54%);\n}\n.ff-arrow-buttons-container.ff-top .ff-arrow-button--top {\n  top: 2px;\n  animation: slideTop 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-right {\n  height: 24px;\n  width: 52px;\n}\n.ff-arrow-buttons-container.ff-right .ff-arrow-button--right {\n  right: 2px;\n  animation: slideRight 0.4s ease-out;\n}\n.ff-arrow-buttons-container.ff-down {\n  height: 52px;\n  width: 24px;\n}\n.ff-arrow-buttons-container.ff-down .ff-arrow-button--down {\n  bottom: 2px;\n  animation: slideDown 0.4s ease-out;\n}\n.ff-arrow-buttons-container .ff-arrow-button {\n  background: var(--arrow-button-bg-color);\n  border: 0.5px solid var(--arrows-button-border-color);\n  padding: 0;\n  cursor: pointer;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  border-radius: 4px;\n  justify-content: center;\n  align-items: center;\n  transition: all 0.3s ease;\n  position: absolute;\n}\n.ff-arrow-buttons-container .ff-arrow-button--top {\n  top: 0px;\n  left: 0;\n}\n.ff-arrow-buttons-container .ff-arrow-button--down {\n  bottom: 0px;\n  left: 0;\n}\n@keyframes slideTop {\n  from {\n    transform: translateY(20px);\n    opacity: 0;\n  }\n  50% {\n    transform: translateY(-10px);\n    opacity: 0.5;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n@keyframes slideRight {\n  from {\n    transform: translateX(-20px);\n    opacity: 0;\n  }\n  50% {\n    transform: translateX(10px);\n    opacity: 0.5;\n  }\n  to {\n    transform: translateX(0);\n    opacity: 1;\n  }\n}\n@keyframes slideDown {\n  from {\n    transform: translateY(-20px);\n    opacity: 0;\n  }\n  50% {\n    transform: translateY(10px);\n    opacity: 0.5;\n  }\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}";
+styleInject(css_248z$Q);
 
 const ArrowsButton = ({
   direction,
@@ -3371,7 +3424,7 @@ const ArrowsButton = ({
   };
   return jsx("div", {
     children: jsx("button", {
-      className: classNames('ff-arrow-button', `ff-arrow-button--${direction}`),
+      className: cx('ff-arrow-button', `ff-arrow-button--${direction}`),
       onClick: onArrowClick,
       children: jsx(MenuOption, {
         iconName: getIconName(),
@@ -3496,8 +3549,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$P = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-donut-chart-svg-container svg text:nth-of-type(1), .ff-status-item {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL, .ff-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-donut-chart-svg-container svg text:nth-of-type(3) {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-donut-chart-section {\n  display: flex;\n  align-items: center;\n  padding: 8px;\n}\n\n.ff-donut-chart-svg-container {\n  display: flex;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(3) {\n  font-weight: 500;\n}\n\n.ff-status-container {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.ff-status-item {\n  display: flex;\n  gap: 40px;\n  justify-content: space-between;\n  opacity: 1;\n}\n.ff-status-item.ff-highlighted {\n  opacity: 1;\n}\n.ff-status-item.ff-fade {\n  opacity: 10%;\n}\n.ff-status-item .ff-status-text {\n  font-weight: 500;\n  color: var(--status-skipped-text-color);\n}\n.ff-status-item .ff-status-details-script-count {\n  display: flex;\n  gap: 4px;\n  font-weight: 600;\n}\n.ff-status-item .ff-status-details-script-percentage {\n  font-weight: 400;\n  color: var(--brand2-color);\n}\n\n.ff-status-label {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.ff-status-details {\n  display: flex;\n  gap: 4px;\n}\n\n.ff-status-color {\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  opacity: 80%;\n}";
+styleInject(css_248z$P);
 
 const calculateArc$4 = (x, y, radius, startAngle, endAngle) => {
   const startX = x + radius * Math.cos(startAngle);
@@ -3546,7 +3599,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
@@ -3578,7 +3631,7 @@ const DonutChart = ({
         strokeWidth: lineWidth,
         onMouseEnter: () => handleMouseEnter(normalizedStatus),
         onMouseLeave: handleMouseLeave,
-        strokeOpacity: 0.8
+        strokeOpacity: hoveredStatus === null || hoveredStatus === normalizedStatus ? 0.8 : 0.3
       }), hoveredStatus === normalizedStatus && jsx("path", {
         d: outerArcPath,
         fill: "none",
@@ -3594,6 +3647,8 @@ const DonutChart = ({
     const percentage = (statusData?.value || 0) / total * 100;
     return jsxs("div", {
       className: `ff-status-item ${hoveredStatus === null || hoveredStatus === statusKey ? 'ff-highlighted' : 'ff-fade'}`,
+      onMouseEnter: () => handleMouseEnter(statusKey),
+      onMouseLeave: handleMouseLeave,
       children: [jsxs("div", {
         className: "ff-status-label",
         children: [jsx("div", {
@@ -3850,8 +3905,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  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$O = ".ff-file-dropzone-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n  padding: 16px 0;\n  border-radius: 8px;\n  background: var(--file-dropzone-default-color);\n  border: 1px dashed var(--brand-color);\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n  gap: 8px;\n  transition: background-color 0.2s ease;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone:hover, .ff-file-dropzone-wrapper .ff-file-dropzone--active {\n  background-color: var(--file-dropzone-selected-color);\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__icon {\n  height: 80px;\n  width: 80px;\n  display: grid;\n  place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn {\n  margin: 0 auto;\n  position: relative;\n  font-weight: 600;\n  line-height: 15px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  max-height: 300px;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n  padding: 2px;\n  -ms-overflow-style: none;\n  scrollbar-width: thin;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper ::-webkit-scrollbar {\n  width: 2px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px;\n  border-radius: 4px;\n  background-color: var(--file-details-bg);\n  box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);\n  overflow: hidden;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  width: 87%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info .ff-file-info__icon {\n  display: grid;\n  place-items: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  justify-content: center;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info__name-wrapper__name {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  display: block;\n  color: var(--text-color);\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-replace, .ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-actions__icon-remove {\n  height: 24px;\n  width: 24px;\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n}";
+styleInject(css_248z$O);
 
 const Dropzone = ({
   icon,
@@ -3865,7 +3920,7 @@ const Dropzone = ({
 }) => {
   return jsxs("div", {
     ...getRootProps(),
-    className: classNames('ff-file-dropzone', {
+    className: cx('ff-file-dropzone', {
       'ff-file-dropzone--active': isDragActive
     }),
     style: {
@@ -8658,8 +8713,8 @@ const Forms = ({
 };
 const ForwardedForms = /*#__PURE__*/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$N = ".fontXs, .ff-input-with-dropdown-container .ff-helper-text {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-input-with-dropdown-container {\n  display: flex;\n  flex-direction: column;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown {\n  display: flex;\n  border: 1px solid var(--input-default-border-color);\n  border-radius: 4px;\n  padding: 0;\n  position: relative;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-input-with-dropdown--left {\n  display: flex;\n  flex-direction: row-reverse;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-input-with-dropdown--right {\n  display: flex;\n  flex-direction: row;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-input--left-dropdown {\n  width: 698px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n  position: absolute;\n  z-index: 9;\n  color: var(--input-default-border-color);\n  top: 6px;\n  left: 7px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label .ff-required-asterisk {\n  color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--filled {\n  color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--no-hover {\n  color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label--error {\n  color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input {\n  position: relative;\n  padding: 6px 7px;\n  line-height: 18px;\n  border: none;\n  outline: none;\n  border-right: 1px solid var(--input-default-border-color);\n  border-radius: 4px 0 0 4px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-outer-spin-button, .ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::-webkit-inner-spin-button {\n  -webkit-appearance: none;\n  margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input::placeholder {\n  opacity: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input:disabled {\n  cursor: not-allowed;\n  background: transparent;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-input--left-dropdown::placeholder {\n  opacity: 1;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--no-hover {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown {\n  min-width: 120px;\n  border: none;\n  outline: none;\n  margin: 0;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown:disabled {\n  cursor: not-allowed;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .ff-floating-dropdown--left {\n  min-width: 94px;\n}\n.ff-input-with-dropdown-container .ff-input-with-dropdown .seperatorline {\n  height: 26px;\n  margin-top: 3px;\n  border-right: 0.5px solid var(--brand-color);\n  flex-shrink: 0;\n  border-radius: 2px;\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown {\n  border-color: var(--brand-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--filled {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--disabled {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label {\n  color: var(--input-hover-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--filled {\n  color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--disabled {\n  color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown--left .ff-floating-label--error {\n  color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input {\n  border-color: var(--brand-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--filled {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--disabled {\n  border-color: var(--input-default-border-color);\n}\n.ff-input-with-dropdown-container:hover .ff-input-with-dropdown .ff-floating-input--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown {\n  border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label {\n  top: -9px;\n  background-color: var(--input-label-bg-color);\n  padding: 0px 2px;\n  color: var(--input-active-text-color);\n  line-height: 15px;\n  font-size: 10px !important;\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-label--error {\n  color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input {\n  border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input--error {\n  border-color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container:focus-within .ff-input-with-dropdown .ff-floating-input::placeholder {\n  opacity: 1;\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container {\n  border-color: var(--input-active-text-color);\n}\n.ff-input-with-dropdown-container--filled .ff-input-with-dropdown .ff-floating-label-input-container .ff-floating-label {\n  top: -9px;\n  background-color: var(--input-label-bg-color);\n  padding: 0px 2px;\n  line-height: 15px;\n  font-size: 10px !important;\n}\n.ff-input-with-dropdown-container--filled span {\n  font-size: 8px;\n}\n.ff-input-with-dropdown-container--filled .required-asterisk {\n  color: var(--input-error-text-color);\n}\n.ff-input-with-dropdown-container .ff-helper-text {\n  color: var(--input-error-text-color);\n  padding: 0 11px;\n}";
+styleInject(css_248z$N);
 
 const InputWithDropdown = ({
   name = '',
@@ -8682,11 +8737,11 @@ const InputWithDropdown = ({
 }) => {
   const isValueFilled = !checkEmpty(value) || dropdownPosition === 'left';
   return jsxs("div", {
-    className: classNames('ff-input-with-dropdown-container', {
+    className: cx('ff-input-with-dropdown-container', {
       'ff-input-with-dropdown-container--filled': isValueFilled
     }),
     children: [jsxs("fieldset", {
-      className: classNames('ff-input-with-dropdown', {
+      className: cx('ff-input-with-dropdown', {
         'ff-input-with-dropdown--filled': isValueFilled,
         'ff-input-with-dropdown--no-hover': isValueFilled,
         'ff-input-with-dropdown--disabled': !!disabled,
@@ -8702,7 +8757,7 @@ const InputWithDropdown = ({
           onChange: onDropdownChangeHandler,
           disabled: disabled || !optionsRequired,
           optionsRequired: optionsRequired,
-          className: classNames('ff-floating-dropdown', {
+          className: cx('ff-floating-dropdown', {
             'ff-floating-dropdown--disabled': !!disabled,
             'ff-floating-dropdown--error': !!error,
             'ff-floating-dropdown--left': dropdownPosition === 'left'
@@ -8713,11 +8768,11 @@ const InputWithDropdown = ({
           className: "seperatorline"
         })]
       }), jsxs("div", {
-        className: classNames('ff-floating-label-input-container'),
+        className: cx('ff-floating-label-input-container'),
         children: [jsx(Typography, {
           as: "label",
           htmlFor: name,
-          className: classNames('ff-floating-label', {
+          className: cx('ff-floating-label', {
             'ff-floating-label--filled': isValueFilled,
             'ff-floating-label--no-hover': isValueFilled,
             'ff-floating-label--error': !!error
@@ -8735,7 +8790,7 @@ const InputWithDropdown = ({
           autoComplete: autoComplete,
           required: required,
           disabled: disabled,
-          className: classNames('ff-floating-input', {
+          className: cx('ff-floating-input', {
             'ff-floating-input--filled': isValueFilled,
             'ff-floating-input--disabled': !!disabled,
             'ff-floating-input--error': !!error,
@@ -8750,7 +8805,7 @@ const InputWithDropdown = ({
         onChange: onDropdownChangeHandler,
         disabled: disabled || !optionsRequired,
         optionsRequired: optionsRequired,
-        className: classNames('ff-floating-dropdown', {
+        className: cx('ff-floating-dropdown', {
           'ff-floating-dropdown--disabled': !!disabled,
           'ff-floating-dropdown--error': !!error
         }),
@@ -8764,8 +8819,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$M = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-radio-wrapper .ff-radio {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-radio-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-radio-wrapper .ff-radio {\n  position: relative;\n  color: var(--text-color);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input {\n  display: none;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom {\n  box-sizing: content-box;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 1px solid var(--radio-button-border);\n  position: relative;\n  margin-right: 8px;\n  transition: border-color background-color;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::before {\n  content: \"\";\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: #fbfdff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  transition: background-color 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::after {\n  content: \"\";\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: 4px solid #f7edff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom {\n  border: 1px solid var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::before {\n  background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::after {\n  opacity: 1;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom {\n  border-color: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom::before {\n  background: var(--brand-color);\n  height: 12px;\n  width: 12px;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom {\n  border: 1px solid var(--radio-button-border);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::before {\n  background: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::after {\n  border: 4px solid var(--radio-button-hover);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom {\n  border-color: var(--brand-color);\n  background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom::before {\n  background: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio--disabled {\n  cursor: default;\n}\n.ff-radio-wrapper .ff-radio--disabled .ff-radio-custom {\n  opacity: 0.5;\n}";
+styleInject(css_248z$M);
 
 const RadioButton = ({
   label,
@@ -8781,7 +8836,7 @@ const RadioButton = ({
   return jsxs("div", {
     className: "ff-radio-wrapper",
     children: [jsxs("label", {
-      className: classNames('ff-radio', {
+      className: cx('ff-radio', {
         'ff-radio--disabled': disabled
       }),
       children: [jsx("input", {
@@ -8805,8 +8860,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$L = ".ff-radio-group {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n}\n\n.ff-radio-label-wrapper {\n  position: relative;\n  top: 2px;\n}\n\n.ff-required-asterisk {\n  color: var(--input-error-text-color);\n}";
+styleInject(css_248z$L);
 
 const RadioGroup = ({
   options,
@@ -8820,12 +8875,12 @@ const RadioGroup = ({
   classNameForLabel
 }) => {
   return jsxs("div", {
-    className: classNames('ff-radio-group', className),
+    className: cx('ff-radio-group', className),
     children: [isLabel && jsxs(Typography, {
       fontWeight: 'semi-bold',
-      className: classNames(classNameForLabel),
+      className: cx(classNameForLabel),
       children: [' ', isAsteriskRequired && jsxs(Typography, {
-        className: classNames('ff-required-asterisk'),
+        className: cx('ff-required-asterisk'),
         children: ["*", ' ']
       }), label, ' ']
     }), options.map(option => jsx(RadioButton, {
@@ -8842,8 +8897,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$K = ".ff-mini-modal-overlay {\n  position: fixed;\n  inset: 0;\n  width: 100vw;\n  height: 100vh;\n}\n\n.ff-mini-edit-modal-container {\n  width: fit-content;\n  padding: 0;\n  position: absolute;\n  visibility: hidden;\n}\n.ff-mini-edit-modal-container.modalVisible {\n  visibility: visible;\n}\n.ff-mini-edit-modal-container.animatedModal {\n  animation: slideDown 0.5s ease, opacity 0.5s ease;\n}\n.ff-mini-edit-modal-container .popover-arrow {\n  position: absolute;\n  width: 0;\n  height: 0;\n  border-style: solid;\n  z-index: 102;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top {\n  bottom: 100%;\n  left: 30px;\n  padding: 0 3px 0 0;\n  border-color: transparent transparent var(--ff-mini-modal-border) transparent;\n  filter: drop-shadow(0 -1px 1px var(--ff-mini-modal-arrow-shadow));\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-top::before {\n  content: \"\";\n  position: absolute;\n  width: 3px;\n  height: 4px;\n  border-radius: 50px;\n  background-color: var(--ff-mini-modal-border);\n  top: -0.5px;\n  left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left {\n  left: -15px;\n  border-color: transparent var(--ff-mini-modal-border) transparent transparent;\n  filter: drop-shadow(-1px 0 1px var(--ff-mini-modal-arrow-shadow));\n  padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-left::before {\n  content: \"\";\n  position: absolute;\n  width: 4px;\n  height: 3px;\n  border-radius: 50px;\n  background-color: var(--ff-mini-modal-border);\n  top: 0;\n  left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom {\n  top: 100%;\n  left: 30px;\n  border-color: var(--ff-mini-modal-border) transparent transparent transparent;\n  filter: drop-shadow(0 2px 1px var(--ff-mini-modal-arrow-shadow));\n  padding: 0 3px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-bottom::before {\n  content: \"\";\n  position: absolute;\n  width: 3px;\n  height: 3px;\n  border-radius: 50px;\n  background-color: var(--ff-mini-modal-border);\n  top: -2px;\n  left: 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right {\n  right: -10px;\n  top: 66px;\n  border-color: transparent transparent transparent var(--ff-mini-modal-border);\n  filter: drop-shadow(2px 0 1px var(--ff-mini-modal-arrow-shadow));\n  padding: 3px 1px 0 0;\n}\n.ff-mini-edit-modal-container .popover-arrow.popover-arrow-right::before {\n  content: \"\";\n  position: absolute;\n  width: 3px;\n  height: 3px;\n  border-radius: 50px;\n  background-color: var(--ff-mini-modal-border);\n  top: 0;\n  left: -2px;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-top-arrow {\n  top: 10%;\n}\n.ff-mini-edit-modal-container .popover-arrow.left-middle-arrow {\n  top: 45%;\n}\n.ff-mini-edit-modal-container .wrapped-div {\n  height: 35px;\n  background-color: transparent;\n  outline: 8px solid var(--ff-mini-modal-border);\n  outline-offset: -8px;\n  position: absolute;\n  top: -34px;\n  border-radius: 7px 7px 0 0;\n}\n.ff-mini-edit-modal-container .wrapped-div::before, .ff-mini-edit-modal-container .wrapped-div::after {\n  position: absolute;\n  content: \"\";\n  width: 13px;\n  height: 13px;\n  background: transparent;\n  border-radius: 50%;\n  bottom: 0;\n  box-shadow: 8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .wrapped-div::before {\n  left: -13px;\n  clip-path: polygon(100% 100%, 110% 45%, 0% 70%, 0% 100%);\n}\n.ff-mini-edit-modal-container .wrapped-div::after {\n  right: -13px;\n  clip-path: polygon(-5% 100%, 0% 40%, 100% 70%, 100% 100%);\n  box-shadow: -8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .mini-edit-modal {\n  background: var(--ff-mini-modal-border);\n  position: relative;\n  max-height: fit-content;\n  padding: 4px;\n  width: 100%;\n  margin: 0 0 0 -5px;\n  height: 100%;\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-wrapper-shadow {\n  box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-arrow-shadow {\n  box-shadow: 0px 0px 16px 0px var(--ff-mini-modal-arrow-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal header {\n  border-radius: 4px 4px 0 0;\n}\n.ff-mini-edit-modal-container .mini-edit-modal footer {\n  border-radius: 0 0 4px 4px;\n}\n.ff-mini-edit-modal-container .mini-edit-modal .modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 5px;\n  background-color: var(--ff-mini-modal-footer-background);\n  height: 24px;\n  padding: 0 10px 0 0;\n  transition: transform 0.3s ease-in-out;\n}\n@keyframes slideDown {\n  0% {\n    transform: translateY(-50px);\n    opacity: 0;\n  }\n  100% {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n\n.ff-mini-modal-buttons-flex {\n  display: flex;\n}\n\n.ff-mini-modal-gap-10 {\n  gap: 10px;\n}\n\n.ff-mini-edit-model-icon {\n  color: var(--ff-mini-modal-box-shadow);\n  border: 2px solid var(--ff-mini-modal-box-shadow);\n  border-radius: 4px;\n}";
+styleInject(css_248z$K);
 
 const MiniModal = /*#__PURE__*/forwardRef(({
   anchorRef,
@@ -8866,6 +8921,7 @@ const MiniModal = /*#__PURE__*/forwardRef(({
   extraLeftSpace,
   isIconModel,
   wrapperProperties,
+  arrowProperties,
   arrowZIndex,
   overlay,
   outSideClick
@@ -8876,6 +8932,20 @@ const MiniModal = /*#__PURE__*/forwardRef(({
   });
   const [isVisible, setIsVisible] = useState(false);
   const modalRef = 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 {
@@ -9009,13 +9079,6 @@ const MiniModal = /*#__PURE__*/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,
@@ -9031,7 +9094,7 @@ const MiniModal = /*#__PURE__*/forwardRef(({
   }
   return /*#__PURE__*/createPortal(jsxs(Fragment, {
     children: [isOverlay && jsx("div", {
-      className: classNames('ff-mini-modal-overlay'),
+      className: cx('ff-mini-modal-overlay'),
       style: {
         zIndex: zIndexOverlay ?? 98,
         backgroundColor: backgroundColorOverlay ?? 'transparent'
@@ -9039,18 +9102,21 @@ const MiniModal = /*#__PURE__*/forwardRef(({
       onClick: cancelButtonProps?.onClick
     }), jsxs("div", {
       ref: ref || modalRef,
-      className: classNames('ff-mini-edit-modal-container', {
+      className: cx('ff-mini-edit-modal-container', {
         modalVisible: isVisible,
         animatedModal: isAnimated
       }),
       style: {
-        top: `${calculatedModalTop}px`,
-        left: `${calculatedModalLeft}px`
+        top: `${modalTop ?? calculatedModalTop}px`,
+        left: `${modalLeft ?? calculatedModalLeft}px`
       },
       children: [isPopOver && 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 && jsx("div", {
         className: 'wrapped-div',
@@ -9061,7 +9127,7 @@ const MiniModal = /*#__PURE__*/forwardRef(({
           boxShadow: wrapperBoxShadow ?? `0px -3px 4px 0px var(--ff-mini-modal-box-shadow)`
         }
       }), jsxs("div", {
-        className: classNames('mini-edit-modal', {
+        className: cx('mini-edit-modal', {
           'mini-edit-modal-wrapper-shadow': !!isWrapped && !modalBoxShadow,
           'mini-edit-modal-arrow-shadow': !!isPopOver && !modalBoxShadow
         }),
@@ -9106,8 +9172,8 @@ const MiniModal = /*#__PURE__*/forwardRef(({
   }), document.body);
 });
 
-var css_248z$H = ".tree-table-space-block {\n  display: inline-block;\n  width: 20px;\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  display: table-row;\n}\n\n.btn-toggle.expand {\n  cursor: pointer;\n}\n.btn-toggle.is-close {\n  background: #f1f1f1;\n  border: 1px solid transparent;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before {\n  display: none;\n}\n.btn-toggle::after {\n  display: none;\n}\n\n.tree-table-wrap {\n  width: 100%;\n}\n\nthead {\n  position: sticky;\n  top: 12px;\n}\n\ntbody {\n  overflow: scroll;\n}\n\n.tree-table {\n  border: 1px solid #f1f1f1;\n  table-layout: fixed;\n  width: 100%;\n  border-collapse: collapse;\n  overflow: scroll;\n}\n.tree-table tr .table-tree-row-action {\n  display: none;\n}\n.tree-table tr:hover {\n  background-color: var(--hover-color);\n}\n.tree-table tr:hover .table-tree-row-action {\n  display: inline-flex;\n  align-items: center;\n}\n.tree-table th {\n  color: var(--brand-color);\n  text-align: center;\n  padding: 10px 0;\n  background: var(--slider-table-color);\n  font-size: 13px;\n  width: 400px;\n  text-align: left;\n}\n.tree-table th:first-child {\n  width: 400px;\n  position: sticky;\n  left: 0;\n}\n.tree-table td {\n  font-size: 14px;\n  color: var(--brand-color);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  text-align: left;\n  height: 32px;\n}\n.tree-table td:first-child {\n  overflow: initial;\n  width: 400px;\n  position: sticky;\n  left: 0;\n  background-color: white;\n}\n.tree-table td:first-child:hover {\n  background-color: var(--hover-color);\n}\n.tree-table td .tree-table-space-block {\n  border: 1px solid transparent;\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  line-height: 16px;\n  text-align: center;\n  vertical-align: top;\n  font-size: 19px;\n  position: relative;\n  box-sizing: border-box;\n  margin-top: 7px;\n  border-radius: 50%;\n}\n.tree-table td .tree-table-space-block:first-child {\n  margin-left: 7px;\n}\n.tree-table td .tree-table-space-block.btn-toggle {\n  position: relative;\n  cursor: pointer;\n  width: 22px;\n  height: 22px;\n  z-index: 12;\n}\n.tree-table td .tree-table-space-block.btn-toggle::before {\n  display: none;\n}\n.tree-table td .tree-table-space-block.last-block::before {\n  display: none;\n}\n.tree-table td .tree-table-space-block.last-block::after {\n  position: absolute;\n  content: \"\";\n  width: 12px;\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n  left: -10px;\n}\n.tree-table td .tree-table-space-block.no-folder {\n  width: 8px;\n}\n.tree-table td .tree-table-space-block.no-folder::after {\n  position: absolute;\n  content: \"\";\n  width: 18px;\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n  left: -10px;\n}\n.tree-table td .tree-table-space-block:not(.last-block)::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 40px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -12px;\n  z-index: -1;\n}\n\n.tree-table-td-content {\n  display: inline-flex;\n  align-items: center;\n  padding: 7px;\n  font-size: 12px;\n  font-family: \"Poppins\";\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  visibility: visible;\n}\n\n.tree-row-expanded svg,\n.tree-row-collapsed svg {\n  height: 12px;\n  width: 12px;\n}\n.tree-row-expanded svg path,\n.tree-row-collapsed svg path {\n  fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n  transform: rotate(-90deg);\n  transition: all;\n}";
-styleInject(css_248z$H);
+var css_248z$J = ".tree-table-space-block {\n  display: inline-block;\n  width: 20px;\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  display: table-row;\n}\n\n.btn-toggle.expand {\n  cursor: pointer;\n}\n.btn-toggle.is-close {\n  background: #f1f1f1;\n  border: 1px solid transparent;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before {\n  display: none;\n}\n.btn-toggle::after {\n  display: none;\n}\n\n.tree-table-wrap {\n  width: 100%;\n}\n\nthead {\n  position: sticky;\n  top: 12px;\n}\n\ntbody {\n  overflow: scroll;\n}\n\n.tree-table {\n  border: 1px solid #f1f1f1;\n  table-layout: fixed;\n  width: 100%;\n  border-collapse: collapse;\n  overflow: scroll;\n}\n.tree-table tr .table-tree-row-action {\n  display: none;\n}\n.tree-table tr:hover {\n  background-color: var(--hover-color);\n}\n.tree-table tr:hover .table-tree-row-action {\n  display: inline-flex;\n  align-items: center;\n}\n.tree-table th {\n  color: var(--brand-color);\n  text-align: center;\n  padding: 10px 0;\n  background: var(--slider-table-color);\n  font-size: 13px;\n  width: 400px;\n  text-align: left;\n}\n.tree-table th:first-child {\n  width: 400px;\n  position: sticky;\n  left: 0;\n}\n.tree-table td {\n  font-size: 14px;\n  color: var(--brand-color);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  text-align: left;\n  height: 32px;\n}\n.tree-table td:first-child {\n  overflow: initial;\n  width: 400px;\n  position: sticky;\n  left: 0;\n  background-color: white;\n}\n.tree-table td:first-child:hover {\n  background-color: var(--hover-color);\n}\n.tree-table td .tree-table-space-block {\n  border: 1px solid transparent;\n  display: inline-block;\n  width: 20px;\n  height: 20px;\n  line-height: 16px;\n  text-align: center;\n  vertical-align: top;\n  font-size: 19px;\n  position: relative;\n  box-sizing: border-box;\n  margin-top: 7px;\n  border-radius: 50%;\n}\n.tree-table td .tree-table-space-block:first-child {\n  margin-left: 7px;\n}\n.tree-table td .tree-table-space-block.btn-toggle {\n  position: relative;\n  cursor: pointer;\n  width: 22px;\n  height: 22px;\n  z-index: 12;\n}\n.tree-table td .tree-table-space-block.btn-toggle::before {\n  display: none;\n}\n.tree-table td .tree-table-space-block.last-block::before {\n  display: none;\n}\n.tree-table td .tree-table-space-block.last-block::after {\n  position: absolute;\n  content: \"\";\n  width: 12px;\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n  left: -10px;\n}\n.tree-table td .tree-table-space-block.no-folder {\n  width: 8px;\n}\n.tree-table td .tree-table-space-block.no-folder::after {\n  position: absolute;\n  content: \"\";\n  width: 18px;\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n  left: -10px;\n}\n.tree-table td .tree-table-space-block:not(.last-block)::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 40px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -12px;\n  z-index: -1;\n}\n\n.tree-table-td-content {\n  display: inline-flex;\n  align-items: center;\n  padding: 7px;\n  font-size: 12px;\n  font-family: \"Poppins\";\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  visibility: visible;\n}\n\n.tree-row-expanded svg,\n.tree-row-collapsed svg {\n  height: 12px;\n  width: 12px;\n}\n.tree-row-expanded svg path,\n.tree-row-collapsed svg path {\n  fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n  transform: rotate(-90deg);\n  transition: all;\n}";
+styleInject(css_248z$J);
 
 // Helper to render spaces for levels
 const renderSpaces = level => Array.from({
@@ -9252,7 +9318,7 @@ const TreeTable = ({
   const handleCheckBoxChange = useCallback((type, node) => {
     const nodeId = node.id;
     if (type === 'radio') {
-      onChange?.([nodeId]);
+      onChange?.('true', [nodeId]);
     } else {
       let updatedSelected = [...selected];
       if (!updatedSelected.includes(nodeId)) {
@@ -9262,7 +9328,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 = useCallback((e, node) => onClick?.(e, node), [onClick]);
@@ -9285,8 +9351,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$I = ":root {\n  --tooltip-bg-color: #1e161f;\n  --status-approved-text-color: #016102;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-text-color: #3c3838;\n  --status-approved-bg-color: #c6efcd;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-warning-bg-color: #fae2c6;\n  --status-skipped-bg-color: #c4c3c3;\n  --brand-color: #71347b;\n  --icons-default-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --default-color: #747474;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --system-color--error: #c50303;\n  --hover-color: #f7ebff;\n  --brand2-color: #610b86;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --description-text-color: #d9d9d9;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --text-color: #1e161f;\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --error-light: #e42525;\n  --tabs-label-default-color: tabs-label-default-color;\n  --tabs-label-active-color: tabs-label-active-color;\n  --tabs-border-color: tabs-border-color;\n  --tabs-bg-color: tabs-bg-color;\n  --tab-bg-color: tab-bg-color;\n  --toggle-button-bg-color: #ffffff;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-strip-color: #cfd1e2;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --toggle-strip-color: #cfd1e2;\n  --add-icon-hover-color: #431b4a;\n  --arrows-button-border-color: #ded1e5;\n  --arrow-button-bg-color: #ffffff;\n  --text-bg-highlight: #f5fb00;\n  --slider-table-color: #efe1f9;\n  --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-tabs-container {\n  box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row--default {\n  display: flex;\n  gap: 8px;\n  border: 1px solid var(--tabs-border-color);\n  border-radius: 8px 8px 0 0;\n  padding: 7px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n  border: none;\n  background: none;\n  padding: 0 4px;\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-label {\n  padding-bottom: 4px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar {\n  width: 100%;\n  border-radius: 2px 2px 0 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar--active {\n  border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ff-tabs-container .ff-tab-row--capsule {\n  display: flex;\n  gap: 8px;\n  border: 1px solid var(--tabs-border-color);\n  border-radius: 8px;\n  padding: 3px 4px;\n  background-color: var(--tabs-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule {\n  background: transparent;\n  border: none;\n  padding: 3px 4px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule.active {\n  background-color: var(--tab-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule .ff-tab-bar {\n  display: none;\n}\n.ff-tabs-container .ff-tab-row--no-border {\n  border: none;\n}\n.ff-tabs-container .ff-tab-content {\n  width: inherit;\n}";
+styleInject(css_248z$I);
 
 const Tabs = ({
   variant = 'default',
@@ -9298,13 +9364,13 @@ const Tabs = ({
   return jsxs("div", {
     className: `ff-tabs-container`,
     children: [jsx("div", {
-      className: classNames(`ff-tab-row--${variant}`, {
+      className: cx(`ff-tab-row--${variant}`, {
         'ff-tab-row--no-border': noBorder
       }),
       children: tabsData.map(tab => jsxs("button", {
         onClick: () => !tab.disabled && onTabClick(tab.id),
         disabled: tab.disabled,
-        className: classNames(`ff-tab-button--${variant}`, {
+        className: cx(`ff-tab-button--${variant}`, {
           disabled: tab.disabled,
           active: activeTabId === tab.id
         }),
@@ -9313,13 +9379,13 @@ const Tabs = ({
           lineHeight: "18px",
           fontWeight: activeTabId === tab.id ? 'semi-bold' : 'regular',
           color: activeTabId === tab.id ? 'var(--tabs-label-active-color)' : 'var(--tabs-label-default-color)',
-          className: classNames('ff-tab-label', {
+          className: cx('ff-tab-label', {
             'ff-tab-label--active': activeTabId === tab.id
           })
         }), jsx(Typography, {
           children: "",
           color: "",
-          className: classNames('ff-tab-bar', {
+          className: cx('ff-tab-bar', {
             'ff-tab-bar--active': activeTabId === tab.id
           })
         })]
@@ -9331,8 +9397,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$H = ".ff-highlight-bg {\n  background-color: var(--text-bg-highlight);\n}";
+styleInject(css_248z$H);
 
 // Function to escape special characters in the search term
 const escapeRegExp = text => {
@@ -9355,8 +9421,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$G = ".fontXs, .ff-search-container .ff-search-input {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-search-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-search-container .ff-search-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 4px;\n}\n.ff-search-container .ff-search-icon:hover {\n  background-color: var(--ff-search-field-hover-color);\n}\n.ff-search-container .ff-search-icon .ff-icon-container svg path {\n  fill: var(--brand-color);\n}\n.ff-search-container .ff-search-input {\n  border: none;\n  color: var(--tooltip-bg-color);\n  line-height: 12px;\n  visibility: hidden;\n  transition: width 0.4s ease;\n}\n.ff-search-container .ff-search-input:focus {\n  outline: none;\n  border: none;\n}\n.ff-search-container .ff-search-input:hover {\n  border: none;\n}\n.ff-search-container.disabled {\n  opacity: 0.5;\n}\n.ff-search-container.expanded {\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-search-icon:hover {\n  background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-vertical-line {\n  height: 8px;\n  width: 1px;\n  border-radius: 1px;\n  background-color: var(--border-color);\n}\n.ff-search-container.expanded .ff-search-input {\n  visibility: visible;\n  margin-left: 4px;\n}\n.ff-search-container.expanded .ff-search-input::placeholder {\n  color: var(--ff-search-filed-placeholder-text);\n}\n.ff-search-container.expanded .ff-search-icon {\n  border: none;\n  cursor: default;\n  margin-right: 4px;\n}\n.ff-search-container.expanded .ff-search-clear-button {\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  width: 22px;\n  padding-top: 1px;\n}\n.ff-search-container.expanded .ff-search-close-icon {\n  margin: 4px;\n  cursor: pointer;\n}\n.ff-search-container.expanded .ff-search-close-icon .ff-icon-container svg path {\n  fill: var(--ff-search-filed-close-Icon);\n}";
+styleInject(css_248z$G);
 
 const Search = ({
   placeholder = 'Search',
@@ -9399,12 +9465,12 @@ const Search = ({
     }
   };
   return jsxs("div", {
-    className: classNames('ff-search-container', {
+    className: cx('ff-search-container', {
       expanded: isExpanded,
       disabled: disabled
     }),
     children: [jsx("div", {
-      className: classNames('ff-search-icon', {
+      className: cx('ff-search-icon', {
         expanded: isExpanded
       }),
       onClick: handleIconClick,
@@ -9417,7 +9483,7 @@ const Search = ({
         })
       })
     }), jsx("div", {
-      className: classNames('ff-vertical-line', {
+      className: cx('ff-vertical-line', {
         expanded: isExpanded
       })
     }), jsx("input", {
@@ -17292,7 +17358,7 @@ const TimePicker = ({
     children: [jsxs("div", {
       className: "ff-time-picker-fields",
       children: [jsxs("div", {
-        className: classNames('ff-time-input-container', {
+        className: cx('ff-time-input-container', {
           'ff-time-input-container--float': !!inputValue
         }, {
           'ff-time-input-container--danger': !!timeFieldError
@@ -17300,7 +17366,7 @@ const TimePicker = ({
         children: [jsx(Typography, {
           as: "label",
           htmlFor: "time",
-          className: classNames('ff-time-input-label', {
+          className: cx('ff-time-input-label', {
             'ff-time-input-label--danger': !!timeFieldError
           }),
           children: "Time"
@@ -17318,12 +17384,12 @@ const TimePicker = ({
           onClick: handleClick,
           onBlur: handleBlur,
           maxLength: 5,
-          className: classNames('ff-time-input', {
+          className: cx('ff-time-input', {
             'ff-time-input--danger': !!timeFieldError
           })
         })]
       }), jsxs("div", {
-        className: classNames('ff-time-period-container', {
+        className: cx('ff-time-period-container', {
           'ff-time-period-container--active': !!isPeriodDropdownOpen
         }),
         ref: periodRef,
@@ -17377,8 +17443,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$F = "@import 'react-day-picker/style.css';\n.fontXs, .ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n/* Custom date picker styling */\n.ff-date-picker {\n  position: relative;\n}\n.ff-date-picker .rdp-root {\n  --rdp-accent-color: var(--brand-color);\n  --rdp-day-height: 24px;\n  --rdp-day-width: 36px;\n  font-family: \"Poppins\";\n  font-size: 12px;\n  --rdp-font-family: \"Poppins\", sans-serif;\n}\n.ff-date-picker .ff-cursor-pointer {\n  cursor: pointer;\n}\n.ff-date-picker .ff-datepicker-input-container {\n  display: flex;\n  gap: 10px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n  padding: 4px 8px;\n  padding-left: 2rem;\n  height: 32px;\n  border-radius: 5px;\n  border: 1px solid var(--border-color);\n  color: var(--status-skipped-text-color);\n  line-height: 15px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input:focus,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input:focus {\n  outline: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-calendar-icon,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-clock-icon {\n  position: absolute;\n  top: 50%;\n  transform: translate(25%, -50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field {\n  flex: 1;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input {\n  width: 100%;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field {\n  flex: 0 0 120px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field .ff-time-input {\n  width: 100%;\n}\n.ff-date-picker .ff-date-picker-container {\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  border-radius: 8px;\n  padding: 4px;\n  box-sizing: border-box;\n  background-color: var(--tab-bg-color);\n  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);\n  gap: 8px;\n  z-index: 10;\n}\n.ff-date-picker .ff-date-picker-container .ff-calendar-container {\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n  height: 240px;\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls {\n  padding: 4px;\n  display: flex;\n  justify-content: end;\n  gap: 8px;\n  border-top: 1px solid var(--border-color);\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls .ff-date-picker-button {\n  font-weight: 600;\n  line-height: 15px;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button {\n  margin: 0 5px;\n  border: 1px solid var(--border-color);\n  background-color: var(--toggle-button-bg-color);\n  box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);\n  padding: 0px;\n  border-radius: 30%;\n  cursor: pointer;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button:disabled {\n  cursor: auto;\n  opacity: 0.5;\n}\n.ff-date-picker .ff-calendar .ff-calendar-haeder {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  color: var(--text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid,\n.ff-date-picker .ff-calendar .ff-custom-month_grid {\n  width: calc((var(--rdp-day-width) + 4px) * 7);\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n  padding: 5px;\n  max-width: 100%;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month {\n  padding: 10px 0;\n  text-align: center;\n  cursor: pointer;\n  border-radius: 8px;\n  background-color: #f9f9f9;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--selected {\n  background-color: var(--brand-color);\n  color: var(--primary-button-text-color);\n}\n.ff-date-picker .ff-calendar .rdp-weekdays th {\n  color: #6f7c8e;\n  font-weight: 400;\n}\n.ff-date-picker .ff-calendar .rdp-day {\n  padding: 2px;\n  font-weight: 500;\n}\n.ff-date-picker .ff-calendar .rdp-day_button {\n  border-radius: 4px;\n  padding: 3px 9px;\n}\n.ff-date-picker .ff-calendar .rdp-day_button:hover {\n  background-color: var(--hover-color);\n}\n.ff-date-picker .ff-calendar .rdp-selected {\n  font: inherit;\n}\n.ff-date-picker .ff-calendar .rdp-selected .rdp-day_button {\n  background: var(--rdp-accent-color);\n  color: var(--drawer-footer-bg);\n  border: none;\n}\n.ff-date-picker .ff-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n  border: 2px solid var(--rdp-accent-color);\n}\n.ff-date-picker .ff-time-picker-container {\n  position: relative;\n  width: 150px;\n  height: 100%;\n  overflow-y: hidden;\n  border-left: 1px solid #ccc;\n  padding: 10px 5px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container::-webkit-scrollbar {\n  display: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields {\n  display: flex;\n  height: 14%;\n  width: 100%;\n  margin-bottom: 5px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container {\n  display: flex;\n  border: 1px solid var(--border-color);\n  border-right: 0;\n  border-radius: 4px 0 0 4px;\n  width: 55%;\n  position: relative;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n  border: none;\n  padding: 5px;\n  width: 100%;\n  text-align: center;\n  border-radius: 4px 0 0 4px;\n  font-weight: 400;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input::placeholder {\n  opacity: 0;\n  line-height: 18px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input-label {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.2s ease all;\n  color: var(--input-default-label-color);\n  pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label {\n  top: 0;\n  left: 5px;\n  color: var(--brand-color);\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0 2px;\n  font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n  border-color: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label {\n  top: 0;\n  left: 5px;\n  color: var(--brand-color);\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0 2px;\n  font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n  border-color: var(--input-error-text-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n  outline: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container {\n  position: relative;\n  width: 45%;\n  display: flex;\n  border: 1px solid var(--border-color);\n  border-radius: 0 4px 4px 0;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-select {\n  display: flex;\n  align-items: center;\n  padding: 0 5px;\n  width: 100%;\n  border-radius: 4px;\n  background-color: white;\n  cursor: pointer;\n  border: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n  border-color: var(--brand-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon {\n  margin-left: auto;\n  pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon svg path {\n  fill: var(--default-icon-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n  position: fixed;\n  z-index: 100;\n  min-width: 60px;\n  margin: 4px 0 0;\n  padding: 0;\n  list-style: none;\n  border: 1px solid var(--ff-select-background-color);\n  border-radius: 4px;\n  background-color: var(--primary-button-text-color);\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item {\n  padding: 8px;\n  color: var(--text-color);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item:hover {\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options {\n  height: 86%;\n  overflow-y: auto;\n  padding-right: 5px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n  background-color: var(--hover-color);\n  border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options .ff-time-option {\n  padding: 10px 12px;\n  cursor: pointer;\n  text-align: center;\n  border-radius: 8px;\n  background-color: rgb(249, 249, 249);\n  margin: 10px 0;\n}";
+styleInject(css_248z$F);
 
 const CustomDatePicker = ({
   minDate,
@@ -17578,7 +17644,7 @@ const CustomDatePicker = ({
       className: "ff-custom-month_grid",
       children: months.map((month, index) => jsx("div", {
         onClick: () => handleMonthSelect(index),
-        className: classNames('ff-custom-month', {
+        className: cx('ff-custom-month', {
           'ff-custom-month--selected': index === selectedMonth?.getMonth()
         }),
         children: jsx(Typography, {
@@ -17623,7 +17689,7 @@ const CustomDatePicker = ({
       className: "ff-custom-year_grid",
       children: years.map(year => jsx("div", {
         onClick: () => handleYearSelect(year),
-        className: classNames('ff-custom-year', {
+        className: cx('ff-custom-year', {
           'ff-custom-year--selected': year === selectedMonth?.getFullYear()
         }),
         children: jsx(Typography, {
@@ -17652,7 +17718,7 @@ const CustomDatePicker = ({
           disabled: disabled,
           onClick: handleDateInputClick
         }), helperText && error && jsx("span", {
-          className: classNames('ff-date-input-message', {
+          className: cx('ff-date-input-message', {
             'ff-date-input-message--danger': !!error
           }),
           children: helperText
@@ -17932,8 +17998,8 @@ 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(--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$C);
+var css_248z$E = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-plus-icon {\n  border-radius: 16px;\n  border-style: none;\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  gap: 8px;\n  background-color: var(--hover-color);\n  padding: 2px 8px 2px 2px;\n  border: 1px solid var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon {\n  width: 20px;\n  height: 20px;\n  border: 1px solid var(--primary-icon-color);\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon .ff-icon-color path {\n  color: var(--primary-icon-color);\n}\n.ff-plus-icon .icon-name {\n  color: var(--secondary-icon-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-plus-icon:hover {\n  border: 1px solid transparent;\n  background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon:hover .icon-name {\n  font-weight: 600;\n  color: var(--primary-icon-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-plus-icon:hover .button-icon {\n  width: 20px;\n  height: 20px;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  background-color: var(--hover-color);\n}\n.ff-plus-icon:hover .button-icon .ff-icon-color path {\n  color: var(--secondary-icon-color);\n}";
+styleInject(css_248z$E);
 
 const IconButton = ({
   label,
@@ -17943,10 +18009,10 @@ const IconButton = ({
 }) => {
   return jsxs("button", {
     onClick: onClick,
-    className: classNames('ff-plus-icon'),
+    className: cx('ff-plus-icon'),
     ref: ref,
     children: [jsx("div", {
-      className: classNames('button-icon'),
+      className: cx('button-icon'),
       children: jsx(Icon, {
         height: 12,
         width: 12,
@@ -17963,8 +18029,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$D = ".ff-modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: var(--modal-background-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  flex-direction: column;\n}\n\n.ff-modal-container {\n  border-radius: 8px;\n  overflow: hidden;\n}\n\n.ff-modal-content {\n  background: var(--ff-mini-modal-border);\n  position: relative;\n  max-width: 100%;\n  padding: 16px;\n}\n.ff-modal-content .ff-modal-header {\n  height: 32px;\n  width: 100%;\n}\n\n.modal-bottom-border {\n  border-bottom-left-radius: 8px;\n  border-bottom-right-radius: 8px;\n}\n\n.modal-top-border {\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n}\n\n.ff-modal-footer {\n  background-color: var(--expandable-menu-option-bg);\n  max-width: 100%;\n  width: 100%;\n  height: 32px;\n  display: flex;\n  flex-direction: row;\n  justify-content: end;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 16px;\n}";
+styleInject(css_248z$D);
 
 const Modal = ({
   isOpen,
@@ -18024,7 +18090,7 @@ const Modal = ({
       },
       className: "ff-modal-container",
       children: [jsxs("div", {
-        className: classNames(`ff-modal-content ${currentTheme} ${contentClassName}`, {
+        className: cx(`ff-modal-content ${currentTheme} ${contentClassName}`, {
           'modal-bottom-border': !isFooterDisplayed,
           'modal-top-border': !isHeaderDisplayed
         }),
@@ -22660,8 +22726,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$C = ".ff_variable_input_container .ff_label_container {\n  display: flex;\n  align-items: center;\n  margin-bottom: 4px;\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_input_label {\n  color: var(--error);\n}\n.ff_variable_input_container .ff_label_container.ff_danger_label .ff_required_asterisk {\n  color: var(--error);\n}\n.ff_variable_input_container .ff_required_asterisk {\n  color: var(--input-error-text-color);\n  font-size: 1.1em;\n  margin-right: 4px;\n}\n.ff_variable_input_container .ff_input_label {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--text-color);\n}\n.ff_variable_input_container .ff_input_label.ff_no_hover {\n  color: var(--toggle-disable-icon-color);\n}\n.ff_variable_input_container .ff_input_label.ff_disabled_label {\n  color: var(--toggle-disable-icon-color);\n  cursor: not-allowed;\n}\n.ff_variable_input_container .ff_input_label.ff_danger_label {\n  color: var(--error);\n}\n.ff_variable_input_container .ff_content_editable {\n  min-width: 8rem;\n  border: 1px solid var(--input-default-border-color);\n  padding: 8px;\n  min-height: 30px;\n  border-radius: 4px;\n  font-size: 14px;\n  line-height: 20px;\n  transition: border-color 0.2s ease;\n  position: relative;\n  text-align: left;\n  display: flex;\n  align-items: center;\n  overflow: auto;\n}\n.ff_variable_input_container .ff_content_editable .ff_var_red {\n  color: var(--status-rejected-text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_def_color {\n  color: var(--text-color);\n}\n.ff_variable_input_container .ff_content_editable .ff_var_green {\n  color: var(--status-success-text-color);\n}\n.ff_variable_input_container .ff_content_editable::after {\n  content: \"*\";\n  color: var(--input-error-text-color);\n  font-size: 1.2em;\n  position: absolute;\n  top: 2px;\n  right: 2px;\n  display: none;\n}\n.ff_variable_input_container .ff_content_editable.ff_required::after {\n  display: inline;\n}\n.ff_variable_input_container .ff_content_editable.ff_required_empty:focus-within, .ff_variable_input_container .ff_content_editable.ff_required_empty:focus {\n  border-color: var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_content_editable:empty::before {\n  content: attr(data-placeholder);\n  color: var(--ff-search-filed-placeholder-text);\n  position: absolute;\n  user-select: none;\n  pointer-events: none;\n  font-size: medium;\n}\n.ff_variable_input_container .ff_content_editable.ff_disabled {\n  pointer-events: none;\n  opacity: 0.5;\n  background-color: var(--input-default-border-color);\n}\n.ff_variable_input_container .ff_content_editable.ff_invalid_input {\n  border: 1px solid var(--input-error-text-color);\n}\n.ff_variable_input_container .ff_suggestions {\n  border: 1px solid var(--input-default-border-color);\n  margin-top: 4px;\n  padding: 4px;\n  border-radius: 4px;\n  list-style-type: none;\n  background-color: var(--ff-select-background-color);\n  max-height: 150px;\n  overflow-y: auto;\n}\n.ff_variable_input_container .ff_suggestion_item {\n  padding: 4px;\n  cursor: pointer;\n}\n.ff_variable_input_container .ff_suggestion_item:hover {\n  background-color: var(--ff-select-background-color);\n}";
+styleInject(css_248z$C);
 
 const VariableInput = ({
   type = 'url',
@@ -22726,7 +22792,7 @@ const VariableInput = ({
     const contentEditableElement = contentEditableRef.current;
     if (contentEditableElement) {
       contentEditableElement.innerHTML = parsedParts.map(part => {
-        const varClassName = classNames({
+        const varClassName = cx({
           ['ff_var_red']: part.textType === 'nonVariable',
           ['ff_var_green']: part.textType === 'variable',
           ['ff_var_def_textType']: part.textType !== 'nonVariable' && part.textType !== 'variable'
@@ -22877,7 +22943,7 @@ const VariableInput = ({
   useEffect(() => {
     updateContentEditable();
   }, [inputValue]);
-  const inputClasses = classNames('ff_content_editable', {
+  const inputClasses = cx('ff_content_editable', {
     ['ff_placeholder']: !inputValue,
     ['ff_disabled']: disabled,
     ['ff_required']: required,
@@ -22887,14 +22953,14 @@ const VariableInput = ({
     className: 'ff_variable_input_container',
     children: [label && jsxs("label", {
       htmlFor: name,
-      className: classNames('ff_label_container', {
+      className: cx('ff_label_container', {
         ['ff_labelDanger']: error
       }),
       children: [required && jsx(Typography, {
         className: 'ff_required_asterisk',
         children: "*"
       }), jsx(Typography, {
-        className: classNames('ff_input_label', {
+        className: cx('ff_input_label', {
           ['ff_no_hover']: value,
           ['ff_disabled_label']: disabled,
           ['ff_danger_label']: error
@@ -22939,8 +23005,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$B = ".ff-all-project {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n.ff-all-project .ff-all-project-dropdown {\n  width: fit-content;\n  border-radius: 16px;\n  color: var(--expandable-menu-default-bg);\n  line-height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  padding: 3px;\n  cursor: pointer;\n}\n.ff-all-project .ff-all-project-dropdown--selected {\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n}\n.ff-all-project .ff-all-project-dropdown--selected .ff-all-project-container {\n  border-radius: 20px;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n  background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n  text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label {\n  position: relative;\n  white-space: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label:hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label::after {\n  content: \"\";\n  position: absolute;\n  top: 20px;\n  left: 0%;\n  width: 0%;\n  height: 2px;\n  background-color: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container {\n  display: flex;\n  padding: 4px;\n  gap: 4px;\n  justify-content: center;\n  text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container .label-icon {\n  height: 16px;\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-all-project .ff-projects-dropdown {\n  width: 202px;\n  position: absolute;\n  top: 50px;\n  padding: 1px;\n  border: 0.5px solid var(--expandable-menu-default-bg);\n  border-radius: 4px;\n  background-color: var(--secondary-icon-color);\n  color: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search {\n  width: 100%;\n  margin-bottom: 1px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input {\n  height: 30px;\n  width: inherit;\n  border-radius: 4px;\n  border-style: none;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search input::placeholder {\n  padding-left: 28px;\n  font-size: 8px;\n  line-height: 12px;\n}\n.ff-all-project .ff-projects-dropdown .ff-projects-search span {\n  position: absolute;\n  top: 11px;\n  left: 8px;\n}\n.ff-all-project .ff-projects-dropdown .scroll {\n  max-height: 150px;\n  overflow-x: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar {\n  width: 2px;\n}\n.ff-all-project .ff-projects-dropdown .scroll::-webkit-scrollbar-thumb {\n  background: var(--primary-icon-color);\n  border-radius: 2px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: flex-start;\n  gap: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options .ff-projects-icons svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover {\n  background-color: var(--primary-icon-color);\n  color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .ff-all-projects-options:hover svg path {\n  fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: flex-start;\n  gap: 4px;\n  white-space: nowrap;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options .ff-projects-icons svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover {\n  background-color: var(--primary-icon-color);\n  color: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options.ff-selected-option svg path,\n.ff-all-project .ff-projects-dropdown .option-card .ff-projects-options:hover svg path {\n  fill: var(--secondary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: flex-start;\n  gap: 4px;\n  background-color: var(--primary-icon-color);\n  color: var(--secondary-icon-color);\n  border-radius: 4px;\n}\n.ff-all-project .ff-projects-dropdown .ff-selected-option .ff-projects-icons svg path {\n  fill: var(--secondary-icon-color);\n}\n\n@keyframes oscillate-border-width {\n  0% {\n    width: 50%;\n    left: 25%;\n  }\n  50% {\n    width: 70%;\n    left: 15%;\n  }\n  100% {\n    width: 50%;\n    left: 25%;\n  }\n}";
+styleInject(css_248z$B);
 
 const AllProjectsDropdown = ({
   onClick = () => {},
@@ -22979,26 +23045,26 @@ const AllProjectsDropdown = ({
   };
   useClickOutside(optionsRef, closeOptions);
   return jsxs("div", {
-    className: classNames('ff-all-project'),
+    className: cx('ff-all-project'),
     children: [jsx("div", {
-      className: classNames('ff-all-project-dropdown', {
+      className: cx('ff-all-project-dropdown', {
         ['ff-all-project-dropdown--selected']: selected
       }),
       children: jsxs("div", {
-        className: classNames('ff-all-project-container'),
+        className: cx('ff-all-project-container'),
         children: [jsx(Typography, {
           as: 'div',
           lineHeight: '18px',
           fontSize: 12,
           fontWeight: 'regular',
-          className: classNames('projects-label'),
+          className: cx('projects-label'),
           onClick: onMenuClick,
           children: jsx(Tooltip, {
             title: selectedOptions?.label,
             children: selectedOptions.label.length <= 12 ? selectedOptions.label : truncateText(selectedOptions?.label, 8)
           })
         }), jsx("div", {
-          className: classNames('label-icon'),
+          className: cx('label-icon'),
           onClick: handleShowOption,
           children: jsx(Icon, {
             name: "arrows_down_icon",
@@ -23010,10 +23076,10 @@ const AllProjectsDropdown = ({
         })]
       })
     }), showOptions && jsxs("div", {
-      className: classNames('ff-projects-dropdown'),
+      className: cx('ff-projects-dropdown'),
       ref: optionsRef,
       children: [jsxs("div", {
-        className: classNames('ff-projects-search'),
+        className: cx('ff-projects-search'),
         onMouseEnter: () => handleSearchEnter(),
         onMouseLeave: () => handleSearchLeave(),
         children: [search && jsx(Icon, {
@@ -23031,11 +23097,11 @@ const AllProjectsDropdown = ({
           value: 'All Projects',
           iconName: 'all_projects'
         }),
-        className: classNames('ff-all-projects-options', {
+        className: cx('ff-all-projects-options', {
           ['ff-selected-option']: selectedOption.label === 'All Projects'
         }),
         children: [jsx("div", {
-          className: classNames('ff-projects-icons'),
+          className: cx('ff-projects-icons'),
           children: jsx(Icon, {
             name: 'all_projects',
             height: 12,
@@ -23047,14 +23113,14 @@ const AllProjectsDropdown = ({
           children: 'All Projects'
         })]
       }), jsx("div", {
-        className: classNames('option-card', `${options.length > 4 ? 'scroll' : ''}`),
+        className: cx('option-card', `${options.length > 4 ? 'scroll' : ''}`),
         children: options.map((option, index) => jsxs("div", {
           onClick: () => handleSelectOption(option),
-          className: classNames('ff-projects-options', {
+          className: cx('ff-projects-options', {
             ['ff-selected-option']: selectedOption.label === option.label
           }),
           children: [jsx("div", {
-            className: classNames('ff-projects-icons'),
+            className: cx('ff-projects-icons'),
             children: jsx(Icon, {
               name: option.iconName,
               height: 12,
@@ -23075,8 +23141,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$A = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-pie-chart-container .ff-pie-chart-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-pie-chart-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  font-size: var(--fontSize);\n}\n.ff-pie-chart-container .ff-pie-chart-border {\n  display: inline-block;\n  border: 2px solid var(--pie-chart-border-color);\n  border-radius: 50%;\n}\n.ff-pie-chart-container .ff-pie-chart-tooltip {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -100%);\n  padding: 8px;\n  border-radius: 4px;\n  background-color: var(--tooltip-bg-color);\n  color: var(--primary-icon-color);\n  font-weight: 400;\n  pointer-events: none;\n}\n.ff-pie-chart-container .ff-pie-chart-legend {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 16px;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-value {\n  color: var(--drawer-title-color);\n}";
+styleInject(css_248z$A);
 
 const calculateArc$3 = ({
   x,
@@ -23230,8 +23296,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$z = ".ff-app-header-main {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header {\n  display: flex;\n  flex-basis: 100%;\n  justify-content: space-between;\n  background-color: var(--brand-color);\n  padding-left: 8px;\n  height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n  padding: 4px;\n  height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n  display: flex;\n  align-items: center;\n  background-color: var(--brand-color);\n  transform: translateY(12px);\n  border-radius: 20px;\n  padding: 5px;\n  z-index: 1000;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n  display: flex;\n  align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n  margin-left: 8px;\n  padding: 7px;\n  color: var(--ff-header-text-color);\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  flex: 1 1 auto;\n  overflow: hidden;\n  transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n  max-width: 100px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  background: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n  white-space: nowrap;\n  align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n  padding: 3px;\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n  flex-grow: 12; /* Increase size on hover */\n  max-width: 550px;\n  opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n  background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n  border-radius: 20px;\n  padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n  margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n  margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n  color: var(--ff-header-submenu-text-color);\n  align-content: center;\n  position: relative;\n  white-space: nowrap;\n  padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n  color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 20%;\n  width: 70%;\n  height: 2px;\n  border-radius: 4px;\n  box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n  display: flex;\n  align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n  margin-right: 6px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n  display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n  padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n  background: var(--brand-color);\n  border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n  background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n  fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n  width: 40px;\n  display: flex;\n  justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n  cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n  height: 24px;\n  padding: 8px;\n  align-content: center;\n}\n\n@keyframes oscillate-border-width {\n  0% {\n    width: 50%;\n    left: 25%;\n  }\n  50% {\n    width: 70%;\n    left: 15%;\n  }\n  100% {\n    width: 50%;\n    left: 25%;\n  }\n}";
+styleInject(css_248z$z);
 
 const AppHeader = ({
   logoIconName = 'fireflink_icon',
@@ -23291,7 +23357,7 @@ const AppHeader = ({
           className: "ff-app-header-nav-bar-items fontSm",
           children: appHeaderMenuItems.map(menuItem => {
             return jsxs("div", {
-              className: classNames('ff-app-header-nav-bar-item', {
+              className: cx('ff-app-header-nav-bar-item', {
                 ['ff-app-header-nav-bar-item--selected']: menuItem.label === selectedMenu
               }),
               children: [jsx(Typography, {
@@ -23306,7 +23372,7 @@ const AppHeader = ({
                     className: "ff-app-header-submenu-container",
                     children: jsx(Typography, {
                       as: "div",
-                      className: classNames('ff-app-header-nav-bar-submenu-item', {
+                      className: cx('ff-app-header-nav-bar-submenu-item', {
                         ['ff-app-header-nav-bar-submenu-item--selected']: subMenuItem.label === selectedSubMenu
                       }),
                       lineHeight: "18px",
@@ -23327,7 +23393,7 @@ const AppHeader = ({
                         return jsx(Fragment, {
                           children: jsx("div", {
                             onClick: () => onQuickMenuClick(quickMenuItem),
-                            className: classNames('ff-app-header-nav-bar-quickmenu-item', {
+                            className: cx('ff-app-header-nav-bar-quickmenu-item', {
                               ['ff-app-header-nav-bar-quickmenu-item--selected']: quickMenuItem.iconName === selectedQuickMenu
                             }),
                             children: jsx(Tooltip, {
@@ -23369,15 +23435,15 @@ 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$y = ".ff_rounded_lg {\n  border-radius: 8px;\n}\n\n.ff_paper_basic_style {\n  padding: 20px;\n  background-color: var(--ff-paper-dark-background-color);\n}\n\n.ff_paper_default_style {\n  padding: 20px;\n  background-color: var(--ff-paper-background-color);\n}";
+styleInject(css_248z$y);
 
 const Paper = ({
   children,
   className = '',
   rounded = false
 }) => {
-  const dynamicClassName = classNames({
+  const dynamicClassName = cx({
     ['ff_rounded_lg']: rounded
   }, className);
   return jsx("div", {
@@ -23386,8 +23452,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$x = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n  flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n  flex-direction: row-reverse;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n  flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n  text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n  position: absolute;\n  padding: 5px;\n  border-radius: 4px;\n  pointer-events: none;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n  display: grid;\n  gap: 10px;\n  grid-auto-rows: 1fr;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend {\n  grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend.ff-side-legend {\n  grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-number-legend .ff-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n  grid-template-columns: repeat(2, 130px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 15px;\n  min-width: 25px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n  margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend {\n  grid-template-columns: repeat(3, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend.ff-side-legend {\n  grid-template-columns: repeat(2, 100px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-memory-legend .ff-legend-item {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n  overflow: hidden;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  margin-left: 1rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table {\n  width: 100%;\n  min-width: 300px;\n  border-collapse: collapse;\n  text-align: left;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header {\n  font-weight: bold;\n  background-color: var(--tabs-bg-color);\n  color: var(--input-hover-border-color);\n  padding: 0.5rem;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n  text-align: right;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 1rem;\n  min-width: 22px;\n  height: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  padding: 0.5rem;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n  display: flex;\n  align-items: baseline;\n  gap: 5px;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  text-align: right;\n}";
+styleInject(css_248z$x);
 
 const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
   const startX = x + radius * Math.cos(startAngle);
@@ -23546,7 +23612,7 @@ const DashboardDonutChart = ({
     switch (legendType) {
       case 'numberLegend':
         return jsx("div", {
-          className: classNames('ff-legend-container ff-number-legend', {
+          className: cx('ff-legend-container ff-number-legend', {
             'ff-side-legend': legendPosition === 'left' || legendPosition === 'right'
           }),
           children: legendData.map((item, index) => jsxs("div", {
@@ -23587,7 +23653,7 @@ const DashboardDonutChart = ({
         });
       case 'memoryLegend':
         return jsx("div", {
-          className: classNames('ff-legend-container ff-memory-legend', {
+          className: cx('ff-legend-container ff-memory-legend', {
             'ff-side-legend': legendPosition === 'left' || legendPosition === 'right'
           }),
           children: legendData.map((item, index) => jsx(React__default.Fragment, {
@@ -23690,7 +23756,7 @@ const DashboardDonutChart = ({
     return context.measureText(text).width;
   }
   return jsxs("div", {
-    className: classNames('ff-dashboard-donut-chart-section', {
+    className: cx('ff-dashboard-donut-chart-section', {
       'ff-dashboard-donut-chart-section-table-legend': legendType === 'tableLegend',
       'legend-position-bottom': legendPosition === 'bottom',
       'legend-position-left': legendPosition === 'left'
@@ -25485,8 +25551,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$w = ".ff-recaptcha-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.ff-recaptcha-wrapper .ff-recaptcha-error {\n  color: var(--input-error-text-color);\n  font-size: 12px;\n  margin-top: 4px;\n}";
+styleInject(css_248z$w);
 
 const Recaptcha = /*#__PURE__*/forwardRef(({
   onVerify,
@@ -25506,7 +25572,7 @@ const Recaptcha = /*#__PURE__*/forwardRef(({
   };
   const error = externalError || internalError;
   return jsxs("div", {
-    className: classNames('ff-recaptcha-wrapper', className),
+    className: cx('ff-recaptcha-wrapper', className),
     children: [jsx(RecaptchaWrapper, {
       ref: ref,
       sitekey: sitekey,
@@ -25529,8 +25595,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$v = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper {\n  max-height: 160px;\n  z-index: 100;\n  position: absolute;\n  min-width: 100px;\n  border: 1px solid var(--ff-select-option-border-color);\n  box-sizing: border-box;\n  margin-top: 4px;\n  border-radius: 4px;\n  background-color: var(--ff-select-background-color);\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  overflow: hidden auto;\n  display: flex;\n  justify-content: space-between;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-wrapper1 {\n  max-height: 160px;\n  z-index: 100;\n  min-width: auto;\n  box-sizing: border-box;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-track {\n  background-color: transparent;\n  border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option {\n  width: calc(100% - 18px);\n  border: 1px solid transparent;\n  border-radius: 4px;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option:hover {\n  border-color: var(--ff-select-background-color);\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-no-option {\n  width: calc(100% - 16px);\n  margin: 0;\n  overflow: hidden;\n  padding: 0px 8px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data {\n  width: 200px;\n  height: 134px;\n  border: 1px solid transparent;\n  border-radius: 5px;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  overflow: scroll;\n}";
+styleInject(css_248z$v);
 
 const NlpDropdown = ({
   onSelectBlur,
@@ -25587,7 +25653,7 @@ const NlpDropdown = ({
     children: jsxs("div", {
       ref: optionsWrapperRef,
       style: updateDropdownPosition(),
-      className: classNames('ff-nlp-options-wrapper', currentTheme),
+      className: cx('ff-nlp-options-wrapper', currentTheme),
       children: [jsxs("div", {
         className: "ff-nlp-options-wrapper1",
         children: [!checkEmpty(options) ? options.map(option =>
@@ -25596,7 +25662,7 @@ const NlpDropdown = ({
           children: jsxs(Typography, {
             as: "div",
             lineHeight: "30px",
-            className: classNames('ff-nlp-option', currentTheme),
+            className: cx('ff-nlp-option', currentTheme),
             color: "var(--ff-nlp-text-color)",
             onClick: () => onSelectOptionSelector(option),
             children: [jsx("span", {
@@ -25694,8 +25760,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$u = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-nlp-input-wrapper .ff-nlp-input, .ff-nlp-input-wrapper .ff-nlp-input-input {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend, .ff-nlp-input-wrapper .ff-nlp-input-label--active {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-nlp-input-wrapper {\n  position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  min-height: 32px;\n  min-width: 489px;\n  display: flex;\n  align-items: end;\n  position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset {\n  margin: 0;\n  padding: 25px 0px 0px 8px;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  border-radius: 4px;\n  display: block;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-label {\n  padding: 30px 0px 0px 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--default {\n  opacity: 0;\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--active {\n  opacity: 1;\n  border-color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--option {\n  opacity: 1;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--error {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n  padding: 0 2px;\n  letter-spacing: 0.5px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--active {\n  transition: opacity 0.25s ease-out, transform 0.25s ease-out, font-size 0.25s ease-out, padding 0.25s ease-out;\n  opacity: 1;\n  color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--option {\n  opacity: 1;\n  color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--error {\n  color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--required {\n  margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input {\n  position: absolute;\n  top: 6px;\n  right: auto;\n  bottom: auto;\n  left: auto;\n  width: calc(100% - 38px);\n  min-height: calc(100% - 8px);\n  padding: 0 28px 0 8px;\n  border-radius: 4px;\n  border: 1px solid transparent;\n  z-index: 100;\n  background: transparent;\n  outline: none;\n  color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input:hover ~ .ff-nlp-input-label {\n  color: var(--ff-nlp-input-text-hover-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default {\n  opacity: 1;\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover {\n  border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option {\n  border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option .ff-nlp-input-legend--option {\n  color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-label {\n  min-height: calc(100% - 2px);\n  margin-top: 0px;\n  top: 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active:hover {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border {\n  border: none;\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover ~ .ff-nlp-input-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable {\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover {\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover ~ .ff-nlp-input-label--default {\n  color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error:hover {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n  position: absolute;\n  top: 13px;\n  right: auto;\n  bottom: auto;\n  left: 8px;\n  z-index: 1;\n  font-size: 12px;\n  top: 60%;\n  padding-left: 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 1;\n  color: var(--ff-nlp-input-default-color);\n  transform: translateY(-50%);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--active {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n  transform: translateY(-150%);\n  padding: 0 6px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--required {\n  margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow {\n  position: absolute;\n  top: 60%;\n  height: 100%;\n  right: 10px;\n  transform: rotateX(180deg) translateY(50%);\n  cursor: pointer;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--no-label {\n  top: 50%;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--down {\n  transform: rotateX(0deg) translateY(-50%);\n  z-index: 101;\n}\n.ff-nlp-input-wrapper-error-text {\n  position: absolute;\n  top: auto;\n  right: auto;\n  bottom: -14px;\n  left: 12px;\n  white-space: nowrap;\n}";
+styleInject(css_248z$u);
 
 const nlpInputReducer = (state, action) => {
   switch (action.type) {
@@ -25929,12 +25995,12 @@ const NlpInput = ({
   }, []);
   const applyActiveOptionClasses = !isInputFocused && Boolean(option);
   return jsxs("div", {
-    className: classNames(`ff-nlp-input-wrapper ${className}`),
+    className: cx(`ff-nlp-input-wrapper ${className}`),
     children: [jsxs("div", {
       className: "ff-nlp-input",
       children: [jsx("input", {
         type: "text",
-        className: classNames('ff-nlp-input-input', {
+        className: cx('ff-nlp-input-input', {
           'ff-nlp-input-input--default': !isInputFocused,
           'ff-nlp-input-input--active': applyActiveOptionClasses,
           'ff-nlp-input-input--no-label': !showLabel,
@@ -25957,7 +26023,7 @@ const NlpInput = ({
         spellCheck: "false",
         ref: InputRef
       }), showLabel && jsxs("div", {
-        className: classNames('ff-nlp-input-label', {
+        className: cx('ff-nlp-input-label', {
           'ff-nlp-input-label--default': !isInputFocused,
           'ff-nlp-input-label--active': isInputFocused || Boolean(option),
           'ff-nlp-input-label--error': errorMsg
@@ -25971,13 +26037,13 @@ const NlpInput = ({
         name: "arrow_up",
         height: 7,
         width: 12,
-        className: classNames('ff-nlp-input-arrow', {
+        className: cx('ff-nlp-input-arrow', {
           'ff-nlp-input-arrow--down': isIconClick,
           'ff-nlp-input-arrow--no-label': !showLabel
         }),
         color: iconColor
       }), jsx("fieldset", {
-        className: classNames('ff-nlp-input-fieldset', {
+        className: cx('ff-nlp-input-fieldset', {
           'ff-nlp-input-fieldset--no-label': !showLabel,
           'ff-nlp-input-fieldset--default': !isInputFocused,
           'ff-nlp-input-fieldset--active': isInputFocused,
@@ -26006,8 +26072,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$t = ".ff-icon-radio-group {\n  width: 237px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  gap: 47px;\n  position: relative;\n}\n\n.ff-icon-radio-button {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  position: relative;\n}\n.ff-icon-radio-button.selected {\n  background-color: var(--brand-color);\n}\n.ff-icon-radio-button.disabled {\n  opacity: 50%;\n  cursor: not-allowed;\n}\n.ff-icon-radio-button .icon-container {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid var(--border-color);\n  background: var(--drawer-footer-bg);\n}\n.ff-icon-radio-button .icon-container:hover {\n  background: var(--border-color);\n}\n.ff-icon-radio-button .icon-container.selected {\n  background-color: var(--brand-color);\n}\n.ff-icon-radio-button .icon-container .icon {\n  width: 14px;\n  height: 14px;\n}\n\n.line-connector {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background-color: var(--border-color);\n  z-index: -1;\n  border-radius: 2px 0px 0px 0px;\n  opacity: 0px;\n}";
+styleInject(css_248z$t);
 
 const IconRadioGroup = ({
   items,
@@ -26032,9 +26098,9 @@ const IconRadioGroup = ({
     onButtonClick(item);
   };
   return jsxs("div", {
-    className: classNames('ff-icon-radio-group', className),
+    className: cx('ff-icon-radio-group', className),
     children: [items.map(item => jsx("div", {
-      className: classNames('ff-icon-radio-button', {
+      className: cx('ff-icon-radio-button', {
         selected: selectedValue === item.iconName,
         disabled: item.disabled
       }),
@@ -26042,7 +26108,7 @@ const IconRadioGroup = ({
       children: jsx(Tooltip, {
         title: item.iconLabel,
         children: jsx("div", {
-          className: classNames('icon-container', {
+          className: cx('icon-container', {
             selected: selectedValue === item.iconName
           }),
           children: jsx(Icon, {
@@ -26058,8 +26124,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$s = ".ff-machine-input-field-wrapper {\n  min-width: 100px;\n  height: 32px;\n  position: relative;\n  cursor: pointer;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n  height: 100%;\n  width: 100%;\n  border: 1px solid var(--ff-machine-input-field-border-color);\n  padding: 0 8px 0 0;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n  display: flex;\n  align-items: center;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-icon {\n  margin-left: 4px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text {\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  min-width: 30px;\n  max-width: 70px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse {\n  direction: ltr;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n  flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n  flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-label {\n  position: absolute;\n  top: -6px;\n  left: 8px;\n  background-color: var(--ff-machine-input-field-border-color);\n  border-radius: 4px;\n  padding: 1px 2px;\n  height: 12px;\n}";
+styleInject(css_248z$s);
 
 const MachineInputField = /*#__PURE__*/forwardRef(({
   width = '',
@@ -26089,7 +26155,7 @@ const MachineInputField = /*#__PURE__*/forwardRef(({
     style: {
       width: width
     },
-    className: classNames('ff-machine-input-field-wrapper', className),
+    className: cx('ff-machine-input-field-wrapper', className),
     onClick: onClick,
     children: [jsxs(Typography, {
       as: "span",
@@ -26099,21 +26165,21 @@ const MachineInputField = /*#__PURE__*/forwardRef(({
       className: "ff-machine-input-label",
       children: ["Run ", runCount]
     }), jsx("div", {
-      className: classNames('ff-machine-input-field', {
+      className: cx('ff-machine-input-field', {
         'ff-machine-input-field-reverse': contentReverse
       }),
       children: options.map(({
         label,
         type
       }) => jsxs("div", {
-        className: classNames('ff-machine-icon-text-wrapper', {
+        className: cx('ff-machine-icon-text-wrapper', {
           'ff-machine-icon-text-wrapper-reverse': contentReverse
         }),
         children: [jsx(Icon, {
           name: getIcon[type] || 'local',
           className: "ff-machine-icon"
         }), jsx(Typography, {
-          className: classNames('ff-machine-text', {
+          className: cx('ff-machine-text', {
             'ff-machine-text-reverse': contentReverse
           }),
           color: "var(--ff-machine-input-field-text-color)",
@@ -26125,11 +26191,11 @@ const MachineInputField = /*#__PURE__*/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$r = ".ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper {\n  height: 66px;\n  box-sizing: border-box;\n  width: fit-content;\n  margin-bottom: 16px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-sequential-select-branch {\n  width: 240px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper {\n  margin: 0;\n  width: 40px;\n  border-top: 1px solid var(--ff-connecting-branch-color);\n  position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper .ff-branch-arrow {\n  width: 6px;\n  height: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  clip-path: polygon(100% 50%, 0 100%, 0 0);\n  position: absolute;\n  right: -1px;\n  top: -3px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-select-branch-point {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background-color: var(--ff-connecting-branch-color);\n  position: absolute;\n  left: -3px;\n  z-index: 102;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down {\n  position: absolute;\n  height: 38px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-point {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background-color: var(--ff-connecting-branch-color);\n  position: absolute;\n  left: -2px;\n  z-index: 102;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-arrow {\n  width: 0;\n  height: 62px;\n  top: calc(50% + 1px);\n  border-left: 1px solid var(--ff-connecting-branch-color);\n  z-index: 102;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist {\n  box-sizing: border-box;\n  width: 240px;\n  display: flex;\n  justify-content: space-between;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper {\n  display: flex;\n  align-items: center;\n  margin-right: 12px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper .ff-scope-text {\n  text-transform: capitalize;\n  margin: 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper {\n  display: flex;\n  align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper #ff-sequential-machine-datalist {\n  display: flex;\n  align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-dataset-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-run-delete-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n  cursor: pointer;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n  margin: 0 12px 0 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-sequential-branches-wrapper {\n  box-sizing: border-box;\n  width: fit-content;\n  height: fit-content;\n}";
+styleInject(css_248z$r);
 
-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$q = ".ff-connecting-branch-grid,\n.ff-connecting-branch-grid-reverse {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: 24px 180px 40px 180px 24px;\n  height: 66px;\n  margin-bottom: 16px;\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper {\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow {\n  position: absolute;\n  height: 6px;\n  width: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  z-index: 2;\n  clip-path: polygon(0 0, 0% 100%, 100% 50%);\n  top: calc(25% - 3px);\n  right: -2px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse {\n  position: absolute;\n  height: 6px;\n  width: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  z-index: 2;\n  left: -2px;\n  top: calc(25% - 3px);\n  clip-path: polygon(0 50%, 100% 100%, 100% 0);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container {\n  width: 100%;\n  height: 25%;\n  border: 1px solid var(--ff-connecting-branch-color);\n  border-top: none;\n  border-right: none;\n  border-bottom-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse {\n  width: 100%;\n  height: 25%;\n  border: 1px solid var(--ff-connecting-branch-color);\n  border-top: none;\n  border-left: none;\n  border-bottom-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist {\n  display: flex;\n  padding-top: 4px;\n  height: 24px;\n  justify-content: flex-end;\n  width: 100%;\n  align-items: center;\n  flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-dataset-list-branch {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-icon {\n  margin-right: 4px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-text {\n  margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-delete-icon {\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse {\n  display: flex;\n  padding-top: 4px;\n  height: 24px;\n  justify-content: flex-end;\n  width: 100%;\n  align-items: center;\n  flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-icon {\n  margin-right: 4px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-text {\n  margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon {\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper {\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  border-radius: 50%;\n  z-index: 2;\n  right: -2px;\n  top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  border-radius: 50%;\n  z-index: 2;\n  left: -2px;\n  top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow {\n  height: 0;\n  width: 100%;\n  margin-top: calc(50% - 3px);\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  clip-path: polygon(0 0, 0% 100%, 100% 50%);\n  top: calc(25% - 3px);\n  right: -2px;\n  z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-middle-arrow .ff-connecting-branch-arrow-reverse {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  clip-path: polygon(0 50%, 100% 100%, 100% 0);\n  top: calc(25% - 3px);\n  left: -1px;\n  z-index: 2;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow {\n  width: 100%;\n  height: 100%;\n  margin-top: 17px;\n  border-top: 1px solid var(--ff-connecting-branch-color);\n  border-right: 1px solid var(--ff-connecting-branch-color);\n  border-top-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-end-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-end-arrow-reverse {\n  width: 100%;\n  height: 100%;\n  margin-top: 17px;\n  border-top: 1px solid var(--ff-connecting-branch-color);\n  border-left: 1px solid var(--ff-connecting-branch-color);\n  border-top-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-browser-button,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-browser-button {\n  height: 32px;\n  display: flex;\n  align-items: center;\n}\n\n.ff-connecting-branch-grid-reverse {\n  direction: rtl;\n  margin: 0 0 16px 0;\n}";
+styleInject(css_248z$q);
 
 const Branches = ({
   machineInstances,
@@ -26159,7 +26225,7 @@ const Branches = ({
     return `24px ${machineColumnWidth}px repeat(${machineColumnCount - 1}, 40px ${machineColumnWidth}px) 24px`;
   };
   return jsxs("div", {
-    className: classNames({
+    className: cx({
       'ff-connecting-branch-grid': evenRow,
       'ff-connecting-branch-grid-reverse': !evenRow
     }),
@@ -26169,12 +26235,12 @@ const Branches = ({
     children: [jsxs("div", {
       className: "ff-connecting-branch-start-wrapper",
       children: [jsx("div", {
-        className: classNames({
+        className: cx({
           'ff-connecting-branch-arrow': evenRow,
           'ff-connecting-branch-arrow-reverse': !evenRow
         })
       }), jsx("div", {
-        className: classNames({
+        className: cx({
           'ff-connecting-branch-container': evenRow,
           'ff-connecting-branch-container-reverse': !evenRow
         }),
@@ -26201,7 +26267,7 @@ const Branches = ({
           children: [jsxs("div", {
             className: "ff-connecting-branch-input-point-wrapper",
             children: [jsx("div", {
-              className: classNames({
+              className: cx({
                 'ff-connecting-branch-point': evenRow,
                 'ff-connecting-branch-point-reverse': !evenRow
               })
@@ -26218,7 +26284,7 @@ const Branches = ({
               contentReverse: !evenRow
             }, ffid())]
           }), jsxs("div", {
-            className: classNames({
+            className: cx({
               'ff-connecting-branch-datalist': evenRow,
               'ff-connecting-branch-datalist-reverse': !evenRow
             }),
@@ -26268,7 +26334,7 @@ const Branches = ({
             borderTop: `1px ${getBorderStyle(machineInstance, machineInstances[index + 1])} var(--ff-connecting-branch-color)`
           },
           children: jsx("div", {
-            className: classNames({
+            className: cx({
               'ff-connecting-branch-arrow': evenRow,
               'ff-connecting-branch-arrow-reverse': !evenRow
             })
@@ -26276,7 +26342,7 @@ const Branches = ({
         })]
       }, ffid());
     }), !lastMachineInstance && jsx("div", {
-      className: classNames({
+      className: cx({
         'ff-connecting-branch-end-arrow': evenRow,
         'ff-connecting-branch-end-arrow-reverse': !evenRow
       }),
@@ -26290,8 +26356,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$p = ".ff-connecting-branch-grid-wrapper {\n  box-sizing: border-box;\n}";
+styleInject(css_248z$p);
 
 const ConnectingBranches = ({
   machineBranchInstances,
@@ -26387,7 +26453,7 @@ const SequentialConnectingBranch = ({
           selectedOption: selectedMachineInstance,
           valueAccessor: 'name'
         }), !isMachineSelected && jsxs("div", {
-          className: classNames({
+          className: cx({
             'ff-select-branch-arrow': isMachineInstances,
             'ff-select-branch-arrow-down': !isMachineInstances
           }),
@@ -26462,8 +26528,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$o = ".ff-input-field {\n  display: none;\n}\n\n.ff-attachment-files {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  line-height: 15px;\n}";
+styleInject(css_248z$o);
 
 const AttachmentButton = ({
   label,
@@ -26638,8 +26704,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$n = "/* Container Styling */\n.toggle-container {\n  display: flex;\n  background-color: var(--base-bg-color);\n  height: 24px;\n  border-radius: 6px;\n  padding: 4px 2px;\n  overflow: hidden;\n  width: fit-content;\n  box-shadow: 1px 1px 2px 0px var(--base-bg-color), inset -1px -1px 2px var(--base-bg-color), inset 1px -1px 2px var(--ff-toggle-switch-shadow-color), inset -1px 2px 0px var(--ff-toggle-switch-shadow-color);\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n}\n\n/* Button Styling */\n.toggle-button {\n  padding: 4px 2px;\n  font-size: 10px;\n  font-weight: 500;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  background-color: var(--base-bg-color);\n  color: var(--ff-toggle-switch-off-color);\n  outline: none;\n  transition: all 0.3s ease;\n  min-width: 24px;\n  height: 20px;\n  text-align: center;\n  box-shadow: inset 1px 1px 2px 0 var(--base-bg-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), 1px -1px 2px 0 var(--ff-chips-blur-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Active Button */\n.toggle-button.active {\n  background-color: var(--ff-line-number-bg);\n  color: var(--base-bg-color);\n  box-shadow: inset -1px -1px 2px 0 var(--ff-chips-blur-color), 1px 1px 3px 0 var(--ff-chips-blur-color), -1px -1px 2px 0 var(--base-bg-color), -1px 1px 2px 0 var(--ff-chips-blur-color);\n}\n\n/* Button Hover Effect */\n.toggle-button:hover {\n  background-color: var(--hover-color);\n  color: var(--brand-color);\n}";
+styleInject(css_248z$n);
 
 const ToggleSwitch = ({
   selected = "text",
@@ -26661,8 +26727,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}\n.ff-avatar .ff-avatar-label {\n  font-weight: bold;\n  text-align: center;\n}";
-styleInject(css_248z$k);
+var css_248z$m = ".ff-avatar {\n  border-radius: 50%;\n  overflow: hidden;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--ff-avatar-background-color);\n}\n.ff-avatar--small {\n  width: 32px;\n  height: 32px;\n}\n.ff-avatar--medium {\n  width: 48px;\n  height: 48px;\n}\n.ff-avatar--large {\n  width: 64px;\n  height: 64px;\n}\n.ff-avatar .ff-avatar-label {\n  font-weight: bold;\n  text-align: center;\n}";
+styleInject(css_248z$m);
 
 const Avatar = ({
   variant = "small",
@@ -26698,8 +26764,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$l = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown, .ff-label-edit-text-field .ff-text-dropdown-field {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n}\n.ff-label-edit-text-field .ff-label-text-field {\n  display: flex;\n  gap: 10px;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  position: absolute;\n  top: 0;\n  left: 10px;\n  transform: translateY(-50%);\n  transition: all 0.2s ease;\n  color: var(--label-edit-text-label-color);\n  background: var(--label-edit-text-background-color);\n  padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n  top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n  padding: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown {\n  border: 1px solid var(--label-edit-text-label-color);\n  outline: none;\n  width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field {\n  position: relative;\n  padding: 0 4px;\n  border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field {\n  flex: 2;\n  border: 1px solid var(--label-edit-text-label-color);\n  border-radius: 4px 0 0 4px;\n  border-right: none;\n  border-width: thin;\n  padding-left: 5px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field:focus-visible {\n  outline: none;\n}\n.ff-label-edit-text-field .dropdown {\n  border-radius: 0 4px 4px 0;\n  flex: 1;\n  height: inherit;\n}\n.ff-label-edit-text-field .ff-icon-container {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n  cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n  margin: 0;\n  color: var(--label-edit-error-text);\n}";
+styleInject(css_248z$l);
 
 const getErrorMessage$1 = (inputValue, text, customError, customErrorCondition) => {
   if (inputValue === text) {
@@ -26902,8 +26968,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$k = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n}\n.ff-label-edit-text-field .display-text-container {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button {\n  padding: 4px 8px;\n  background-color: var(--button-background-color);\n  color: var(--button-text-color);\n  border: 1px solid var(--button-border-color);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 12px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button:hover {\n  background-color: var(--button-hover-background-color);\n}\n.ff-label-edit-text-field .ff-label-text-field {\n  display: flex;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  position: absolute;\n  top: 0;\n  left: 10px;\n  transform: translateY(-50%);\n  transition: all 0.2s ease;\n  color: var(--label-edit-text-label-color);\n  background: var(--label-edit-text-background-color);\n  padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n  top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field {\n  outline: none;\n  width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field-error-border {\n  border: 1px solid var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-border {\n  border: 1px solid var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field-error-text {\n  color: var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-text {\n  color: var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field {\n  padding: 0 4px;\n  border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-icon-container {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n  cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n  color: var(--label-edit-error-text);\n  margin: 0;\n}";
+styleInject(css_248z$k);
 
 const capitalize = text => {
   if (!text) return '';
@@ -30629,7 +30695,7 @@ const CornerIndicator = ({
     onSelect();
   }, [onSelect]);
   return jsx("th", {
-    className: classNames('ff-spreadsheet-header', {
+    className: cx('ff-spreadsheet-header', {
       'ff-spreadsheet-header--selected': selected
     }),
     onClick: handleClick,
@@ -30721,7 +30787,7 @@ const ColumnIndicator = ({
       minWidth: `${columnWidth}px`,
       position: 'relative'
     },
-    className: classNames('ff-spreadsheet-header', {
+    className: cx('ff-spreadsheet-header', {
       'ff-spreadsheet-header--selected': selected
     }),
     onClick: handleClick,
@@ -30835,7 +30901,7 @@ const RowIndicator = ({
       height: `${rowHeight}px`,
       position: 'relative'
     },
-    className: classNames('ff-spreadsheet-header', {
+    className: cx('ff-spreadsheet-header', {
       'ff-spreadsheet-header--selected': selected
     }),
     onClick: handleClick,
@@ -30968,7 +31034,7 @@ const Cell = ({
   return jsxs("td", {
     ref: rootRef,
     style: data?.style,
-    className: classNames('ff-spreadsheet-cell', data?.className, {
+    className: cx('ff-spreadsheet-cell', data?.className, {
       'ff-spreadsheet-active-cell': active || dragging
     }),
     onMouseEnter: handleMouseOver,
@@ -31066,7 +31132,7 @@ const DataViewer = ({
     children: convertBooleanToText(value)
   }) : jsx("span", {
     onContextMenu: contextClick,
-    className: classNames('ff-spreadsheet-data-viewer', {
+    className: cx('ff-spreadsheet-data-viewer', {
       'ff-spreadsheet-data-viewer--preserve-breaks': hasLineBreaker(value)
     }),
     children: value
@@ -31173,7 +31239,7 @@ const ActiveCell = props => {
   const readOnly = cell && cell.readOnly;
   return hidden ? null : jsx("div", {
     ref: rootRef,
-    className: classNames('ff-spreadsheet-active-cell', `ff-spreadsheet-active-cell--${mode}`),
+    className: cx('ff-spreadsheet-active-cell', `ff-spreadsheet-active-cell--${mode}`),
     style: dimensions,
     onClick: mode === 'view' && !readOnly ? edit : undefined,
     tabIndex: 0,
@@ -31201,7 +31267,7 @@ const FloatingRect = ({
     left
   } = dimensions || {};
   return jsx("div", {
-    className: classNames('ff-spreadsheet-floating-rect', {
+    className: cx('ff-spreadsheet-floating-rect', {
       [`ff-spreadsheet-floating-rect--${variant}`]: variant,
       'ff-spreadsheet-floating-rect--dragging': dragging,
       'ff-spreadsheet-floating-rect--hidden': hidden
@@ -31240,14 +31306,14 @@ 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}";
-styleInject(css_248z$h);
+var css_248z$j = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-excel {\n  display: flex;\n  flex-direction: column;\n}\n\n.ff-spreadsheet {\n  --background-color: var(--drawer-footer-bg);\n  --text-color: var(--text-color);\n  --readonly-text-color: var(--toggle-strip-active);\n  --outline-color: var(--toggle-strip-active);\n  --outline-background-color: var(--overlay-bg);\n  --border-color: var(--toggle-strip-color);\n  --header-background-color: var(--pop-up-background-blur);\n  --elevation: var(--brand-color);\n  position: relative;\n  overflow: visible;\n  background: var(--background-color);\n  color: var(--text-color);\n  display: inline-block;\n}\n\n.ff-spreadsheet-active-cell {\n  position: absolute;\n  border: 2px solid var(--outline-color);\n  box-sizing: border-box;\n}\n\n.ff-spreadsheet-active-cell--edit {\n  background: var(--background-color);\n  box-shadow: var(--elevation);\n}\n\n.ff-spreadsheet-table {\n  overflow: scroll;\n  margin-top: 20px;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n.ff-spreadsheet-table::-webkit-scrollbar {\n  height: 0px;\n}\n\n.ff-spreadsheet-cell {\n  outline: none;\n  position: relative;\n  z-index: 0;\n}\n\n.ff-spreadsheet-active-cell .Selection_dot {\n  background-color: var(--elevation);\n  height: 7px;\n  width: 7px;\n  border-radius: 50%;\n  position: absolute;\n  right: -3px;\n  z-index: 10;\n  bottom: -3px;\n  cursor: crosshair;\n}\n\n.ff-spreadsheet-cell--readonly {\n  color: var(--readonly-text-color);\n}\n\n.ff-spreadsheet-cell,\n.ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  overflow: hidden;\n  word-break: keep-all;\n  white-space: nowrap;\n  text-align: left;\n  box-sizing: border-box;\n  user-select: none;\n}\n\n.ff-spreadsheet-header {\n  background: var(--header-background-color);\n  color: var(--readonly-text-color);\n  text-align: center;\n}\n\n.corner_indicator {\n  margin: 0px 0px 0px 15px;\n}\n\n.ff-spreadsheet-header--selected {\n  background: var(--brand-color);\n  color: var(--tooltip-text-color);\n}\n\n.ff-spreadsheet-header,\n.ff-spreadsheet-data-viewer,\n.ff-spreadsheet-data-editor input {\n  padding: 4px;\n  box-sizing: border-box;\n}\n\n.ff-spreadsheet-data-viewer--preserve-breaks {\n  white-space: pre-wrap;\n}\n\n.ff-spreadsheet-data-editor,\n.ff-spreadsheet-data-editor input {\n  width: 100%;\n  height: 100%;\n}\n\n.ff-spreadsheet-data-editor input {\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  margin: 0;\n}\n\n.ff-spreadsheet-data-viewer--boolean {\n  text-align: center;\n}\n\n.ff-spreadsheet-floating-rect {\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n.ff-spreadsheet-floating-rect--hidden {\n  display: none;\n}\n\n.ff-spreadsheet-floating-rect--selected {\n  background: var(--outline-background-color);\n  border: 2px var(--outline-color) solid;\n}\n\n.ff-spreadsheet-floating-rect--dragging {\n  border: none;\n}\n\n.ff-spreadsheet-floating-rect--copied {\n  border: 2px var(--outline-color) dashed;\n}";
+styleInject(css_248z$j);
 
-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}";
-styleInject(css_248z$g);
+var css_248z$i = ".ff-excel-toolbar {\n  display: flex;\n  height: 32px;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-divider {\n  width: 1px;\n  height: 24px;\n  background-color: var(--excel-toolbar-divider);\n  margin: 0 24px;\n  border-radius: 1px;\n  z-index: 1000;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font {\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-family {\n  width: 120px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-font .ff-excel-toolbar-font-size {\n  width: 56px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text {\n  width: 100px;\n  height: 24px;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-text .ff-excel-toolbar-icon-underline {\n  display: flex;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon {\n  width: 88px;\n  height: 24px;\n  display: flex;\n  gap: 8px;\n  justify-content: space-between;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n  border-radius: 4px;\n  background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n  background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color:hover {\n  border-radius: 4px;\n  background-color: var(--icon-hover-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color {\n  background-color: var(--brand-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover {\n  background-color: var(--primary-button-text-color);\n}\n.ff-icon-dark .ff-excel-toolbar .ff-excel-toolbar-icon .ff-excel-toolbar-icon-color.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu {\n  display: flex;\n  align-items: center;\n  width: 36px;\n  height: 24px;\n}\n.ff-excel-toolbar .ff-excel-toolbar-menu .ff-excel-toolbar-menu-option {\n  display: flex;\n  align-items: center;\n}";
+styleInject(css_248z$i);
 
-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);
+var css_248z$h = ".ff-excel-color-selector {\n  position: absolute;\n  background-color: var(--error_light);\n  width: 14px;\n  height: 3px;\n  bottom: 3px;\n  z-index: 200;\n  cursor: pointer;\n}\n.ff-excel-color-selector .ff-excel-color-selector-picker {\n  width: 100%;\n  height: 0;\n  padding: 0;\n  visibility: hidden;\n}";
+styleInject(css_248z$h);
 
 const ColorBarSelector = ({
   getColorValue,
@@ -31983,7 +32049,7 @@ const Spreadsheet = props => {
       setFormatePainter: setFormatePainter
     }), jsxs("div", {
       ref: rootRef,
-      className: classNames('ff-spreadsheet', className),
+      className: cx('ff-spreadsheet', className),
       onKeyDown: handleKeyDown,
       onMouseMove: handleMouseMove,
       children: [tableNode, activeCellNode, jsx(Selected, {}), jsx(Copied, {})]
@@ -31995,11 +32061,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$g = ".ff-excel-page {\n  width: 100%;\n  display: flex;\n  margin-top: 40px;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-excel-page .ff-excel-book {\n  position: relative;\n  width: 100%;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar {\n  margin-left: 60px;\n  display: flex;\n  height: 36px;\n  align-items: center;\n  color: var(--brand2-color);\n  margin-top: -2px;\n  box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-add-sheet-icon {\n  padding: 4px 6px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container {\n  height: 36px;\n  width: 860px;\n  display: flex;\n  overflow-x: auto;\n  align-items: center;\n  scrollbar-width: none;\n  scrollbar-color: var(--hover-color) transparent;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar-thumb {\n  border-radius: 5px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container::-webkit-scrollbar {\n  height: 0px;\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list {\n  margin-top: 2px;\n  padding: 10px 9px;\n  min-width: max-content;\n  cursor: pointer;\n  display: flex;\n  background-color: var(--hover-color);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list.active {\n  background-color: var(--excel-sheet-button-color);\n}\n.ff-excel-page .ff-excel-book .ff-excel-sheet-bar .ff-excel-tab-container .ff-excel-tab-list:focus {\n  outline: none;\n  text-decoration: none;\n}";
+styleInject(css_248z$g);
 
-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$f = ".ff-excel-menu {\n  position: absolute;\n  border: 1px solid var(--option-card-border-color);\n  background: var(--option-card-bg-color);\n  border-radius: 4px;\n  margin: 2px;\n  min-height: 32px;\n  min-width: 111px;\n  white-space: nowrap;\n  z-index: 100;\n}\n.ff-excel-menu .ff-excel-menu-options {\n  color: var(--text-color);\n  cursor: pointer;\n  border-radius: 3px;\n  display: flex;\n  align-items: center;\n  padding: 4px;\n  gap: 8px;\n}\n.ff-excel-menu .ff-excel-menu-options:hover {\n  background-color: var(--hover-color);\n}\n.ff-excel-menu .ff-excel-menu-options label {\n  cursor: pointer;\n}";
+styleInject(css_248z$f);
 
 const ExcelContextMenu = ({
   contextMenu
@@ -32438,8 +32504,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$e = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-Module-chip {\n  width: 75px;\n  height: 32px;\n  border: 0.5px solid;\n  border-radius: 16px;\n  color: var(--brand-color);\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-Module-chip .ff-Module-label-chip--active {\n  color: var(--ff-header-text-color);\n}\n.ff-Module-chip--active {\n  background: var(--brand-color);\n}";
+styleInject(css_248z$e);
 
 const ModuleChip = ({
   label = '',
@@ -32447,12 +32513,12 @@ const ModuleChip = ({
   onClick = () => {}
 }) => {
   return jsx("div", {
-    className: classNames('ff-Module-chip', {
+    className: cx('ff-Module-chip', {
       'ff-Module-chip--active': isActive
     }),
     onClick: onClick,
     children: jsx("div", {
-      className: classNames(`ff-Module-label-chip `, {
+      className: cx(`ff-Module-label-chip `, {
         'ff-Module-label-chip--active': isActive
       }),
       children: jsx(Typography, {
@@ -32465,8 +32531,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$d = ".fontXs, .ff-icon-radial-chart-container svg text {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-icon-radial-chart-container {\n  position: relative;\n}\n.ff-icon-radial-chart-container svg .ff-radial-chart-icon-padding {\n  padding: 0px;\n}\n.ff-icon-radial-chart-container svg text {\n  font-size: var(--fontSize) !important;\n  font-weight: 400;\n}\n.ff-icon-radial-chart-container .ff-icon-radial-chart-tooltip {\n  position: fixed;\n  padding: 5px;\n  border-radius: 4px;\n  pointer-events: none;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n}";
+styleInject(css_248z$d);
 
 // Function to generate SVG arc paths
 const calculateArc$1 = ({
@@ -32614,19 +32680,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$c = ".ff-attach-image-container {\n  position: relative;\n  display: inline-block;\n}\n.ff-attach-image-container .ff-image-wrapper {\n  position: relative;\n  width: 79px;\n  height: 75px;\n}\n.ff-attach-image-container .ff-image-wrapper img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  opacity: 0;\n  background-color: rgba(0, 0, 0, 0.7);\n  transition: opacity 0.4s ease;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-top-icons {\n  position: absolute;\n  top: 1px;\n  right: 1px;\n  display: flex;\n  gap: 4px;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-top-icons .ff-icon-container {\n  width: 8px;\n  height: 8px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  border-radius: 4px;\n  background-color: transparent;\n  transition: background-color 0.3s ease;\n}\n.ff-attach-image-container .ff-image-wrapper .ff-hover-icons .ff-expand-icon-container {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  border-radius: 4px;\n  background-color: transparent;\n  transition: background-color 0.3s ease;\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-hover-icons {\n  opacity: 1;\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-icon-container, .ff-attach-image-container .ff-image-wrapper:hover .ff-top-icons .ff-icon-container {\n  border-radius: 4px;\n  background-color: var(--ff-icon-hover-bg-color);\n}\n.ff-attach-image-container .ff-image-wrapper:hover .ff-expand-icon-container {\n  background-color: var(--ff-icon-hover-bg-color);\n}";
+styleInject(css_248z$c);
 
 const AttachImage = ({
   imageSrc,
   onExpandClick,
   onDeleteClick,
-  onDownloadClick
+  onDownloadClick,
+  height = '75px',
+  width = '79px'
 }) => {
   return jsx("div", {
     className: "ff-attach-image-container",
+    style: {
+      height,
+      width
+    },
     children: jsxs("div", {
       className: "ff-image-wrapper",
+      style: {
+        height,
+        width
+      },
       children: [jsx("img", {
         src: imageSrc,
         alt: "Attached"
@@ -32679,8 +32755,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$b = ".ff-card-container {\n  width: 120px;\n  height: 93px;\n  display: flex;\n  align-items: center;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  overflow: hidden;\n  cursor: pointer;\n}\n.ff-card-container:hover.passed {\n  border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n  border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n  border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n  border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n  border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n  width: 24px;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: start;\n  align-items: center;\n  border-right: 1px solid var(--border-color);\n  gap: 30px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n  transform: rotate(-90deg);\n  transform-origin: center;\n  display: inline-block;\n}\n.ff-card-container.passed .ff-status-bar {\n  background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n  background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n  background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n  background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n  background-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-content {\n  flex: 1;\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n  margin-bottom: 4px;\n  color: inherit;\n}\n.ff-card-container.passed .ff-number {\n  color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-number {\n  color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-number {\n  color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-number {\n  color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-number {\n  color: var(--ff-card-flaky-status-bg-color);\n}";
+styleInject(css_248z$b);
 
 const StatusCard = ({
   icon,
@@ -32729,19 +32805,24 @@ 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$a = ".ff-variable-dropdown {\n  height: 300px;\n  display: flex;\n  flex-direction: column;\n  background-color: var(--variable-dropdown-bg);\n  border: 1px solid var(--border-color);\n  border-radius: 3px;\n  z-index: 9999;\n  overflow: hidden;\n  overflow-y: auto;\n}\n.ff-variable-dropdown.absolute {\n  position: absolute;\n}\n.ff-variable-dropdown.relative {\n  position: relative;\n}\n\n.ff-variable-option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px;\n  cursor: pointer;\n}\n.ff-variable-option:hover {\n  background-color: var(--hover-color);\n}";
+styleInject(css_248z$a);
 
 const VariableDropdown = ({
   optionsList = [],
   onSelectVariable,
-  dropdownPosition
+  dropdownPosition,
+  position = 'relative',
+  width = '300px'
 }) => {
   return jsx("div", {
-    className: "ff-variable-dropdown",
-    style: {
+    className: cx('ff-variable-dropdown', position),
+    style: dropdownPosition ? {
       top: dropdownPosition.top + 30,
-      left: dropdownPosition.left - 30
+      left: dropdownPosition.left - 30,
+      width
+    } : {
+      width
     },
     children: optionsList?.map(option => {
       return jsxs("div", {
@@ -32762,8 +32843,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$9 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-line-chart-inner-tooltip, .ff--line-chart-x-line-data, .ff-line-chart-y-axis-text, .ff-line-chart-date {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-line-chart-x-axis-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-line-chart-container {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.ff-line-chart-text {\n  display: flex;\n  justify-content: flex-start;\n  align-items: center;\n}\n.ff-line-chart-text .smooth-dot {\n  transition: cx 0.2s ease, cy 0.2s ease;\n}\n\n.ff-line-chart-yAxisLabel {\n  display: flex;\n  white-space: nowrap;\n  transform: rotate(270deg) translateX(60px);\n  transform-origin: right center;\n}\n\n.ff-line-chart-svg {\n  width: inherit;\n}\n\n.ff-line-chart-text1 {\n  transform-origin: center;\n  transform: rotate(-90deg);\n  transition: transform 1s ease-in-out;\n  position: relative;\n  left: 163px;\n  min-width: 10px;\n  color: var(--drawer-title-color);\n}\n\n.ff-line-chart-tooltip {\n  position: absolute;\n  background-color: var(--tooltip-bg-color);\n  border-radius: 4px;\n  pointer-events: none;\n  display: flex;\n  flex-direction: column;\n  min-width: 30px;\n  min-height: 30px;\n  justify-content: center;\n  align-items: flex-start;\n  row-gap: 10px;\n  padding: 8px !important;\n}\n\n.ff-line-chart-status-dot {\n  width: 16px;\n  height: 16px;\n  border-radius: 100%;\n}\n\n.ff-line-chart-inner-tooltip {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 5px;\n  color: var(--arrow-button-bg-color);\n}\n\n.ff-line-chart-date {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: flex-start;\n  border-bottom: 1px solid var(--arrow-button-bg-color);\n  color: var(--arrow-button-bg-color);\n}\n\n.ff-line-chart-x-axis-label {\n  font-weight: 600;\n}";
+styleInject(css_248z$9);
 
 const LineChart = ({
   data,
@@ -33002,8 +33083,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$8 = ":root {\n  --tooltip-bg-color: #1e161f;\n  --status-approved-text-color: #016102;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-text-color: #3c3838;\n  --status-approved-bg-color: #c6efcd;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-warning-bg-color: #fae2c6;\n  --status-skipped-bg-color: #c4c3c3;\n  --brand-color: #71347b;\n  --icons-default-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --default-color: #747474;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --system-color--error: #c50303;\n  --hover-color: #f7ebff;\n  --brand2-color: #610b86;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --description-text-color: #d9d9d9;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --text-color: #1e161f;\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --error-light: #e42525;\n  --tabs-label-default-color: tabs-label-default-color;\n  --tabs-label-active-color: tabs-label-active-color;\n  --tabs-border-color: tabs-border-color;\n  --tabs-bg-color: tabs-bg-color;\n  --tab-bg-color: tab-bg-color;\n  --toggle-button-bg-color: #ffffff;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-strip-color: #cfd1e2;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --toggle-strip-color: #cfd1e2;\n  --add-icon-hover-color: #431b4a;\n  --arrows-button-border-color: #ded1e5;\n  --arrow-button-bg-color: #ffffff;\n  --text-bg-highlight: #f5fb00;\n  --slider-table-color: #efe1f9;\n  --variable-dropdown-bg: #($variable-dropdown-bg);\n}\n\n.fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-download-client-overlay {\n  width: 378px;\n  height: 217px;\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  z-index: 9999;\n}\n.ff-download-client-overlay .ff-download-client-container {\n  width: 370px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  flex-direction: column;\n  border-radius: 8px;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  border: 1px solid var(--download-client-border-color);\n  margin-left: 5px;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-header {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  justify-content: space-between;\n  padding: 7px 4px;\n  margin-bottom: 8px;\n  border-radius: 4px 4px 0 0;\n  background-color: var(--download-client-header-bg-color);\n  box-sizing: border-box;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-header .ff-header-arrow {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 10px;\n  right: 70px;\n  width: 10px;\n  height: 10px;\n  background-color: var(--download-client-icon-container-bg-color);\n  transform: translateY(-50%) rotate(-45deg);\n  z-index: -999;\n  border: 1px solid var(--download-client-header-bg-color);\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content {\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  flex-direction: column;\n  padding-left: 8px;\n  padding-right: 24px;\n  gap: 8px;\n  margin-bottom: 8px;\n  color: var(--popup-text-color);\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content .ff-download-install,\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-content .ff-choose-os {\n  padding: 4px 0;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-actions {\n  width: 240px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  gap: 12px;\n  margin-bottom: 17px;\n}\n.ff-download-client-overlay .ff-download-client-container .ff-download-client-actions .ff-icons-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  width: 64px;\n  height: 64px;\n  border-radius: 8px;\n  border: 1px solid var(--download-client-icon-container-border-color);\n  background-color: var(--download-client-icon-container-bg-color);\n  cursor: pointer;\n  box-shadow: 0px 0px 10px 0px var(--download-client-icon-container-box-shadow-color);\n}";
+styleInject(css_248z$8);
 
 const DownloadClient = ({
   onClose,
@@ -33100,8 +33181,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$7 = ".ff_fieldSet_container .ff_fieldSet {\n  border-color: var(--ff-connecting-branch-modal-border);\n  border-radius: 5px;\n}\n.ff_fieldSet_container .ff_fieldSet .ff_legend_container {\n  display: flex;\n}";
+styleInject(css_248z$7);
 
 const FieldSet = ({
   legendName,
@@ -33133,6 +33214,93 @@ const FieldSet = ({
   });
 };
 
+var css_248z$6 = ".ff-create-variable-slider {\n  padding: 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.ff-create-variable-slider .ff-hide-value-content {\n  display: flex;\n  align-items: center;\n}\n\n.ff-create-slider-footer {\n  width: 100%;\n  gap: 8px;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n}";
+styleInject(css_248z$6);
+
+const CreateVariableSlider = ({
+  isOpen,
+  variableTypesList = [],
+  onClose,
+  onNameChange,
+  onValueChange,
+  variableName,
+  value,
+  onVariableTypeChange,
+  selectedVariableType,
+  hideValue = false,
+  onHideChange,
+  handleSubmit
+}) => {
+  const FooterContent = () => {
+    return jsxs("div", {
+      className: "ff-create-slider-footer",
+      children: [jsx(Button$1, {
+        onClick: onClose,
+        label: "Cancel",
+        variant: "tertiary"
+      }), jsx(Button$1, {
+        variant: "primary",
+        label: "create",
+        type: "submit",
+        onClick: handleSubmit,
+        disabled: checkEmpty(variableName) || checkEmpty(value)
+      })]
+    });
+  };
+  return jsx(Drawer, {
+    onClose: onClose,
+    isOpen: isOpen,
+    title: "Create Variable",
+    width: "284px",
+    height: "222px",
+    top: "35%",
+    right: 8,
+    isFooterRequired: true,
+    overlay: true,
+    footerContent: jsx(FooterContent, {}),
+    children: jsxs("div", {
+      className: "ff-create-variable-slider",
+      children: [jsx(Input, {
+        label: "Variable Name",
+        required: true,
+        type: "text",
+        name: "variable name",
+        value: variableName,
+        onChange: event => onNameChange(event.target.value)
+      }), jsx(Select$1, {
+        label: "Variable Type",
+        required: true,
+        onChange: option => onVariableTypeChange(option),
+        selectedOption: selectedVariableType,
+        optionsList: variableTypesList,
+        optionZIndex: 99999
+      }), jsx(Input, {
+        label: "Variable Value",
+        required: true,
+        type: "text",
+        name: "value",
+        value: value,
+        onChange: event => onValueChange(event.target.value)
+      }), jsxs("div", {
+        className: "ff-hide-value-content",
+        children: [jsx(Checkbox, {
+          onChange: event => onHideChange(event.target.checked),
+          name: "hide value",
+          label: "Hide Value",
+          checked: hideValue
+        }), jsx(Tooltip, {
+          title: "Once the value is hidden, it cannot be undone",
+          children: 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) {
@@ -38480,8 +38648,8 @@ const throttle = (func, limit) => {
   return throttled;
 };
 
-var css_248z$4 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-bar-chart-container .ff-bar-chart-labels, .ff-bar-chart-container .ff-bar-chart-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-bar-chart-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-bar-chart-container .ff-legend-container {\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n  padding-right: 10px;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend {\n  width: 290px;\n  margin-top: 10px;\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item {\n  display: flex;\n  align-items: center;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item .ff-bar-chart-legend-item-circle {\n  display: inline-block;\n  width: 12px;\n  height: 12px;\n  margin-right: 5px;\n  border-radius: 50%;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-legend-label {\n  margin-left: 5px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon {\n  position: absolute;\n  pointer-events: none;\n  width: 24px;\n  height: 24px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon-wrapper {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-bar-chart-container .ff-bar-chart-labels {\n  font-weight: 400;\n  color: var(--text-color);\n}\n.ff-bar-chart-container .ff-bar-chart-tooltip {\n  position: absolute;\n  padding: 5px 10px;\n  background-color: var(--tooltip-bg-color);\n  color: var(--primary-icon-color);\n  border-radius: 4px;\n  pointer-events: none;\n  font-weight: 600;\n}";
-styleInject(css_248z$4);
+var css_248z$5 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-bar-chart-container .ff-bar-chart-labels, .ff-bar-chart-container .ff-bar-chart-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-bar-chart-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-bar-chart-container .ff-legend-container {\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n  padding-right: 10px;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend {\n  width: 290px;\n  margin-top: 10px;\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item {\n  display: flex;\n  align-items: center;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item .ff-bar-chart-legend-item-circle {\n  display: inline-block;\n  width: 12px;\n  height: 12px;\n  margin-right: 5px;\n  border-radius: 50%;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-legend-label {\n  margin-left: 5px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon {\n  position: absolute;\n  pointer-events: none;\n  width: 24px;\n  height: 24px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon-wrapper {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-bar-chart-container .ff-bar-chart-labels {\n  font-weight: 400;\n  color: var(--text-color);\n}\n.ff-bar-chart-container .ff-bar-chart-tooltip {\n  position: absolute;\n  padding: 5px 10px;\n  background-color: var(--tooltip-bg-color);\n  color: var(--primary-icon-color);\n  border-radius: 4px;\n  pointer-events: none;\n  font-weight: 600;\n}";
+styleInject(css_248z$5);
 
 const BarChart = ({
   data,
@@ -38699,8 +38867,8 @@ const BarChart = ({
   });
 };
 
-var css_248z$3 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-multi-radial-chart-container .ff-center-text, .ff-multi-radial-chart-container .ff-center-text-tooltip, .ff-multi-radial-chart-container .ff-multi-radial-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20, .ff-multi-radial-chart-container .ff-center-first-text {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-multi-radial-chart-container {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-number {\n  flex-direction: column;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-pill {\n  flex-direction: row;\n}\n.ff-multi-radial-chart-container .ff-center-first-text {\n  color: var(--text-color);\n  font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-center-text {\n  color: var(--text-color);\n  font-weight: 400;\n}\n.ff-multi-radial-chart-container .ff-center-text-tooltip {\n  font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-multi-radial-tooltip {\n  position: absolute;\n  font-weight: 400;\n  background-color: var(--tooltip-bg-color);\n  color: var(--primary-icon-color);\n  padding: 5px 10px;\n  border-radius: 4px;\n  pointer-events: none;\n  z-index: 1000;\n}\n.ff-multi-radial-chart-container .ff-legend-container {\n  display: grid;\n  gap: 10px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend {\n  grid-template-columns: repeat(3, 1fr);\n  margin-top: 21px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend .ff-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend {\n  grid-template-columns: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  justify-content: center;\n  margin-left: 8px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--text-color);\n  border-radius: 15px;\n  min-width: 25px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n  margin-left: 8px;\n  color: var(--text-color);\n}";
-styleInject(css_248z$3);
+var css_248z$4 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-multi-radial-chart-container .ff-center-text, .ff-multi-radial-chart-container .ff-center-text-tooltip, .ff-multi-radial-chart-container .ff-multi-radial-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20, .ff-multi-radial-chart-container .ff-center-first-text {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-multi-radial-chart-container {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-number {\n  flex-direction: column;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-pill {\n  flex-direction: row;\n}\n.ff-multi-radial-chart-container .ff-center-first-text {\n  color: var(--text-color);\n  font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-center-text {\n  color: var(--text-color);\n  font-weight: 400;\n}\n.ff-multi-radial-chart-container .ff-center-text-tooltip {\n  font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-multi-radial-tooltip {\n  position: absolute;\n  font-weight: 400;\n  background-color: var(--tooltip-bg-color);\n  color: var(--primary-icon-color);\n  padding: 5px 10px;\n  border-radius: 4px;\n  pointer-events: none;\n  z-index: 1000;\n}\n.ff-multi-radial-chart-container .ff-legend-container {\n  display: grid;\n  gap: 10px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend {\n  grid-template-columns: repeat(3, 1fr);\n  margin-top: 21px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend .ff-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend {\n  grid-template-columns: auto;\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n  justify-content: center;\n  margin-left: 8px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--text-color);\n  border-radius: 15px;\n  min-width: 25px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n  margin-left: 8px;\n  color: var(--text-color);\n}";
+styleInject(css_248z$4);
 
 const calculateArc = (centerX, centerY, radius, startAngle, endAngle) => {
   const startX = centerX + radius * Math.cos(startAngle);
@@ -44255,8 +44423,8 @@ function requireJs() {
 
 var jsExports = requireJs();
 
-var css_248z$2 = "/* Editor container to add padding and rounded corners */\n.monaco-editor {\n  border-radius: 6px;\n  border-top: 1px solid var(--ff-editor-border-color);\n  border-right: 1px dashed var(--ff-editor-border-color);\n  border-bottom: 1px dashed var(--ff-editor-border-color);\n  border-left: 1px solid var(--ff-editor-border-color);\n}\n\n/* Style for the line number gutter */\n.monaco-editor .margin {\n  background-color: var(--ff-editor-gutter-color) !important;\n  width: 32px !important;\n}\n\n/* Style for the line numbers */\n.monaco-editor .margin .line-numbers {\n  color: var(--ff-line-number-color) !important;\n  background-color: var(--ff-line-number-bg);\n  text-align: center !important;\n}\n\n/* Active line number styling */\n.monaco-editor .margin .line-numbers.active {\n  color: var(--ff-line-number-color);\n  background-color: var(--ff-line-number-bg) !important;\n}\n\n.monaco-editor .margin-view-overlays {\n  width: 100% !important;\n}\n\n.monaco-editor .margin-view-overlays .line-numbers {\n  width: 100% !important;\n}\n\n.monaco-scrollable-element {\n  left: 32px !important;\n}\n\n.monaco-editor .current-line-background {\n  background-color: var(--ff-editor-line-bg) !important;\n}\n\n.ff-editor-container {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-editor-container .ff-top-toolbar {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n}";
-styleInject(css_248z$2);
+var css_248z$3 = "/* Editor container to add padding and rounded corners */\n.monaco-editor {\n  border-radius: 6px;\n  border-top: 1px solid var(--ff-editor-border-color);\n  border-right: 1px dashed var(--ff-editor-border-color);\n  border-bottom: 1px dashed var(--ff-editor-border-color);\n  border-left: 1px solid var(--ff-editor-border-color);\n}\n\n/* Style for the line number gutter */\n.monaco-editor .margin {\n  background-color: var(--ff-editor-gutter-color) !important;\n  width: 32px !important;\n}\n\n/* Style for the line numbers */\n.monaco-editor .margin .line-numbers {\n  color: var(--ff-line-number-color) !important;\n  background-color: var(--ff-line-number-bg);\n  text-align: center !important;\n}\n\n/* Active line number styling */\n.monaco-editor .margin .line-numbers.active {\n  color: var(--ff-line-number-color);\n  background-color: var(--ff-line-number-bg) !important;\n}\n\n.monaco-editor .margin-view-overlays {\n  width: 100% !important;\n}\n\n.monaco-editor .margin-view-overlays .line-numbers {\n  width: 100% !important;\n}\n\n.monaco-scrollable-element {\n  left: 32px !important;\n}\n\n.monaco-editor .current-line-background {\n  background-color: var(--ff-editor-line-bg) !important;\n}\n\n.ff-editor-container {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-editor-container .ff-top-toolbar {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n}";
+styleInject(css_248z$3);
 
 const Editor = /*#__PURE__*/forwardRef(({
   width,
@@ -44456,6 +44624,8 @@ const Editor = /*#__PURE__*/forwardRef(({
       onChange: (newValue, event) => handleChange(newValue, event),
       theme: theme
     }), showDropdown && dropdownPosition && jsx(VariableDropdown, {
+      position: "absolute",
+      width: "300px",
       optionsList: variableOptionsList,
       onSelectVariable: handleSelectVariable,
       dropdownPosition: dropdownPosition
@@ -44477,8 +44647,8 @@ const getSequentialPayload = data => {
   }));
 };
 
-var css_248z$1 = ".ff-grid-container {\n  display: grid;\n  grid-template-columns: 1fr 4fr 1fr 6fr;\n  padding: 24px 0;\n  grid-auto-rows: auto;\n}\n.ff-grid-container .ff-selectedMachines {\n  display: contents;\n}\n.ff-grid-container .ff-selectedMachines-input {\n  grid-column: 2/3;\n  display: grid;\n}\n.ff-grid-container .ff-input-box-container {\n  border: 1px solid var(--description-text);\n  width: 100%;\n  height: 32px;\n}\n.ff-grid-container .ff-machine-instance-row {\n  display: contents;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line {\n  grid-column: 3/4;\n  position: relative;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-line {\n  position: absolute;\n  height: 1px;\n  background-color: var(--brand-color);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-left-icon {\n  height: 8px;\n  width: 8px;\n  background-color: var(--brand-color);\n  border-radius: 50%;\n  margin-right: 5px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-selectedMachines-connecting-line-text {\n  position: absolute;\n  top: -10px;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--brand-color);\n  color: var(--tooltip-text-color);\n  padding: 4px;\n  border-radius: 12px;\n  text-align: center;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-right-icon {\n  width: 0;\n  height: 0;\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n  border-left: 8px solid var(--brand-color);\n  margin-left: 84px;\n  bottom: -4px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-second-line {\n  position: relative;\n  margin-left: 20px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-vertical-line {\n  position: absolute;\n  left: 22px;\n  top: 0;\n  width: 1px;\n  height: auto;\n  background-color: var(--brand-color);\n}\n.ff-grid-container .ff-machine-instance {\n  grid-column: 4/5;\n}\n.ff-grid-container .ff-machine-instance .ff-add-browser-device {\n  margin-bottom: 16px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line {\n  margin-top: 20px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-no-instance-line {\n  margin-top: 20px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-line {\n  width: 100%;\n  background-color: var(--brand-color);\n  height: 1px;\n  position: relative;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-selectedMachines-connecting-line-text {\n  position: absolute;\n  top: -10px;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--brand-color);\n  color: var(--tooltip-text-color);\n  font-weight: bold;\n  font-size: 8px;\n  padding: 4px;\n  border-radius: 12px;\n  text-align: center;\n}\n.ff-grid-container .ff-run-level-execution-dataset p {\n  margin: 0;\n  font-size: 12px;\n}\n.ff-grid-container .ff-run-level-execution-dataset {\n  min-height: 70px;\n  max-width: 600px;\n  border: 1px solid var(--description-text);\n  margin-bottom: 8px;\n  border-radius: 4px;\n  margin-bottom: 16px;\n  position: relative;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector {\n  position: absolute;\n  left: -12%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 0;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve {\n  position: relative;\n  width: 88px;\n  height: 0;\n  border: 1px dashed var(--brand-color);\n  border-top: none;\n  border-right: none;\n  border-bottom-left-radius: 8px;\n  display: flex;\n  flex-direction: column-reverse;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve .ff-curve-right-icon {\n  width: 0;\n  height: 0;\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n  border-left: 8px solid var(--brand-color);\n  margin-left: 84px;\n  position: absolute;\n  bottom: -4px;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve .ff-selectedMachines-connecting-line-text {\n  position: absolute;\n  left: 50%;\n  top: 85px;\n  transform: translateX(-50%);\n  background-color: var(--brand-color);\n  color: var(--tooltip-text-color);\n  font-weight: 400;\n  font-size: 8px;\n  padding: 4px;\n  border-radius: 12px;\n  text-align: center;\n  width: 44px;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-connector-0 {\n  bottom: 8px;\n  border: none;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve-right-icon-0 {\n  display: none;\n}\n.ff-grid-container .ff-select-machine-input {\n  grid-column: 2/3;\n}\n.ff-grid-container .ff-select-machine-input input {\n  width: 430px;\n  height: 32px;\n}\n.ff-grid-container .ff-grid-item.ff-dynamic-item {\n  grid-column: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  place-self: first baseline;\n  top: 1px;\n  left: 20px;\n}\n.ff-grid-container .ff-script-count-container {\n  grid-column: 1;\n  align-self: center;\n  background-color: var(--brand-color);\n  color: var(--tooltip-text-color);\n  text-align: center;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px;\n}\n.ff-grid-container .ff-script-count-container .ff-script-count-box {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}";
-styleInject(css_248z$1);
+var css_248z$2 = ".ff-grid-container {\n  display: grid;\n  grid-template-columns: 1fr 4fr 1fr 6fr;\n  padding: 24px 0;\n  grid-auto-rows: auto;\n}\n.ff-grid-container .ff-selectedMachines {\n  display: contents;\n}\n.ff-grid-container .ff-selectedMachines-input {\n  grid-column: 2/3;\n  display: grid;\n}\n.ff-grid-container .ff-input-box-container {\n  border: 1px solid var(--description-text);\n  width: 100%;\n  height: 32px;\n}\n.ff-grid-container .ff-machine-instance-row {\n  display: contents;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line {\n  grid-column: 3/4;\n  position: relative;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-line {\n  position: absolute;\n  height: 1px;\n  background-color: var(--brand-color);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-left-icon {\n  height: 8px;\n  width: 8px;\n  background-color: var(--brand-color);\n  border-radius: 50%;\n  margin-right: 5px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-selectedMachines-connecting-line-text {\n  position: absolute;\n  top: -10px;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--brand-color);\n  color: var(--tooltip-text-color);\n  padding: 4px;\n  border-radius: 12px;\n  text-align: center;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-right-icon {\n  width: 0;\n  height: 0;\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n  border-left: 8px solid var(--brand-color);\n  margin-left: 84px;\n  bottom: -4px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-second-line {\n  position: relative;\n  margin-left: 20px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line .ff-vertical-line {\n  position: absolute;\n  left: 22px;\n  top: 0;\n  width: 1px;\n  height: auto;\n  background-color: var(--brand-color);\n}\n.ff-grid-container .ff-machine-instance {\n  grid-column: 4/5;\n}\n.ff-grid-container .ff-machine-instance .ff-add-browser-device {\n  margin-bottom: 16px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line {\n  margin-top: 20px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-no-instance-line {\n  margin-top: 20px;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-line {\n  width: 100%;\n  background-color: var(--brand-color);\n  height: 1px;\n  position: relative;\n}\n.ff-grid-container .ff-selectedMachines-connecting-line.ff-no-instance-line .ff-selectedMachines-connecting-line-text {\n  position: absolute;\n  top: -10px;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: var(--brand-color);\n  color: var(--tooltip-text-color);\n  font-weight: bold;\n  font-size: 8px;\n  padding: 4px;\n  border-radius: 12px;\n  text-align: center;\n}\n.ff-grid-container .ff-run-level-execution-dataset p {\n  margin: 0;\n  font-size: 12px;\n}\n.ff-grid-container .ff-run-level-execution-dataset {\n  min-height: 70px;\n  max-width: 600px;\n  border: 1px solid var(--description-text);\n  margin-bottom: 8px;\n  border-radius: 4px;\n  margin-bottom: 16px;\n  position: relative;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector {\n  position: absolute;\n  left: -12%;\n  transform: translateX(-50%);\n  width: 40px;\n  height: 0;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve {\n  position: relative;\n  width: 88px;\n  height: 0;\n  border: 1px dashed var(--brand-color);\n  border-top: none;\n  border-right: none;\n  border-bottom-left-radius: 8px;\n  display: flex;\n  flex-direction: column-reverse;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve .ff-curve-right-icon {\n  width: 0;\n  height: 0;\n  border-top: 4px solid transparent;\n  border-bottom: 4px solid transparent;\n  border-left: 8px solid var(--brand-color);\n  margin-left: 84px;\n  position: absolute;\n  bottom: -4px;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve .ff-selectedMachines-connecting-line-text {\n  position: absolute;\n  left: 50%;\n  top: 85px;\n  transform: translateX(-50%);\n  background-color: var(--brand-color);\n  color: var(--tooltip-text-color);\n  font-weight: 400;\n  font-size: 8px;\n  padding: 4px;\n  border-radius: 12px;\n  text-align: center;\n  width: 44px;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-connector-0 {\n  bottom: 8px;\n  border: none;\n}\n.ff-grid-container .ff-run-level-execution-dataset .ff-curved-connector .ff-curve-right-icon-0 {\n  display: none;\n}\n.ff-grid-container .ff-select-machine-input {\n  grid-column: 2/3;\n}\n.ff-grid-container .ff-select-machine-input input {\n  width: 430px;\n  height: 32px;\n}\n.ff-grid-container .ff-grid-item.ff-dynamic-item {\n  grid-column: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  place-self: first baseline;\n  top: 1px;\n  left: 20px;\n}\n.ff-grid-container .ff-script-count-container {\n  grid-column: 1;\n  align-self: center;\n  background-color: var(--brand-color);\n  color: var(--tooltip-text-color);\n  text-align: center;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px;\n}\n.ff-grid-container .ff-script-count-container .ff-script-count-box {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}";
+styleInject(css_248z$2);
 
 var reactArcher$1 = {exports: {}};
 
@@ -46082,8 +46252,8 @@ const saveFileFromBlob = (blob, filename) => {
   }
 };
 
-var css_248z = ".warning_modal_container {\n  height: 100%;\n}\n\n.warning_modal_content {\n  display: flex;\n  height: 80%;\n  width: 100%;\n}\n\n.warning_modal_icon {\n  position: relative;\n  bottom: 16px;\n  right: 4px;\n}\n\n.warning_modal_title_wrapper {\n  line-height: 30px;\n}\n\n.warning_modal_message_wrapper {\n  padding-top: 8px;\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.warning_modal_message {\n  display: flex;\n  flex-direction: column;\n  line-height: 24px;\n}\n\n.warning_modal_footer_button {\n  height: 20%;\n  width: 100%;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  gap: 8px;\n}";
-styleInject(css_248z);
+var css_248z$1 = ".warning_modal_container {\n  height: 100%;\n}\n\n.warning_modal_content {\n  display: flex;\n  height: 80%;\n  width: 100%;\n}\n\n.warning_modal_icon {\n  position: relative;\n  bottom: 16px;\n  right: 4px;\n}\n\n.warning_modal_title_wrapper {\n  line-height: 30px;\n}\n\n.warning_modal_message_wrapper {\n  padding-top: 8px;\n  display: flex;\n  height: 100%;\n  flex-direction: column;\n  justify-content: space-between;\n}\n\n.warning_modal_message {\n  display: flex;\n  flex-direction: column;\n  line-height: 24px;\n}\n\n.warning_modal_footer_button {\n  height: 20%;\n  width: 100%;\n  display: flex;\n  align-items: flex-end;\n  justify-content: flex-end;\n  gap: 8px;\n}";
+styleInject(css_248z$1);
 
 const PopUpModal = ({
   isOpen,
@@ -46158,5 +46328,101 @@ const PopUpModal = ({
   });
 };
 
-export { Accordion, AddButton as AddResourceButton, AllProjectsDropdown, AppHeader, AttachImage, AttachmentButton, Avatar, BarChart, Button$1 as Button, Checkbox, Chip, Col, ConnectingBranch, Container, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DownloadClient, DragAndDrop, Drawer, Dropzone, EditTextField, Editor, ExcelFile as Excel, ExpandableMenu, FieldSet, FileDropzone, FilePreview, ForwardedForms as Form, HighlightText, Icon, IconButton, IconRadialChart, IconRadioGroup, Input, InputWithDropdown, LabelEditTextField, LazyLoad, LineChart, MachineInputField, MenuOption, MiniModal, Modal, ModuleChip, MultiRadialChart, MultiSelect, NlpInput as NLPInput, Paper, PieChart, PopUpModal, RadialChart, RadioButton, RadioGroup, Recaptcha, Row$1 as Row, Search, Select$1 as Select, SequentialConnectingBranch, StateDropdown, StatusButton, StatusCard, Table$1 as Table, TreeTable as TableTree, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toastify, Toggle, ToggleSwitch, Tooltip, Typography, VariableDropdown, VariableInput, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, getSequentialPayload, saveFileFromBlob, throttle, toast, truncateText, useFileDropzone, useTheme };
+var css_248z = ".ff-add-variable-container {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  position: relative;\n}\n.ff-add-variable-container .ff-add-variable-input {\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}";
+styleInject(css_248z);
+
+const AddVariables = ({
+  label = '',
+  variableList = [],
+  placeholder = 'Enter text',
+  onChange,
+  onCreateVariableClick,
+  value = '',
+  dropdownWidth = 'inherit'
+}) => {
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [cursorPosition, setCursorPosition] = useState(null);
+  const [showCreateVariableIcon, setShowCreateVariableIcon] = useState(false);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (cursorPosition !== null && inputRef.current) {
+      inputRef.current.setSelectionRange(cursorPosition, cursorPosition);
+      inputRef.current.focus();
+    }
+  }, [cursorPosition]);
+  const handleChange = event => {
+    const value = event.target.value;
+    onChange?.(value);
+    // Show dropdown only if the last character typed is `$`
+    const cursorPos = inputRef.current?.selectionStart || 0;
+    const isDollarTyped = value[cursorPos - 1] === '$';
+    if (isDollarTyped) {
+      setShowDropdown(true);
+    } else {
+      setShowDropdown(false); // Close if it's a space or other characters
+    }
+    if (value?.includes('$')) {
+      setShowCreateVariableIcon(false);
+    } else {
+      setShowCreateVariableIcon(true);
+    }
+  };
+  const handleDropdownClick = item => {
+    if (inputRef.current) {
+      const {
+        selectionStart,
+        selectionEnd
+      } = inputRef.current;
+      const dollarSyntax = `{${item.type === 'LOCAL' ? 'LV' : item.type === 'GLOBAL' ? 'GV' : item.type === 'GROUP' ? 'SG' : 'PEV'}_${item.name}}`;
+      const newValue = value.slice(0, selectionStart || 0) + dollarSyntax + value.slice(selectionEnd || 0);
+      onChange(newValue);
+      setCursorPosition((selectionStart || 0) + dollarSyntax.length);
+      // Close the dropdown after inserting the variable
+      setShowDropdown(false);
+      onChange?.(newValue);
+    }
+  };
+  return jsxs("div", {
+    className: "ff-add-variable-container",
+    children: [jsxs("div", {
+      className: "ff-add-variable-input",
+      children: [jsx(Input, {
+        name: "add_variable",
+        ref: inputRef,
+        type: "text",
+        value: value,
+        onChange: handleChange,
+        variant: "primary",
+        label: label,
+        placeholder: placeholder
+      }), !checkEmpty(value) && showCreateVariableIcon && jsx(Icon, {
+        onClick: onCreateVariableClick,
+        name: "add_variable",
+        width: 24,
+        height: 24,
+        hoverEffect: true
+      })]
+    }), showDropdown && jsx(VariableDropdown, {
+      position: "relative",
+      width: dropdownWidth,
+      optionsList: variableList,
+      onSelectVariable: handleDropdownClick
+    })]
+  });
+};
+
+// Will be used to find duplicate key-value pair in an array of objects.
+const hasDuplicateFile = (array, property) => {
+  const seen = new Set();
+  for (const obj of array) {
+    const key = property ? obj[property] : JSON.stringify(obj);
+    if (seen.has(key)) {
+      return true;
+    }
+    seen.add(key);
+  }
+  return false;
+};
+
+export { Accordion, AddButton as AddResourceButton, AddVariables, AllProjectsDropdown, AppHeader, AttachImage, AttachmentButton, Avatar, BarChart, Button$1 as Button, Checkbox, Chip, Col, ConnectingBranch, Container, CreateVariableSlider, DashboardDonutChart, CustomDatePicker as DatePicker, DonutChart, DownloadClient, DragAndDrop, Drawer, Dropzone, EditTextField, Editor, ExcelFile as Excel, ExpandableMenu, FieldSet, FileDropzone, FilePreview, ForwardedForms as Form, HighlightText, Icon, IconButton, IconRadialChart, IconRadioGroup, Input, InputWithDropdown, LabelEditTextField, LazyLoad, LineChart, MachineInputField, MenuOption, MiniModal, Modal, ModuleChip, MultiRadialChart, MultiSelect, NlpInput as NLPInput, Paper, PieChart, PopUpModal, RadialChart, RadioButton, RadioGroup, Recaptcha, Row$1 as Row, Search, Select$1 as Select, SequentialConnectingBranch, StateDropdown, StatusButton, StatusCard, Table$1 as Table, TreeTable as TableTree, Tabs, Textarea as TextArea, ThemeProvider, Toaster, Toastify, Toggle, ToggleSwitch, Tooltip, Typography, VariableDropdown, VariableInput, checkEmpty, compareArrays, compareObjects, debounce, ffid, findAndInsert, getEncryptedData, getExtension, getExtensionWithPeriod, getSequentialPayload, hasDuplicateFile, saveFileFromBlob, throttle, toast, truncateText, useFileDropzone, useTheme };
 //# sourceMappingURL=index.esm.js.map