pixel-react 1.5.4 → 1.5.6

package/lib/index.js

@@ -48,11 +48,11 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$19 = ":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-32 {\n  font-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$19);
+var css_248z$1a = ":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-32 {\n  font-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$1a);
 
-var css_248z$18 = ":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$18);
+var css_248z$19 = ":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$19);
 
 function getDefaultExportFromCjs (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -547,7 +547,7 @@ const SvgEyeOpenIcon = (props) => /* @__PURE__ */ React__namespace.createElement
 
 const SvgReplaceIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.2278 16C10.027 16 9.84105 15.8884 9.74435 15.7172C9.64765 15.5386 9.64765 15.3302 9.75179 15.1516L10.5328 13.8492C10.689 13.5812 11.0386 13.4994 11.299 13.6557C11.5667 13.8119 11.6486 14.1543 11.4924 14.4222L11.2915 14.7571C13.3445 14.2734 14.8842 12.4277 14.8842 10.2247C14.8842 9.91955 15.1371 9.6665 15.4421 9.6665C15.7471 9.6665 16 9.91955 16 10.2247C15.9925 13.4101 13.404 16 10.2278 16Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M0.557875 6.32608C0.252903 6.32608 0 6.07304 0 5.7679C0 2.58997 2.58854 0 5.76471 0C5.96554 0 6.1515 0.111637 6.2482 0.282813C6.3449 0.461432 6.3449 0.669821 6.24076 0.848439L5.45973 2.15087C5.30353 2.41135 4.96137 2.50066 4.69359 2.33693C4.43325 2.18064 4.34399 1.83829 4.50763 1.57036L4.70846 1.23545C2.64805 1.71921 1.11575 3.56493 1.11575 5.7679C1.11575 6.07304 0.862846 6.32608 0.557875 6.32608Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.079 8.46888V10.657C10.079 12.4804 9.35004 13.2097 7.52765 13.2097H5.34078C3.51839 13.2097 2.78943 12.4804 2.78943 10.657V8.46888C2.78943 6.64548 3.51839 5.91614 5.34078 5.91614H7.52765C9.35004 5.91614 10.079 6.64548 10.079 8.46888Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.6524 2.79102H8.46551C6.67287 2.79102 5.94395 3.50549 5.92163 5.26191H7.52828C9.71515 5.26191 10.7268 6.28152 10.7268 8.46216V10.0697C12.4896 10.0474 13.1963 9.31804 13.1963 7.52441V5.34378C13.2037 3.52038 12.4748 2.79102 10.6524 2.79102Z", fill: "currentColor" }));
 
-const SvgHeaderPreset = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 120 120", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M97.5 22.4999H82.5C79.7422 22.4917 77.5083 20.2579 77.5001 17.5V2.5L97.5 22.4999Z", fill: "#4A1353" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M97.5 22.4999V112.5C97.4918 115.258 95.258 117.492 92.5001 117.5H12.4999C9.74203 117.492 7.5082 115.258 7.5 112.5V7.49992C7.5082 4.74203 9.74203 2.5082 12.4999 2.5H77.4998V17.5C77.5083 20.2579 79.7421 22.4917 82.5 22.4999H97.5Z", fill: "white" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M82.5 100C99.0685 100 112.5 86.5685 112.5 70C112.5 53.4315 99.0685 40 82.5 40C65.9315 40 52.5 53.4315 52.5 70C52.5 86.5685 65.9315 100 82.5 100Z", fill: "#FDFAFF" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M95.0717 58.5713H74.5002C72.6067 58.5713 71.0717 60.1063 71.0717 61.9999V82.5713C71.0717 84.4648 72.6067 85.9999 74.5002 85.9999H95.0717C96.9652 85.9999 98.5002 84.4648 98.5002 82.5713V61.9999C98.5002 60.1063 96.9652 58.5713 95.0717 58.5713Z", fill: "#9D34AE" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M90.5001 54H69.9287C68.0351 54 66.5001 55.535 66.5001 57.4286V78C66.5001 79.8935 68.0351 81.4286 69.9287 81.4286H90.5001C92.3937 81.4286 93.9287 79.8935 93.9287 78V57.4286C93.9287 55.535 92.3937 54 90.5001 54Z", fill: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M87.0717 66.5715H81.3575V60.8572C81.3575 60.5541 81.237 60.2634 81.0227 60.0491C80.8084 59.8348 80.5177 59.7144 80.2146 59.7144C79.9115 59.7144 79.6208 59.8348 79.4065 60.0491C79.1922 60.2634 79.0717 60.5541 79.0717 60.8572V66.5715H73.3575C73.0544 66.5715 72.7637 66.6919 72.5493 66.9062C72.335 67.1206 72.2146 67.4113 72.2146 67.7144C72.2146 68.0175 72.335 68.3082 72.5493 68.5225C72.7637 68.7368 73.0544 68.8572 73.3575 68.8572H79.0717V74.5715C79.0717 74.8746 79.1922 75.1653 79.4065 75.3796C79.6208 75.5939 79.9115 75.7144 80.2146 75.7144C80.5177 75.7144 80.8084 75.5939 81.0227 75.3796C81.237 75.1653 81.3575 74.8746 81.3575 74.5715V68.8572H87.0717C87.3748 68.8572 87.6655 68.7368 87.8799 68.5225C88.0942 68.3082 88.2146 68.0175 88.2146 67.7144C88.2146 67.4113 88.0942 67.1206 87.8799 66.9062C87.6655 66.6919 87.3748 66.5715 87.0717 66.5715Z", fill: "#F5F5F5" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M19.9999 15H45V19.9999H19.9999V15Z", fill: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M19.9999 25H24.9998V29.9999H19.9999V25Z", fill: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M30 25H34.9999V29.9999H30V25Z", fill: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M94.9999 112.5C94.9999 113.881 93.8805 115 92.4998 115H12.4999C11.1192 115 9.9998 113.881 9.9998 112.5V7.5C9.9998 6.1193 11.1192 4.99992 12.4999 4.99992H75V17.4998C75 21.642 78.3578 24.9998 82.5 24.9998H87.4999V19.9999H82.5C81.1192 19.9999 79.9999 18.8805 79.9999 17.4998V8.535L94.9999 23.535V32.5001H99.9998V22.5C99.9996 21.837 99.7361 21.2013 99.2674 20.7326L79.2675 0.732422C78.7987 0.263438 78.1628 0 77.5 0H12.4999C8.35777 0 4.99988 3.35789 4.99988 7.5V112.5C4.99988 116.642 8.35777 120 12.4999 120H92.4998C96.6419 120 99.9998 116.642 99.9998 112.5V107.5H94.9999V112.5Z", fill: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M82.5 37.5C64.5508 37.5 49.9999 52.0507 49.9999 70.0001C49.9999 87.9495 64.5508 102.5 82.5 102.5C100.449 102.5 115 87.9492 115 69.9998C114.979 52.0594 100.441 37.5206 82.5 37.5ZM82.5 97.5C67.3122 97.5 55 85.1878 55 70.0001C55 54.8123 67.3122 42.4999 82.5 42.4999C97.6877 42.4999 110 54.8121 110 69.9998C109.982 85.1803 97.6804 97.4822 82.5 97.5Z", fill: "#71347B" }));
+const SvgHeaderPreset = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 110 120", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_7010_20218)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M92.4999 22.5H77.4999C74.742 22.4918 72.5082 20.258 72.5 17.5001V2.50006L92.4999 22.5Z", fill: "#4A1353" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M90.0715 58.5714H69.5001C67.6066 58.5714 66.0715 60.1064 66.0715 62V82.5714C66.0715 84.465 67.6066 86 69.5001 86H90.0715C91.9651 86 93.5001 84.465 93.5001 82.5714V62C93.5001 60.1064 91.9651 58.5714 90.0715 58.5714Z", fill: "#9D34AE" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M85.5 54H64.9286C63.035 54 61.5 55.535 61.5 57.4285V78C61.5 79.8935 63.035 81.4285 64.9286 81.4285H85.5C87.3935 81.4285 88.9286 79.8935 88.9286 78V57.4285C88.9286 55.535 87.3935 54 85.5 54Z", fill: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M82.0715 66.5714H76.3572V60.8571C76.3572 60.554 76.2368 60.2633 76.0225 60.049C75.8082 59.8347 75.5175 59.7143 75.2144 59.7143C74.9113 59.7143 74.6206 59.8347 74.4062 60.049C74.1919 60.2633 74.0715 60.554 74.0715 60.8571V66.5714H68.3572C68.0541 66.5714 67.7634 66.6918 67.5491 66.9061C67.3348 67.1205 67.2144 67.4112 67.2144 67.7143C67.2144 68.0174 67.3348 68.3081 67.5491 68.5224C67.7634 68.7367 68.0541 68.8571 68.3572 68.8571H74.0715V74.5714C74.0715 74.8745 74.1919 75.1652 74.4062 75.3795C74.6206 75.5939 74.9113 75.7143 75.2144 75.7143C75.5175 75.7143 75.8082 75.5939 76.0225 75.3795C76.2368 75.1652 76.3572 74.8745 76.3572 74.5714V68.8571H82.0715C82.3746 68.8571 82.6653 68.7367 82.8796 68.5224C83.0939 68.3081 83.2144 68.0174 83.2144 67.7143C83.2144 67.4112 83.0939 67.1205 82.8796 66.9061C82.6653 66.6918 82.3746 66.5714 82.0715 66.5714Z", fill: "#F5F5F5" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M15 15H40.0001V19.9999H15V15Z", fill: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M15 25.0001H19.9999V30H15V25.0001Z", fill: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M25 25.0001H29.9999V30H25V25.0001Z", fill: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M90 112.5C90 113.881 88.8806 115 87.4999 115H7.5C6.1193 115 4.99992 113.881 4.99992 112.5V7.5C4.99992 6.1193 6.1193 4.99992 7.5 4.99992H70.0001V17.4998C70.0001 21.642 73.358 24.9998 77.5001 24.9998H82.5V19.9999H77.5001C76.1194 19.9999 75 18.8805 75 17.4998V8.535L90 23.535V32.5001H94.9999V22.5C94.9997 21.837 94.7362 21.2013 94.2675 20.7326L74.2676 0.732422C73.7988 0.263438 73.163 0 72.5002 0H7.5C3.35789 0 0 3.35789 0 7.5V112.5C0 116.642 3.35789 120 7.5 120H87.4999C91.642 120 94.9999 116.642 94.9999 112.5V107.5H90V112.5Z", fill: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M77.5001 37.5C59.5509 37.5 45 52.0507 45 70.0001C45 87.9495 59.5509 102.5 77.5001 102.5C95.4492 102.5 110 87.9492 110 69.9998C109.979 52.0594 95.4408 37.5206 77.5001 37.5ZM77.5001 97.5C62.3123 97.5 50.0002 85.1878 50.0002 70.0001C50.0002 54.8123 62.3123 42.4999 77.5001 42.4999C92.6878 42.4999 105 54.8121 105 69.9998C104.982 85.1803 92.6805 97.4822 77.5001 97.5Z", fill: "#71347B" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_7010_20218" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 110, height: 120, fill: "white" }))));
 
 const SvgProjectElement = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.25996 0C4.96541 0 4.72663 0.238781 4.72663 0.533333V1.86667H4.13996C3.67249 1.86667 4.23484 1.88136 3.83358 1.93801C2.78514 2.05486 1.97454 2.37818 1.47172 3.14174C0.999156 3.85935 0.873291 4.8662 0.873291 6.13333V9.86667C0.873291 11.1338 0.999156 12.1407 1.47172 12.8583C1.97454 13.6218 2.78513 13.9451 3.83355 14.062C4.23482 14.1186 3.67248 14.1333 4.13996 14.1333H4.72663V15.4667C4.72663 15.7612 4.96541 16 5.25996 16C5.55451 16 5.7933 15.7612 5.7933 15.4667V0.533333C5.7933 0.238781 5.55451 0 5.25996 0ZM4.72663 13.0667H4.13996C3.68488 13.0667 4.30404 13.0517 3.97589 13.0048L3.95892 13.0027C3.04771 12.9022 2.61439 12.654 2.36257 12.2716C2.07915 11.8412 1.93996 11.1233 1.93996 9.86667V6.13333C1.93996 4.87673 2.07915 4.15879 2.36257 3.72839C2.61439 3.346 3.04771 3.09779 3.95892 2.99732L3.97589 2.99517C4.30404 2.94829 3.68488 2.93333 4.13996 2.93333H4.72663V13.0667ZM11.86 2.93333C12.315 2.93333 12.6958 2.94829 13.024 2.99517L13.041 2.99732C13.9522 3.09779 14.3855 3.346 14.6373 3.7284C14.9208 4.15879 15.06 4.87674 15.06 6.13333V9.86667C15.06 11.1233 14.9208 11.8412 14.6373 12.2716C14.3855 12.654 13.9522 12.9022 13.041 13.0027L13.024 13.0048C12.6958 13.0517 12.315 13.0667 11.86 13.0667H8.23168C7.93713 13.0667 7.69835 13.3054 7.69835 13.6C7.69835 13.8946 7.93713 14.1333 8.23168 14.1333H11.86C12.3275 14.1333 12.7651 14.1186 13.1663 14.062C14.2148 13.9451 15.0254 13.6218 15.5282 12.8583C16.0008 12.1407 16.1266 11.1338 16.1266 9.86667V6.13333C16.1266 4.86619 16.0008 3.85934 15.5282 3.14173C15.0253 2.37818 14.2147 2.05486 13.1663 1.93801C12.765 1.88136 12.3274 1.86667 11.86 1.86667H8.27648C7.98193 1.86667 7.74315 2.10545 7.74315 2.4C7.74315 2.69455 7.98193 2.93333 8.27648 2.93333H11.86Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.2976 7.95194C10.4283 7.71394 10.4936 7.4526 10.4936 7.16794C10.4936 6.85994 10.4259 6.58694 10.2906 6.34894C10.1553 6.11094 9.95225 5.92427 9.68159 5.78894C9.41092 5.6536 9.07959 5.58594 8.68759 5.58594H6.74859V10.4999H7.94559V8.73594H8.68759C9.08892 8.73594 9.42492 8.6636 9.69559 8.51894C9.96625 8.37427 10.1669 8.18527 10.2976 7.95194ZM9.10759 7.62294C8.99559 7.73027 8.82525 7.78394 8.59659 7.78394H7.94559V6.55194H8.59659C8.82525 6.55194 8.99559 6.6056 9.10759 6.71294C9.21959 6.82027 9.27559 6.97194 9.27559 7.16794C9.27559 7.36394 9.21959 7.5156 9.10759 7.62294ZM12.3138 7.53894V6.54494H14.1268V5.58594H11.1168V10.4999H14.1268V9.54094H12.3138V8.46294H13.9168V7.53894H12.3138Z", fill: "currentColor" }));
 
@@ -571,6 +571,8 @@ const SvgRemoveUser = (props) => /* @__PURE__ */ React__namespace.createElement(
 
 const SvgAddArchive = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.63602 0.975634L7.63602 0.975628C7.39589 0.735534 7.07618 0.603125 6.73666 0.603125H2.17188C1.47046 0.603125 0.9 1.17358 0.9 1.875V14.125C0.9 14.8264 1.47046 15.3969 2.17188 15.3969H15.8281C16.5295 15.3969 17.1 14.8264 17.1 14.125V3.75C17.1 3.04858 16.5295 2.47812 15.8281 2.47812H9.13848L7.63602 0.975634ZM9.23643 6.79895L9.23646 6.79893L10.8368 5.19853C10.9509 5.08447 11.1021 5.02187 11.2633 5.02187H15.8281C16.1606 5.02187 16.4312 5.29251 16.4312 5.625V14.125C16.4312 14.4575 16.1606 14.7281 15.8281 14.7281H2.17188C1.83941 14.7281 1.56875 14.4575 1.56875 14.125V7.5C1.56875 7.16751 1.83941 6.89687 2.17188 6.89687H9C9.08869 6.89687 9.1737 6.86164 9.23643 6.79895ZM2.17188 1.27188H6.73666C6.89795 1.27188 7.04908 1.33447 7.16313 1.44852L8.76354 3.04893C8.82626 3.11165 8.91129 3.14687 9 3.14687H15.8281C16.1606 3.14687 16.4312 3.41751 16.4312 3.75V4.5055C16.3469 4.4599 16.2569 4.42353 16.1625 4.39778V3.75C16.1625 3.56534 16.0128 3.41563 15.8281 3.41563H2.17188C1.98717 3.41563 1.8375 3.56534 1.8375 3.75V6.27278C1.74309 6.29853 1.65306 6.3349 1.56875 6.3805V1.875C1.56875 1.54251 1.83941 1.27188 2.17188 1.27188ZM4.04688 4.35313C3.86217 4.35313 3.7125 4.50284 3.7125 4.6875C3.7125 4.87216 3.86217 5.02187 4.04688 5.02187H10.0677L8.86152 6.22813H2.50625V5.02187H3.10938C3.29408 5.02187 3.44375 4.87216 3.44375 4.6875C3.44375 4.50284 3.29408 4.35313 3.10938 4.35313H2.50625V4.08437H15.4937V4.35313H4.04688Z", fill: "currentColor", stroke: "currentColor", strokeWidth: 0.2 }), /* @__PURE__ */ React__namespace.createElement("mask", { id: "path-2-outside-1_6891_65", maskUnits: "userSpaceOnUse", x: 9.35828, y: 7.65503, width: 6, height: 6, fill: "black" }, /* @__PURE__ */ React__namespace.createElement("rect", { fill: "white", x: 9.35828, y: 7.65503, width: 6, height: 6 }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.0806 10.5744V9.05659C13.0806 8.83483 12.9008 8.65503 12.6791 8.65503C12.4573 8.65503 12.2775 8.83483 12.2775 9.05659V10.5744H10.7598C10.5381 10.5744 10.3583 10.7542 10.3583 10.976C10.3583 11.1978 10.5381 11.3776 10.7598 11.3776H12.2775V12.8953C12.2775 13.1171 12.4573 13.2969 12.6791 13.2969C12.9008 13.2969 13.0806 13.1171 13.0806 12.8953V11.3776H14.5986C14.8203 11.3776 15.0001 11.1978 15.0001 10.976C15.0001 10.7542 14.8203 10.5744 14.5986 10.5744H13.0806Z" })), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.0806 10.5744V9.05659C13.0806 8.83483 12.9008 8.65503 12.6791 8.65503C12.4573 8.65503 12.2775 8.83483 12.2775 9.05659V10.5744H10.7598C10.5381 10.5744 10.3583 10.7542 10.3583 10.976C10.3583 11.1978 10.5381 11.3776 10.7598 11.3776H12.2775V12.8953C12.2775 13.1171 12.4573 13.2969 12.6791 13.2969C12.9008 13.2969 13.0806 13.1171 13.0806 12.8953V11.3776H14.5986C14.8203 11.3776 15.0001 11.1978 15.0001 10.976C15.0001 10.7542 14.8203 10.5744 14.5986 10.5744H13.0806Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M13.0806 10.5744H12.8806V10.7744H13.0806V10.5744ZM12.6791 8.65503V8.45503V8.65503ZM12.2775 10.5744V10.7744H12.4775V10.5744H12.2775ZM12.2775 11.3776H12.4775V11.1776H12.2775V11.3776ZM13.0806 11.3776V11.1776H12.8806V11.3776H13.0806ZM12.8806 9.05659V10.5744H13.2806V9.05659H12.8806ZM12.6791 8.85503C12.7904 8.85503 12.8806 8.94528 12.8806 9.05659H13.2806C13.2806 8.72437 13.0113 8.45503 12.6791 8.45503V8.85503ZM12.4775 9.05659C12.4775 8.94528 12.5678 8.85503 12.6791 8.85503V8.45503C12.3468 8.45503 12.0775 8.72437 12.0775 9.05659H12.4775ZM12.4775 10.5744V9.05659H12.0775V10.5744H12.4775ZM10.7598 10.7744H12.2775V10.3744H10.7598V10.7744ZM10.5583 10.976C10.5583 10.8647 10.6485 10.7744 10.7598 10.7744V10.3744C10.4276 10.3744 10.1583 10.6438 10.1583 10.976H10.5583ZM10.7598 11.1776C10.6485 11.1776 10.5583 11.0873 10.5583 10.976H10.1583C10.1583 11.3082 10.4276 11.5776 10.7598 11.5776V11.1776ZM12.2775 11.1776H10.7598V11.5776H12.2775V11.1776ZM12.4775 12.8953V11.3776H12.0775V12.8953H12.4775ZM12.6791 13.0969C12.5678 13.0969 12.4775 13.0066 12.4775 12.8953H12.0775C12.0775 13.2275 12.3468 13.4969 12.6791 13.4969V13.0969ZM12.8806 12.8953C12.8806 13.0066 12.7904 13.0969 12.6791 13.0969V13.4969C13.0113 13.4969 13.2806 13.2275 13.2806 12.8953H12.8806ZM12.8806 11.3776V12.8953H13.2806V11.3776H12.8806ZM14.5986 11.1776H13.0806V11.5776H14.5986V11.1776ZM14.8001 10.976C14.8001 11.0873 14.7099 11.1776 14.5986 11.1776V11.5776C14.9308 11.5776 15.2001 11.3082 15.2001 10.976H14.8001ZM14.5986 10.7744C14.7099 10.7744 14.8001 10.8647 14.8001 10.976H15.2001C15.2001 10.6438 14.9308 10.3744 14.5986 10.3744V10.7744ZM13.0806 10.7744H14.5986V10.3744H13.0806V10.7744Z", fill: "currentColor", mask: "url(#path-2-outside-1_6891_65)" }));
 
+const SvgDashboardIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.5453 15.652C10.2568 15.3525 9.8837 15.1313 9.4568 15.029L7.91394 14.6593V13.7174H6.02987V14.6623L4.49101 15.0299C3.48478 15.2703 2.7749 16.1697 2.7749 17.2042V19.725H6.18598L10.5453 15.652Z", fill: "#78D2FA" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.95401 13.7174V14.6847L6.97624 17.0268L5.99951 14.6881V13.7174H7.95401Z", fill: "#FFB487" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M9.0732 10.4723V11.7769C9.0732 12.9367 8.13296 13.8769 6.97312 13.8769C5.81328 13.8769 4.87305 12.9367 4.87305 11.7769V10.4723H9.0732Z", fill: "#FFCDAC" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M9.0732 10.885V10.3794C9.0732 9.21962 8.13296 8.27942 6.97312 8.27942C5.81328 8.27942 4.87305 9.21962 4.87305 10.3794V10.885H6.32066C7.22718 10.885 8.11672 10.6388 8.89432 10.1729", fill: "#878791" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M13.4541 15.652C13.7426 15.3525 14.1157 15.1313 14.5426 15.029L16.0854 14.6593V13.7174H17.9695V14.6623L19.5084 15.0299C20.5146 15.2703 21.2245 16.1697 21.2245 17.2042V19.725H17.8134L13.4541 15.652Z", fill: "#A5DC69" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.6856 15.6151L8.53663 16.1301C7.13608 16.4657 6.14844 17.7179 6.14844 19.1581V21.225H17.8436V19.1599C17.8436 17.7189 16.8548 16.4662 15.4532 16.1313L13.3099 15.6193L10.6856 15.6151Z", fill: "#FF5A5A" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M17.9999 13.7174V14.6881L17.0232 17.0268L16.0454 14.6847V13.7174H17.9999Z", fill: "#FFB487" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.0002 18.6277L13.3993 15.4511C13.2955 15.2767 13.2363 15.0738 13.2363 14.8589V14.5536H10.7626V14.859C10.7626 15.0735 10.7036 15.2761 10.6001 15.4503L12.0002 18.6277Z", fill: "#FFB487" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.9247 9.58215V11.6004C14.9247 13.2158 13.6151 14.5254 11.9997 14.5254C10.3843 14.5254 9.07471 13.2158 9.07471 11.6004V9.58215H14.9247Z", fill: "#FFCDAC" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.9997 6.72888C10.3843 6.72888 9.07471 8.03846 9.07471 9.65388V10.358H10.5048C11.4555 10.358 12.3574 9.93708 12.968 9.20842L14.9247 10.358V9.65388C14.9248 8.03846 13.6152 6.72888 11.9997 6.72888Z", fill: "#F5B955" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.9263 10.4723V11.7769C14.9263 12.9367 15.8665 13.8769 17.0263 13.8769C18.1862 13.8769 19.1264 12.9367 19.1264 11.7769V10.4723H14.9263Z", fill: "#FFCDAC" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.9263 10.885V10.3794C14.9263 9.21962 15.8665 8.27942 17.0263 8.27942C18.1862 8.27942 19.1264 9.21962 19.1264 10.3794V10.885H17.6788C16.7723 10.885 15.8827 10.6388 15.1051 10.1729", fill: "#878791" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.9906 20.85C11.8917 20.85 11.7947 20.8901 11.7249 20.9599C11.655 21.0296 11.6147 21.1264 11.6147 21.225C11.6147 21.3236 11.6549 21.4204 11.7249 21.4901C11.7947 21.5599 11.8917 21.6 11.9906 21.6C12.0895 21.6 12.1864 21.5599 12.2563 21.4901C12.3262 21.4204 12.3665 21.3236 12.3665 21.225C12.3665 21.1264 12.3263 21.0296 12.2563 20.9599C12.1864 20.8901 12.0895 20.85 11.9906 20.85Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M19.5959 14.6652L18.345 14.3663V13.8701C19.0393 13.4313 19.5018 12.6573 19.5018 11.7769V10.3794C19.5018 9.01469 18.3915 7.90443 17.0267 7.90443C16.2905 7.90443 15.6287 8.22791 15.175 8.73974C14.7775 7.36338 13.5064 6.35388 12.0038 6.35388H12.0038C10.4987 6.35388 9.22588 7.36657 8.83067 8.74631C8.37677 8.23068 7.71256 7.90443 6.97322 7.90443C5.60844 7.90443 4.49814 9.01473 4.49814 10.3794V11.7769C4.49814 12.6573 4.96059 13.4313 5.65494 13.8701V14.3663L4.40402 14.6652C3.224 14.947 2.3999 15.9911 2.3999 17.2042V19.725C2.3999 19.9321 2.56783 20.1 2.7749 20.1H5.77351V21.225C5.77351 21.4321 5.94144 21.6 6.14851 21.6H10.2624C10.4695 21.6 10.6374 21.4321 10.6374 21.225C10.6374 21.0179 10.4695 20.85 10.2624 20.85H8.5883V19.1995C8.5883 18.9924 8.42038 18.8245 8.2133 18.8245C8.00623 18.8245 7.8383 18.9924 7.8383 19.1995V20.85H6.52348V19.1581C6.52348 17.8863 7.38725 16.7911 8.62404 16.4947L10.4684 16.0528L11.6551 18.7526C11.715 18.8888 11.8496 18.9767 11.9984 18.9767H11.9984C12.1471 18.9767 12.2818 18.8888 12.3417 18.7527L13.5272 16.0567L15.3662 16.4961C16.6041 16.7917 17.4686 17.8872 17.4686 19.1598V19.5783C17.4495 19.6234 17.4388 19.6729 17.4388 19.725C17.4388 19.777 17.4495 19.8266 17.4686 19.8716V20.85H16.1615V19.1995C16.1615 18.9924 15.9936 18.8245 15.7865 18.8245C15.5794 18.8245 15.4115 18.9924 15.4115 19.1995V20.85H13.5749C13.3679 20.85 13.1999 21.0179 13.1999 21.225C13.1999 21.4321 13.3679 21.6 13.5749 21.6H17.8436C18.0507 21.6 18.2186 21.4321 18.2186 21.225V20.1H21.2249C21.432 20.1 21.5999 19.9321 21.5999 19.725V17.2042C21.5999 15.9911 20.7758 14.947 19.5959 14.6652ZM17.5958 14.6826L17.0233 16.0535L16.4584 14.7006C16.4599 14.687 16.461 14.6733 16.461 14.6596C16.461 14.6561 16.461 14.6526 16.4609 14.6491V14.1859C16.6427 14.2287 16.832 14.2519 17.0267 14.2519C17.2222 14.2519 17.4124 14.2284 17.5949 14.1853V14.6623C17.5949 14.6691 17.5954 14.6758 17.5958 14.6826ZM10.3106 14.9838C10.0752 14.8378 9.81692 14.7297 9.54422 14.6643L8.28894 14.3635V13.8717C8.60113 13.675 8.86629 13.4105 9.06395 13.099C9.34666 13.6513 9.78058 14.1138 10.3106 14.432V14.9838ZM9.45365 11.6004V10.7331H10.5088C11.466 10.7331 12.3731 10.3548 13.0433 9.68527L14.5516 10.5714V11.6884C14.505 13.0539 13.3804 14.1505 12.0038 14.1505C10.5976 14.1504 9.45365 13.0065 9.45365 11.6004ZM13.6849 14.439C14.2183 14.122 14.6552 13.6591 14.9401 13.1056C15.1373 13.4142 15.4009 13.6763 15.7109 13.8717V14.3635L14.4556 14.6643C14.1812 14.7301 13.9215 14.8392 13.6849 14.9865L13.6849 14.439ZM17.0267 13.5019C16.0755 13.5019 15.3016 12.7281 15.3016 11.7769V11.7157C15.3029 11.6775 15.3038 10.7074 15.3038 10.7074C16.0411 11.07 16.8538 11.26 17.6792 11.26H18.7518V11.777C18.7517 12.7281 17.9779 13.5019 17.0267 13.5019ZM17.0267 8.65443C17.9779 8.65443 18.7517 9.42828 18.7517 10.3794V10.4723V10.51H17.6791C16.8689 10.51 16.0727 10.2972 15.3711 9.89399C15.5813 9.17842 16.2439 8.65443 17.0267 8.65443ZM9.45365 9.65392C9.45365 8.24782 10.5976 7.10392 12.0038 7.10392C13.4099 7.10392 14.5538 8.24786 14.5538 9.65392V9.70282L13.162 8.88513C13.0041 8.79232 12.8023 8.82723 12.6847 8.96759C12.1439 9.61289 11.3509 9.98302 10.5089 9.98302H9.45365V9.65392ZM5.24806 10.3794C5.24806 9.42824 6.02195 8.65443 6.97314 8.65443C7.75588 8.65443 8.4185 9.17842 8.62869 9.89403C7.92703 10.2972 7.1309 10.51 6.32064 10.51H5.24806V10.4723V10.3794ZM5.24806 11.26H6.32068C7.14688 11.26 7.96044 11.0696 8.69822 10.7064V11.7769C8.69822 12.7281 7.92433 13.5019 6.97314 13.5019C6.02195 13.5019 5.24806 12.7281 5.24806 11.7769V11.26ZM6.97314 14.2519C7.16784 14.2519 7.35707 14.2286 7.53894 14.1859V14.6386C7.53853 14.6456 7.53834 14.6527 7.53834 14.6597C7.53834 14.6715 7.53947 14.6833 7.54059 14.695L6.97322 16.0535L6.4037 14.6893C6.40434 14.6803 6.40487 14.6714 6.40487 14.6623V14.1854C6.58745 14.2284 6.77758 14.2519 6.97314 14.2519ZM5.77351 19.1581V19.35H4.6499V17.6839C4.6499 17.4768 4.48198 17.3089 4.2749 17.3089C4.06783 17.3089 3.8999 17.4768 3.8999 17.6839V19.35H3.1499V17.2042C3.1499 16.3396 3.73723 15.5955 4.57817 15.3946L5.76684 15.1107L6.54264 16.969C6.05743 17.5717 5.77351 18.3358 5.77351 19.1581ZM8.44929 15.7654C8.22785 15.8185 8.01624 15.8923 7.81531 15.9834L8.18056 15.1088L9.36943 15.3937C9.46164 15.4158 9.55149 15.445 9.63845 15.4804L8.44929 15.7654ZM11.9985 17.67L11.0606 15.5363V14.7629C11.3596 14.8522 11.6761 14.9004 12.0037 14.9004C12.327 14.9004 12.6395 14.8535 12.9349 14.7664V15.5405L11.9985 17.67ZM14.3545 15.4833C14.4436 15.4465 14.5357 15.4164 14.6304 15.3937L15.8164 15.1095L16.1831 15.988C15.9796 15.8953 15.7651 15.8203 15.5404 15.7666L14.3545 15.4833ZM20.8499 19.35H20.0999V17.6839C20.0999 17.4768 19.932 17.3089 19.7249 17.3089C19.5178 17.3089 19.3499 17.4768 19.3499 17.6839V19.35H18.2186V19.1599C18.2186 18.3387 17.9357 17.5757 17.4518 16.9734L18.2301 15.11L19.4216 15.3946C20.2626 15.5955 20.8499 16.3396 20.8499 17.2042V19.35Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.7426 11.0719C10.6437 11.0719 10.5467 11.112 10.4768 11.1818C10.4069 11.2515 10.3667 11.3483 10.3667 11.4469C10.3667 11.5455 10.4069 11.6423 10.4768 11.712C10.5468 11.7818 10.6437 11.8219 10.7426 11.8219C10.8418 11.8219 10.9384 11.7818 11.0083 11.712C11.0786 11.6423 11.1184 11.5455 11.1184 11.4469C11.1184 11.3483 11.0786 11.2515 11.0083 11.1818C10.9384 11.112 10.8414 11.0719 10.7426 11.0719Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M13.2504 11.8219C13.3492 11.8219 13.4462 11.7818 13.5161 11.712C13.5864 11.6423 13.6262 11.5455 13.6262 11.4469C13.6262 11.3483 13.5864 11.2515 13.5161 11.1818C13.4462 11.112 13.3492 11.0719 13.2504 11.0719C13.1515 11.0719 13.0546 11.112 12.9846 11.1818C12.9147 11.2515 12.8745 11.3483 12.8745 11.4469C12.8745 11.5455 12.9147 11.6423 12.9846 11.712C13.0546 11.7818 13.1515 11.8219 13.2504 11.8219Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.7217 12.4441C12.5752 12.2976 12.3378 12.2976 12.1913 12.4441C12.0804 12.5549 11.9 12.5549 11.7891 12.4441C11.6426 12.2976 11.4053 12.2976 11.2588 12.4441C11.1123 12.5905 11.1123 12.8279 11.2588 12.9744C11.4604 13.1761 11.7253 13.2769 11.9902 13.2769C12.2551 13.2769 12.52 13.1761 12.7216 12.9744C12.8681 12.8279 12.8681 12.5905 12.7217 12.4441Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M17.6479 5.17505H17.9052C18.1122 5.17505 18.2802 5.00716 18.2802 4.80005C18.2802 4.59294 18.1122 4.42505 17.9052 4.42505H17.6479C17.4409 4.42505 17.2729 4.59294 17.2729 4.80005C17.2729 5.00716 17.4409 5.17505 17.6479 5.17505Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M19.4673 5.17505H19.7245C19.9316 5.17505 20.0995 5.00716 20.0995 4.80005C20.0995 4.59294 19.9316 4.42505 19.7245 4.42505H19.4673C19.2602 4.42505 19.0923 4.59294 19.0923 4.80005C19.0923 5.00716 19.2602 5.17505 19.4673 5.17505Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M18.6874 6.21339C18.8949 6.21339 19.0633 6.0455 19.0633 5.83839V5.58118C19.0633 5.37406 18.8949 5.20618 18.6874 5.20618C18.4798 5.20618 18.3115 5.37406 18.3115 5.58118V5.83839C18.3115 6.0455 18.4798 6.21339 18.6874 6.21339Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M18.6874 4.39381C18.8949 4.39381 19.0633 4.22592 19.0633 4.01881V3.7616C19.0633 3.55448 18.8949 3.3866 18.6874 3.3866C18.4798 3.3866 18.3115 3.55448 18.3115 3.7616V4.01881C18.3115 4.22592 18.4798 4.39381 18.6874 4.39381Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M4.25391 5.17505H4.51108C4.71816 5.17505 4.88608 5.00716 4.88608 4.80005C4.88608 4.59294 4.71816 4.42505 4.51108 4.42505H4.25391C4.04683 4.42505 3.87891 4.59294 3.87891 4.80005C3.87891 5.00716 4.04683 5.17505 4.25391 5.17505Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M6.07324 5.17505H6.33042C6.53749 5.17505 6.70542 5.00716 6.70542 4.80005C6.70542 4.59294 6.53749 4.42505 6.33042 4.42505H6.07324C5.86617 4.42505 5.69824 4.59294 5.69824 4.80005C5.69824 5.00716 5.86613 5.17505 6.07324 5.17505Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M5.29286 6.21339C5.50041 6.21339 5.66873 6.0455 5.66873 5.83839V5.58118C5.66873 5.37406 5.50041 5.20618 5.29286 5.20618C5.08531 5.20618 4.91699 5.37406 4.91699 5.58118V5.83839C4.91699 6.0455 5.08527 6.21339 5.29286 6.21339Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M5.29286 4.39381C5.50041 4.39381 5.66873 4.22592 5.66873 4.01881V3.7616C5.66873 3.55448 5.50041 3.3866 5.29286 3.3866C5.08531 3.3866 4.91699 3.55448 4.91699 3.7616V4.01881C4.91699 4.22592 5.08527 4.39381 5.29286 4.39381Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.0004 5.56487C12.2079 5.56487 12.3762 5.39698 12.3762 5.18987V4.20325C12.3762 3.99613 12.2079 3.82825 12.0004 3.82825C11.7928 3.82825 11.6245 3.99613 11.6245 4.20325V5.18987C11.6245 5.39698 11.7928 5.56487 12.0004 5.56487Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.0004 3.15002C12.0992 3.15002 12.1962 3.1099 12.2661 3.04015C12.336 2.9704 12.3762 2.87365 12.3762 2.77502C12.3762 2.6764 12.336 2.57965 12.2661 2.5099C12.1962 2.44015 12.0992 2.40002 12.0004 2.40002C11.9015 2.40002 11.8046 2.44015 11.7346 2.5099C11.6647 2.57965 11.6245 2.6764 11.6245 2.77502C11.6245 2.87365 11.6647 2.9704 11.7346 3.04015C11.8046 3.1099 11.9015 3.15002 12.0004 3.15002Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.1552 4.43482C10.2285 4.50805 10.3244 4.54465 10.4204 4.54465C10.5163 4.54465 10.6123 4.50805 10.6855 4.43482C10.832 4.28838 10.832 4.05093 10.6855 3.90445L10.1368 3.35568C9.9903 3.20924 9.75292 3.20924 9.60641 3.35568C9.45997 3.50212 9.45997 3.73957 9.60641 3.88604L10.1552 4.43482Z", fill: "black" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M13.5606 4.54236C13.6566 4.54236 13.7525 4.50576 13.8257 4.43252L14.3929 3.86541C14.5393 3.71897 14.5393 3.48152 14.3929 3.33505C14.2464 3.18861 14.009 3.18861 13.8625 3.33505L13.2954 3.90216C13.1489 4.0486 13.1489 4.28605 13.2954 4.43252C13.3687 4.50576 13.4646 4.54236 13.5606 4.54236Z", fill: "black" }));
+
 let Components = {};
 Components['success'] = SvgSuccess;
 Components['alert'] = SvgAlert;
@@ -781,9 +783,10 @@ Components['no_data'] = SvgNoData;
 Components['add_user'] = SvgAddUser;
 Components['add_to_archive'] = SvgAddArchive;
 Components['remove_user'] = SvgRemoveUser;
+Components['dashboard_icon'] = SvgDashboardIcon; //TODO:this is temporary icon
 
-var css_248z$17 = ".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}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover {\n  border-radius: 4px;\n  background-color: white;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n\n.ff-icon-click {\n  cursor: pointer;\n  box-sizing: content-box;\n}\n.ff-icon-click:hover {\n  border-radius: 4px;\n  background-color: var(--ff-icon-hover-fill-color);\n}\n.ff-icon-click:hover > svg {\n  color: var(--brand-color);\n}\n\n.ff-icon-disabled {\n  cursor: no-drop;\n}\n.ff-icon-disabled > svg {\n  color: var(--toggle-strip-color);\n}\n.ff-icon-disabled:hover {\n  box-shadow: none;\n}\n.ff-icon-disabled:hover > svg {\n  color: var(--toggle-strip-color);\n}";
-styleInject(css_248z$17);
+var css_248z$18 = ".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}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover {\n  border-radius: 4px;\n  background-color: white;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n\n.ff-icon-click {\n  cursor: pointer;\n  box-sizing: content-box;\n}\n.ff-icon-click:hover {\n  border-radius: 4px;\n  background-color: var(--ff-icon-hover-fill-color);\n}\n.ff-icon-click:hover > svg {\n  color: var(--brand-color);\n}\n\n.ff-icon-disabled {\n  cursor: no-drop;\n}\n.ff-icon-disabled > svg {\n  color: var(--toggle-strip-color);\n}\n.ff-icon-disabled:hover {\n  box-shadow: none;\n}\n.ff-icon-disabled:hover > svg {\n  color: var(--toggle-strip-color);\n}";
+styleInject(css_248z$18);
 
 const Icon = /*#__PURE__*/React.forwardRef(({
   name,
@@ -859,8 +862,8 @@ const Icon = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-var css_248z$16 = "/* poppins-latin-400-normal */\n@font-face {\n  font-family: \"Poppins\";\n  font-style: normal;\n  font-display: swap;\n  font-weight: 400;\n  src: url(@fontsource/poppins/files/poppins-latin-400-normal.woff2) format(\"woff2\"), url(@fontsource/poppins/files/poppins-latin-400-normal.woff) format(\"woff\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n.ff-text {\n  font-family: \"Poppins\";\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$16);
+var css_248z$17 = "/* poppins-latin-400-normal */\n@font-face {\n  font-family: \"Poppins\";\n  font-style: normal;\n  font-display: swap;\n  font-weight: 400;\n  src: url(@fontsource/poppins/files/poppins-latin-400-normal.woff2) format(\"woff2\"), url(@fontsource/poppins/files/poppins-latin-400-normal.woff) format(\"woff\");\n  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;\n}\n.ff-text {\n  font-family: \"Poppins\";\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$17);
 
 const Typography = ({
   fontWeight = 'regular',
@@ -940,8 +943,8 @@ const Button$1 = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-var css_248z$15 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-drawer-container .ff-overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--drawer-title-color);\n  opacity: 0.5;\n  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$15);
+var css_248z$16 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-drawer-container .ff-drawer .ff-drawer-header .ff-drawer-title {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-drawer-container .ff-overlay {\n  position: fixed;\n  inset: 0;\n  background-color: var(--drawer-title-color);\n  opacity: 0.5;\n  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$16);
 
 function useEscapeKey(key) {
   return callBack => {
@@ -959,8 +962,8 @@ function useEscapeKey(key) {
   };
 }
 
-var css_248z$14 = ":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  --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  --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  --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  --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$14);
+var css_248z$15 = ":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  --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  --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  --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  --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$15);
 
 const ThemeContext = /*#__PURE__*/React.createContext(undefined);
 const ThemeProvider = ({
@@ -1154,15 +1157,15 @@ const Drawer = ({
   }), document.body);
 };
 
-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-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-accordion {\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  min-width: fit-content;\n}\n.ff-accordion .accordion-header {\n  display: flex;\n  justify-content: space-between;\n  min-height: 32px;\n}\n.ff-accordion .accordion-header .header-title {\n  padding: 8px;\n}\n.ff-accordion .accordion-header .accordion-arrow {\n  display: flex;\n  padding: 8px;\n  align-items: center;\n  transition: transform 0.3s ease;\n}\n.ff-accordion .accordion-header .accordion-arrow.expanded {\n  transform: rotate(180deg);\n}\n.ff-accordion .accordion-header .accordion-arrow:hover {\n  color: var(--tooltip-bg-color);\n}\n.ff-accordion .accordion-header.expanded {\n  background-color: var(--hover-color);\n  border-bottom: 1px solid var(--hover-color);\n}\n.ff-accordion .accordion-header:hover {\n  background-color: var(--hover-color);\n}\n.ff-accordion .accordion-content {\n  padding: 4px;\n}";
+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 {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-accordion {\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  min-width: fit-content;\n}\n.ff-accordion .accordion-header {\n  display: flex;\n  justify-content: space-between;\n  min-height: 32px;\n  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$14);
+
+var css_248z$13 = "";
 styleInject(css_248z$13);
 
-var css_248z$12 = "";
+var css_248z$12 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-tooltip-container {\n  cursor: pointer;\n  display: inline-block;\n}\n\n.ff-tooltip {\n  position: fixed;\n  width: max-content;\n  max-width: 60vw;\n  word-wrap: break-word;\n  background-color: var(--tooltip-bg-color);\n  line-height: 18px;\n  color: var(--tooltip-text-color);\n  text-align: center;\n  border-radius: 5px;\n  padding: 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$12);
 
-var css_248z$11 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-tooltip-container {\n  cursor: pointer;\n  display: inline-block;\n}\n\n.ff-tooltip {\n  position: fixed;\n  width: max-content;\n  max-width: 60vw;\n  word-wrap: break-word;\n  background-color: var(--tooltip-bg-color);\n  line-height: 18px;\n  color: var(--tooltip-text-color);\n  text-align: center;\n  border-radius: 5px;\n  padding: 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$11);
-
 const checkEmpty = value => {
   // Check for null or undefined
   if (value == null) return true;
@@ -1352,28 +1355,28 @@ const Accordion = ({
   };
   return jsxRuntime.jsxs("div", {
     className: "ff-accordion",
-    children: [jsxRuntime.jsx(Tooltip, {
-      title: disableInfoMessage,
-      children: jsxRuntime.jsxs("div", {
-        className: `accordion-header ${disable && 'ff-disabled'} ${isAccordionExpanded && 'expanded'}`,
-        style: {
-          color: color || '--tooltip-bg-color'
-        },
-        children: [jsxRuntime.jsx(Typography, {
+    children: [jsxRuntime.jsxs("div", {
+      className: `accordion-header ${disable && 'ff-disabled'} ${isAccordionExpanded && 'expanded'}`,
+      style: {
+        color: color || '--tooltip-bg-color'
+      },
+      onClick: () => {
+        !disable && onAccordionClick();
+      },
+      children: [jsxRuntime.jsx(Tooltip, {
+        title: disableInfoMessage,
+        children: jsxRuntime.jsx(Typography, {
           as: "div",
           className: "header-title",
           fontWeight: "semi-bold",
           lineHeight: "18px",
           children: headerTitle
-        }), jsxRuntime.jsx(Icon, {
-          name: 'arrow_up',
-          hoverEffect: false,
-          className: `accordion-arrow  ${isAccordionExpanded && 'expanded'}`,
-          onClick: () => {
-            !disable && onAccordionClick();
-          }
-        })]
-      })
+        })
+      }), jsxRuntime.jsx(Icon, {
+        name: 'arrow_down',
+        hoverEffect: false,
+        className: `accordion-arrow  ${isAccordionExpanded && 'expanded'}`
+      })]
     }), !disable && isAccordionExpanded && jsxRuntime.jsx("div", {
       style: {
         minHeight
@@ -1384,8 +1387,8 @@ const Accordion = ({
   });
 };
 
-var css_248z$10 = ".fontXs, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-parent-container .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .default-label, .ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-parent-container .ff-multiselect-more-chip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-multiselect-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-32 {\n  font-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-parent-container {\n  width: 100%;\n  display: flex;\n  justify-content: space-between;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-parent-container .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-parent-container .ff-multiselect-chip-container .ff-multiselect-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  border: 0.5px solid #f1ebf2;\n  padding: 0 1px 0 4px;\n  gap: 4px;\n  height: 16px;\n  border-radius: 15px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-parent-container .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-parent-container .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-label.label-padding {\n  padding: 5px 2px;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-parent-container .ff-multiselect-chip-container .ff-multiselect-chip .ff-multiselect-chip-close-icon {\n  color: var(--brand-color);\n  cursor: pointer;\n}\n.ff-multiselect-container-with-icon .ff-multiselect-wrapper .ff-multiselect__main .ff-multiselect-chip-parent-container .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-parent-container .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-parent-container .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__main .ff-multiselect-chip-parent-container .ff-multiselect-more-chip {\n  display: flex;\n  align-items: center;\n  width: 16px;\n  font-weight: 600;\n  line-height: 16px;\n  color: var(--brand-color);\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$10);
+var css_248z$11 = ".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-32 {\n  font-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$11);
 
 const dropdownDefaultCSSData$1 = {
   verticalMargin: 4,
@@ -1393,11 +1396,11 @@ const dropdownDefaultCSSData$1 = {
   maxDropdownHeight: 160
 };
 
-var css_248z$$ = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-multiselect-dropdown-container .no-options, .ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-multiselect-dropdown-container {\n  position: absolute;\n  background: var(--drawer-footer-bg);\n  z-index: 1000;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  border: 0.5px solid var(--ff-select-option-border-color);\n  border-radius: 4px;\n  box-sizing: border-box;\n  margin-block: 4px;\n  max-height: 160px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper {\n  max-height: 128px;\n  overflow-y: auto;\n  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$$);
+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, .ff-multiselect-dropdown-container .no-options, .ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-multiselect-dropdown-container {\n  position: absolute;\n  background: var(--drawer-footer-bg);\n  z-index: 1000;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  border: 0.5px solid var(--ff-select-option-border-color);\n  border-radius: 4px;\n  box-sizing: border-box;\n  margin-block: 4px;\n  max-height: 160px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper {\n  max-height: 128px;\n  overflow-y: auto;\n  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$10);
 
-var css_248z$_ = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-checkbox--overlay {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  cursor: pointer;\n  position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n  display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--checkbox-border-color);\n  box-sizing: border-box;\n  border-radius: 2px;\n  margin-right: 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$_);
+var css_248z$$ = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-checkbox--overlay {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  cursor: pointer;\n  position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n  display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--checkbox-border-color);\n  box-sizing: border-box;\n  border-radius: 2px;\n  margin-right: 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$$);
 
 const Checkbox = ({
   id,
@@ -1563,7 +1566,12 @@ const ChipElement = ({
           placement: "bottom",
           title: label?.length > 25 ? label : '',
           zIndex: zIndex + 1,
-          children: truncateText(label, 25)
+          children: jsxRuntime.jsx(Typography, {
+            fontSize: 10,
+            lineHeight: '14px',
+            className: "stye",
+            children: truncateText(label, 25)
+          })
         })
       }), !disableChip && jsxRuntime.jsx(Icon, {
         className: "ff-multiselect-chip-close-icon",
@@ -1809,6 +1817,7 @@ const MultiSelect = ({
               'active-default-label': isOpen || checkEmpty(highlightedMachine) && !withSelectButton && selectedOptions?.length || isFieldSkipped && required,
               'default-label': !isOpen && !selectedOptions?.length
             }),
+            required: required,
             children: label
           }) : jsxRuntime.jsx("div", {
             ref: inputRef,
@@ -1818,44 +1827,47 @@ const MultiSelect = ({
               letterSpacing: "0.5px"
             })
           }), !withSelectButton && jsxRuntime.jsxs("div", {
-            className: 'ff-multiselect-chip-parent-container',
-            children: [jsxRuntime.jsxs("div", {
-              className: "ff-multiselect-chip-container",
-              children: [displayCount ? jsxRuntime.jsx(jsxRuntime.Fragment, {
-                children: selectedOptions.slice(0, maxVisibleChips).map(option => jsxRuntime.jsx(ChipElement, {
-                  zIndex: zIndex,
-                  label: getLabel(option, labelAccessor) || '',
-                  onChipCloseClick: e => handleChipCloseClick(option, e),
-                  disableChip: option?.isDisabled || false
-                }, getLabel(option, labelAccessor)))
-              }) : selectedOptions.map(option => jsxRuntime.jsx(ChipElement, {
+            className: "ff-multiselect-chip-container",
+            children: [displayCount ? jsxRuntime.jsx(jsxRuntime.Fragment, {
+              children: selectedOptions.slice(0, maxVisibleChips).map(option => jsxRuntime.jsx(ChipElement, {
                 zIndex: zIndex,
                 label: getLabel(option, labelAccessor) || '',
                 onChipCloseClick: e => handleChipCloseClick(option, e),
                 disableChip: option?.isDisabled || false
-              }, getLabel(option, labelAccessor))), jsxRuntime.jsx("div", {
-                className: "ff-multiselect-input-container",
-                children: jsxRuntime.jsx("input", {
-                  value: searchedKeyword,
-                  type: type,
-                  autoComplete: "off",
-                  placeholder: placeholderForSearching,
-                  ref: inputRef,
-                  onChange: handleSearch,
-                  onKeyDown: handleKeyEnter,
-                  id: "input-ele",
-                  className: "ff-select-input",
-                  style: {
-                    display: isOpen || selectedOptions.length ? 'inherit' : 'none'
-                  }
-                })
-              })]
-            }), hiddenCount > 0 && displayCount && jsxRuntime.jsxs("div", {
-              className: "ff-multiselect-more-chip",
-              onClick: toggleDropdown,
-              children: ["+", hiddenCount]
+              }, getLabel(option, labelAccessor)))
+            }) : selectedOptions.map(option => jsxRuntime.jsx(ChipElement, {
+              zIndex: zIndex,
+              label: getLabel(option, labelAccessor) || '',
+              onChipCloseClick: e => handleChipCloseClick(option, e),
+              disableChip: option?.isDisabled || false
+            }, getLabel(option, labelAccessor))), jsxRuntime.jsx("div", {
+              className: "ff-multiselect-input-container",
+              children: jsxRuntime.jsx("input", {
+                value: searchedKeyword,
+                type: type,
+                autoComplete: "off",
+                placeholder: placeholderForSearching,
+                ref: inputRef,
+                onChange: handleSearch,
+                onKeyDown: handleKeyEnter,
+                id: "input-ele",
+                className: "ff-select-input",
+                style: {
+                  display: isOpen || selectedOptions.length ? 'inherit' : 'none'
+                }
+              })
             })]
           })]
+        }), hiddenCount > 0 && displayCount && jsxRuntime.jsx("div", {
+          className: "ff-multiselect-more-chip",
+          onClick: toggleDropdown,
+          children: jsxRuntime.jsxs(Typography, {
+            fontSize: 12,
+            fontWeight: "semi-bold",
+            lineHeight: "16px",
+            color: "var(--brand-color)",
+            children: ["+", hiddenCount]
+          })
         }), jsxRuntime.jsx("div", {
           onClick: e => {
             toggleDropdown(e);
@@ -1904,8 +1916,8 @@ const MultiSelect = ({
   });
 };
 
-var css_248z$Z = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-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$Z);
+var css_248z$_ = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-toaster-overlay {\n  position: fixed;\n  bottom: 0;\n  right: 0;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  pointer-events: none;\n  justify-content: flex-end;\n  align-items: flex-end;\n}\n.ff-toaster-overlay .ff-toaster {\n  background-color: var(--drawer-footer-bg);\n  display: flex;\n  border-radius: 10px;\n  margin: 16px;\n  pointer-events: auto;\n  min-width: 320px;\n  max-width: 600px;\n  gap: 8px;\n  box-shadow: 0px 1px 4px 0px var(--toaster-boxshadow);\n  animation: slideInToasterBottomRight 0.5s forwards;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container {\n  padding: 8px;\n  display: flex;\n  border-radius: 10px;\n  gap: 8px;\n  width: 100%;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  border-radius: 8px;\n  padding: 1px;\n  -webkit-mask: linear-gradient(var(--drawer-footer-bg) 0 0) content-box, linear-gradient(var(--drawer-footer-bg) 0 0);\n  -webkit-mask-composite: xor;\n  mask-composite: exclude;\n  z-index: -1;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: center;\n  gap: 4px;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__title {\n  max-width: 500px;\n  word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__message {\n  max-width: 500px;\n  word-wrap: break-word;\n}\n.ff-toaster-overlay .ff-toaster .ff-toaster-container .ff-toaster-content__prompt {\n  margin-top: 4px;\n  display: flex;\n  gap: 10px;\n}\n.ff-toaster-overlay .ff-toaster--success::before {\n  background: var(--toaster-success-border);\n}\n.ff-toaster-overlay .ff-toaster--warning::before {\n  background: var(--toaster-warning-border);\n}\n.ff-toaster-overlay .ff-toaster--info::before {\n  background: var(--toaster-info-border);\n}\n.ff-toaster-overlay .ff-toaster--danger::before, .ff-toaster-overlay .ff-toaster--confirm::before {\n  background: var(--toaster-danger_confirm-border);\n}\n.ff-toaster-overlay .ff-toaster .ff-close-icon-wrapper {\n  box-sizing: border-box;\n  cursor: pointer;\n  height: fit-content;\n  width: fit-content;\n  border-radius: 8px;\n  padding: 8px;\n  background: var(--toast-close-icon-wrapper-bg);\n  margin-left: auto;\n}\n.ff-toaster-overlay.exiting {\n  animation: slideOutToasterBottomRight 0.5s forwards;\n}\n\n@keyframes slideOutToasterBottomRight {\n  from {\n    transform: translateX(0%);\n  }\n  to {\n    transform: translateX(100%);\n  }\n}\n@keyframes slideInToasterBottomRight {\n  from {\n    transform: translateX(100%);\n  }\n  to {\n    transform: translateX(0%);\n  }\n}\n.fireflink-stories-toaster-container .fireflink-stories-toaster-container-row {\n  display: flex;\n  gap: 5px;\n  margin: 15px;\n}";
+styleInject(css_248z$_);
 
 const Toaster = ({
   isOpen = false,
@@ -2014,8 +2026,8 @@ const Toaster = ({
   }), document.body);
 };
 
-var css_248z$Y = "/* 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$Y);
+var css_248z$Z = "/* 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$Z);
 
 const Container = ({
   children,
@@ -2057,8 +2069,8 @@ const Col = ({
   });
 };
 
-var css_248z$X = ".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$X);
+var css_248z$Y = ".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$Y);
 
 const Toggle = ({
   onChange,
@@ -2136,8 +2148,8 @@ const Toggle = ({
   });
 };
 
-var css_248z$W = ".fontXs, .ff-chip-wrapper .ff-default-chip-style {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-chip-wrapper .ff-default-chip-style--custom {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-chip-wrapper {\n  display: inline-flex;\n  margin: 5px;\n  justify-content: center;\n  align-items: center;\n}\n.ff-chip-wrapper .ff-default-chip-style {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: fit-content;\n  gap: 5px;\n  height: 17px;\n  border-radius: 25px;\n  padding: 1px 6px;\n  line-height: 15px;\n  border: none;\n  transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;\n  box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--fullText:hover {\n  box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n  padding-right: 12px;\n}\n.ff-chip-wrapper .ff-default-chip-style--primary {\n  background-color: var(--ff-chips-fill-color);\n  color: var(--ff-chip-bg);\n  color: var(--ff-chip-text-color);\n}\n.ff-chip-wrapper .ff-default-chip-style--success {\n  background-color: var(--ff-success);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--error {\n  background-color: var(--ff-error-light);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--warning {\n  background-color: var(--ff-warning);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--custom {\n  background: rgba(97, 11, 134, 0.1019607843);\n  color: #610b86;\n  padding: 2px 8px;\n  border-radius: 12px;\n  cursor: pointer;\n  white-space: nowrap;\n  box-shadow: none;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n.ff-chip-wrapper .ff-default-chip-style--custom:hover {\n  background-color: #610b86;\n  color: #fdfaff;\n}\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$W);
+var css_248z$X = ".fontXs, .ff-chip-wrapper .ff-default-chip-style {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-chip-wrapper .ff-default-chip-style--custom {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-chip-wrapper {\n  display: inline-flex;\n  margin: 5px;\n  justify-content: center;\n  align-items: center;\n}\n.ff-chip-wrapper .ff-default-chip-style {\n  display: flex;\n  align-items: center;\n  justify-content: space-around;\n  width: fit-content;\n  gap: 5px;\n  height: 17px;\n  border-radius: 25px;\n  padding: 1px 6px;\n  line-height: 15px;\n  border: none;\n  transition: transform 0.5s ease, box-shadow 0.5s ease, padding 1s ease;\n  box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--fullText:hover {\n  box-shadow: 1px 1px 6px 0px var(--ff-chips-blur-color) inset, -1px -1px 2px 0px var(--ff-chip-bg) inset, 1px -1px 2px 0px var(--ff-chips-blur-color) inset, 1px 1px 2px 0px var(--ff-chip-bg);\n  padding-right: 12px;\n}\n.ff-chip-wrapper .ff-default-chip-style--primary {\n  background-color: var(--ff-chips-fill-color);\n  color: var(--ff-chip-bg);\n  color: var(--ff-chip-text-color);\n}\n.ff-chip-wrapper .ff-default-chip-style--success {\n  background-color: var(--ff-success);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--error {\n  background-color: var(--ff-error-light);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--warning {\n  background-color: var(--ff-warning);\n  color: var(--ff-chip-bg);\n}\n.ff-chip-wrapper .ff-default-chip-style--custom {\n  background: rgba(97, 11, 134, 0.1019607843);\n  color: #610b86;\n  padding: 2px 8px;\n  border-radius: 12px;\n  cursor: pointer;\n  white-space: nowrap;\n  box-shadow: none;\n  transition: background-color 0.3s ease, color 0.3s ease;\n}\n.ff-chip-wrapper .ff-default-chip-style--custom:hover {\n  background-color: #610b86;\n  color: #fdfaff;\n}\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$X);
 
 const Chip = ({
   label = '',
@@ -2166,8 +2178,8 @@ const Chip = ({
   });
 };
 
-var css_248z$V = ".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-32 {\n  font-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$V);
+var css_248z$W = ".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-32 {\n  font-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$W);
 
 const Input = ({
   type = 'text',
@@ -2247,8 +2259,8 @@ const Input = ({
   });
 };
 
-var css_248z$U = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-radial-chart-container svg text {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-radial-chart-container {\n  cursor: pointer;\n}\n.ff-radial-chart-container svg text {\n  font-size: var(--fontSize) !important;\n  font-weight: 400;\n}";
-styleInject(css_248z$U);
+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, .ff-radial-chart-container svg text {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-radial-chart-container {\n  cursor: pointer;\n}\n.ff-radial-chart-container svg text {\n  font-size: var(--fontSize) !important;\n  font-weight: 400;\n}";
+styleInject(css_248z$V);
 
 const useColorMappings$1 = () => React.useMemo(() => {
   return {
@@ -2390,8 +2402,8 @@ const RadialChart = ({
   });
 };
 
-var css_248z$T = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-expandable-chip-menu--medium, .ff-expandable-chip-menu .ff-sub-chip--medium {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-expandable-chip-menu {\n  display: inline-flex;\n  gap: 16px;\n  align-items: center;\n  border-radius: 16px;\n  cursor: pointer;\n  overflow: hidden;\n  width: auto;\n  padding: 4px 8px;\n  transition: all 0.3s ease;\n}\n.ff-expandable-chip-menu--primary {\n  border: 0.5px solid var(--brand-color);\n  background-color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-label-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 4px;\n  white-space: nowrap;\n  padding: 2px 0;\n}\n.ff-expandable-chip-menu .ff-label-chip .arrow-icon {\n  height: 14px;\n  width: 14px;\n  display: grid;\n  place-items: center;\n}\n.ff-expandable-chip-menu .ff-label-chip--primary {\n  color: var(--brand-color);\n}\n.ff-expandable-chip-menu--disabled {\n  opacity: 0.5;\n}\n.ff-expandable-chip-menu--disabled:disabled {\n  pointer-events: none;\n}\n.ff-expandable-chip-menu--medium {\n  line-height: 18px;\n}\n.ff-expandable-chip-menu .ff-sub-chips {\n  display: flex;\n  gap: 8px;\n  max-width: 500px;\n  overflow-x: auto;\n  -ms-overflow-style: none;\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 0.3s ease, opacity 0.3s ease;\n  opacity: 0;\n}\n.ff-expandable-chip-menu .ff-sub-chips::-webkit-scrollbar {\n  display: none;\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chips {\n  transform: scaleX(1);\n  opacity: 1;\n}\n.ff-expandable-chip-menu .ff-sub-chip {\n  padding: 2px 8px;\n  border-radius: 12px;\n  white-space: nowrap;\n  transition: background-color 0.3s ease, color 0.3s ease;\n  opacity: 0;\n  transform: translateX(-10px);\n  animation: fadeIn 0.5s ease forwards;\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary {\n  background: var(--expandable-menu-option-bg);\n  color: var(--brand-color);\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary:hover, .ff-expandable-chip-menu .ff-sub-chip--primary.selected {\n  background-color: var(--brand-color);\n  color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-sub-chip--medium {\n  line-height: 18px;\n}\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n    transform: translateX(-10px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chip {\n  animation: fadeIn 0.5s ease forwards;\n}";
-styleInject(css_248z$T);
+var css_248z$U = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-expandable-chip-menu--medium, .ff-expandable-chip-menu .ff-sub-chip--medium {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-expandable-chip-menu {\n  display: inline-flex;\n  gap: 16px;\n  align-items: center;\n  border-radius: 16px;\n  cursor: pointer;\n  overflow: hidden;\n  width: auto;\n  padding: 4px 8px;\n  transition: all 0.3s ease;\n}\n.ff-expandable-chip-menu--primary {\n  border: 0.5px solid var(--brand-color);\n  background-color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-label-chip {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 4px;\n  white-space: nowrap;\n  padding: 2px 0;\n}\n.ff-expandable-chip-menu .ff-label-chip .arrow-icon {\n  height: 14px;\n  width: 14px;\n  display: grid;\n  place-items: center;\n}\n.ff-expandable-chip-menu .ff-label-chip--primary {\n  color: var(--brand-color);\n}\n.ff-expandable-chip-menu--disabled {\n  opacity: 0.5;\n}\n.ff-expandable-chip-menu--disabled:disabled {\n  pointer-events: none;\n}\n.ff-expandable-chip-menu--medium {\n  line-height: 18px;\n}\n.ff-expandable-chip-menu .ff-sub-chips {\n  display: flex;\n  gap: 8px;\n  max-width: 500px;\n  overflow-x: auto;\n  -ms-overflow-style: none;\n  transform: scaleX(0);\n  transform-origin: left;\n  transition: transform 0.3s ease, opacity 0.3s ease;\n  opacity: 0;\n}\n.ff-expandable-chip-menu .ff-sub-chips::-webkit-scrollbar {\n  display: none;\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chips {\n  transform: scaleX(1);\n  opacity: 1;\n}\n.ff-expandable-chip-menu .ff-sub-chip {\n  padding: 2px 8px;\n  border-radius: 12px;\n  white-space: nowrap;\n  transition: background-color 0.3s ease, color 0.3s ease;\n  opacity: 0;\n  transform: translateX(-10px);\n  animation: fadeIn 0.5s ease forwards;\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary {\n  background: var(--expandable-menu-option-bg);\n  color: var(--brand-color);\n}\n.ff-expandable-chip-menu .ff-sub-chip--primary:hover, .ff-expandable-chip-menu .ff-sub-chip--primary.selected {\n  background-color: var(--brand-color);\n  color: var(--expandable-menu-default-bg);\n}\n.ff-expandable-chip-menu .ff-sub-chip--medium {\n  line-height: 18px;\n}\n@keyframes fadeIn {\n  0% {\n    opacity: 0;\n    transform: translateX(-10px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(0);\n  }\n}\n.ff-expandable-chip-menu.expanded .ff-sub-chip {\n  animation: fadeIn 0.5s ease forwards;\n}";
+styleInject(css_248z$U);
 
 const ExpandableMenu = ({
   label = '',
@@ -2458,8 +2470,8 @@ const ExpandableMenu = ({
   });
 };
 
-var css_248z$S = ".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-32 {\n  font-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-brand-color);\n}\n.ff-select-wrapper .ff-select: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 .ff-select-inputField {\n  width: calc(100% - 8px);\n  height: 100%;\n  padding: 0 0 0 8px;\n  border: none;\n  outline: none;\n  letter-spacing: 0.5px;\n  z-index: 10;\n  background: transparent;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__disabled {\n  cursor: not-allowed;\n  color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper {\n  cursor: pointer;\n  height: 100%;\n  padding: 0 8px 0 0;\n  display: flex;\n  align-items: center;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-border-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper__disabled {\n  cursor: not-allowed;\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-labels {\n  position: absolute;\n  left: 8px;\n  color: var(--ff-select-border-color);\n  letter-spacing: 0.5px;\n  line-height: 18px;\n  transition: 0.18s ease all;\n  border-radius: 4px;\n}\n.ff-select-wrapper .ff-select .ff-select-labels__active {\n  transform: translateY(-16px);\n  transition: 0.18s ease all;\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  z-index: 100000;\n}\n.ff-select-wrapper .ff-select__focus {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-labels {\n  color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-labels {\n  transform: translateY(-16px);\n  transition: 0.18s ease all;\n  color: var(--ff-select-brand-color);\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  line-height: 18px;\n  z-index: 100000;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows {\n  transform: rotate(180deg);\n  transition: 0.18s ease all;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__disabled {\n  cursor: not-allowed;\n}\n.ff-select-wrapper .ff-select__disabled:hover {\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-labels {\n  color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-border-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error {\n  border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover {\n  border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-labels {\n  color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-default-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error__focused:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error .ff-select-labels {\n  transform: translateY(-16px);\n  transition: 0.3s ease all;\n  color: var(--error_light);\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  line-height: 18px;\n}\n.ff-select-wrapper .ff-select__no_border {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select__no_border:hover {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-error-msg {\n  padding-left: 8px;\n  letter-spacing: 0.5px;\n}";
-styleInject(css_248z$S);
+var css_248z$T = ".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-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-select-wrapper {\n  min-height: 24px;\n  min-width: 50px;\n}\n.ff-select-wrapper .ff-select {\n  height: 100%;\n  border: 1px solid var(--ff-select-border-color);\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-evenly;\n  position: relative;\n  box-sizing: border-box;\n}\n.ff-select-wrapper .ff-select:hover {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-labels {\n  color: var(--ff-select-default-color);\n}\n.ff-select-wrapper .ff-select:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-text-hover-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField {\n  width: calc(100% - 8px);\n  height: 100%;\n  padding: 0 0 0 8px;\n  border: none;\n  outline: none;\n  letter-spacing: 0.5px;\n  z-index: 10;\n  background: transparent;\n}\n.ff-select-wrapper .ff-select .ff-select-inputField__disabled {\n  cursor: not-allowed;\n  color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper {\n  cursor: pointer;\n  height: 100%;\n  padding: 0 8px 0 0;\n  display: flex;\n  align-items: center;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-border-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select .ff-select-arrows-wrapper__disabled {\n  cursor: not-allowed;\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select .ff-select-labels {\n  position: absolute;\n  left: 8px;\n  color: var(--ff-select-border-color);\n  letter-spacing: 0.5px;\n  line-height: 18px;\n  transition: 0.18s ease all;\n  border-radius: 4px;\n}\n.ff-select-wrapper .ff-select .ff-select-labels__active {\n  transform: translateY(-16px);\n  transition: 0.18s ease all;\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  z-index: 100000;\n}\n.ff-select-wrapper .ff-select__focus {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover {\n  border-color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-labels {\n  color: var(--ff-select-brand-color);\n}\n.ff-select-wrapper .ff-select__focus:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-labels {\n  transform: translateY(-16px);\n  transition: 0.18s ease all;\n  color: var(--ff-select-brand-color);\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  line-height: 18px;\n  z-index: 100000;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows {\n  transform: rotate(180deg);\n  transition: 0.18s ease all;\n}\n.ff-select-wrapper .ff-select__focus .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__disabled {\n  cursor: not-allowed;\n}\n.ff-select-wrapper .ff-select__disabled:hover {\n  border-color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-labels {\n  color: var(--ff-select-border-color);\n}\n.ff-select-wrapper .ff-select__disabled:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-border-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error {\n  border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover {\n  border-color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-labels {\n  color: var(--error_light);\n}\n.ff-select-wrapper .ff-select__error:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-default-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error__focused:hover .ff-select-arrows-wrapper .ff-select-arrows svg path {\n  fill: var(--ff-select-brand-color);\n  transition: all 0.18s ease;\n}\n.ff-select-wrapper .ff-select__error .ff-select-labels {\n  transform: translateY(-16px);\n  transition: 0.3s ease all;\n  color: var(--error_light);\n  background-color: var(--ff-select-background-color);\n  padding: 0 2px;\n  line-height: 18px;\n}\n.ff-select-wrapper .ff-select__no_border {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select__no_border:hover {\n  border-color: transparent;\n}\n.ff-select-wrapper .ff-select-error-msg {\n  padding-left: 8px;\n  letter-spacing: 0.5px;\n}";
+styleInject(css_248z$T);
 
 const dropdownDefaultCSSData = {
   margin: 6,
@@ -2468,8 +2480,8 @@ const dropdownDefaultCSSData = {
   dropDownWrapperPadding: 0
 };
 
-var css_248z$R = ".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$R);
+var css_248z$S = ".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$S);
 
 const ffid = () => 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, char => ((char === 'x' ? Math.random() * 16 : Math.random() * 16 & 0x3 | 0x8) | 0).toString(16));
 
@@ -2796,8 +2808,8 @@ const Select$1 = ({
       })]
     }), errorMsg && jsxRuntime.jsx(Typography, {
       as: "div",
-      lineHeight: "12px",
-      fontSize: 8,
+      lineHeight: "15px",
+      fontSize: 10,
       color: "var(--error_light)",
       className: "ff-select-error-msg",
       children: errorMsg
@@ -2819,8 +2831,8 @@ const Select$1 = ({
   });
 };
 
-var css_248z$Q = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-textarea-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n  display: flex;\n  color: var(--text-area-default-color);\n  justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n  padding: 8px;\n  width: 100%;\n  min-height: 80px;\n  gap: 0px;\n  border: 1px solid var(--default-icon-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n  font-weight: 400;\n}\n.ff-textarea-container .ff-textarea--resize {\n  resize: none;\n}\n.ff-textarea-container .ff-textarea:disabled, .ff-textarea-container .ff-textarea-label-container:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ff-textarea-container .ff-textarea:disabled:hover, .ff-textarea-container .ff-textarea-label-container:disabled:hover {\n  border-color: var(--default-icon-color);\n  color: inherit;\n}\n.ff-textarea-container .ff-textarea::placeholder, .ff-textarea-container .ff-textarea-label-container::placeholder {\n  opacity: 0;\n}\n.ff-textarea-container .ff-textarea--danger {\n  border-color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea--transparentBackground {\n  background: transparent;\n}\n.ff-textarea-container .ff-textarea-label-container {\n  display: flex;\n  position: absolute;\n  border: none;\n  outline: none;\n  margin-top: 1px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label {\n  padding: 1px;\n  height: 10px;\n  width: auto;\n  background-color: var(--drawer-footer-bg);\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label--danger {\n  color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea-label-container .required-asterisk {\n  color: var(--error_light);\n}\n.ff-textarea-container:hover .ff-textarea-label {\n  color: var(--text-color);\n}\n.ff-textarea-container:hover .ff-textarea, .ff-textarea-container:hover .ff-textarea-label-container {\n  border-color: var(--text-color);\n}\n.ff-textarea-container:focus-within .ff-textarea-label-container {\n  font-weight: 400;\n  line-height: 12px;\n  letter-spacing: 0.5px;\n  text-align: left;\n  top: -6px;\n  background-color: transparent;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container:focus-within .ff-textarea-label--primary {\n  color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea--primary {\n  border-color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-textarea-container .ff-textarea-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-textarea-container .ff-textarea-message--danger {\n  color: var(--error_light);\n}\n.ff-textarea-container--float .ff-textarea-label-container {\n  letter-spacing: 0.5px;\n  top: -6px;\n  background-color: transparent;\n  line-height: 12px;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container--disabled {\n  cursor: not-allowed;\n}\n.ff-textarea-container--disabled:hover .ff-textarea-label {\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container--disabled:hover .ff-textarea, .ff-textarea-container--disabled:hover .ff-textarea-container .ff-textarea-label-container, .ff-textarea-container .ff-textarea-container--disabled:hover .ff-textarea-label-container {\n  border-color: var(--default-icon-color);\n}\n.ff-textarea-container--disabled .ff-textarea-label-container {\n  cursor: not-allowed;\n}";
-styleInject(css_248z$Q);
+var css_248z$R = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-textarea-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n  display: flex;\n  color: var(--text-area-default-color);\n  justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n  padding: 8px;\n  width: 100%;\n  min-height: 80px;\n  gap: 0px;\n  border: 1px solid var(--default-icon-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n  font-weight: 400;\n}\n.ff-textarea-container .ff-textarea--resize {\n  resize: none;\n}\n.ff-textarea-container .ff-textarea:disabled, .ff-textarea-container .ff-textarea-label-container:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ff-textarea-container .ff-textarea:disabled:hover, .ff-textarea-container .ff-textarea-label-container:disabled:hover {\n  border-color: var(--default-icon-color);\n  color: inherit;\n}\n.ff-textarea-container .ff-textarea::placeholder, .ff-textarea-container .ff-textarea-label-container::placeholder {\n  opacity: 0;\n}\n.ff-textarea-container .ff-textarea--danger {\n  border-color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea--transparentBackground {\n  background: transparent;\n}\n.ff-textarea-container .ff-textarea-label-container {\n  display: flex;\n  position: absolute;\n  border: none;\n  outline: none;\n  margin-top: 1px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label {\n  padding: 1px;\n  height: 10px;\n  width: auto;\n  background-color: var(--drawer-footer-bg);\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label--danger {\n  color: var(--error_light);\n}\n.ff-textarea-container .ff-textarea-label-container .required-asterisk {\n  color: var(--error_light);\n}\n.ff-textarea-container:hover .ff-textarea-label {\n  color: var(--text-color);\n}\n.ff-textarea-container:hover .ff-textarea, .ff-textarea-container:hover .ff-textarea-label-container {\n  border-color: var(--text-color);\n}\n.ff-textarea-container:focus-within .ff-textarea-label-container {\n  font-weight: 400;\n  line-height: 12px;\n  letter-spacing: 0.5px;\n  text-align: left;\n  top: -6px;\n  background-color: transparent;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container:focus-within .ff-textarea-label--primary {\n  color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea--primary {\n  border-color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-textarea-container .ff-textarea-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-textarea-container .ff-textarea-message--danger {\n  color: var(--error_light);\n}\n.ff-textarea-container--float .ff-textarea-label-container {\n  letter-spacing: 0.5px;\n  top: -6px;\n  background-color: transparent;\n  line-height: 12px;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container--disabled {\n  cursor: not-allowed;\n}\n.ff-textarea-container--disabled:hover .ff-textarea-label {\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container--disabled:hover .ff-textarea, .ff-textarea-container--disabled:hover .ff-textarea-container .ff-textarea-label-container, .ff-textarea-container .ff-textarea-container--disabled:hover .ff-textarea-label-container {\n  border-color: var(--default-icon-color);\n}\n.ff-textarea-container--disabled .ff-textarea-label-container {\n  cursor: not-allowed;\n}";
+styleInject(css_248z$R);
 
 const Textarea = ({
   capacity = 200,
@@ -2890,8 +2902,8 @@ const Textarea = ({
   });
 };
 
-var css_248z$P = ".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$P);
+var css_248z$Q = ".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$Q);
 
 const StatusButton = ({
   status = 'passed',
@@ -2924,8 +2936,8 @@ const StatusButton = ({
   });
 };
 
-var css_248z$O = ".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-32 {\n  font-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$O);
+var css_248z$P = ".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-32 {\n  font-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$P);
 
 const Option$1 = ({
   option,
@@ -3108,8 +3120,8 @@ const MenuOption = ({
   });
 };
 
-var css_248z$N = ".ff-fixed-header-table {\n  overflow-y: auto;\n}\n\n.ff-table-icon {\n  position: absolute;\n  top: 10px;\n  right: 0;\n  margin-right: 10px;\n  z-index: 100;\n  cursor: pointer;\n}\n\n.ff-table {\n  width: 100%;\n}\n.ff-table th,\n.ff-table td {\n  text-align: left;\n  font-size: 12px;\n  padding: 9px 8px;\n}\n.ff-table thead tr th {\n  border-bottom: 1px solid var(--slider-table-color);\n}\n.ff-table thead tr th .ff-label-checkbox-container {\n  display: flex;\n  align-items: center;\n}\n.ff-table thead tr th .ff-label-checkbox-container .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table tbody tr .action-column {\n  opacity: 0;\n}\n.ff-table tbody tr .icon-container {\n  padding-left: 10px;\n  opacity: 0;\n  display: flex;\n  justify-content: flex-end;\n  transition: opacity 0.3s ease, transform 0.3s ease;\n  transform: translateX(20px);\n}\n.ff-table tbody tr:hover {\n  background-color: var(--hover-color);\n}\n.ff-table tbody tr:hover .icon-container {\n  opacity: 1;\n  transform: translateX(0);\n}\n.ff-table tbody tr td {\n  position: relative;\n  color: var(--table-column-text-color);\n}\n.ff-table tbody tr td.clickable-cell {\n  cursor: pointer;\n}\n.ff-table tbody tr td .ff-data-checkbox-container {\n  display: flex;\n  align-items: center;\n}\n.ff-table tbody tr td .ff-data-checkbox-container .ff-table-checkbox {\n  padding-right: 8px;\n}\n.ff-table .primary-bg {\n  background-color: var(--brand-color);\n}\n.ff-table .secondary-bg {\n  background-color: var(--slider-table-color);\n}\n.ff-table .default-bg {\n  background-color: transparent;\n}\n.ff-table .default-color {\n  color: var(--table-header-text-color);\n}\n.ff-table .primary-color {\n  color: var(--brand-color);\n}\n\n.border-borderRadius {\n  border: 1px solid var(--slider-table-color);\n  border-radius: 5px;\n  border-collapse: none !important;\n}\n\n.ff-fixed-header {\n  position: sticky !important;\n  top: 0;\n  z-index: 99;\n  background-color: Var(--file-details-bg);\n}\n\n.no-data-content {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\ntbody tr.disabled-row {\n  opacity: 0.5;\n  cursor: not-allowed;\n}";
-styleInject(css_248z$N);
+var css_248z$O = ".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$O);
 
 const isFunction$2 = functionToCheck => {
   return functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
@@ -3139,6 +3151,47 @@ const isValid12HourTime = timeString => {
   const regex = /^(0[1-9]|1[0-2]):([0-5][0-9])(?:\s?(AM|PM))?$/i;
   return regex.test(timeString);
 };
+// Utility to normalize memory values to bytes
+const UNIT_MULTIPLIERS = {
+  B: 1,
+  KB: 1024,
+  MB: 1024 * 1024,
+  GB: 1024 * 1024 * 1024
+};
+// Parses a storage value string and converts it into a normalized value in bytes along with its unit.
+function normalizeStorageValue(value) {
+  const match = value.match(/^(\d+(?:\.\d+)?)\s*(B|KB|MB|GB)$/i);
+  if (!match) {
+    throw new Error(`Invalid storage value format: ${value}`);
+  }
+  const [, numericPart, unit] = match;
+  // Ensure numericPart and unit are defined
+  if (!numericPart || !unit) {
+    throw new Error(`Invalid storage value format: ${value}`);
+  }
+  const normalizedValue = parseFloat(numericPart) * (UNIT_MULTIPLIERS[unit.toUpperCase()] || 1);
+  return {
+    normalizedValue,
+    unit: unit.toUpperCase(),
+    value: parseFloat(numericPart)
+  };
+}
+// Converts a byte value into a readable string with the largest appropriate unit (GB, MB, KB, B).
+function formatMemoryValue(valueInBytes) {
+  const units = ['GB', 'MB', 'KB', 'B'];
+  for (const unit of units) {
+    const factor = UNIT_MULTIPLIERS[unit];
+    if (factor === undefined) {
+      throw new Error(`Missing factor for unit: ${unit}`);
+    }
+    if (valueInBytes >= factor || unit === 'B') {
+      const normalizedValue = valueInBytes / factor;
+      const formattedValue = normalizedValue % 1 === 0 ? `${normalizedValue.toFixed(0)}` : `${normalizedValue.toFixed(2)}`;
+      return `${formattedValue} ${unit}`;
+    }
+  }
+  return `${valueInBytes} B`;
+}
 
 const prepareData = (dataObj, columnObj) => {
   let cellData = dataObj[columnObj.accessor];
@@ -3286,11 +3339,11 @@ const Table$1 = ({
   });
 };
 
-var css_248z$M = ".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$M);
+var css_248z$N = ".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$N);
 
-var css_248z$L = ".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$L);
+var css_248z$M = ".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$M);
 
 const ArrowsButton = ({
   direction,
@@ -3427,8 +3480,8 @@ const AddButton = ({
   });
 };
 
-var css_248z$K = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-donut-chart-svg-container svg text:nth-of-type(1), .ff-status-item {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL, .ff-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-donut-chart-svg-container svg text:nth-of-type(3) {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-donut-chart-section {\n  display: flex;\n  align-items: center;\n  padding: 8px;\n}\n\n.ff-donut-chart-svg-container {\n  display: flex;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(3) {\n  font-weight: 500;\n}\n\n.ff-status-container {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.ff-status-item {\n  display: flex;\n  gap: 40px;\n  justify-content: space-between;\n  opacity: 1;\n}\n.ff-status-item.ff-highlighted {\n  opacity: 1;\n}\n.ff-status-item.ff-fade {\n  opacity: 10%;\n}\n.ff-status-item .ff-status-text {\n  font-weight: 500;\n  color: var(--status-skipped-text-color);\n}\n.ff-status-item .ff-status-details-script-count {\n  display: flex;\n  gap: 4px;\n  font-weight: 600;\n}\n.ff-status-item .ff-status-details-script-percentage {\n  font-weight: 400;\n  color: var(--brand2-color);\n}\n\n.ff-status-label {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.ff-status-details {\n  display: flex;\n  gap: 4px;\n}\n\n.ff-status-color {\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  opacity: 80%;\n}";
-styleInject(css_248z$K);
+var css_248z$L = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-donut-chart-svg-container svg text:nth-of-type(1), .ff-status-item {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL, .ff-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-donut-chart-svg-container svg text:nth-of-type(3) {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-donut-chart-section {\n  display: flex;\n  align-items: center;\n  padding: 8px;\n}\n\n.ff-donut-chart-svg-container {\n  display: flex;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 600;\n}\n.ff-donut-chart-svg-container svg text:nth-of-type(3) {\n  font-weight: 500;\n}\n\n.ff-status-container {\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n}\n\n.ff-status-item {\n  display: flex;\n  gap: 40px;\n  justify-content: space-between;\n  opacity: 1;\n}\n.ff-status-item.ff-highlighted {\n  opacity: 1;\n}\n.ff-status-item.ff-fade {\n  opacity: 10%;\n}\n.ff-status-item .ff-status-text {\n  font-weight: 500;\n  color: var(--status-skipped-text-color);\n}\n.ff-status-item .ff-status-details-script-count {\n  display: flex;\n  gap: 4px;\n  font-weight: 600;\n}\n.ff-status-item .ff-status-details-script-percentage {\n  font-weight: 400;\n  color: var(--brand2-color);\n}\n\n.ff-status-label {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.ff-status-details {\n  display: flex;\n  gap: 4px;\n}\n\n.ff-status-color {\n  width: 16px;\n  height: 16px;\n  border-radius: 4px;\n  opacity: 80%;\n}";
+styleInject(css_248z$L);
 
 const calculateArc$4 = (x, y, radius, startAngle, endAngle) => {
   const startX = x + radius * Math.cos(startAngle);
@@ -3781,8 +3834,8 @@ const useFileDropzone = options => {
   };
 };
 
-var css_248z$J = ".ff-file-dropzone-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n  width: 640px;\n  height: 188px;\n  padding: 16px 0;\n  border-radius: 8px;\n  background: var(--file-dropzone-default-color);\n  border: 1px dashed var(--brand-color);\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n  gap: 8px;\n  transition: background-color 0.2s ease;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone:hover, .ff-file-dropzone-wrapper .ff-file-dropzone--active {\n  background-color: var(--file-dropzone-selected-color);\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__icon {\n  height: 80px;\n  width: 80px;\n  display: grid;\n  place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn {\n  margin: 0 auto;\n  position: relative;\n  font-weight: 600;\n  line-height: 15px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 640px;\n  max-height: 300px;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n  padding: 2px;\n  -ms-overflow-style: none;\n  scrollbar-width: thin;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper ::-webkit-scrollbar {\n  width: 2px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px;\n  border-radius: 4px;\n  background-color: var(--file-details-bg);\n  box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);\n  overflow: hidden;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  width: 90%;\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$J);
+var css_248z$K = ".ff-file-dropzone-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone {\n  padding: 16px 0;\n  border-radius: 8px;\n  background: var(--file-dropzone-default-color);\n  border: 1px dashed var(--brand-color);\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n  text-align: center;\n  gap: 8px;\n  transition: background-color 0.2s ease;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone:hover, .ff-file-dropzone-wrapper .ff-file-dropzone--active {\n  background-color: var(--file-dropzone-selected-color);\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__icon {\n  height: 80px;\n  width: 80px;\n  display: grid;\n  place-items: center;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn {\n  margin: 0 auto;\n  position: relative;\n  font-weight: 600;\n  line-height: 15px;\n}\n.ff-file-dropzone-wrapper .ff-file-dropzone-content__labels .choose-file-btn input {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n  width: 640px;\n  max-height: 300px;\n  overflow-y: auto;\n  scroll-behavior: smooth;\n  padding: 2px;\n  -ms-overflow-style: none;\n  scrollbar-width: thin;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper ::-webkit-scrollbar {\n  width: 2px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details {\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px;\n  border-radius: 4px;\n  background-color: var(--file-details-bg);\n  box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);\n  overflow: hidden;\n}\n.ff-file-dropzone-wrapper .ff-file-details-wrapper .ff-file-details__item .ff-file-info {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  width: 90%;\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$K);
 
 const Dropzone = ({
   icon,
@@ -3791,13 +3844,17 @@ const Dropzone = ({
   buttonLabel,
   getRootProps,
   getInputProps,
-  isDragActive = false
+  isDragActive = false,
+  height = 188
 }) => {
   return jsxRuntime.jsxs("div", {
     ...getRootProps(),
     className: classNames('ff-file-dropzone', {
       'ff-file-dropzone--active': isDragActive
     }),
+    style: {
+      height: height
+    },
     children: [jsxRuntime.jsx("div", {
       className: "ff-file-dropzone-content__icon",
       children: icon
@@ -3916,7 +3973,9 @@ const FileDropzone = ({
   maxSizeErrorMessage = '',
   invalidFileMessage = '',
   fileExistMessage = '',
-  validateMIMEType = false
+  validateMIMEType = false,
+  width = 640,
+  height = 188
 }) => {
   const {
     getRootProps,
@@ -3951,6 +4010,9 @@ const FileDropzone = ({
   }, rejectedFile.file.name)), [rejectedFiles, handleRemoveClick, handleReplaceClick]);
   return jsxRuntime.jsxs("div", {
     className: "ff-file-dropzone-wrapper",
+    style: {
+      width: `${width}px`
+    },
     children: [jsxRuntime.jsx(Dropzone, {
       icon: icon,
       primaryLabel: primaryLabel,
@@ -3958,9 +4020,13 @@ const FileDropzone = ({
       buttonLabel: buttonLabel,
       getRootProps: getRootProps,
       getInputProps: getInputProps,
-      isDragActive: isDragActive
+      isDragActive: isDragActive,
+      height: `${height}px`
     }), jsxRuntime.jsxs("div", {
       className: 'ff-file-details-wrapper',
+      style: {
+        width: `${width}px`
+      },
       children: [!checkEmpty(acceptedFiles) && jsxRuntime.jsx("div", {
         className: "ff-file-details",
         children: acceptedFilesList
@@ -7485,7 +7551,7 @@ function createFormControl(props = {}) {
         timer = setTimeout(callback, wait);
     };
     const _updateValid = async (shouldUpdateValid) => {
-        if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
+        if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
             const isValid = _options.resolver
                 ? isEmptyObject((await _executeSchema()).errors)
                 : await executeBuiltInValidation(_fields, true);
@@ -7497,7 +7563,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateIsValidating = (names, isValidating) => {
-        if (!_options.disabled &&
+        if (!props.disabled &&
             (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
             (names || Array.from(_names.mount)).forEach((name) => {
                 if (name) {
@@ -7513,7 +7579,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
-        if (args && method && !_options.disabled) {
+        if (args && method && !props.disabled) {
             _state.action = true;
             if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
                 const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -7577,7 +7643,7 @@ function createFormControl(props = {}) {
         const output = {
             name,
         };
-        if (!_options.disabled) {
+        if (!props.disabled) {
             const disabledField = !!(get$1(_fields, name) &&
                 get$1(_fields, name)._f &&
                 get$1(_fields, name)._f.disabled);
@@ -7713,7 +7779,7 @@ function createFormControl(props = {}) {
         }
         _names.unMount = new Set();
     };
-    const _getDirty = (name, data) => !_options.disabled &&
+    const _getDirty = (name, data) => !props.disabled &&
         (name && data && set$1(_formValues, name, data),
             !deepEqual(getValues(), _defaultValues));
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -8029,7 +8095,7 @@ function createFormControl(props = {}) {
     };
     const register = (name, options = {}) => {
         let field = get$1(_fields, name);
-        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
+        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
         set$1(_fields, name, {
             ...(field || {}),
             _f: {
@@ -8045,7 +8111,7 @@ function createFormControl(props = {}) {
                 field,
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
-                    : _options.disabled,
+                    : props.disabled,
                 name,
                 value: options.value,
             });
@@ -8055,7 +8121,7 @@ function createFormControl(props = {}) {
         }
         return {
             ...(disabledIsDefined
-                ? { disabled: options.disabled || _options.disabled }
+                ? { disabled: options.disabled || props.disabled }
                 : {}),
             ...(_options.progressive
                 ? {
@@ -8139,12 +8205,6 @@ function createFormControl(props = {}) {
             e.preventDefault && e.preventDefault();
             e.persist && e.persist();
         }
-        if (_options.disabled) {
-            if (onInvalid) {
-                await onInvalid({ ..._formState.errors }, e);
-            }
-            return;
-        }
         let fieldValues = cloneObject(_formValues);
         _subjects.state.next({
             isSubmitting: true,
@@ -8323,9 +8383,7 @@ function createFormControl(props = {}) {
                 : fieldReference.ref;
             if (fieldRef.focus) {
                 fieldRef.focus();
-                options.shouldSelect &&
-                    isFunction$1(fieldRef.select) &&
-                    fieldRef.select();
+                options.shouldSelect && fieldRef.select();
             }
         }
     };
@@ -8526,6 +8584,11 @@ function useForm(props = {}) {
                 values: control._getWatch(),
             });
     }, [props.shouldUnregister, control]);
+    React.useEffect(() => {
+        if (_formControl.current) {
+            _formControl.current.watch = _formControl.current.watch.bind({});
+        }
+    }, [formState]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }
@@ -8572,8 +8635,8 @@ const Forms = ({
 };
 const ForwardedForms = /*#__PURE__*/React.forwardRef(Forms);
 
-var css_248z$I = ".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-32 {\n  font-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$I);
+var css_248z$J = ".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-32 {\n  font-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$J);
 
 const InputWithDropdown = ({
   name = '',
@@ -8678,8 +8741,8 @@ const InputWithDropdown = ({
   });
 };
 
-var css_248z$H = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-radio-wrapper .ff-radio {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-radio-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-radio-wrapper .ff-radio {\n  position: relative;\n  color: var(--text-color);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input {\n  display: none;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom {\n  box-sizing: content-box;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 1px solid var(--radio-button-border);\n  position: relative;\n  margin-right: 8px;\n  transition: border-color background-color;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::before {\n  content: \"\";\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: #fbfdff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  transition: background-color 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::after {\n  content: \"\";\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: 4px solid #f7edff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom {\n  border: 1px solid var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::before {\n  background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::after {\n  opacity: 1;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom {\n  border-color: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom::before {\n  background: var(--brand-color);\n  height: 12px;\n  width: 12px;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom {\n  border: 1px solid var(--radio-button-border);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::before {\n  background: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::after {\n  border: 4px solid var(--radio-button-hover);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom {\n  border-color: var(--brand-color);\n  background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom::before {\n  background: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio--disabled {\n  cursor: default;\n}\n.ff-radio-wrapper .ff-radio--disabled .ff-radio-custom {\n  opacity: 0.5;\n}";
-styleInject(css_248z$H);
+var css_248z$I = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-radio-wrapper .ff-radio {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-radio-wrapper {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-radio-wrapper .ff-radio {\n  position: relative;\n  color: var(--text-color);\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input {\n  display: none;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom {\n  box-sizing: content-box;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  border: 1px solid var(--radio-button-border);\n  position: relative;\n  margin-right: 8px;\n  transition: border-color background-color;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::before {\n  content: \"\";\n  width: 12px;\n  height: 12px;\n  border-radius: 50%;\n  background: #fbfdff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  transition: background-color 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-custom::after {\n  content: \"\";\n  width: 16px;\n  height: 16px;\n  border-radius: 50%;\n  border: 4px solid #f7edff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom {\n  border: 1px solid var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::before {\n  background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio:hover .ff-radio-custom::after {\n  opacity: 1;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom {\n  border-color: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked + .ff-radio-custom::before {\n  background: var(--brand-color);\n  height: 12px;\n  width: 12px;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom {\n  border: 1px solid var(--radio-button-border);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::before {\n  background: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:disabled + .ff-radio-custom::after {\n  border: 4px solid var(--radio-button-hover);\n  opacity: 0;\n  transition: opacity 0.3s;\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom {\n  border-color: var(--brand-color);\n  background-color: var(--drawer-footer-bg);\n}\n.ff-radio-wrapper .ff-radio .ff-radio-input:checked:disabled + .ff-radio-custom::before {\n  background: var(--brand-color);\n}\n.ff-radio-wrapper .ff-radio--disabled {\n  cursor: default;\n}\n.ff-radio-wrapper .ff-radio--disabled .ff-radio-custom {\n  opacity: 0.5;\n}";
+styleInject(css_248z$I);
 
 const RadioButton = ({
   label,
@@ -8719,8 +8782,8 @@ const RadioButton = ({
   });
 };
 
-var css_248z$G = ".ff-radio-group {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n}";
-styleInject(css_248z$G);
+var css_248z$H = ".ff-radio-group {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n}";
+styleInject(css_248z$H);
 
 const RadioGroup = ({
   options,
@@ -8745,8 +8808,8 @@ const RadioGroup = ({
   });
 };
 
-var css_248z$F = ".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  box-shadow: 0px -3px 4px 0px var(--ff-mini-modal-box-shadow);\n}\n.ff-mini-edit-modal-container .wrapped-div::before, .ff-mini-edit-modal-container .wrapped-div::after {\n  position: absolute;\n  content: \"\";\n  width: 13px;\n  height: 13px;\n  background: transparent;\n  border-radius: 50%;\n  bottom: 0;\n  box-shadow: 8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .wrapped-div::before {\n  left: -13px;\n  clip-path: polygon(100% 100%, 110% 45%, 0% 70%, 0% 100%);\n}\n.ff-mini-edit-modal-container .wrapped-div::after {\n  right: -13px;\n  clip-path: polygon(-5% 100%, 0% 40%, 100% 70%, 100% 100%);\n  box-shadow: -8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .mini-edit-modal {\n  background: var(--ff-mini-modal-border);\n  position: relative;\n  max-height: fit-content;\n  padding: 4px;\n  width: 100%;\n  margin: 0 0 0 -5px;\n  height: 100%;\n  box-shadow: 0px 4px 8px var(--ff-mini-modal-arrow-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-wrapper-shadow {\n  box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-arrow-shadow {\n  box-shadow: 0px 0px 16px 0px var(--ff-mini-modal-arrow-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal header {\n  border-radius: 4px 4px 0 0;\n}\n.ff-mini-edit-modal-container .mini-edit-modal footer {\n  border-radius: 0 0 4px 4px;\n}\n.ff-mini-edit-modal-container .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$F);
+var css_248z$G = ".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  box-shadow: 0px -3px 4px 0px var(--ff-mini-modal-box-shadow);\n}\n.ff-mini-edit-modal-container .wrapped-div::before, .ff-mini-edit-modal-container .wrapped-div::after {\n  position: absolute;\n  content: \"\";\n  width: 13px;\n  height: 13px;\n  background: transparent;\n  border-radius: 50%;\n  bottom: 0;\n  box-shadow: 8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .wrapped-div::before {\n  left: -13px;\n  clip-path: polygon(100% 100%, 110% 45%, 0% 70%, 0% 100%);\n}\n.ff-mini-edit-modal-container .wrapped-div::after {\n  right: -13px;\n  clip-path: polygon(-5% 100%, 0% 40%, 100% 70%, 100% 100%);\n  box-shadow: -8px 4px 0 var(--ff-mini-modal-border);\n}\n.ff-mini-edit-modal-container .mini-edit-modal {\n  background: var(--ff-mini-modal-border);\n  position: relative;\n  max-height: fit-content;\n  padding: 4px;\n  width: 100%;\n  margin: 0 0 0 -5px;\n  height: 100%;\n  box-shadow: 0px 4px 8px var(--ff-mini-modal-arrow-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-wrapper-shadow {\n  box-shadow: 0px 0px 4px 0px var(--ff-mini-modal-box-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal.mini-edit-modal-arrow-shadow {\n  box-shadow: 0px 0px 16px 0px var(--ff-mini-modal-arrow-shadow);\n}\n.ff-mini-edit-modal-container .mini-edit-modal header {\n  border-radius: 4px 4px 0 0;\n}\n.ff-mini-edit-modal-container .mini-edit-modal footer {\n  border-radius: 0 0 4px 4px;\n}\n.ff-mini-edit-modal-container .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$G);
 
 const MiniModal = /*#__PURE__*/React.forwardRef(({
   anchorRef,
@@ -8985,8 +9048,8 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
   }), document.body);
 });
 
-var css_248z$E = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-tree-container {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-tree-container {\n  width: 100%;\n  font-size: 12px;\n  color: var(--brand-color);\n  transition: all 0.3s ease;\n}\n.ff-tree-container table {\n  border-collapse: collapse;\n  width: 100%;\n  text-align: left;\n  position: relative; /* Ensure the table has a relative position for z-index to work */\n}\n.ff-tree-container .ff-toggle-arrow-icon {\n  height: 12px;\n  width: 12px;\n  margin-left: 8px;\n  display: grid;\n  place-items: center;\n  transform: rotate(0deg);\n}\n.ff-tree-container .ff-toggle-arrow-icon svg path {\n  fill: var(--brand-color);\n}\n.ff-tree-container .ff-toggle-arrow-icon.ff-expanded {\n  transform: rotate(0deg);\n}\n.ff-tree-container .ff-toggle-arrow-icon.ff-collapsed {\n  transform: rotate(-90deg);\n}\n.ff-tree-container th {\n  vertical-align: middle;\n  height: 32px;\n  background-color: var(--slider-table-color);\n  color: var(--text-color);\n  font-weight: 600;\n  text-transform: uppercase;\n}\n.ff-tree-container tr .ff-action-section {\n  display: none;\n}\n.ff-tree-container tr:hover {\n  background-color: var(--hover-color);\n}\n.ff-tree-container tr:hover .ff-title-action-container {\n  display: flex;\n}\n.ff-tree-container .ff-title-container {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-tree-container .ff-title-container .ff-toggle-folder {\n  display: flex;\n  cursor: pointer;\n}\n.ff-tree-container .ff-title-container.ff-folder {\n  font-weight: 600;\n}\n.ff-tree-container .ff-title-container.ff-file {\n  font-weight: 400;\n}\n.ff-tree-container .ff-title-container .ff-title {\n  display: flex;\n  gap: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-weight: 400;\n  cursor: pointer;\n}\n.ff-tree-container .ff-title-container .ff-title .ff-title-label {\n  display: flex;\n  align-items: center;\n}\n.ff-tree-container .ff-title-container .ff-title .ff-hover-icon {\n  display: none;\n  position: absolute;\n  right: 10px;\n}\n.ff-tree-container .ff-node-li {\n  --indent-size: 18px;\n  --total-children-height: var(--node-height);\n}\n.ff-tree-container .ff-node-li td {\n  padding: 0 8px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.ff-tree-container .ff-node-li td:first-child {\n  position: sticky;\n  padding-left: calc(var(--level) * var(--indent-size));\n  height: 32px;\n  position: sticky; /* Make first td sticky */\n  left: 0;\n  z-index: 10; /* Ensure it stays on top of the other cells */\n  background-color: var(--slider-table-color);\n}\n.ff-tree-container .ff-node-li td:first-child::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: calc(var(--level) * var(--indent-size) - 4px);\n  width: 1px;\n  height: calc(var(--total-children-height));\n  background-color: var(--tree-connecting-lines-color);\n  z-index: 9999;\n}\n.ff-tree-container .ff-node-li td:first-child::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: calc(var(--level) * var(--indent-size) - 4px);\n  width: 12px;\n  height: 1px;\n  background-color: var(--tree-connecting-lines-color);\n  z-index: 10; /* Ensure it stays above the content */\n}\n.ff-tree-container .ff-node-li td:first-child.ff-is-last::before {\n  height: calc(var(--node-height) / 2);\n}\n.ff-tree-container .ff-node-li[style*=\"--level: 0\"]::before, .ff-tree-container .ff-node-li[style*=\"--level: 0\"]::after {\n  content: none;\n}\n.ff-tree-container th:first-child,\n.ff-tree-container td:first-child {\n  position: sticky;\n  left: 0;\n}\n\n.ff-title-action-container {\n  display: none;\n  align-items: center;\n}";
-styleInject(css_248z$E);
+var css_248z$F = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-tree-container {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-tree-container {\n  width: 100%;\n  font-size: 12px;\n  color: var(--brand-color);\n  transition: all 0.3s ease;\n}\n.ff-tree-container table {\n  border-collapse: collapse;\n  width: 100%;\n  text-align: left;\n  position: relative; /* Ensure the table has a relative position for z-index to work */\n}\n.ff-tree-container .ff-toggle-arrow-icon {\n  height: 12px;\n  width: 12px;\n  margin-left: 8px;\n  display: grid;\n  place-items: center;\n  transform: rotate(0deg);\n}\n.ff-tree-container .ff-toggle-arrow-icon svg path {\n  fill: var(--brand-color);\n}\n.ff-tree-container .ff-toggle-arrow-icon.ff-expanded {\n  transform: rotate(0deg);\n}\n.ff-tree-container .ff-toggle-arrow-icon.ff-collapsed {\n  transform: rotate(-90deg);\n}\n.ff-tree-container th {\n  vertical-align: middle;\n  height: 32px;\n  background-color: var(--slider-table-color);\n  color: var(--text-color);\n  font-weight: 600;\n  text-transform: uppercase;\n}\n.ff-tree-container tr .ff-action-section {\n  display: none;\n}\n.ff-tree-container tr:hover {\n  background-color: var(--hover-color);\n}\n.ff-tree-container tr:hover .ff-title-action-container {\n  display: flex;\n}\n.ff-tree-container .ff-title-container {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n.ff-tree-container .ff-title-container .ff-toggle-folder {\n  display: flex;\n  cursor: pointer;\n}\n.ff-tree-container .ff-title-container.ff-folder {\n  font-weight: 600;\n}\n.ff-tree-container .ff-title-container.ff-file {\n  font-weight: 400;\n}\n.ff-tree-container .ff-title-container .ff-title {\n  display: flex;\n  gap: 4px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  font-weight: 400;\n  cursor: pointer;\n}\n.ff-tree-container .ff-title-container .ff-title .ff-title-label {\n  display: flex;\n  align-items: center;\n}\n.ff-tree-container .ff-title-container .ff-title .ff-hover-icon {\n  display: none;\n  position: absolute;\n  right: 10px;\n}\n.ff-tree-container .ff-node-li {\n  --indent-size: 18px;\n  --total-children-height: var(--node-height);\n}\n.ff-tree-container .ff-node-li td {\n  padding: 0 8px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.ff-tree-container .ff-node-li td:first-child {\n  padding-left: calc(var(--level) * var(--indent-size));\n  height: 32px;\n  z-index: 0;\n}\n.ff-tree-container .ff-node-li td .first-div {\n  background-color: white;\n  display: flex;\n  width: 100%;\n  height: 32px;\n}\n.ff-tree-container .ff-node-li td .first-div:hover {\n  background-color: var(--hover-color);\n}\n.ff-tree-container .ff-node-li td .first-div::before {\n  content: \"\";\n  position: absolute;\n  top: 0;\n  left: calc(var(--level) * var(--indent-size) - 4px);\n  width: 1px;\n  height: calc(var(--total-children-height));\n  background-color: var(--tree-connecting-lines-color);\n  z-index: 9999;\n}\n.ff-tree-container .ff-node-li td .first-div::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: calc(var(--level) * var(--indent-size) - 4px);\n  width: 12px;\n  height: 1px;\n  background-color: var(--tree-connecting-lines-color);\n  z-index: 10; /* Ensure it stays above the content */\n}\n.ff-tree-container .ff-node-li td .first-div.ff-is-last::before {\n  height: calc(var(--node-height) / 2);\n}\n.ff-tree-container .ff-node-li[style*=\"--level: 0\"]::before, .ff-tree-container .ff-node-li[style*=\"--level: 0\"]::after {\n  content: none;\n}\n\n.ff-title-action-container {\n  display: none;\n  align-items: center;\n}\n\nth:first-child,\ntd:first-child {\n  position: sticky;\n  left: 0;\n}";
+styleInject(css_248z$F);
 
 const TableTree = ({
   columnsData,
@@ -9086,37 +9149,40 @@ const TableTree = ({
     const renderRowData = columnsData => {
       return columnsData.map(column => {
         if (column.accessor === 'title') {
-          return jsxRuntime.jsxs("td", {
+          return jsxRuntime.jsx("td", {
             className: `ff-title-container ${isLast ? 'ff-is-last' : ''}`,
-            children: [jsxRuntime.jsx("span", {
-              className: "ff-toggle-folder",
-              onClick: handleToggleExpand,
-              children: node.folder && jsxRuntime.jsx("span", {
-                className: `ff-toggle-arrow-icon ${isExpanded ? 'ff-expanded' : 'ff-collapsed'}`,
-                children: jsxRuntime.jsx(SvgArrowsDownIcon, {})
-              })
-            }), jsxRuntime.jsxs("div", {
-              className: "ff-title",
-              style: {
-                fontWeight: node.folder ? 600 : 400
-              },
-              onClick: event => onClick(event, node),
-              children: [select === 'checkbox' && jsxRuntime.jsx(Checkbox, {
-                checked: selected.includes(node.key),
-                onChange: e => handleCheckBoxChange(e, node)
-              }), select === 'radio' && jsxRuntime.jsx(RadioButton, {
-                name: node.title,
-                value: node.key,
-                onChange: e => handleCheckBoxChange(e, node)
-              }), jsxRuntime.jsx(Typography, {
-                className: "ff-title-label",
-                fontWeight: "medium",
-                children: prepareData(node, column)
-              }), column.actions && jsxRuntime.jsx("div", {
-                className: "ff-title-action-container",
-                children: column.actions(node)
+            children: jsxRuntime.jsxs("div", {
+              className: "first-div",
+              children: [' ', jsxRuntime.jsx("span", {
+                className: "ff-toggle-folder",
+                onClick: handleToggleExpand,
+                children: node.folder && jsxRuntime.jsx("span", {
+                  className: `ff-toggle-arrow-icon ${isExpanded ? 'ff-expanded' : 'ff-collapsed'}`,
+                  children: jsxRuntime.jsx(SvgArrowsDownIcon, {})
+                })
+              }), jsxRuntime.jsxs("div", {
+                className: "ff-title",
+                style: {
+                  fontWeight: node.folder ? 600 : 400
+                },
+                onClick: event => onClick(event, node),
+                children: [select === 'checkbox' && jsxRuntime.jsx(Checkbox, {
+                  checked: selected.includes(node.key),
+                  onChange: e => handleCheckBoxChange(e, node)
+                }), select === 'radio' && jsxRuntime.jsx(RadioButton, {
+                  name: node.title,
+                  value: node.key,
+                  onChange: e => handleCheckBoxChange(e, node)
+                }), jsxRuntime.jsx(Typography, {
+                  className: "ff-title-label",
+                  fontWeight: "medium",
+                  children: prepareData(node, column)
+                }), column.actions && jsxRuntime.jsx("div", {
+                  className: "ff-title-action-container",
+                  children: column.actions(node)
+                })]
               })]
-            })]
+            })
           });
         } else if (column.accessor) {
           return jsxRuntime.jsx("td", {
@@ -9184,8 +9250,8 @@ const TableTree = ({
   });
 };
 
-var css_248z$D = ":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-32 {\n  font-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$D);
+var css_248z$E = ":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-32 {\n  font-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$E);
 
 const Tabs = ({
   variant = 'default',
@@ -9230,8 +9296,8 @@ const Tabs = ({
   });
 };
 
-var css_248z$C = ".ff-highlight-bg {\n  background-color: var(--text-bg-highlight);\n}";
-styleInject(css_248z$C);
+var css_248z$D = ".ff-highlight-bg {\n  background-color: var(--text-bg-highlight);\n}";
+styleInject(css_248z$D);
 
 // Function to escape special characters in the search term
 const escapeRegExp = text => {
@@ -9254,8 +9320,8 @@ const HighlightText = ({
   });
 };
 
-var css_248z$B = ".fontXs, .ff-search-container .ff-search-input {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-search-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-search-container .ff-search-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-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$B);
+var css_248z$C = ".fontXs, .ff-search-container .ff-search-input {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-search-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-search-container .ff-search-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-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$C);
 
 const Search = ({
   placeholder = 'Search',
@@ -17276,8 +17342,8 @@ const TimePicker = ({
   });
 };
 
-var css_248z$A = "@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-32 {\n  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\";\n}\n.ff-date-picker .ff-cursor-pointer {\n  cursor: pointer;\n}\n.ff-date-picker .ff-datepicker-input-container {\n  display: flex;\n  gap: 10px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input {\n  padding: 4px 8px;\n  padding-left: 2rem;\n  height: 32px;\n  border-radius: 5px;\n  border: 1px solid var(--border-color);\n  color: var(--status-skipped-text-color);\n  line-height: 15px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-date-input:focus,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-time-input:focus {\n  outline: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-calendar-icon,\n.ff-date-picker .ff-datepicker-input-container .ff-input-with-icon .ff-clock-icon {\n  position: absolute;\n  transform: translate(50%, 50%);\n  display: flex;\n  align-items: center;\n  pointer-events: none;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field {\n  flex: 1;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input {\n  width: 100%;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field {\n  flex: 0 0 120px;\n}\n.ff-date-picker .ff-datepicker-input-container .ff-time-input-field .ff-time-input {\n  width: 100%;\n}\n.ff-date-picker .ff-date-picker-container {\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  border-radius: 8px;\n  padding: 4px;\n  box-sizing: border-box;\n  background-color: var(--tab-bg-color);\n  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.2);\n  gap: 8px;\n  z-index: 10;\n}\n.ff-date-picker .ff-date-picker-container .ff-calendar-container {\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n  height: 240px;\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls {\n  padding: 4px;\n  display: flex;\n  justify-content: end;\n  gap: 8px;\n  border-top: 1px solid var(--border-color);\n}\n.ff-date-picker .ff-date-picker-container .ff-date-picker-controls .ff-date-picker-button {\n  font-weight: 600;\n  line-height: 15px;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button {\n  margin: 0 5px;\n  border: 1px solid var(--border-color);\n  background-color: var(--toggle-button-bg-color);\n  box-shadow: 0 -2px 2px 0 var(--ff-mini-modal-box-shadow);\n  padding: 4px;\n  border-radius: 30%;\n  cursor: pointer;\n}\n.ff-date-picker .ff-calendar .ff-calendar-nav-button:disabled {\n  cursor: auto;\n  opacity: 0.5;\n}\n.ff-date-picker .ff-calendar .ff-calendar-haeder {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  color: var(--text-color);\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid,\n.ff-date-picker .ff-calendar .ff-custom-month_grid {\n  width: calc((var(--rdp-day-width) + 4px) * 7);\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 10px;\n  padding: 5px;\n  max-width: 100%;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month {\n  padding: 10px 0;\n  text-align: center;\n  cursor: pointer;\n  border-radius: 8px;\n  background-color: #f9f9f9;\n}\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.ff-date-picker .ff-calendar .ff-custom-month_grid .ff-custom-month--selected {\n  background-color: var(--brand-color);\n  color: var(--primary-button-text-color);\n}\n.ff-date-picker .ff-calendar .rdp-weekdays th {\n  color: #6f7c8e;\n  font-weight: 400;\n}\n.ff-date-picker .ff-calendar .rdp-day {\n  padding: 2px;\n  font-weight: 500;\n}\n.ff-date-picker .ff-calendar .rdp-day_button {\n  border-radius: 4px;\n  padding: 3px 9px;\n}\n.ff-date-picker .ff-calendar .rdp-day_button:hover {\n  background-color: var(--hover-color);\n}\n.ff-date-picker .ff-calendar .rdp-selected {\n  font: inherit;\n}\n.ff-date-picker .ff-calendar .rdp-selected .rdp-day_button {\n  background: var(--rdp-accent-color);\n  color: var(--drawer-footer-bg);\n  border: none;\n}\n.ff-date-picker .ff-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n  border: 2px solid var(--rdp-accent-color);\n}\n.ff-date-picker .ff-time-picker-container {\n  position: relative;\n  width: 150px;\n  height: 100%;\n  overflow-y: hidden;\n  border-left: 1px solid #ccc;\n  padding: 10px 5px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container::-webkit-scrollbar {\n  display: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields {\n  display: flex;\n  height: 14%;\n  width: 100%;\n  margin-bottom: 5px;\n  box-sizing: border-box;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container {\n  display: flex;\n  border: 1px solid var(--border-color);\n  border-right: 0;\n  border-radius: 4px 0 0 4px;\n  width: 55%;\n  position: relative;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n  border: none;\n  padding: 5px;\n  width: 100%;\n  text-align: center;\n  border-radius: 4px 0 0 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input::placeholder {\n  opacity: 0;\n  line-height: 18px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input-label {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.2s ease all;\n  color: var(--input-default-label-color);\n  pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label {\n  top: 0;\n  left: 5px;\n  color: var(--brand-color);\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0 2px;\n  font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n  border-color: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label {\n  top: 0;\n  left: 5px;\n  color: var(--brand-color);\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0 2px;\n  font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n  border-color: var(--input-error-text-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n  outline: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container {\n  position: relative;\n  width: 45%;\n  display: flex;\n  border: 1px solid var(--border-color);\n  border-radius: 0 4px 4px 0;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-select {\n  display: flex;\n  align-items: center;\n  padding: 0 5px;\n  width: 100%;\n  border-radius: 4px;\n  background-color: white;\n  cursor: pointer;\n  border: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n  border-color: var(--brand-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon {\n  margin-left: auto;\n  pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n  position: fixed;\n  z-index: 100;\n  min-width: 60px;\n  margin: 4px 0 0;\n  padding: 0;\n  list-style: none;\n  border: 1px solid var(--ff-select-background-color);\n  border-radius: 4px;\n  background-color: var(--primary-button-text-color);\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item {\n  padding: 8px;\n  color: var(--text-color);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item:hover {\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options {\n  height: 86%;\n  overflow-y: auto;\n  padding-right: 5px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n  background-color: var(--hover-color);\n  border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options .ff-time-option {\n  padding: 10px 12px;\n  cursor: pointer;\n  text-align: center;\n  border-radius: 8px;\n  background-color: rgb(249, 249, 249);\n  margin: 10px 0;\n}";
-styleInject(css_248z$A);
+var css_248z$B = "@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-32 {\n  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 -2px 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}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input::placeholder {\n  opacity: 0;\n  line-height: 18px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input-label {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  transition: 0.2s ease all;\n  color: var(--input-default-label-color);\n  pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label {\n  top: 0;\n  left: 5px;\n  color: var(--brand-color);\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0 2px;\n  font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--float .ff-time-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n  border-color: var(--brand-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label {\n  top: 0;\n  left: 5px;\n  color: var(--brand-color);\n  background-color: var(--input-label-bg-color);\n  line-height: 12px;\n  padding: 0 2px;\n  font-size: 8px !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input-label--danger {\n  color: var(--input-error-text-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within .ff-time-input::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n  border-color: var(--input-error-text-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n  outline: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container {\n  position: relative;\n  width: 45%;\n  display: flex;\n  border: 1px solid var(--border-color);\n  border-radius: 0 4px 4px 0;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-select {\n  display: flex;\n  align-items: center;\n  padding: 0 5px;\n  width: 100%;\n  border-radius: 4px;\n  background-color: white;\n  cursor: pointer;\n  border: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n  border-color: var(--brand-color) !important;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon {\n  margin-left: auto;\n  pointer-events: none;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n  position: fixed;\n  z-index: 100;\n  min-width: 60px;\n  margin: 4px 0 0;\n  padding: 0;\n  list-style: none;\n  border: 1px solid var(--ff-select-background-color);\n  border-radius: 4px;\n  background-color: var(--primary-button-text-color);\n  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item {\n  padding: 8px;\n  color: var(--text-color);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: background-color 0.2s ease;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-option-item:hover {\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options {\n  height: 86%;\n  overflow-y: auto;\n  padding-right: 5px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n  background-color: var(--hover-color);\n  border-radius: 4px;\n}\n.ff-date-picker .ff-time-picker-container .ff-time-picker-options .ff-time-option {\n  padding: 10px 12px;\n  cursor: pointer;\n  text-align: center;\n  border-radius: 8px;\n  background-color: rgb(249, 249, 249);\n  margin: 10px 0;\n}";
+styleInject(css_248z$B);
 
 const CustomDatePicker = ({
   minDate,
@@ -17291,7 +17357,8 @@ const CustomDatePicker = ({
   timezone = 'Asia/Kolkata',
   timeFormat = 'hh:mm a',
   error,
-  helperText = ''
+  helperText = '',
+  dateOnly = false
 }) => {
   const [timeValue, setTimeValue] = React.useState('');
   const [selectedDate, setSelectedDate] = React.useState();
@@ -17355,16 +17422,22 @@ const CustomDatePicker = ({
     }
   };
   const handleDaySelect = date => {
-    if (!timeValue || !date) {
-      // if need to set time to current time in case no time selected
-      const now = new Date();
-      date?.setHours(now.getHours(), now.getMinutes(), now.getSeconds());
+    if (dateOnly) {
       setSelectedDate(date);
+      onChange(date);
+      resetAndCloseDatePicker();
     } else {
-      const [hoursStr, minutesStr] = timeValue.split(':');
-      date.setHours(parseInt(hoursStr ? hoursStr : '0', 10) || 0);
-      date.setMinutes(parseInt(minutesStr ? minutesStr : '0', 10) || 0);
-      setSelectedDate(date);
+      if (!timeValue || !date) {
+        // if need to set time to current time in case no time selected
+        const now = new Date();
+        date?.setHours(now.getHours(), now.getMinutes(), now.getSeconds());
+        setSelectedDate(date);
+      } else {
+        const [hoursStr, minutesStr] = timeValue.split(':');
+        date.setHours(parseInt(hoursStr ? hoursStr : '0', 10) || 0);
+        date.setMinutes(parseInt(minutesStr ? minutesStr : '0', 10) || 0);
+        setSelectedDate(date);
+      }
     }
   };
   const handleSave = () => {
@@ -17489,8 +17562,8 @@ const CustomDatePicker = ({
       disabled: disabled,
       children: jsxRuntime.jsx(Icon, {
         name: "left_arrow_icon",
-        height: 12,
-        width: 12
+        height: 20,
+        width: 20
       })
     });
   };
@@ -17504,8 +17577,8 @@ const CustomDatePicker = ({
       disabled: disabled,
       children: jsxRuntime.jsx(Icon, {
         name: "right_arrow_icon",
-        height: 12,
-        width: 12
+        height: 20,
+        width: 20
       })
     });
   };
@@ -17549,7 +17622,7 @@ const CustomDatePicker = ({
           }),
           children: helperText
         })]
-      }), jsxRuntime.jsxs("div", {
+      }), !dateOnly && jsxRuntime.jsxs("div", {
         className: "ff-input-with-icon ff-time-input-field",
         children: [jsxRuntime.jsx(Icon, {
           name: 'clock_icon',
@@ -17611,14 +17684,14 @@ const CustomDatePicker = ({
               MonthGrid: () => jsxRuntime.jsx(CustomYearGrid, {})
             } : {})
           }
-        }), jsxRuntime.jsx(TimePicker, {
+        }), !dateOnly && jsxRuntime.jsx(TimePicker, {
           value: timeValue,
           onChange: handleTimeChange,
           minTime: minTime,
           maxTime: maxTime,
           onErrorChange: setTimeError
         })]
-      }), jsxRuntime.jsxs("div", {
+      }), !dateOnly && jsxRuntime.jsxs("div", {
         className: "ff-date-picker-controls",
         children: [jsxRuntime.jsx(Button$1, {
           className: "ff-date-picker-button",
@@ -17646,7 +17719,10 @@ const StateDropdown = ({
   handleDropdownOptionsClick,
   disabled = false,
   isOnlyReviewer = false,
-  userHasOnlyViewAccess = false
+  userHasOnlyViewAccess = false,
+  showBorder = true,
+  height = 24,
+  zIndex = 100
 }) => {
   let currentState = value.toUpperCase();
   let content;
@@ -17734,9 +17810,11 @@ const StateDropdown = ({
       optionsList: options,
       selectedOption: selectedOption,
       showLabel: false,
-      showBorder: false,
+      showBorder: showBorder,
       disableInput: true,
-      height: 24
+      height: height,
+      selectedOptionColor: 'var(--brand-color',
+      optionZIndex: zIndex
     }) : jsxRuntime.jsx(Select$1, {
       label: value,
       disabled: true,
@@ -17744,9 +17822,11 @@ const StateDropdown = ({
       optionsList: options,
       selectedOption: selectedOption,
       showLabel: false,
-      showBorder: false,
+      showBorder: showBorder,
       disableInput: true,
-      height: 24
+      height: height,
+      selectedOptionColor: 'var(--brand-color',
+      optionZIndex: zIndex
     });
   } else if (currentState === 'REVIEW' && (!isApprovePage || userHasOnlyViewAccess)) {
     content = jsxRuntime.jsx(Select$1, {
@@ -17756,9 +17836,11 @@ const StateDropdown = ({
       optionsList: options,
       selectedOption: selectedOption,
       showLabel: false,
-      showBorder: false,
+      showBorder: showBorder,
       disableInput: true,
-      height: 24
+      height: height,
+      selectedOptionColor: 'var(--brand-color',
+      optionZIndex: zIndex
     });
   } else if (currentState === 'APPROVED') {
     content = jsxRuntime.jsx(Select$1, {
@@ -17768,9 +17850,11 @@ const StateDropdown = ({
       optionsList: options,
       selectedOption: selectedOption,
       showLabel: false,
-      showBorder: false,
+      showBorder: showBorder,
       disableInput: true,
-      height: 24
+      height: height,
+      selectedOptionColor: 'var(--brand-color',
+      optionZIndex: zIndex
     });
   } else if (currentState === 'REJECTED' && userHasOnlyViewAccess) {
     content = jsxRuntime.jsx(Select$1, {
@@ -17780,9 +17864,11 @@ const StateDropdown = ({
       optionsList: options,
       selectedOption: selectedOption,
       showLabel: false,
-      showBorder: false,
+      showBorder: showBorder,
       disableInput: true,
-      height: 24
+      height: height,
+      selectedOptionColor: 'var(--brand-color',
+      optionZIndex: zIndex
     });
   } else if (currentState === 'NEW' && userHasOnlyViewAccess) {
     content = jsxRuntime.jsx(Select$1, {
@@ -17792,9 +17878,11 @@ const StateDropdown = ({
       optionsList: options,
       selectedOption: selectedOption,
       showLabel: false,
-      showBorder: false,
+      showBorder: showBorder,
       disableInput: true,
-      height: 24
+      height: height,
+      selectedOptionColor: 'var(--brand-color',
+      optionZIndex: zIndex
     });
   } else {
     content = '';
@@ -17809,8 +17897,8 @@ const StateDropdown = ({
   });
 };
 
-var css_248z$z = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-plus-icon {\n  border-radius: 16px;\n  border-style: none;\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  gap: 8px;\n  background-color: var(--secondary-icon-color);\n  padding: 2px 8px 2px 2px;\n  border: 1px solid transparent;\n}\n.ff-plus-icon .button-icon {\n  width: 20px;\n  height: 20px;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  background-color: var(--hover-color);\n}\n.ff-plus-icon .button-icon .ff-icon-color path {\n  color: var(--secondary-icon-color);\n}\n.ff-plus-icon .icon-name {\n  color: var(--primary-icon-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-plus-icon:hover {\n  border: 1px solid var(--secondary-icon-color);\n  background-color: var(--hover-color);\n}\n.ff-plus-icon:hover .icon-name {\n  font-weight: 600;\n  color: var(--secondary-icon-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-plus-icon:hover .button-icon {\n  width: 20px;\n  height: 20px;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon:hover .button-icon .ff-icon-color path {\n  color: var(--primary-icon-color);\n}";
-styleInject(css_248z$z);
+var css_248z$A = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-plus-icon {\n  border-radius: 16px;\n  border-style: none;\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  gap: 8px;\n  background-color: var(--secondary-icon-color);\n  padding: 2px 8px 2px 2px;\n  border: 1px solid transparent;\n}\n.ff-plus-icon .button-icon {\n  width: 20px;\n  height: 20px;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  background-color: var(--hover-color);\n}\n.ff-plus-icon .button-icon .ff-icon-color path {\n  color: var(--secondary-icon-color);\n}\n.ff-plus-icon .icon-name {\n  color: var(--primary-icon-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-plus-icon:hover {\n  border: 1px solid var(--secondary-icon-color);\n  background-color: var(--hover-color);\n}\n.ff-plus-icon:hover .icon-name {\n  font-weight: 600;\n  color: var(--secondary-icon-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-plus-icon:hover .button-icon {\n  width: 20px;\n  height: 20px;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon:hover .button-icon .ff-icon-color path {\n  color: var(--primary-icon-color);\n}";
+styleInject(css_248z$A);
 
 const IconButton = ({
   label,
@@ -17838,8 +17926,8 @@ const IconButton = ({
   });
 };
 
-var css_248z$y = ".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$y);
+var css_248z$z = ".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$z);
 
 const Modal = ({
   isOpen,
@@ -22535,8 +22623,8 @@ const DragAndDrop = {
   DNDUtilities
 };
 
-var css_248z$x = ".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$x);
+var css_248z$y = ".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$y);
 
 const VariableInput = ({
   type = 'url',
@@ -22814,8 +22902,8 @@ const VariableInput = ({
   });
 };
 
-var css_248z$w = ".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: 99%;\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$w);
+var css_248z$x = ".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$x);
 
 const AllProjectsDropdown = ({
   onClick = () => {},
@@ -22950,8 +23038,8 @@ const AllProjectsDropdown = ({
   });
 };
 
-var css_248z$v = ".ff-pie-chart-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  font-size: var(--fontSize);\n}\n.ff-pie-chart-container .ff-pie-chart-border {\n  display: inline-block;\n  border: 2px solid var(--pie-chart-border-color);\n  border-radius: 50%;\n}\n.ff-pie-chart-container .ff-pie-chart-tooltip {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -100%);\n  padding: 8px;\n  border-radius: 4px;\n  background-color: var(--tooltip-bg-color);\n  color: var(--primary-icon-color);\n  border: 10px solid;\n  font-size: 14px;\n  font-weight: 400;\n  pointer-events: none;\n  opacity: 0.8;\n}\n.ff-pie-chart-container .ff-pie-chart-legend {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 16px;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}";
-styleInject(css_248z$v);
+var css_248z$w = ".ff-pie-chart-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  font-size: var(--fontSize);\n}\n.ff-pie-chart-container .ff-pie-chart-border {\n  display: inline-block;\n  border: 2px solid var(--pie-chart-border-color);\n  border-radius: 50%;\n}\n.ff-pie-chart-container .ff-pie-chart-tooltip {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -100%);\n  padding: 8px;\n  border-radius: 4px;\n  background-color: var(--tooltip-bg-color);\n  color: var(--primary-icon-color);\n  border: 10px solid;\n  font-size: 14px;\n  font-weight: 400;\n  pointer-events: none;\n  opacity: 0.8;\n}\n.ff-pie-chart-container .ff-pie-chart-legend {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 16px;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}";
+styleInject(css_248z$w);
 
 const calculateArc$3 = ({
   x,
@@ -23106,8 +23194,8 @@ const PieChart = ({
   });
 };
 
-var css_248z$u = ".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$u);
+var css_248z$v = ".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$v);
 
 const AppHeader = ({
   logoIconName = 'fireflink_icon',
@@ -23241,8 +23329,8 @@ const AppHeader = ({
   });
 };
 
-var css_248z$t = ".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$t);
+var css_248z$u = ".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$u);
 
 const Paper = ({
   children,
@@ -23258,8 +23346,8 @@ const Paper = ({
   });
 };
 
-var css_248z$s = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n  flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n  text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n  position: fixed;\n  padding: 5px;\n  border-radius: 4px;\n  pointer-events: none;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n  display: grid;\n  gap: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.numberLegend {\n  grid-template-columns: repeat(3, 1fr);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.numberLegend .ff-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend {\n  grid-template-columns: repeat(2, 1fr);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend .ff-legend-item {\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend .ff-legend-item .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 15px;\n  min-width: 25px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend .ff-legend-item .ff-legend-key {\n  margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.memoryLegend {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-around;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.memoryLegend .ff-legend-item {\n  box-sizing: border-box;\n  flex: 1 1 calc(33.33% - 10px);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-right: 10px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\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$s);
+var css_248z$t = ".fontXs, .ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header, .ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl, .ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n  flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n  text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n  position: fixed;\n  padding: 5px;\n  border-radius: 4px;\n  pointer-events: none;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n  display: grid;\n  gap: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.numberLegend {\n  grid-template-columns: repeat(3, 1fr);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.numberLegend .ff-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend {\n  grid-template-columns: repeat(2, 1fr);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend .ff-legend-item {\n  display: flex;\n  align-items: center;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend .ff-legend-item .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 15px;\n  min-width: 25px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.pillLegend .ff-legend-item .ff-legend-key {\n  margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.memoryLegend {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-around;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.memoryLegend .ff-legend-item {\n  box-sizing: border-box;\n  flex: 1 1 calc(33.33% - 10px);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  padding-right: 10px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\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$t);
 
 const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
   const startX = x + radius * Math.cos(startAngle);
@@ -23269,7 +23357,7 @@ const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
   const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
   return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
 };
-const colorMapping = ['var(--status-success-text-color)', 'var(--status-rejected-text-color)', 'var(--status-warning-text-color)', 'var(--status-skipped-text-color)', 'var(--brand-color)'];
+const colorMapping = ['var(--status-success-text-color)', 'var(--status-rejected-text-color)', 'var(--status-warning-text-color)', 'var(--status-button-text-skipped)', 'var(--brand-color)'];
 const DashboardDonutChart = ({
   radius = 60,
   lineWidth = 15,
@@ -23280,7 +23368,9 @@ const DashboardDonutChart = ({
   legendType = 'numberLegend',
   showOnlyLabel = false,
   unit,
-  showUnit = true
+  showUnit = true,
+  labelFontSize = 24,
+  subLabelFontSize = 14
 }) => {
   const [hoveredItemIndex, setHoveredItemIndex] = React.useState(null);
   const [tooltipPosition, setTooltipPosition] = React.useState({
@@ -23288,12 +23378,59 @@ const DashboardDonutChart = ({
     y: 0
   });
   const [showTooltip, setShowTooltip] = React.useState(false);
-  const total = statusValues?.reduce((acc, {
+  // Normalize data if legendType is 'memoryLegend'
+  const normalizedStatusValues = legendType === 'memoryLegend' ? statusValues.map(item => {
+    if (typeof item.value === 'string') {
+      const {
+        normalizedValue,
+        unit,
+        value
+      } = normalizeStorageValue(item.value);
+      return {
+        ...item,
+        normalizedValue,
+        unit,
+        labelValue: value
+      };
+    }
+    return {
+      ...item,
+      normalizedValue: item.value,
+      labelValue: item.value,
+      unit: 'B'
+    }; // Default to bytes
+  }) : statusValues.map(item => {
+    if (typeof item.value === 'string') {
+      console.warn(`String value "${item.value}" is not supported for legendType "${legendType}". Defaulting to 0.`);
+      return {
+        ...item,
+        normalizedValue: 0,
+        unit: '',
+        labelValue: 0
+      };
+    }
+    return {
+      ...item,
+      normalizedValue: item.value,
+      unit: '',
+      labelValue: item.value
+    };
+  });
+  // Use normalized values for chart calculations
+  const chartValues = normalizedStatusValues.map(item => ({
+    key: item.key,
+    value: item.normalizedValue ?? item.value,
+    color: item.color,
+    unit: item.unit,
+    labelValue: item.labelValue
+  }));
+  const total = chartValues?.reduce((acc, {
     value
   }) => acc + value, 0);
-  const nonZeroValues = statusValues?.filter(({
+  const nonZeroValues = chartValues?.filter(({
     value
   }) => value > 0);
+  const totalMemory = formatMemoryValue(total);
   // Calculate angles and gaps
   const TOTAL_GAP_ANGLE = gapAngle * nonZeroValues.length;
   let remainingAngle = 2 * Math.PI - TOTAL_GAP_ANGLE;
@@ -23326,8 +23463,9 @@ const DashboardDonutChart = ({
       y: event.clientY + 10
     });
   };
-  const SVG_PADDING = 4;
-  const DONUT_SVG_SIZE = (radius + lineWidth) * 2 + SVG_PADDING * 2;
+  const SVG_PADDING = 3;
+  const DONUT_SVG_SIZE = radius * 2 + lineWidth + SVG_PADDING * 2;
+  const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING;
   const renderArc = (chartItem, endAngle, i) => {
     const isFullCircle = nonZeroValues.length === 1;
     // Full circle handling
@@ -23358,7 +23496,7 @@ const DashboardDonutChart = ({
         children: hoveredItemIndex !== null && `${nonZeroValues[hoveredItemIndex]?.key} : `
       }), jsxRuntime.jsx(Typography, {
         fontSize: 12,
-        children: hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex]?.value
+        children: hoveredItemIndex !== null && (legendType === 'memoryLegend' ? `${nonZeroValues[hoveredItemIndex]?.labelValue} ${nonZeroValues[hoveredItemIndex]?.unit}` : nonZeroValues[hoveredItemIndex]?.value)
       })]
     });
   };
@@ -23413,7 +23551,7 @@ const DashboardDonutChart = ({
                 fontWeight: "medium",
                 className: "ff-legend-value",
                 color: item.color ? item.color : colorMapping[index % colorMapping.length],
-                children: [item.value, " ", showUnit && unit?.toUpperCase()]
+                children: [item.labelValue, " ", item.unit]
               }), jsxRuntime.jsx(Typography, {
                 className: "ff-legend-key",
                 children: item.key
@@ -23461,7 +23599,7 @@ const DashboardDonutChart = ({
                   })]
                 }), jsxRuntime.jsx("td", {
                   className: "ff-legend-percentage",
-                  children: (item.value / total * 100).toFixed(1)
+                  children: typeof item.value === 'string' ? (parseFloat(item.value) / total * 100).toFixed(1) : (item.value / total * 100).toFixed(1)
                 }), jsxRuntime.jsx("td", {
                   className: "ff-legend-count",
                   children: item.value
@@ -23474,6 +23612,35 @@ const DashboardDonutChart = ({
         return null;
     }
   };
+  function wrapText(text, maxWidth, fontSize) {
+    const words = text.split(' ');
+    const lines = [];
+    let currentLine = '';
+    words.forEach(word => {
+      const testLine = currentLine ? `${currentLine} ${word}` : word;
+      if (measureTextWidth(testLine, fontSize) <= maxWidth) {
+        currentLine = testLine;
+      } else {
+        if (currentLine) {
+          lines.push(currentLine);
+        }
+        currentLine = word;
+      }
+    });
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+    return lines;
+  }
+  function measureTextWidth(text, fontSize) {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (!context) {
+      throw new Error('Unable to get canvas context');
+    }
+    context.font = `${fontSize}px Poppins`; // Font size and family of SVG font
+    return context.measureText(text).width;
+  }
   return jsxRuntime.jsxs("div", {
     className: classNames('ff-dashboard-donut-chart-section', {
       'ff-dashboard-donut-chart-section-table-legend': legendType === 'tableLegend'
@@ -23485,7 +23652,7 @@ const DashboardDonutChart = ({
         height: DONUT_SVG_SIZE,
         viewBox: `0 0 ${DONUT_SVG_SIZE} ${DONUT_SVG_SIZE}`,
         children: jsxRuntime.jsxs("g", {
-          transform: `translate(${radius + lineWidth + SVG_PADDING}, ${radius + lineWidth + SVG_PADDING})`,
+          transform: `translate(${radius + lineWidth / 2 + SVG_PADDING}, ${radius + lineWidth / 2 + SVG_PADDING})`,
           children: [nonZeroValues?.map((status, i) => {
             const valuePercentage = status.value / total;
             let angle = Math.max(valuePercentage * (2 * Math.PI), MIN_ANGLE);
@@ -23498,20 +23665,41 @@ const DashboardDonutChart = ({
             className: "ff-svg-label-text",
             textAnchor: "middle",
             fill: colorMapping[3],
-            children: legendDetailsType
+            style: {
+              fontSize: `${labelFontSize}px`
+            },
+            children: wrapText(legendDetailsType, LABEL_MAX_WIDTH, labelFontSize).map((line, index, lines) => jsxRuntime.jsx("tspan", {
+              x: "0",
+              dy: index === 0 ? lines.length > 1 ? -8 : 0 : 24,
+              children: line
+            }, index))
           }) : (legendType !== 'tableLegend' || hoveredItemIndex !== null) && jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [jsxRuntime.jsx("text", {
               x: "0",
               y: "5",
               textAnchor: "middle",
               fill: colorMapping[3],
-              children: legendType === 'tableLegend' && hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex] ? `${(nonZeroValues[hoveredItemIndex].value / total * 100).toFixed(1)}%` : `${total} ${showUnit && unit ? `${unit.toUpperCase()}` : ''}`
+              style: {
+                fontSize: `${labelFontSize}px`
+              },
+              children: wrapText(legendType === 'tableLegend' && hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex] ? `${(nonZeroValues[hoveredItemIndex].value / total * 100).toFixed(1)}%` : legendType === 'memoryLegend' ? `${totalMemory}` : `${total} ${showUnit && unit ? `${unit.toUpperCase()}` : ''}`, LABEL_MAX_WIDTH, labelFontSize).map((line, index) => jsxRuntime.jsx("tspan", {
+                x: "0",
+                dy: index === 0 ? 0 : 16,
+                children: line
+              }, index))
             }), jsxRuntime.jsx("text", {
               x: "0",
               y: "26",
               textAnchor: "middle",
               fill: "var(--text-color)",
-              children: legendType === 'tableLegend' && hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex] ? nonZeroValues[hoveredItemIndex].key : legendDetailsType
+              style: {
+                fontSize: `${subLabelFontSize}px`
+              },
+              children: wrapText(legendType === 'tableLegend' && hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex] ? nonZeroValues[hoveredItemIndex].key : legendDetailsType, LABEL_MAX_WIDTH, subLabelFontSize).map((line, index) => jsxRuntime.jsx("tspan", {
+                x: "0",
+                dy: index === 0 ? 0 : 16,
+                children: line
+              }, index))
             })]
           })]
         })
@@ -25244,8 +25432,8 @@ var RecaptchaWrapper = makeAsyncScript(getURL, {
   } : {}
 })(ReCAPTCHA);
 
-var css_248z$r = ".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$r);
+var css_248z$s = ".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$s);
 
 const Recaptcha = /*#__PURE__*/React.forwardRef(({
   onVerify,
@@ -25288,8 +25476,8 @@ const nlpDropdownDefaultCSSData = {
   dropDownWrapperPadding: 0
 };
 
-var css_248z$q = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper {\n  max-height: 160px;\n  z-index: 100;\n  position: absolute;\n  min-width: 100px;\n  border: 1px solid var(--ff-select-option-border-color);\n  box-sizing: border-box;\n  margin-top: 4px;\n  border-radius: 4px;\n  background-color: var(--ff-select-background-color);\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  overflow: hidden auto;\n  display: flex;\n  justify-content: space-between;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-wrapper1 {\n  max-height: 160px;\n  z-index: 100;\n  min-width: auto;\n  box-sizing: border-box;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-track {\n  background-color: transparent;\n  border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option {\n  width: calc(100% - 18px);\n  border: 1px solid transparent;\n  border-radius: 4px;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option:hover {\n  border-color: var(--ff-select-background-color);\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-no-option {\n  width: calc(100% - 16px);\n  margin: 0;\n  overflow: hidden;\n  padding: 0px 8px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data {\n  width: 200px;\n  height: 134px;\n  border: 1px solid transparent;\n  border-radius: 5px;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  overflow: scroll;\n}";
-styleInject(css_248z$q);
+var css_248z$r = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper {\n  max-height: 160px;\n  z-index: 100;\n  position: absolute;\n  min-width: 100px;\n  border: 1px solid var(--ff-select-option-border-color);\n  box-sizing: border-box;\n  margin-top: 4px;\n  border-radius: 4px;\n  background-color: var(--ff-select-background-color);\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  overflow: hidden auto;\n  display: flex;\n  justify-content: space-between;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-wrapper1 {\n  max-height: 160px;\n  z-index: 100;\n  min-width: auto;\n  box-sizing: border-box;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-thumb {\n  background-color: var(--ff-select-scroll-thumb-color);\n  border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper::-webkit-scrollbar-track {\n  background-color: transparent;\n  border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option {\n  width: calc(100% - 18px);\n  border: 1px solid transparent;\n  border-radius: 4px;\n  padding: 0px 8px;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option:hover {\n  border-color: var(--ff-select-background-color);\n  background-color: var(--ff-select-option-hover-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-no-option {\n  width: calc(100% - 16px);\n  margin: 0;\n  overflow: hidden;\n  padding: 0px 8px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data {\n  width: 200px;\n  height: 134px;\n  border: 1px solid transparent;\n  border-radius: 5px;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  overflow: scroll;\n}";
+styleInject(css_248z$r);
 
 const NlpDropdown = ({
   onSelectBlur,
@@ -25453,8 +25641,8 @@ const NlpDropdown = ({
   });
 };
 
-var css_248z$p = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-nlp-input-wrapper .ff-nlp-input, .ff-nlp-input-wrapper .ff-nlp-input-input {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend, .ff-nlp-input-wrapper .ff-nlp-input-label--active {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-nlp-input-wrapper {\n  position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  min-height: 32px;\n  min-width: 489px;\n  display: flex;\n  align-items: end;\n  position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset {\n  margin: 0;\n  padding: 25px 0px 0px 8px;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  border-radius: 4px;\n  display: block;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-label {\n  padding: 30px 0px 0px 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--default {\n  opacity: 0;\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--active {\n  opacity: 1;\n  border-color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--option {\n  opacity: 1;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--error {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n  padding: 0 2px;\n  letter-spacing: 0.5px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--active {\n  transition: opacity 0.25s ease-out, transform 0.25s ease-out, font-size 0.25s ease-out, padding 0.25s ease-out;\n  opacity: 1;\n  color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--option {\n  opacity: 1;\n  color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--error {\n  color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--required {\n  margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input {\n  position: absolute;\n  top: 6px;\n  right: auto;\n  bottom: auto;\n  left: auto;\n  width: calc(100% - 38px);\n  min-height: calc(100% - 8px);\n  padding: 0 28px 0 8px;\n  border-radius: 4px;\n  border: 1px solid transparent;\n  z-index: 100;\n  background: transparent;\n  outline: none;\n  color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input:hover ~ .ff-nlp-input-label {\n  color: var(--ff-nlp-input-text-hover-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default {\n  opacity: 1;\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover {\n  border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option {\n  border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option .ff-nlp-input-legend--option {\n  color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-label {\n  min-height: calc(100% - 2px);\n  margin-top: 0px;\n  top: 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active:hover {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border {\n  border: none;\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover ~ .ff-nlp-input-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable {\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover {\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover ~ .ff-nlp-input-label--default {\n  color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error:hover {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n  position: absolute;\n  top: 13px;\n  right: auto;\n  bottom: auto;\n  left: 8px;\n  z-index: 1;\n  font-size: 12px;\n  top: 60%;\n  padding-left: 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 1;\n  color: var(--ff-nlp-input-default-color);\n  transform: translateY(-50%);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--active {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n  transform: translateY(-150%);\n  padding: 0 6px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--required {\n  margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow {\n  position: absolute;\n  top: 60%;\n  height: 100%;\n  right: 10px;\n  transform: rotateX(180deg) translateY(50%);\n  cursor: pointer;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--no-label {\n  top: 50%;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--down {\n  transform: rotateX(0deg) translateY(-50%);\n  z-index: 101;\n}\n.ff-nlp-input-wrapper-error-text {\n  position: absolute;\n  top: auto;\n  right: auto;\n  bottom: -14px;\n  left: 12px;\n  white-space: nowrap;\n}";
-styleInject(css_248z$p);
+var css_248z$q = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-nlp-input-wrapper .ff-nlp-input, .ff-nlp-input-wrapper .ff-nlp-input-input {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend, .ff-nlp-input-wrapper .ff-nlp-input-label--active {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-nlp-input-wrapper {\n  position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  min-height: 32px;\n  min-width: 489px;\n  display: flex;\n  align-items: end;\n  position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset {\n  margin: 0;\n  padding: 25px 0px 0px 8px;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  height: 100%;\n  width: 100%;\n  border-radius: 4px;\n  display: block;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-label {\n  padding: 30px 0px 0px 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--default {\n  opacity: 0;\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--active {\n  opacity: 1;\n  border-color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--option {\n  opacity: 1;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--error {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n  padding: 0 2px;\n  letter-spacing: 0.5px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--active {\n  transition: opacity 0.25s ease-out, transform 0.25s ease-out, font-size 0.25s ease-out, padding 0.25s ease-out;\n  opacity: 1;\n  color: var(--ff-nlp-input-brand-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--option {\n  opacity: 1;\n  color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--error {\n  color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--required {\n  margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input {\n  position: absolute;\n  top: 6px;\n  right: auto;\n  bottom: auto;\n  left: auto;\n  width: calc(100% - 38px);\n  min-height: calc(100% - 8px);\n  padding: 0 28px 0 8px;\n  border-radius: 4px;\n  border: 1px solid transparent;\n  z-index: 100;\n  background: transparent;\n  outline: none;\n  color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input:hover ~ .ff-nlp-input-label {\n  color: var(--ff-nlp-input-text-hover-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default {\n  opacity: 1;\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover {\n  border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option {\n  border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--default:hover ~ .ff-nlp-input-fieldset--option .ff-nlp-input-legend--option {\n  color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-label {\n  min-height: calc(100% - 2px);\n  margin-top: 0px;\n  top: 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--active:hover {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border {\n  border: none;\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--no-border:hover ~ .ff-nlp-input-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable {\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover {\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--disable:hover ~ .ff-nlp-input-label--default {\n  color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-input--error:hover {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n  position: absolute;\n  top: 13px;\n  right: auto;\n  bottom: auto;\n  left: 8px;\n  z-index: 1;\n  font-size: 12px;\n  top: 60%;\n  padding-left: 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 1;\n  color: var(--ff-nlp-input-default-color);\n  transform: translateY(-50%);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--active {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n  transform: translateY(-150%);\n  padding: 0 6px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--required {\n  margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow {\n  position: absolute;\n  top: 60%;\n  height: 100%;\n  right: 10px;\n  transform: rotateX(180deg) translateY(50%);\n  cursor: pointer;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--no-label {\n  top: 50%;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--down {\n  transform: rotateX(0deg) translateY(-50%);\n  z-index: 101;\n}\n.ff-nlp-input-wrapper-error-text {\n  position: absolute;\n  top: auto;\n  right: auto;\n  bottom: -14px;\n  left: 12px;\n  white-space: nowrap;\n}";
+styleInject(css_248z$q);
 
 const nlpInputReducer = (state, action) => {
   switch (action.type) {
@@ -25765,8 +25953,8 @@ const NlpInput = ({
   });
 };
 
-var css_248z$o = ".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$o);
+var css_248z$p = ".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$p);
 
 const IconRadioGroup = ({
   items,
@@ -25817,8 +26005,8 @@ const IconRadioGroup = ({
   });
 };
 
-var css_248z$n = ".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-around;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n  display: flex;\n  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-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$n);
+var css_248z$o = ".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-around;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n  display: flex;\n  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-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$o);
 
 const MachineInputField = /*#__PURE__*/React.forwardRef(({
   width = '',
@@ -25873,11 +26061,11 @@ const MachineInputField = /*#__PURE__*/React.forwardRef(({
 });
 MachineInputField.displayName = 'MachineInputField';
 
-var css_248z$m = ".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-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-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$m);
+var css_248z$n = ".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-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-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$n);
 
-var css_248z$l = ".ff-connecting-branch-grid,\n.ff-connecting-branch-grid-reverse {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: 24px 180px 40px 180px 24px;\n  height: 66px;\n  margin-bottom: 16px;\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper {\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow {\n  position: absolute;\n  height: 6px;\n  width: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  z-index: 2;\n  clip-path: polygon(0 0, 0% 100%, 100% 50%);\n  top: calc(25% - 3px);\n  right: -2px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse {\n  position: absolute;\n  height: 6px;\n  width: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  z-index: 2;\n  left: -2px;\n  top: calc(25% - 3px);\n  clip-path: polygon(0 50%, 100% 100%, 100% 0);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container {\n  width: 100%;\n  height: 25%;\n  border: 1px solid var(--ff-connecting-branch-color);\n  border-top: none;\n  border-right: none;\n  border-bottom-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse {\n  width: 100%;\n  height: 25%;\n  border: 1px solid var(--ff-connecting-branch-color);\n  border-top: none;\n  border-left: none;\n  border-bottom-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist {\n  display: flex;\n  padding-top: 4px;\n  height: 24px;\n  justify-content: flex-end;\n  width: 100%;\n  align-items: center;\n  flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-icon {\n  margin-right: 4px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-text {\n  margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-delete-icon {\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse {\n  display: flex;\n  padding-top: 4px;\n  height: 24px;\n  justify-content: flex-end;\n  width: 100%;\n  align-items: center;\n  flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-icon {\n  margin-right: 4px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-text {\n  margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon {\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper {\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  border-radius: 50%;\n  z-index: 2;\n  right: -2px;\n  top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  border-radius: 50%;\n  z-index: 2;\n  left: -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$l);
+var css_248z$m = ".ff-connecting-branch-grid,\n.ff-connecting-branch-grid-reverse {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: 24px 180px 40px 180px 24px;\n  height: 66px;\n  margin-bottom: 16px;\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper {\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow {\n  position: absolute;\n  height: 6px;\n  width: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  z-index: 2;\n  clip-path: polygon(0 0, 0% 100%, 100% 50%);\n  top: calc(25% - 3px);\n  right: -2px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse {\n  position: absolute;\n  height: 6px;\n  width: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  z-index: 2;\n  left: -2px;\n  top: calc(25% - 3px);\n  clip-path: polygon(0 50%, 100% 100%, 100% 0);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container {\n  width: 100%;\n  height: 25%;\n  border: 1px solid var(--ff-connecting-branch-color);\n  border-top: none;\n  border-right: none;\n  border-bottom-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse {\n  width: 100%;\n  height: 25%;\n  border: 1px solid var(--ff-connecting-branch-color);\n  border-top: none;\n  border-left: none;\n  border-bottom-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist {\n  display: flex;\n  padding-top: 4px;\n  height: 24px;\n  justify-content: flex-end;\n  width: 100%;\n  align-items: center;\n  flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-icon {\n  margin-right: 4px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-text {\n  margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-delete-icon {\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse {\n  display: flex;\n  padding-top: 4px;\n  height: 24px;\n  justify-content: flex-end;\n  width: 100%;\n  align-items: center;\n  flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-icon {\n  margin-right: 4px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-text {\n  margin-right: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-delete-icon {\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper {\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  border-radius: 50%;\n  z-index: 2;\n  right: -2px;\n  top: calc(50% - 1px);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-input-point-wrapper .ff-connecting-branch-point-reverse {\n  position: absolute;\n  height: 5px;\n  width: 5px;\n  background-color: var(--ff-connecting-branch-color);\n  border-radius: 50%;\n  z-index: 2;\n  left: -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$m);
 
 const Branches = ({
   machineInstances,
@@ -26024,8 +26212,8 @@ const Branches = ({
   });
 };
 
-var css_248z$k = ".ff-connecting-branch-grid-wrapper {\n  box-sizing: border-box;\n}";
-styleInject(css_248z$k);
+var css_248z$l = ".ff-connecting-branch-grid-wrapper {\n  box-sizing: border-box;\n}";
+styleInject(css_248z$l);
 
 const ConnectingBranches = ({
   machineBranchInstances,
@@ -26176,8 +26364,8 @@ const SequentialConnectingBranch = ({
   });
 };
 
-var css_248z$j = ".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$j);
+var css_248z$k = ".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$k);
 
 const AttachmentButton = ({
   label,
@@ -26352,8 +26540,8 @@ const toast = {
   alert: (arg1, arg2) => openToast('alert', arg1, arg2)
 };
 
-var css_248z$i = "/* 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$i);
+var css_248z$j = "/* 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$j);
 
 const ToggleSwitch = ({
   selected = "text",
@@ -26375,8 +26563,8 @@ const ToggleSwitch = ({
   });
 };
 
-var css_248z$h = ".ff-avatar {\n  border-radius: 50%;\n  overflow: hidden;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--ff-avatar-background-color);\n}\n.ff-avatar--small {\n  width: 32px;\n  height: 32px;\n}\n.ff-avatar--medium {\n  width: 48px;\n  height: 48px;\n}\n.ff-avatar--large {\n  width: 64px;\n  height: 64px;\n}";
-styleInject(css_248z$h);
+var css_248z$i = ".ff-avatar {\n  border-radius: 50%;\n  overflow: hidden;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--ff-avatar-background-color);\n}\n.ff-avatar--small {\n  width: 32px;\n  height: 32px;\n}\n.ff-avatar--medium {\n  width: 48px;\n  height: 48px;\n}\n.ff-avatar--large {\n  width: 64px;\n  height: 64px;\n}";
+styleInject(css_248z$i);
 
 const Avatar = ({
   variant = "small",
@@ -26402,8 +26590,8 @@ const Avatar = ({
   });
 };
 
-var css_248z$g = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown, .ff-label-edit-text-field .ff-text-dropdown-field {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n}\n.ff-label-edit-text-field .ff-label-text-field {\n  display: flex;\n  gap: 10px;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  position: absolute;\n  top: 0;\n  left: 10px;\n  transform: translateY(-50%);\n  transition: all 0.2s ease;\n  color: var(--label-edit-text-label-color);\n  background: var(--label-edit-text-background-color);\n  padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n  top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n  padding: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown {\n  border: 1px solid var(--label-edit-text-label-color);\n  outline: none;\n  width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field {\n  padding: 0 4px;\n  border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field {\n  flex: 2;\n  border: 1px solid var(--label-edit-text-label-color);\n  border-radius: 4px 0 0 4px;\n  border-right: none;\n  border-width: thin;\n  padding-left: 5px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field:focus-visible {\n  outline: none;\n}\n.ff-label-edit-text-field .dropdown {\n  border-radius: 0 4px 4px 0;\n  flex: 1;\n  height: inherit;\n}\n.ff-label-edit-text-field .ff-icon-container {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n  cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n  margin: 0;\n  color: var(--label-edit-error-text);\n}";
-styleInject(css_248z$g);
+var css_248z$h = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown, .ff-label-edit-text-field .ff-text-dropdown-field {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n}\n.ff-label-edit-text-field .ff-label-text-field {\n  display: flex;\n  gap: 10px;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  position: absolute;\n  top: 0;\n  left: 10px;\n  transform: translateY(-50%);\n  transition: all 0.2s ease;\n  color: var(--label-edit-text-label-color);\n  background: var(--label-edit-text-background-color);\n  padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n  top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n  padding: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown {\n  border: 1px solid var(--label-edit-text-label-color);\n  outline: none;\n  width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field {\n  padding: 0 4px;\n  border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field {\n  flex: 2;\n  border: 1px solid var(--label-edit-text-label-color);\n  border-radius: 4px 0 0 4px;\n  border-right: none;\n  border-width: thin;\n  padding-left: 5px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field:focus-visible {\n  outline: none;\n}\n.ff-label-edit-text-field .dropdown {\n  border-radius: 0 4px 4px 0;\n  flex: 1;\n  height: inherit;\n}\n.ff-label-edit-text-field .ff-icon-container {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n  cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n  margin: 0;\n  color: var(--label-edit-error-text);\n}";
+styleInject(css_248z$h);
 
 const getErrorMessage$1 = (inputValue, text, customError, customErrorCondition) => {
   if (inputValue === text) {
@@ -26576,8 +26764,8 @@ const LabelEditTextField = ({
   });
 };
 
-var css_248z$f = ".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-32 {\n  font-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$f);
+var css_248z$g = ".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-32 {\n  font-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$g);
 
 const capitalize = text => {
   if (!text) return '';
@@ -27947,7 +28135,7 @@ function applyBoldToCells(currentData, selectedRange) {
         ...currentCell,
         style: {
           ...currentCell.style,
-          fontWeight: 'bold'
+          fontWeight: currentCell.style?.fontWeight !== 'bold' ? 'bold' : 'normal'
         }
       };
       updatedData = set({
@@ -27980,7 +28168,7 @@ function applyItalicToCells(currentData, selectedRange) {
         ...currentCell,
         style: {
           ...currentCell.style,
-          fontStyle: 'italic'
+          fontStyle: currentCell.style?.fontStyle !== 'italic' ? 'italic' : 'normal'
         }
       };
       updatedData = set({
@@ -28087,13 +28275,19 @@ function applyBorderToCells(currentData, selectedRange, value, color) {
         case 'border-all-sides':
           updatedCell.style = {
             ...currentCell.style,
-            border: `2px solid ${color}`
+            borderRight: `2px solid ${color}`,
+            borderLeft: `2px solid ${color}`,
+            borderTop: `2px solid ${color}`,
+            borderBottom: `2px solid ${color}`
           };
           break;
         case 'border-none':
           updatedCell.style = {
             ...currentCell.style,
-            border: `1px solid var(--toggle-strip-color)`
+            borderRight: `1px solid var(--toggle-strip-color)`,
+            borderLeft: `1px solid var(--toggle-strip-color)`,
+            borderTop: `1px solid var(--toggle-strip-color)`,
+            borderBottom: `1px solid var(--toggle-strip-color)`
           };
           break;
         case 'border-right':
@@ -28163,6 +28357,9 @@ function applyTextAlign(currentData, selectedRange, value) {
   return updatedData;
 }
 function applyUnderlineToCells(currentData, selectedRange, value, active) {
+  if (!selectedRange) {
+    return currentData;
+  }
   const {
     start,
     end
@@ -28253,6 +28450,9 @@ function applyColorToCells(currentData, selectedRange, color) {
   return updatedData;
 }
 function applyBackgroundColorToCells(currentData, selectedRange, backgroundColor) {
+  if (!selectedRange) {
+    return currentData;
+  }
   if (selectedRange) {
     const {
       start,
@@ -28287,6 +28487,26 @@ function applyBackgroundColorToCells(currentData, selectedRange, backgroundColor
   }
   return currentData;
 }
+function applyFormatePainter(currentData, activePoint) {
+  if (!activePoint) {
+    return undefined;
+  }
+  const {
+    row,
+    column
+  } = activePoint;
+  let updatedData = {
+    ...currentData
+  };
+  const currentCell = get({
+    row,
+    column
+  }, updatedData);
+  if (currentCell && currentCell.style) {
+    return currentCell.style;
+  }
+  return undefined;
+}
 function edit(state) {
   if (isActiveReadOnly(state)) {
     return state;
@@ -28424,7 +28644,6 @@ function getKeyDownHandler(state, event) {
     key
   } = event;
   let handlers;
-  // Order matters
   if (state.mode === 'edit') {
     if (event.shiftKey) {
       handlers = editShiftKeyDownHandlers;
@@ -28541,7 +28760,11 @@ const INITIAL_STATE = {
   copied: null,
   lastCommit: null,
   selectedColumn: null,
-  selectedRow: null
+  selectedRow: null,
+  formattedStyle: {
+    open: false,
+    style: undefined
+  }
 };
 function reducer(state, action) {
   switch (action.type) {
@@ -28750,9 +28973,13 @@ function reducer(state, action) {
       }
     case FORMATE_PAINTER:
       {
+        const copiedStyle = applyFormatePainter(state.model.data, state.active);
         return {
           ...state,
-          model: new Model(state.model.createFormulaParser, state.model.data)
+          formattedStyle: {
+            open: true,
+            style: copiedStyle
+          }
         };
       }
     case SET_DATA:
@@ -29066,9 +29293,50 @@ function reducer(state, action) {
       }
     case DRAG_END:
       {
+        const selectedRange = state.selected.toRange(state.model.data);
+        let currentData = state.model.data;
+        if (!state.formattedStyle.open || !selectedRange) {
+          return {
+            ...state,
+            dragging: false,
+            formattedStyle: {
+              open: false,
+              style: undefined
+            }
+          };
+        }
+        const {
+          start,
+          end
+        } = selectedRange;
+        let updatedData = currentData;
+        for (let row = start.row; row <= end.row; row++) {
+          for (let col = start.column; col <= end.column; col++) {
+            const currentCell = get({
+              row,
+              column: col
+            }, updatedData);
+            if (!currentCell) {
+              continue;
+            }
+            const updatedCell = {
+              ...currentCell,
+              style: state.formattedStyle.style
+            };
+            updatedData = set({
+              row,
+              column: col
+            }, updatedCell, updatedData);
+          }
+        }
         return {
           ...state,
-          dragging: false
+          dragging: false,
+          formattedStyle: {
+            open: false,
+            style: undefined
+          },
+          model: new Model(state.model.createFormulaParser, updatedData)
         };
       }
     case COMMIT:
@@ -30159,7 +30427,7 @@ const ColumnIndicator = ({
 }) => {
   const dispatch = useDispatch();
   const [width, setWidth] = React__namespace.useState(100);
-  let options = [{
+  const options = [{
     label: 'Add Column',
     value: 'Add Column',
     iconName: 'plus_icon',
@@ -30205,8 +30473,8 @@ const ColumnIndicator = ({
     setContextMenu({
       open: true,
       position: {
-        x: event.clientX,
-        y: event.clientY - 50
+        x: event.pageX - 50,
+        y: event.pageY - 260
       },
       options: options
     });
@@ -30272,7 +30540,7 @@ const RowIndicator = ({
   data
 }) => {
   const [height, setHeight] = React__namespace.useState(0);
-  let options = [{
+  const options = [{
     label: 'Add Row',
     value: 'Add Row',
     iconName: 'plus_icon',
@@ -30317,8 +30585,8 @@ const RowIndicator = ({
     setContextMenu({
       open: true,
       position: {
-        x: event.clientX,
-        y: event.clientY
+        x: event.pageX - 50,
+        y: event.pageY - 260
       },
       options: options
     });
@@ -30436,12 +30704,12 @@ const Cell = ({
     setContextMenu({
       open: true,
       position: {
-        x: event.clientX,
-        y: event.clientY - 50
+        x: event.pageX - 50,
+        y: event.pageY - 260
       },
       options: options
     });
-  }, [setContextMenu]);
+  }, [setContextMenu, select, point]);
   React__namespace.useEffect(() => {
     const root = rootRef.current;
     if (selected && root) {
@@ -30467,12 +30735,13 @@ const Cell = ({
     tabIndex: 0,
     children: [jsxRuntime.jsx(DataViewer, {
       row: row,
+      setContextMenu: setContextMenu,
       column: column,
       cell: data,
       evaluatedCell: evaluatedData,
       setCellData: setCellData
     }), jsxRuntime.jsx("div", {
-      className: "Selection_dot",
+      // className="Selection_dot" TODO
       onMouseOver: handleDotOver,
       onMouseDown: handleDotDown
     })]
@@ -30522,13 +30791,39 @@ const FALSE_TEXT = 'FALSE';
 /** The default Spreadsheet DataViewer component */
 const DataViewer = ({
   cell,
-  evaluatedCell
+  evaluatedCell,
+  setContextMenu //Todo
 }) => {
   const value = getValue(cell, evaluatedCell);
+  const options = [{
+    label: 'Dynamic Cell One',
+    value: 'Dynamic Cell One',
+    iconName: 'plus_icon',
+    action: () => {},
+    disable: false
+  }, {
+    label: 'Dynamic Cell Two',
+    value: 'Dynamic Cell Two',
+    iconName: 'plus_icon',
+    action: () => {},
+    disable: false
+  }];
+  const contextClick = React__namespace.useCallback(event => {
+    event.preventDefault();
+    setContextMenu({
+      open: true,
+      position: {
+        x: event.pageX - 50,
+        y: event.pageY - 260
+      },
+      options: options
+    });
+  }, [setContextMenu]);
   return typeof value === 'boolean' ? jsxRuntime.jsx("span", {
     className: "ff-spreadsheet-data-viewer ff-spreadsheet-data-viewer--boolean",
     children: convertBooleanToText(value)
   }) : jsxRuntime.jsx("span", {
+    onContextMenu: contextClick,
     className: classNames('ff-spreadsheet-data-viewer', {
       'ff-spreadsheet-data-viewer--preserve-breaks': hasLineBreaker(value)
     }),
@@ -30703,15 +30998,15 @@ const Copied = () => {
   });
 };
 
-var css_248z$e = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-spreadsheet-cell .ff-option-card .ff-options,\n.ff-spreadsheet-header .ff-option-card .ff-options {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-spreadsheet {\n  --background-color: var(--drawer-footer-bg);\n  --text-color: var(--text-color);\n  --readonly-text-color: var(--toggle-strip-active);\n  --outline-color: var(--toggle-strip-active);\n  --outline-background-color: var(--overlay-bg);\n  --border-color: var(--toggle-strip-color);\n  --header-background-color: var(--pop-up-background-blur);\n  --elevation: var(--brand-color);\n  position: relative;\n  overflow: visible;\n  background: var(--background-color);\n  color: var(--text-color);\n  display: inline-block;\n}\n\n.ff-spreadsheet-active-cell {\n  position: absolute;\n  border: 2px solid var(--outline-color);\n  box-sizing: border-box;\n}\n\n.ff-spreadsheet-active-cell--edit {\n  background: var(--background-color);\n  box-shadow: var(--elevation);\n}\n\n.ff-spreadsheet-table {\n  margin-top: 20px;\n  border-collapse: collapse;\n  table-layout: fixed;\n}\n\n.ff-spreadsheet-cell {\n  outline: none;\n  position: relative;\n  z-index: 0;\n}\n\n.ff-spreadsheet-active-cell .Selection_dot {\n  background-color: var(--elevation);\n  height: 7px;\n  width: 7px;\n  border-radius: 50%;\n  position: absolute;\n  right: -3px;\n  z-index: 10;\n  bottom: -3px;\n  cursor: crosshair;\n}\n\n.ff-spreadsheet-cell--readonly {\n  color: var(--readonly-text-color);\n}\n\n.ff-spreadsheet-cell,\n.ff-spreadsheet-header {\n  border: 0.1px solid var(--border-color);\n  overflow: hidden;\n  word-break: keep-all;\n  white-space: nowrap;\n  text-align: left;\n  box-sizing: border-box;\n  user-select: none;\n}\n.ff-spreadsheet-cell .ff-option-card,\n.ff-spreadsheet-header .ff-option-card {\n  position: absolute;\n  border: 1px solid var(--option-card-border-color);\n  background: var(--option-card-bg-color);\n  border-radius: 4px;\n  margin: 2px;\n  min-height: 32px;\n  min-width: 111px;\n  z-index: 100000;\n  white-space: nowrap;\n}\n.ff-spreadsheet-cell .ff-option-card .ff-options,\n.ff-spreadsheet-header .ff-option-card .ff-options {\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  line-height: 16px;\n  gap: 8px;\n}\n.ff-spreadsheet-cell .ff-option-card .ff-options:hover,\n.ff-spreadsheet-header .ff-option-card .ff-options:hover {\n  background-color: var(--hover-color);\n}\n.ff-spreadsheet-cell .ff-option-card .ff-options label,\n.ff-spreadsheet-header .ff-option-card .ff-options label {\n  cursor: pointer;\n}\n\n.ff-spreadsheet-header {\n  background: var(--header-background-color);\n  color: var(--readonly-text-color);\n  text-align: center;\n}\n\n.corner_indicator {\n  margin: 0px 0px 0px 15px;\n}\n\n.ff-spreadsheet-header--selected {\n  background: var(--brand-color);\n  color: var(--tooltip-text-color);\n}\n\n.ff-spreadsheet-header,\n.ff-spreadsheet-data-viewer,\n.ff-spreadsheet-data-editor input {\n  padding: 4px;\n  box-sizing: border-box;\n}\n\n.ff-spreadsheet-data-viewer--preserve-breaks {\n  white-space: pre-wrap;\n}\n\n.ff-spreadsheet-data-editor,\n.ff-spreadsheet-data-editor input {\n  width: 100%;\n  height: 100%;\n}\n\n.ff-spreadsheet-data-editor input {\n  font: inherit;\n  color: inherit;\n  background: none;\n  border: none;\n  outline: none;\n  margin: 0;\n}\n\n.ff-spreadsheet-data-viewer--boolean {\n  text-align: center;\n}\n\n.ff-spreadsheet-floating-rect {\n  position: absolute;\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n.ff-spreadsheet-floating-rect--hidden {\n  display: none;\n}\n\n.ff-spreadsheet-floating-rect--selected {\n  background: var(--outline-background-color);\n  border: 2px var(--outline-color) solid;\n}\n\n.ff-spreadsheet-floating-rect--dragging {\n  border: none;\n}\n\n.ff-spreadsheet-floating-rect--copied {\n  border: 2px var(--outline-color) dashed;\n}";
+var css_248z$f = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-spreadsheet-cell .ff-option-card .ff-options,\n.ff-spreadsheet-header .ff-option-card .ff-options {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-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.ff-spreadsheet-cell .ff-option-card,\n.ff-spreadsheet-header .ff-option-card {\n  position: absolute;\n  border: 1px solid var(--option-card-border-color);\n  background: var(--option-card-bg-color);\n  border-radius: 4px;\n  margin: 2px;\n  min-height: 32px;\n  min-width: 111px;\n  z-index: 100000;\n  white-space: nowrap;\n}\n.ff-spreadsheet-cell .ff-option-card .ff-options,\n.ff-spreadsheet-header .ff-option-card .ff-options {\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  line-height: 16px;\n  gap: 8px;\n}\n.ff-spreadsheet-cell .ff-option-card .ff-options:hover,\n.ff-spreadsheet-header .ff-option-card .ff-options:hover {\n  background-color: var(--hover-color);\n}\n.ff-spreadsheet-cell .ff-option-card .ff-options label,\n.ff-spreadsheet-header .ff-option-card .ff-options label {\n  cursor: pointer;\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$f);
+
+var css_248z$e = ".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$e);
 
-var css_248z$d = ".excel-row {\n  height: 42px;\n  align-items: center;\n}\n.excel-row .excel-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: start;\n  width: 100%;\n  gap: 10px;\n}\n.excel-row .excel-toolbar-center {\n  display: flex;\n  align-items: center;\n  justify-content: space-evenly;\n  width: 100%;\n  gap: 10px;\n}\n.excel-row .excel-toolbar-center .menu-option {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n}\n.excel-row .excel-toolbar-menu {\n  display: flex;\n  align-items: center;\n}\n.excel-row .excel-toolbar-hide {\n  display: none;\n}";
+var css_248z$d = ".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$d);
 
-var css_248z$c = ".color-bar {\n  background-color: var(--error_light);\n  width: 100%;\n  height: 4px;\n}\n.color-bar .colorPicker {\n  width: 100%;\n  height: 0;\n  padding: 0;\n  visibility: hidden;\n}";
-styleInject(css_248z$c);
-
 const ColorBarSelector = ({
   getColorValue,
   disabled
@@ -30724,7 +31019,7 @@ const ColorBarSelector = ({
     }
   };
   return jsxRuntime.jsx("div", {
-    className: "color-bar",
+    className: "ff-excel-color-selector",
     style: {
       backgroundColor: `${color}`
     },
@@ -30732,7 +31027,7 @@ const ColorBarSelector = ({
     children: jsxRuntime.jsx("input", {
       type: "color",
       disabled: disabled,
-      className: "colorPicker",
+      className: "ff-excel-color-selector-picker",
       ref: colorInputRef,
       onChange: e => {
         setColor(e.target.value);
@@ -30756,14 +31051,17 @@ const ExcelToolBar = ({
   setBorderType,
   setFormatePainter
 }) => {
-  const [border, setBorder] = React.useState('border-all-sides');
+  const [border, setBorder] = React.useState('border-none');
   const [underLine, setUnderLine] = React.useState('underline');
+  const [selectedFontFamily, setSelectedFontFamily] = React.useState({
+    label: 'Times New Roman',
+    value: '"Times New Roman"'
+  });
   const [colorContainer, setColorPicker] = React.useState({
     color: 'var(--error-light)',
     backgroundColor: 'var(--error-light)',
     borderColor: 'var(--text-color)'
   });
-  const [formatePainterState, setFormatePainterState] = React.useState(false);
   const borderTypeIcon = [{
     value: 'border-all-sides',
     label: 'All Border',
@@ -30862,253 +31160,234 @@ const ExcelToolBar = ({
       clearTimeout(timeGap);
     };
   }, [colorContainer.backgroundColor]);
-  return jsxRuntime.jsxs(Row$1, {
-    className: "excel-row",
-    gap: "40px",
-    children: [jsxRuntime.jsx(Col, {
-      size: 3,
-      children: jsxRuntime.jsxs("div", {
-        className: "excel-toolbar",
-        children: [jsxRuntime.jsx(Select$1, {
-          className: "textType",
-          onChange: e => {
-            setFontFamily(data, e.value);
-          },
-          optionsList: fontFamily,
-          selectedOption: {
-            label: 'Times New Roman',
-            value: '"Times New Roman"'
-          }
-        }), jsxRuntime.jsx(Select$1, {
-          className: "selectTag",
-          onChange: e => {
-            setFontSize(data, e.value);
-          },
-          optionsList: fontSize
-        })]
-      })
-    }), jsxRuntime.jsx(Col, {
-      size: 2,
-      children: jsxRuntime.jsxs("div", {
-        className: "excel-toolbar-center",
-        children: [jsxRuntime.jsx(Icon, {
+  let getUnderlineIcon = () => {
+    const selectedIcon = underlineTypeIcon.find(e => e.value === underLine);
+    return selectedIcon ? selectedIcon.icon : '';
+  };
+  let getBorderIcon = () => {
+    const selectedIcon = borderTypeIcon.find(e => e.value === border);
+    return selectedIcon ? selectedIcon.icon : '';
+  };
+  return jsxRuntime.jsxs("div", {
+    className: "ff-excel-toolbar",
+    children: [jsxRuntime.jsxs("div", {
+      className: "ff-excel-toolbar-font ",
+      children: [jsxRuntime.jsx(Tooltip, {
+        placement: "top",
+        title: 'Font Family',
+        children: jsxRuntime.jsx("div", {
+          className: "ff-excel-toolbar-font-family",
+          children: jsxRuntime.jsx(Select$1, {
+            onChange: e => {
+              setSelectedFontFamily({
+                label: e.label,
+                value: e.value
+              });
+              setFontFamily(data, e.label);
+            },
+            required: false,
+            optionsList: fontFamily,
+            label: "",
+            selectedOption: selectedFontFamily
+          })
+        })
+      }), jsxRuntime.jsx(Tooltip, {
+        placement: "top",
+        title: 'Font Size',
+        children: jsxRuntime.jsx("div", {
+          className: "ff-excel-toolbar-font-size",
+          children: jsxRuntime.jsx(Select$1, {
+            required: false,
+            label: "",
+            onChange: e => setFontSize(data, e.value),
+            optionsList: fontSize,
+            selectedOption: {
+              label: '11',
+              value: '11'
+            }
+          })
+        })
+      })]
+    }), jsxRuntime.jsx("div", {
+      className: "ff-excel-toolbar-divider"
+    }), jsxRuntime.jsxs("div", {
+      className: "ff-excel-toolbar-icon",
+      children: [jsxRuntime.jsx(Tooltip, {
+        placement: "top",
+        title: 'Text Left',
+        children: jsxRuntime.jsx(Icon, {
           hoverEffect: true,
           disabled: toolbar === 'disable',
-          onClick: () => {
-            setTextAlign(data, 'left');
-          },
+          onClick: () => setTextAlign(data, 'left'),
           name: "text_align_left"
-        }), jsxRuntime.jsx(Icon, {
+        })
+      }), jsxRuntime.jsx(Tooltip, {
+        placement: "top",
+        title: 'Text Center',
+        children: jsxRuntime.jsx(Icon, {
           hoverEffect: true,
           disabled: toolbar === 'disable',
-          onClick: () => {
-            setTextAlign(data, 'center');
-          },
+          onClick: () => setTextAlign(data, 'center'),
           name: "text_align_center"
-        }), jsxRuntime.jsx(Icon, {
+        })
+      }), jsxRuntime.jsx(Tooltip, {
+        placement: "top",
+        title: 'Text Right',
+        children: jsxRuntime.jsx(Icon, {
+          hoverEffect: true,
+          disabled: toolbar === 'disable',
+          onClick: () => setTextAlign(data, 'right'),
+          name: "text_align_right"
+        })
+      })]
+    }), jsxRuntime.jsx("div", {
+      className: "ff-excel-toolbar-divider"
+    }), jsxRuntime.jsxs("div", {
+      className: "ff-excel-toolbar-text",
+      children: [jsxRuntime.jsx(Tooltip, {
+        placement: "top",
+        title: 'Bold',
+        children: jsxRuntime.jsx(Icon, {
+          hoverEffect: true,
+          disabled: toolbar === 'disable',
+          onClick: () => onBold(data),
+          name: "bold"
+        })
+      }), jsxRuntime.jsx(Tooltip, {
+        placement: "top",
+        title: 'Italic',
+        children: jsxRuntime.jsx(Icon, {
+          hoverEffect: true,
+          disabled: toolbar === 'disable',
+          onClick: () => onItalic(data),
+          name: "italic"
+        })
+      }), jsxRuntime.jsx(Tooltip, {
+        placement: "top",
+        title: 'Underline Type',
+        children: jsxRuntime.jsxs("div", {
+          className: "ff-excel-toolbar-icon-underline",
+          children: [jsxRuntime.jsx(Icon, {
+            hoverEffect: true,
+            disabled: toolbar === 'disable',
+            onClick: () => setUnderlineType(data, underLine, true),
+            name: getUnderlineIcon()
+          }), jsxRuntime.jsx(MenuOption, {
+            iconName: "arrow_down",
+            iconSize: 12,
+            options: underlineTypeIcon,
+            tooltipPlacement: "top",
+            variant: "light",
+            onOptionClick: e => {
+              let selectedValue = e.value;
+              setUnderlineType(data, selectedValue, true);
+              setUnderLine(selectedValue);
+            }
+          })]
+        })
+      })]
+    }), jsxRuntime.jsx("div", {
+      className: "ff-excel-toolbar-divider"
+    }), jsxRuntime.jsxs("div", {
+      className: "ff-excel-toolbar-icon",
+      children: [jsxRuntime.jsx(Tooltip, {
+        placement: "top",
+        title: 'Format Painter',
+        children: jsxRuntime.jsx(Icon, {
           hoverEffect: true,
           disabled: toolbar === 'disable',
           onClick: () => {
-            setTextAlign(data, 'right');
+            setFormatePainter(data);
           },
-          name: "text_align_right"
-        })]
-      })
-    }), jsxRuntime.jsx(Col, {
-      size: 2,
-      children: jsxRuntime.jsxs("div", {
-        className: "excel-toolbar-center",
-        children: [jsxRuntime.jsx(Tooltip, {
-          placement: "top",
-          title: 'Bold',
-          children: jsxRuntime.jsx(Icon, {
+          name: "formate_painter"
+        })
+      }), jsxRuntime.jsx(Tooltip, {
+        placement: "top",
+        title: 'Text Color',
+        children: jsxRuntime.jsxs("div", {
+          className: "ff-excel-toolbar-icon-color",
+          children: [jsxRuntime.jsx(Icon, {
             hoverEffect: true,
+            width: 12,
+            height: 12,
             disabled: toolbar === 'disable',
             onClick: () => {
-              onBold(data);
+              setColor(data, colorContainer.color);
             },
-            name: "bold"
-          })
-        }), jsxRuntime.jsx(Tooltip, {
-          placement: "top",
-          title: 'Italic',
-          children: jsxRuntime.jsx(Icon, {
+            name: "text_color"
+          }), jsxRuntime.jsx(ColorBarSelector, {
+            disabled: toolbar === 'disable',
+            getColorValue: getTextColor
+          })]
+        })
+      }), jsxRuntime.jsx(Tooltip, {
+        placement: "top",
+        title: 'Background Color',
+        children: jsxRuntime.jsxs("div", {
+          className: "ff-excel-toolbar-icon-color",
+          children: [jsxRuntime.jsx(Icon, {
             hoverEffect: true,
+            width: 12,
+            height: 12,
             disabled: toolbar === 'disable',
-            onClick: () => {
-              onItalic(data);
-            },
-            name: "italic"
-          })
-        }), jsxRuntime.jsx(Tooltip, {
-          placement: "top",
-          title: 'Underline',
-          children: jsxRuntime.jsxs("div", {
-            className: "excel-toolbar-menu",
-            children: [jsxRuntime.jsx(Tooltip, {
-              placement: "top",
-              title: 'Formate Painter',
-              children: jsxRuntime.jsx("div", {
-                className: formatePainterState ? 'formate-painter-active' : '',
-                children: jsxRuntime.jsx(Icon, {
-                  hoverEffect: true,
-                  disabled: toolbar === 'disable',
-                  onClick: () => {
-                    setUnderlineType(data, underLine, true);
-                  },
-                  name: "underline"
-                })
-              })
-            }), jsxRuntime.jsx(MenuOption, {
-              iconName: "arrow_down",
-              options: underlineTypeIcon,
-              tooltipTitle: "Border Type",
-              tooltipPlacement: "top",
-              variant: "light",
-              onOptionClick: e => {
-                setUnderlineType(data, e.value, true);
-                setUnderLine(e.value);
-              }
-            })]
-          })
-        })]
-      })
-    }), jsxRuntime.jsx(Col, {
-      size: 2,
-      children: jsxRuntime.jsxs("div", {
-        className: "excel-toolbar-center",
-        children: [jsxRuntime.jsx(Tooltip, {
-          placement: "top",
-          title: 'Formate Painter',
-          children: jsxRuntime.jsx("div", {
-            className: formatePainterState ? 'formate-painter-active' : '',
-            children: jsxRuntime.jsx(Icon, {
-              hoverEffect: true,
-              disabled: toolbar === 'disable',
-              onClick: () => {
-                setFormatePainter(data);
-                setFormatePainterState(prev => !prev);
-              },
-              name: "formate_painter"
-            })
-          })
-        }), jsxRuntime.jsx("div", {
-          className: "menu-option",
-          children: jsxRuntime.jsxs(Tooltip, {
-            placement: "top",
-            title: 'Text Color',
-            children: [jsxRuntime.jsx(Icon, {
-              hoverEffect: true,
-              disabled: toolbar === 'disable',
-              onClick: () => {
-                setColor(data, colorContainer.color);
-              },
-              name: "text_color"
-            }), jsxRuntime.jsx(ColorBarSelector, {
-              disabled: toolbar === 'disable',
-              getColorValue: getTextColor
-            })]
-          })
-        }), jsxRuntime.jsxs("div", {
-          className: "menu-option",
-          children: [jsxRuntime.jsx(Tooltip, {
-            placement: "top",
-            title: 'Background Color',
-            children: jsxRuntime.jsx(Icon, {
-              hoverEffect: true,
-              disabled: toolbar === 'disable',
-              onClick: () => {
-                setBackgroundColor(data, colorContainer.backgroundColor);
-              },
-              name: "fill_color"
-            })
+            onClick: () => setBackgroundColor(data, colorContainer.backgroundColor),
+            name: "fill_color"
           }), jsxRuntime.jsx(ColorBarSelector, {
             disabled: toolbar === 'disable',
             getColorValue: getBackgroundColor
           })]
-        })]
+        })
+      })]
+    }), jsxRuntime.jsx("div", {
+      className: "ff-excel-toolbar-divider"
+    }), jsxRuntime.jsx("div", {
+      className: "ff-excel-toolbar-menu",
+      children: jsxRuntime.jsx(Tooltip, {
+        placement: "top",
+        title: 'Border Type',
+        children: jsxRuntime.jsxs("div", {
+          className: "ff-excel-toolbar-menu-option",
+          children: [jsxRuntime.jsx(Icon, {
+            hoverEffect: true,
+            disabled: toolbar === 'disable',
+            onClick: () => setBorderType(data, border, 'black'),
+            name: getBorderIcon()
+          }), jsxRuntime.jsx(MenuOption, {
+            iconName: "arrow_down",
+            iconSize: 12,
+            options: borderTypeIcon,
+            tooltipPlacement: "top",
+            variant: "light",
+            onOptionClick: e => {
+              let selectedValue = e.value;
+              setBorderType(data, selectedValue, 'black');
+              setBorder(selectedValue);
+            }
+          })]
+        })
       })
-    }), jsxRuntime.jsx(Col, {
-      size: 1,
-      children: jsxRuntime.jsxs("div", {
-        className: "excel-toolbar-menu",
-        children: [jsxRuntime.jsx(Tooltip, {
-          placement: "top",
-          title: 'Formate Painter',
-          children: jsxRuntime.jsx("div", {
-            className: formatePainterState ? 'formate-painter-active' : '',
-            children: jsxRuntime.jsx(Icon, {
-              hoverEffect: true,
-              disabled: toolbar === 'disable',
-              onClick: () => {
-                setBorderType(data, border, 'black');
-              },
-              name: "all_borders"
-            })
-          })
-        }), jsxRuntime.jsx(MenuOption, {
-          iconName: "arrow_down",
-          options: borderTypeIcon,
-          tooltipTitle: "Border Type",
-          tooltipPlacement: "top",
-          variant: "light",
-          onOptionClick: e => {
-            setBorder(e.value);
-            setBorderType(data, e.value, 'black');
-          }
-        })]
+    }), jsxRuntime.jsx("div", {
+      className: "ff-excel-toolbar-divider"
+    }), jsxRuntime.jsx("div", {
+      className: "ff-excel-toolbar-menu",
+      children: jsxRuntime.jsx(Tooltip, {
+        placement: "top",
+        title: 'Formula',
+        children: jsxRuntime.jsx(Icon, {
+          hoverEffect: true,
+          disabled: toolbar === 'disable',
+          onClick: () => setBorderType(data, border, 'black'),
+          name: "formula_icon"
+        })
       })
     })]
   });
 };
 
-var css_248z$b = ".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-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-option-card {\n  position: absolute;\n  border: 1px solid var(--option-card-border-color);\n  background: var(--option-card-bg-color);\n  border-radius: 4px;\n  margin: 2px;\n  min-height: 32px;\n  min-width: 111px;\n  white-space: nowrap;\n  z-index: 100;\n}\n.ff-option-card .ff-options {\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  padding: 8px;\n  line-height: 16px;\n  gap: 8px;\n}\n.ff-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$b);
-
-const ExcelContextMenu = ({
-  contextMenu
-}) => {
-  return jsxRuntime.jsx("div", {
-    className: "ff-option-card",
-    style: {
-      left: contextMenu.position.x,
-      top: contextMenu.position.y
-    },
-    children: contextMenu.options.map(option => jsxRuntime.jsxs("div", {
-      className: 'ff-options',
-      onClick: () => {
-        option.action();
-      },
-      children: [option.iconName && jsxRuntime.jsx(Icon, {
-        name: option.iconName,
-        height: 16,
-        width: 16,
-        color: option.label.includes('Delete') ? 'var(--label-edit-error-text)' : 'var(--brand-color)'
-      }), jsxRuntime.jsx(Typography, {
-        as: "label",
-        children: option.label
-      })]
-    }))
-  });
-};
-
 /**
  * The Spreadsheet component
  */
 const Spreadsheet = props => {
-  const [contextMenu, setContextMenu] = React__namespace.useState({
-    open: false,
-    position: {
-      x: 0,
-      y: 0
-    },
-    options: [{
-      label: '',
-      value: '',
-      iconName: '',
-      action: () => {}
-    }]
-  });
   const {
     className,
     columnLabels,
@@ -31233,33 +31512,12 @@ const Spreadsheet = props => {
       }
     }
   }, [mode, paste$1]);
-  const handleClickOutside = React__namespace.useCallback(event => {
-    if (contextMenu.open) {
-      event.preventDefault();
-      event.stopPropagation();
-      setContextMenu({
-        open: false,
-        position: {
-          x: 0,
-          y: 0
-        },
-        options: [{
-          label: '',
-          value: '',
-          iconName: '',
-          action: () => {}
-        }]
-      });
-    }
-  }, [contextMenu.open]);
   const handleKeyDown = React__namespace.useCallback(event => {
     event.persist();
     if (onKeyDown) {
       onKeyDown(event);
     }
-    // Do not use event in case preventDefault() was called inside onKeyDown
     if (!event.defaultPrevented) {
-      // Only disable default behavior if an handler exist
       if (hasKeyDownHandler(state, event)) {
         event.nativeEvent.preventDefault();
       }
@@ -31287,34 +31545,25 @@ const Spreadsheet = props => {
     document.addEventListener('cut', handleCut);
     document.addEventListener('copy', handleCopy);
     document.addEventListener('paste', handlePaste);
-    document.addEventListener('click', handleClickOutside);
     return () => {
       document.removeEventListener('cut', handleCut);
       document.removeEventListener('copy', handleCopy);
       document.removeEventListener('paste', handlePaste);
-      document.removeEventListener('click', handleClickOutside);
     };
-  }, [handleCut, handleCopy, handlePaste, handleClickOutside]);
+  }, [handleCut, handleCopy, handlePaste]);
   const tableNode = React__namespace.useMemo(() => jsxRuntime.jsxs(Table$1, {
     columns: size.columns,
-    children: [contextMenu.open && jsxRuntime.jsx(ExcelContextMenu, {
-      contextMenu: contextMenu,
-      data: props.data,
-      addRowTop: addRowTop$1,
-      addColumnLeft: addColumnLeft$1,
-      deleteRow: deleteRow$1,
-      deleteColumn: deleteColumn$1
-    }), jsxRuntime.jsxs(HeaderRow$1, {
+    children: [jsxRuntime.jsxs(HeaderRow$1, {
       children: [jsxRuntime.jsx(CornerIndicator$1, {}), range(size.columns).map(columnNumber => columnLabels ? jsxRuntime.jsx(ColumnIndicator$1, {
         column: columnNumber,
-        setContextMenu: setContextMenu,
+        setContextMenu: props.setContextMenu,
         label: columnNumber in columnLabels ? columnLabels[columnNumber] : null,
         deleteColumn: deleteColumn$1,
         addColumnLeft: addColumnLeft$1,
         data: props.data
       }, columnNumber) : jsxRuntime.jsx(ColumnIndicator$1, {
         column: columnNumber,
-        setContextMenu: setContextMenu,
+        setContextMenu: props.setContextMenu,
         deleteColumn: deleteColumn$1,
         addColumnLeft: addColumnLeft$1,
         data: props.data
@@ -31325,31 +31574,32 @@ const Spreadsheet = props => {
         label: rowNumber in rowLabels ? rowLabels[rowNumber] : null,
         row: rowNumber,
         addRowTop: addRowTop$1,
-        setContextMenu: setContextMenu,
+        setContextMenu: props.setContextMenu,
         deleteRow: deleteRow$1,
         data: props.data
       }, rowNumber) : jsxRuntime.jsx(RowIndicator$1, {
         row: rowNumber,
         addRowTop: addRowTop$1,
-        setContextMenu: setContextMenu,
+        setContextMenu: props.setContextMenu,
         deleteRow: deleteRow$1,
         data: props.data
       }, rowNumber), range(size.columns).map(columnNumber => jsxRuntime.jsx(Cell$1, {
         row: rowNumber,
         column: columnNumber,
-        setContextMenu: setContextMenu,
+        setContextMenu: props.setContextMenu,
         // @ts-ignore
         DataViewer: DataViewer$1
       }, columnNumber))]
     }, rowNumber))]
-  }), [Table$1, size.rows, size.columns, Row$1, HeaderRow$1, CornerIndicator$1, columnLabels, ColumnIndicator$1, rowLabels, RowIndicator$1, Cell$1, DataViewer$1, contextMenu]);
+  }), [Table$1, size.rows, size.columns, Row$1, HeaderRow$1, CornerIndicator$1, columnLabels, ColumnIndicator$1, rowLabels, RowIndicator$1, Cell$1, DataViewer$1]);
   const activeCellNode = React__namespace.useMemo(() => jsxRuntime.jsx(ActiveCell
   // @ts-ignore
   , {
     // @ts-ignore
     DataEditor: DataEditor$1
   }), [DataEditor$1]);
-  const rootNode = React__namespace.useMemo(() => jsxRuntime.jsxs(jsxRuntime.Fragment, {
+  const rootNode = React__namespace.useMemo(() => jsxRuntime.jsxs("div", {
+    className: "ff-excel",
     children: [jsxRuntime.jsx(ExcelToolBar, {
       data: props.data,
       onBold: onBold,
@@ -31376,14 +31626,57 @@ const Spreadsheet = props => {
   });
 };
 
-var css_248z$a = ".excel-page {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.excel-page .excel-book {\n  position: relative;\n  width: 100%;\n}\n.excel-page .excel-book .excel-sheet {\n  overflow: auto;\n  scrollbar-width: thin;\n}\n.excel-page .excel-book .sheet-bar {\n  margin-top: 5px;\n  padding: 0p 20px;\n  align-items: center;\n}\n.excel-page .excel-book .sheet-bar .add-sheet-icon {\n  display: flex;\n  align-items: start;\n  justify-content: center;\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container {\n  display: flex;\n  overflow-x: auto;\n  align-items: center;\n  scrollbar-width: thin;\n  scrollbar-color: var(--hover-color) transparent;\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container::-webkit-scrollbar-track {\n  background-color: transparent;\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container::-webkit-scrollbar-thumb {\n  border-radius: 5px;\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container .excel-tab-list {\n  padding: 10px 20px;\n  min-width: max-content;\n  cursor: pointer;\n  display: flex;\n  font-weight: bold;\n  background-color: var(--hover-color);\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container .excel-tab-list.active {\n  background-color: var(--excel-sheet-button-color);\n}\n.excel-page .excel-book .sheet-bar .excel-tab-container .excel-tab-list:focus {\n  outline: none;\n  text-decoration: none;\n}\n\n.menu-list {\n  display: flex;\n  align-items: center;\n}\n.menu-list .menu-title {\n  padding-left: 5px;\n}";
-styleInject(css_248z$a);
+var css_248z$c = ".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: 83px;\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$c);
+
+var css_248z$b = ".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$b);
+
+const ExcelContextMenu = ({
+  contextMenu
+}) => {
+  return jsxRuntime.jsx("div", {
+    className: "ff-excel-menu",
+    style: {
+      left: contextMenu.position.x,
+      top: contextMenu.position.y
+    },
+    children: contextMenu.options.map(option => jsxRuntime.jsxs("div", {
+      className: 'ff-excel-menu-options',
+      onClick: () => {
+        option.action();
+      },
+      children: [option.iconName && jsxRuntime.jsx(Icon, {
+        name: option.iconName,
+        height: 16,
+        width: 16,
+        color: option.label.includes('Delete') ? 'var(--label-edit-error-text)' : 'var(--brand-color)'
+      }), jsxRuntime.jsx(Typography, {
+        as: "label",
+        children: option.label
+      })]
+    }))
+  });
+};
 
 const ExcelFile = ({
   excelData,
   onSave = () => {}
 }) => {
   const [sheetNames, setSheetNames] = React.useState([]);
+  const [contextMenu, setContextMenu] = React.useState({
+    open: false,
+    position: {
+      x: 0,
+      y: 0
+    },
+    options: [{
+      label: '',
+      value: '',
+      iconName: '',
+      action: () => {}
+    }]
+  });
   const EmptyRow = {
     value: '',
     style: {
@@ -31400,14 +31693,31 @@ const ExcelFile = ({
     defaultSheet: [[EmptyRow]]
   });
   const [selectedSheetData, setSelectedSheetData] = React.useState([[EmptyRow]]);
-  let pageRef = React.useRef('');
+  const pageRef = React.useRef('');
   const sheetRef = React.useRef(null);
-  let checkVal = val => {
+  const checkVal = val => {
     if (val === undefined || val === null) {
       return null;
     }
     return val;
   };
+  const options = [{
+    label: 'Add Sheet',
+    value: 'Add Sheet',
+    iconName: 'plus_icon',
+    action: () => {
+      handleAddSheet();
+    },
+    disable: false
+  }, {
+    label: 'Delete Sheet',
+    value: 'Delete Sheet',
+    iconName: 'delete',
+    action: () => {
+      handleDeleteSheet();
+    },
+    disable: false
+  }];
   React.useEffect(() => {
     const payload = excelData;
     const sheetNames = payload.sheets.map(e => e.sheetName);
@@ -31490,6 +31800,37 @@ const ExcelFile = ({
     setSelectedSheetData(newSheetData);
     pageRef.current = newSheetName;
   };
+  React.useEffect(() => {
+    const selectedData = worksheetsData[selectedSheet.name];
+    if (selectedData !== undefined) {
+      setSelectedSheetData(selectedData);
+    } else {
+      setSelectedSheetData([]);
+    }
+  }, [selectedSheet.name, worksheetsData]);
+  const handleDeleteSheet = () => {
+    const {
+      index,
+      name
+    } = selectedSheet;
+    if (sheetNames.length > 1) {
+      let updatedSheetNames = sheetNames.slice();
+      updatedSheetNames.splice(index, 1);
+      const updatedWorksheetsData = {
+        ...worksheetsData
+      };
+      delete updatedWorksheetsData[name];
+      const newIndex = Math.min(index, updatedSheetNames.length - 1);
+      setSheetNames(updatedSheetNames);
+      setWorksheetsData(updatedWorksheetsData);
+      setSelectedSheet({
+        index: newIndex,
+        name: updatedSheetNames[newIndex] ? updatedSheetNames[newIndex] : ''
+      });
+    } else {
+      toast.warning('Cannot delete the last sheet.');
+    }
+  };
   const handleNameChange = (event, index, name) => {
     const target = event.target;
     if (!target) {
@@ -31536,6 +31877,9 @@ const ExcelFile = ({
     return obj;
   }
   const handleSheetChange = (name, index) => {
+    if (name === selectedSheet.name || index === selectedSheet.index) {
+      return;
+    }
     setSelectedSheet({
       index,
       name
@@ -31561,22 +31905,67 @@ const ExcelFile = ({
     selection?.removeAllRanges();
     selection?.addRange(range);
   };
+  const handleClickOutside = React.useCallback(event => {
+    if (contextMenu.open) {
+      event.preventDefault();
+      event.stopPropagation();
+      setContextMenu({
+        open: false,
+        position: {
+          x: 0,
+          y: 0
+        },
+        options: [{
+          label: '',
+          value: '',
+          iconName: '',
+          action: () => {}
+        }]
+      });
+    }
+  }, [contextMenu.open]);
+  React.useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [handleClickOutside]);
+  const contextClick = event => {
+    event.preventDefault();
+    const target = event.target;
+    const selectedSheetName = target.innerText;
+    sheetNames.map((name, index) => {
+      if (selectedSheetName === name) {
+        handleSheetChange(name, index);
+      }
+    });
+    setContextMenu({
+      open: true,
+      position: {
+        x: event.pageX - 50,
+        y: event.pageY - 350
+      },
+      options: options
+    });
+  };
   return jsxRuntime.jsxs("div", {
-    className: "excel-page",
+    className: "ff-excel-page",
     children: [sheetNames.length > 0 && jsxRuntime.jsxs("div", {
-      className: "excel-book",
-      children: [jsxRuntime.jsx("div", {
+      className: "ff-excel-book",
+      children: [contextMenu.open && jsxRuntime.jsx(ExcelContextMenu, {
+        contextMenu: contextMenu
+      }), jsxRuntime.jsx("div", {
         ref: sheetRef,
-        className: "excel-sheet",
+        className: "ff-excel-sheet",
         children: jsxRuntime.jsx(Spreadsheet, {
+          setContextMenu: setContextMenu,
           data: selectedSheetData,
           onEvaluatedDataChange: onEvaluateChange
         })
-      }), jsxRuntime.jsxs(Row$1, {
-        className: "sheet-bar",
-        children: [jsxRuntime.jsx(Col, {
-          size: 0,
-          className: "add-sheet-icon",
+      }), jsxRuntime.jsxs("div", {
+        className: "ff-excel-sheet-bar",
+        children: [jsxRuntime.jsx("div", {
+          className: "ff-excel-add-sheet-icon",
           children: jsxRuntime.jsx(Tooltip, {
             title: "Add Sheet",
             placement: "top",
@@ -31591,43 +31980,43 @@ const ExcelFile = ({
               width: 20
             })
           })
-        }), jsxRuntime.jsx(Col, {
-          size: 10,
-          children: jsxRuntime.jsx("div", {
-            className: "excel-tab-container",
-            children: sheetNames.map((name, index) => jsxRuntime.jsx("div", {
-              className: `excel-tab-list ${name === selectedSheet.name ? 'active' : ''}`,
-              onClick: () => {
-                handleSheetChange(name, index);
-              },
-              suppressContentEditableWarning: editingSheet === index,
-              onDoubleClick: e => {
-                setEditingSheet(index);
-                if (editingSheet === null) {
-                  setTimeout(() => setCursorToEnd(e.target), 0);
-                }
-              },
-              contentEditable: editingSheet === index,
-              onBlur: e => {
+        }), jsxRuntime.jsx("div", {
+          className: "ff-excel-tab-container",
+          children: sheetNames.map((name, index) => jsxRuntime.jsx("div", {
+            onContextMenu: contextClick,
+            className: `ff-excel-tab-list ${name === selectedSheet.name ? 'active' : ''}`,
+            onClick: () => {
+              handleSheetChange(name, index);
+            },
+            suppressContentEditableWarning: editingSheet === index,
+            onDoubleClick: e => {
+              setEditingSheet(index);
+              if (editingSheet === null) {
+                setTimeout(() => setCursorToEnd(e.target), 0);
+              }
+            },
+            contentEditable: editingSheet === index,
+            onBlur: e => {
+              handleNameChange(e, index, name);
+            },
+            onKeyDown: e => {
+              if (e.key === 'Enter') {
+                e.preventDefault();
                 handleNameChange(e, index, name);
-              },
-              onKeyDown: e => {
-                if (e.key === 'Enter') {
-                  e.preventDefault();
-                  handleNameChange(e, index, name);
-                }
-              },
+              }
+            },
+            children: jsxRuntime.jsx(Typography, {
               children: name
-            }, name))
-          })
+            })
+          }, name))
         })]
       })]
     }), jsxRuntime.jsx(Toastify, {})]
   });
 };
 
-var css_248z$9 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-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$9);
+var css_248z$a = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-Module-chip {\n  width: 75px;\n  height: 32px;\n  border: 0.5px solid;\n  border-radius: 16px;\n  color: var(--brand-color);\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-Module-chip .ff-Module-label-chip--active {\n  color: var(--ff-header-text-color);\n}\n.ff-Module-chip--active {\n  background: var(--brand-color);\n}";
+styleInject(css_248z$a);
 
 const ModuleChip = ({
   label = '',
@@ -31653,8 +32042,8 @@ const ModuleChip = ({
   });
 };
 
-var css_248z$8 = ".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-32 {\n  font-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$8);
+var css_248z$9 = ".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-32 {\n  font-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$9);
 
 // Function to generate SVG arc paths
 const calculateArc$1 = ({
@@ -31799,8 +32188,8 @@ const IconRadialChart = ({
   });
 };
 
-var css_248z$7 = ".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$7);
+var css_248z$8 = ".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$8);
 
 const AttachImage = ({
   imageSrc,
@@ -31864,8 +32253,8 @@ const AttachImage = ({
   });
 };
 
-var css_248z$6 = ".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$6);
+var css_248z$7 = ".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$7);
 
 const StatusCard = ({
   icon,
@@ -31914,8 +32303,8 @@ const StatusCard = ({
   });
 };
 
-var css_248z$5 = ".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$5);
+var css_248z$6 = ".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$6);
 
 const VariableDropdown = ({
   optionsList = [],
@@ -31947,8 +32336,8 @@ const VariableDropdown = ({
   });
 };
 
-var css_248z$4 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-line-chart-inner-tooltip, .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-text1, .ff--line-chart-x-line-data, .ff-line-chart-y-axis-text, .ff-line-chart-x-axis-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-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  width: 890px;\n  display: flex;\n}\n.ff-line-chart-text .smooth-dot {\n  transition: cx 0.2s ease, cy 0.2s ease;\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: 160px;\n  font-weight: 600;\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$4);
+var css_248z$5 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-line-chart-inner-tooltip, .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-text1, .ff--line-chart-x-line-data, .ff-line-chart-y-axis-text, .ff-line-chart-x-axis-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-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  width: 890px;\n  display: flex;\n}\n.ff-line-chart-text .smooth-dot {\n  transition: cx 0.2s ease, cy 0.2s ease;\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: 160px;\n  font-weight: 600;\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$5);
 
 const LineChart = ({
   data,
@@ -32165,6 +32554,104 @@ const LineChart = ({
   });
 };
 
+var css_248z$4 = ":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-32 {\n  font-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$4);
+
+const DownloadClient = ({
+  onClose,
+  onClickWindows,
+  onClickLinux,
+  onClickMac,
+  top = '10px',
+  left = '10px'
+}) => {
+  const title = 'Download Client';
+  const description = 'Download and Install the fireflink client to run the script';
+  const chooseOSText = 'Choose OS';
+  React.useEffect(() => {
+    const handleCloseDownloadClient = event => {
+      if (event.key === 'Escape') {
+        onClose?.();
+      }
+    };
+    document.addEventListener('keydown', handleCloseDownloadClient);
+    return () => {
+      document.removeEventListener('keydown', handleCloseDownloadClient);
+    };
+  }, [onClose]);
+  return jsxRuntime.jsx("div", {
+    className: "ff-download-client-overlay",
+    style: {
+      top,
+      left
+    },
+    children: jsxRuntime.jsxs("div", {
+      className: "ff-download-client-container",
+      children: [jsxRuntime.jsxs("div", {
+        className: "ff-download-client-header",
+        children: [jsxRuntime.jsx("div", {
+          className: "ff-header-arrow"
+        }), jsxRuntime.jsx(Typography, {
+          color: "var(--table-header-text-color)",
+          fontWeight: "semi-bold",
+          children: title
+        }), jsxRuntime.jsx("div", {
+          onClick: onClose,
+          children: jsxRuntime.jsx(Icon, {
+            name: "close",
+            width: 12,
+            height: 12
+          })
+        })]
+      }), jsxRuntime.jsxs("div", {
+        className: "ff-download-client-content",
+        children: [jsxRuntime.jsx("div", {
+          className: "ff-download-install",
+          children: jsxRuntime.jsx(Typography, {
+            fontWeight: "semi-bold",
+            color: "var(--download-client-content-text-color)",
+            children: description
+          })
+        }), jsxRuntime.jsx("div", {
+          className: "ff-choose-os",
+          children: jsxRuntime.jsx(Typography, {
+            fontWeight: "semi-bold",
+            color: "var(--download-client-choose-os-text-color)",
+            children: chooseOSText
+          })
+        })]
+      }), jsxRuntime.jsxs("div", {
+        className: "ff-download-client-actions",
+        children: [jsxRuntime.jsx("div", {
+          className: "ff-icons-container",
+          onClick: onClickWindows,
+          children: jsxRuntime.jsx(Icon, {
+            name: "windows",
+            width: 32,
+            height: 38
+          })
+        }), jsxRuntime.jsx("div", {
+          className: "ff-icons-container",
+          onClick: onClickLinux,
+          children: jsxRuntime.jsx(Icon, {
+            name: "linux",
+            width: 32,
+            height: 38
+          })
+        }), jsxRuntime.jsx("div", {
+          className: "ff-icons-container",
+          onClick: onClickMac,
+          children: jsxRuntime.jsx(Icon, {
+            name: "mac_icon",
+            width: 32,
+            height: 38
+          })
+        })]
+      })]
+    })
+  });
+};
+
 function findAndInsert(data, key, targetId, newEntry, insertPosition, childrenKey = 'children' // Allow dynamic key for nested children
 ) {
   function recursiveSearch(items) {
@@ -45035,6 +45522,7 @@ exports.Container = Container;
 exports.DashboardDonutChart = DashboardDonutChart;
 exports.DatePicker = CustomDatePicker;
 exports.DonutChart = DonutChart;
+exports.DownloadClient = DownloadClient;
 exports.DragAndDrop = DragAndDrop;
 exports.Drawer = Drawer;
 exports.EditTextField = EditTextField;