pixel-react 1.9.7 → 1.9.9

package/lib/index.js

@@ -14434,6 +14434,251 @@ const TableHead = /*#__PURE__*/React.memo(({
   });
 });
 
+var css_248z$O = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown, .ff-label-edit-text-field .ff-text-dropdown-field {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n}\n.ff-label-edit-text-field .ff-label-text-field {\n  display: flex;\n  gap: 5px;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  position: absolute;\n  top: 0;\n  left: 10px;\n  transform: translateY(-50%);\n  transition: all 0.2s ease;\n  color: var(--label-edit-text-label-color);\n  background: var(--label-edit-text-background-color);\n  padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n  top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n  padding: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown {\n  border: 1px solid var(--label-edit-text-label-color);\n  outline: none;\n  width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field {\n  position: relative;\n  padding: 0 4px;\n  border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field {\n  flex: 2;\n  border: 1px solid var(--label-edit-text-label-color);\n  border-radius: 4px 0 0 4px;\n  border-right: none;\n  border-width: thin;\n  padding-left: 5px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field:focus-visible {\n  outline: none;\n}\n.ff-label-edit-text-field .dropdown {\n  border-radius: 0 4px 4px 0;\n  flex: 1;\n  height: inherit;\n}\n.ff-label-edit-text-field .ff-icon-container {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n  cursor: pointer;\n}\n.ff-label-edit-text-field .ff-icon-container .disabled-confirm-icon {\n  cursor: default;\n  opacity: 0.5;\n}\n.ff-label-edit-text-field .error-text {\n  margin: 0;\n  color: var(--label-edit-error-text);\n}\n\n.custom-edit-text-field {\n  height: 10px;\n  width: 100px;\n}";
+styleInject(css_248z$O);
+
+var css_248z$N = ".ff-highlight-bg {\n  background-color: var(--text-bg-highlight);\n}";
+styleInject(css_248z$N);
+
+// Function to escape special characters in the search term
+const escapeRegExp = text => {
+  return text?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+};
+const HighlightText = ({
+  text = '',
+  highlight = ''
+}) => {
+  if (!highlight) return jsxRuntime.jsx("span", {
+    children: text
+  });
+  const escapedHighlight = escapeRegExp(highlight); // Escape special characters
+  const parts = text?.split(new RegExp(`(${escapedHighlight})`, 'gi')); // Use escaped string in the regex
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: parts.map((part, index) => part?.toLowerCase() === highlight?.toLowerCase() ? jsxRuntime.jsx("span", {
+      className: "ff-highlight-bg",
+      children: part
+    }, index) : part)
+  });
+};
+
+const getErrorMessage$1 = (inputValue, text, customError, customErrorCondition) => {
+  if (inputValue === text) {
+    return 'No changes were made.';
+  } else if (!inputValue) {
+    return 'Text is required';
+  } else if (inputValue.length < 3) {
+    return 'Please enter at least 3 characters.';
+  } else ;
+  return '';
+};
+const LabelEditTextField = ({
+  label,
+  placeholder,
+  text,
+  showText = true,
+  highlightText,
+  customError,
+  confirmIcon,
+  customErrorCondition,
+  cancelIcon,
+  variant = 'textField',
+  onInputChange,
+  dropdownData = [],
+  // width,
+  className,
+  height,
+  isOpen = false,
+  confirmAction,
+  onClick,
+  tooltip
+}) => {
+  const [isEditing, setIsEditing] = React.useState(isOpen ?? false);
+  const [inputValue, setInputValue] = React.useState(text ?? '');
+  const [dropdownValue, setDropdownValue] = React.useState(dropdownData[0]?.value ?? '');
+  const [showError, setShowError] = React.useState('');
+  const [disabled, isDisabled] = React.useState(true);
+  const [isTextFieldModified, setIsTextFieldModified] = React.useState(false);
+  const isThrowingError = showError && isEditing ? true : false;
+  const containerRef = React.useRef(null);
+  const cancelRef = React.useRef(null);
+  const [clickTimeout, setClickTimeout] = React.useState(null);
+  const handleEsc = useEscapeKey('Escape');
+  React.useEffect(() => {
+    return () => {
+      if (clickTimeout) {
+        clearTimeout(clickTimeout);
+      }
+    };
+  }, [clickTimeout]);
+  const handleDoubleClick = () => {
+    if (clickTimeout) {
+      clearTimeout(clickTimeout);
+      setClickTimeout(null);
+    }
+    setIsEditing(true);
+    setShowError('');
+  };
+  const handleSingleClick = () => {
+    if (onClick) onClick();
+  };
+  const handleClick = () => {
+    if (clickTimeout) {
+      clearTimeout(clickTimeout);
+      setClickTimeout(null);
+    }
+    const timeout = window.setTimeout(() => {
+      handleSingleClick();
+      setClickTimeout(null);
+    }, 1000);
+    setClickTimeout(timeout);
+  };
+  const handleConfirm = () => {
+    let errorMessage = '';
+    if (inputValue.length === 0 || inputValue.trim().length === 0) {
+      errorMessage = 'Please type any text.';
+    } else if (inputValue.length < 3) {
+      errorMessage = 'Please enter at least 3 characters.';
+    } else if (customErrorCondition) {
+      errorMessage = customError ?? 'Invalid input.';
+    }
+    if (errorMessage) {
+      setShowError(errorMessage);
+    } else {
+      setIsEditing(false);
+      setShowError('');
+      if (confirmAction) confirmAction(inputValue, dropdownValue);
+    }
+  };
+  const handleCancel = () => {
+    setInputValue(text ?? '');
+    setDropdownValue(dropdownData[0]?.value ?? '');
+    setIsEditing(false);
+    setShowError('');
+    setIsTextFieldModified(false);
+  };
+  const handleTextFieldChange = e => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    isDisabled(false);
+    if (newValue.length === 0 || newValue.trim().length === 0) {
+      setShowError('Please type any text.');
+    } else if (newValue.length < 3) {
+      setShowError('Please enter at least 3 characters.');
+    } else if (customErrorCondition) {
+      setShowError(customError ?? 'Invalid input.');
+    } else {
+      setShowError('');
+    }
+    setIsTextFieldModified(newValue !== text);
+    if (onInputChange) {
+      onInputChange(newValue);
+    }
+  };
+  const handleBlur = e => {
+    if (containerRef.current && !containerRef.current.contains(e.target) && cancelRef.current !== e.target) {
+      const errorMessage = getErrorMessage$1(inputValue, text ?? '');
+      if (errorMessage && isEditing) {
+        setShowError(errorMessage);
+      } else {
+        setIsEditing(false);
+        setShowError('');
+      }
+    }
+  };
+  React.useEffect(() => {
+    document.addEventListener('click', handleBlur);
+    return () => {
+      document.removeEventListener('click', handleBlur);
+    };
+  }, [inputValue]);
+  handleEsc(handleCancel);
+  return jsxRuntime.jsxs("div", {
+    className: "ff-label-edit-text-field",
+    ref: containerRef,
+    children: [isEditing ? jsxRuntime.jsxs("div", {
+      className: "ff-label-text-field",
+      children: [variant === 'textFieldWithDropdown' ? jsxRuntime.jsxs("div", {
+        className: `ff-label-text-field-with-dropdown ${isEditing ? 'open' : ''}`,
+        style: {
+          height
+        },
+        children: [jsxRuntime.jsx(Input, {
+          name: "input",
+          type: "text",
+          label: label ? label : '',
+          disabled: false,
+          error: isThrowingError,
+          placeholder: placeholder ? placeholder : '',
+          value: inputValue,
+          onChange: handleTextFieldChange,
+          className: `${className} 
+                
+               ${isTextFieldModified ? 'modified' : ''}`
+        }), jsxRuntime.jsx(Select$1, {
+          label: '',
+          optionsList: dropdownData,
+          selectedOption: {
+            value: dropdownValue,
+            label: dropdownValue
+          },
+          onChange: option => setDropdownValue(option.value)
+        })]
+      }) : jsxRuntime.jsx("div", {
+        className: "ff-label-text-field-without-dropdown",
+        children: jsxRuntime.jsx(Input, {
+          name: "input",
+          type: "text",
+          label: label ? label : '',
+          disabled: false,
+          placeholder: placeholder ? placeholder : '',
+          value: inputValue,
+          onChange: handleTextFieldChange,
+          className: `${className} 
+               
+               ${isTextFieldModified ? 'modified' : ''}`
+        })
+      }), jsxRuntime.jsxs("div", {
+        className: "ff-icon-container",
+        children: [confirmIcon && jsxRuntime.jsx(Icon, {
+          color: "var(--label-edit-confirm-icon)",
+          height: 20,
+          width: 20,
+          name: confirmIcon.name,
+          disabled: disabled,
+          className: `${disabled ? 'disabled-confirm-icon' : 'confirm-icon'}`,
+          onClick: handleConfirm
+        }), cancelIcon && jsxRuntime.jsx(Icon, {
+          color: "var(--label-edit-cancel-icon)",
+          height: 12,
+          width: 20,
+          name: cancelIcon.name,
+          className: "cancel-icon",
+          onClick: handleCancel,
+          ref: cancelRef
+        })]
+      })]
+    }) : jsxRuntime.jsx(Tooltip, {
+      title: tooltip?.tooltipTitle ? tooltip?.tooltipTitle : '',
+      placement: 'bottom',
+      children: showText && jsxRuntime.jsx("span", {
+        className: "display-text",
+        onDoubleClick: handleDoubleClick,
+        role: "button",
+        onClick: handleClick,
+        children: jsxRuntime.jsx(HighlightText, {
+          text: inputValue,
+          highlight: highlightText
+        })
+      })
+    }), showError && isEditing && jsxRuntime.jsx(Typography, {
+      as: "p",
+      fontSize: 8,
+      className: "error-text",
+      children: showError
+    })]
+  });
+};
+
 const renderSpaces = (level, parentSiblings = [], isLast) => {
   let siblingsArray = parentSiblings;
   let isLastNode = isLast;
@@ -14456,7 +14701,8 @@ const TableCell = /*#__PURE__*/React.memo(({
   selected,
   select,
   onCheckBoxChange,
-  onToggleExpand
+  onToggleExpand,
+  index
 }) => jsxRuntime.jsxs("td", {
   className: `${col.isTree && node.folder ? 'folder' : ''}`,
   children: [col.isTree && renderSpaces(node.hierarchy + 1, node.parentSiblings, node.last), jsxRuntime.jsxs("div", {
@@ -14470,22 +14716,27 @@ const TableCell = /*#__PURE__*/React.memo(({
       })
     }), jsxRuntime.jsxs("span", {
       className: `tree-table-td-content ${col.isTree && node.folder ? 'folder' : ''}`,
-      children: [col.isTree && select === 'checkbox' && jsxRuntime.jsx(Checkbox, {
-        checked: selected.includes(node.id),
-        onChange: e => onCheckBoxChange(e, node)
-      }), col.isTree && select === 'radio' && jsxRuntime.jsx(RadioButton, {
-        name: node.title,
-        checked: selected.includes(node.id),
-        value: node.id,
-        onChange: e => onCheckBoxChange(e, node)
-      }), jsxRuntime.jsx("span", {
+      children: [!node?.showInput && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [col.isTree && select === 'checkbox' && jsxRuntime.jsx(Checkbox, {
+          checked: node?.checked || false,
+          partial: node?.checked === 'partial',
+          onChange: e => onCheckBoxChange(e, node)
+        }), col.isTree && select === 'radio' && jsxRuntime.jsx(RadioButton, {
+          name: node.title,
+          checked: selected.includes(node.id),
+          value: node.id,
+          onChange: e => onCheckBoxChange(e, node)
+        })]
+      }), node.showInput && col.isTree ? jsxRuntime.jsx(LabelEditTextField, {
+        isOpen: true
+      }) : jsxRuntime.jsx("span", {
         className: "tree-table-td-content-text",
         children: prepareData(node, col)
       })]
     })]
-  }), col.actions && jsxRuntime.jsx("div", {
+  }), col.actions && !node?.showInput && jsxRuntime.jsx("div", {
     className: "table-tree-row-action",
-    children: col.actions(node)
+    children: col.actions(node, index)
   })]
 }));
 
@@ -14496,7 +14747,8 @@ const TableRow = /*#__PURE__*/React.memo(({
   select,
   onRowClick,
   onToggleExpand,
-  onCheckBoxChange
+  onCheckBoxChange,
+  index
 }) => jsxRuntime.jsx("tr", {
   "data-level": node.hierarchy,
   className: "show",
@@ -14507,7 +14759,8 @@ const TableRow = /*#__PURE__*/React.memo(({
     selected: selected,
     select: select,
     onCheckBoxChange: onCheckBoxChange,
-    onToggleExpand: onToggleExpand
+    onToggleExpand: onToggleExpand,
+    index: index
   }, col.name))
 }));
 
@@ -14531,15 +14784,14 @@ const TableBody = /*#__PURE__*/React.memo(({
       select: select,
       onRowClick: onRowClick,
       onToggleExpand: node => onToggleExpand(node, index),
-      onCheckBoxChange: onCheckBoxChange
-    }, node.searchKey);
+      onCheckBoxChange: onCheckBoxChange,
+      index: index
+    }, node.key);
   }), jsxRuntime.jsx("tr", {
     id: "ff-table-tree-last-node"
   })]
 }));
 
-const functionCheck = functionToCheck => !checkEmpty(functionToCheck) && functionToCheck && {}.toString.call(functionToCheck) === '[object Function]';
-
 const TreeTable = ({
   treeData,
   columnsData,
@@ -14559,14 +14811,13 @@ const TreeTable = ({
     threshold: 0.1,
     onIntersect: entry => {
       if (entry.isIntersecting) {
-        if (functionCheck(loadMore)) {
-          let direction = 'up';
+        if (loadMore) {
+          let direction = 'above';
           if (entry.target.id === 'ff-table-tree-last-node') {
-            direction = 'down';
+            direction = 'below';
           }
           loadMore(direction);
         }
-        console.log('Element in view:', entry.target.id);
       }
     }
   });
@@ -14604,8 +14855,8 @@ const TreeTable = ({
 };
 var TableTree = /*#__PURE__*/React.memo(TreeTable);
 
-var css_248z$O = ":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  --dataset-tooltip-title: #($dataset-tooltip-title),\n  --dataset-tooltip-value: #($dataset-tooltip-value), ;\n}\n\n.fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-tabs-container {\n  box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row {\n  flex: 0 1 auto;\n}\n.ff-tabs-container .ff-tab-row--default {\n  display: flex;\n  gap: 8px;\n  border-radius: 8px 8px 0 0;\n  padding: 6px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n  position: relative;\n  border: none;\n  background: none;\n  padding: 0 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count {\n  background-color: var(--input-default-label-color);\n  color: var(--tab-bg-color);\n  height: 12px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 8px;\n  font-weight: 600;\n  padding: 0 2px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count--active {\n  background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar {\n  width: 100%;\n  border-radius: 2px 2px 0 0;\n  border-color: var(--input-default-label-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar--active {\n  border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar {\n  border-top: 2px solid var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar--active {\n  border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label {\n  color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label--active {\n  color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count {\n  background-color: var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count--active {\n  background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ff-tabs-container .ff-tab-row--capsule {\n  display: flex;\n  gap: 8px;\n  border: 1px solid var(--tabs-border-color);\n  border-radius: 8px;\n  padding: 3px 4px;\n  background-color: var(--tabs-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule {\n  background: transparent;\n  border: none;\n  padding: 3px 4px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label {\n  color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label--active {\n  color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule.active {\n  background-color: var(--tab-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule .ff-tab-bar {\n  display: none;\n}\n.ff-tabs-container .ff-tab-row--no-border {\n  border: none;\n}\n.ff-tabs-container .ff-tab-row--no-padding {\n  border-radius: 8px;\n  background: white;\n  padding: 0px;\n  justify-content: flex-start;\n  margin-right: 8px;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule {\n  background: transparent;\n  border: none;\n  padding: 3px 4px;\n  border-radius: 7px;\n  cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule:hover .ff-tab-label {\n  color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule:hover .ff-tab-label--active {\n  color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule.active {\n  background-color: var(--slider-table-color);\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule .ff-tab-bar {\n  display: none;\n}\n.ff-tabs-container .ff-tab-content {\n  width: inherit;\n}\n.ff-tabs-container .ff-defaultStatus {\n  position: absolute;\n  top: 2px;\n  right: 0px;\n  width: 6px;\n  height: 6px;\n  background-color: transparent;\n  border-radius: 50%;\n}\n.ff-tabs-container .ff-defaultStatus.ff-successStatus {\n  background-color: var(--confirm-tick-icon-color);\n  box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}\n.ff-tabs-container .ff-defaultStatus.ff-dangerStatus {\n  background-color: var(--delete-text-color);\n  box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}";
-styleInject(css_248z$O);
+var css_248z$M = ":root {\n  --tooltip-bg-color: #1e161f;\n  --status-approved-text-color: #016102;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-text-color: #3c3838;\n  --status-approved-bg-color: #c6efcd;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-warning-bg-color: #fae2c6;\n  --status-skipped-bg-color: #c4c3c3;\n  --brand-color: #71347b;\n  --icons-default-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --default-color: #747474;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --system-color--error: #c50303;\n  --hover-color: #f7ebff;\n  --brand2-color: #610b86;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --description-text-color: #d9d9d9;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --text-color: #1e161f;\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --error-light: #e42525;\n  --tabs-label-default-color: tabs-label-default-color;\n  --tabs-label-active-color: tabs-label-active-color;\n  --tabs-border-color: tabs-border-color;\n  --tabs-bg-color: tabs-bg-color;\n  --tab-bg-color: tab-bg-color;\n  --toggle-button-bg-color: #ffffff;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-strip-color: #cfd1e2;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --toggle-strip-color: #cfd1e2;\n  --add-icon-hover-color: #431b4a;\n  --arrows-button-border-color: #ded1e5;\n  --arrow-button-bg-color: #ffffff;\n  --text-bg-highlight: #f5fb00;\n  --slider-table-color: #efe1f9;\n  --variable-dropdown-bg: #($variable-dropdown-bg);\n  --dataset-tooltip-title: #($dataset-tooltip-title),\n  --dataset-tooltip-value: #($dataset-tooltip-value), ;\n}\n\n.fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-tabs-container {\n  box-sizing: border-box;\n}\n.ff-tabs-container .ff-tab-row {\n  flex: 0 1 auto;\n}\n.ff-tabs-container .ff-tab-row--default {\n  display: flex;\n  gap: 8px;\n  border-radius: 8px 8px 0 0;\n  padding: 6px 8px 0;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default {\n  position: relative;\n  border: none;\n  background: none;\n  padding: 0 8px;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count {\n  background-color: var(--input-default-label-color);\n  color: var(--tab-bg-color);\n  height: 12px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 8px;\n  font-weight: 600;\n  padding: 0 2px;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .label-count-section .tab-count--active {\n  background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar {\n  width: 100%;\n  border-radius: 2px 2px 0 0;\n  border-color: var(--input-default-label-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default .ff-tab-bar--active {\n  border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar {\n  border-top: 2px solid var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-bar--active {\n  border-top: 2px solid var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label {\n  color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .ff-tab-label--active {\n  color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count {\n  background-color: var(--input-hover-border-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default:hover .tab-count--active {\n  background-color: var(--tabs-label-active-color);\n}\n.ff-tabs-container .ff-tab-row--default .ff-tab-button--default.disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ff-tabs-container .ff-tab-row--capsule {\n  display: flex;\n  gap: 8px;\n  border: 1px solid var(--tabs-border-color);\n  border-radius: 8px;\n  padding: 3px 4px;\n  background-color: var(--tabs-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule {\n  background: transparent;\n  border: none;\n  padding: 3px 4px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label {\n  color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule:hover .ff-tab-label--active {\n  color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule.active {\n  background-color: var(--tab-bg-color);\n}\n.ff-tabs-container .ff-tab-row--capsule .ff-tab-button--capsule .ff-tab-bar {\n  display: none;\n}\n.ff-tabs-container .ff-tab-row--no-border {\n  border: none;\n}\n.ff-tabs-container .ff-tab-row--no-padding {\n  border-radius: 8px;\n  background: white;\n  padding: 0px;\n  justify-content: flex-start;\n  margin-right: 8px;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule {\n  background: transparent;\n  border: none;\n  padding: 3px 4px;\n  border-radius: 7px;\n  cursor: pointer;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule:hover .ff-tab-label {\n  color: var(--input-hover-border-color) !important;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule:hover .ff-tab-label--active {\n  color: var(--tabs-label-active-color) !important;\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule.active {\n  background-color: var(--slider-table-color);\n}\n.ff-tabs-container .ff-tab-row--no-padding .ff-tab-button--capsule .ff-tab-bar {\n  display: none;\n}\n.ff-tabs-container .ff-tab-content {\n  width: inherit;\n}\n.ff-tabs-container .ff-defaultStatus {\n  position: absolute;\n  top: 2px;\n  right: 0px;\n  width: 6px;\n  height: 6px;\n  background-color: transparent;\n  border-radius: 50%;\n}\n.ff-tabs-container .ff-defaultStatus.ff-successStatus {\n  background-color: var(--confirm-tick-icon-color);\n  box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}\n.ff-tabs-container .ff-defaultStatus.ff-dangerStatus {\n  background-color: var(--delete-text-color);\n  box-shadow: 0px 1px 1px 0px var(--toggle-strip-shadow);\n}";
+styleInject(css_248z$M);
 
 const Tabs = ({
   variant = 'default',
@@ -14660,32 +14911,8 @@ const Tabs = ({
   });
 };
 
-var css_248z$N = ".ff-highlight-bg {\n  background-color: var(--text-bg-highlight);\n}";
-styleInject(css_248z$N);
-
-// Function to escape special characters in the search term
-const escapeRegExp = text => {
-  return text?.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
-};
-const HighlightText = ({
-  text = '',
-  highlight = ''
-}) => {
-  if (!highlight) return jsxRuntime.jsx("span", {
-    children: text
-  });
-  const escapedHighlight = escapeRegExp(highlight); // Escape special characters
-  const parts = text?.split(new RegExp(`(${escapedHighlight})`, 'gi')); // Use escaped string in the regex
-  return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: parts.map((part, index) => part?.toLowerCase() === highlight?.toLowerCase() ? jsxRuntime.jsx("span", {
-      className: "ff-highlight-bg",
-      children: part
-    }, index) : part)
-  });
-};
-
-var css_248z$M = ".fontXs, .ff-search-container .ff-search-input {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-search-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-search-container .ff-search-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 4px;\n}\n.ff-search-container .ff-search-icon:hover {\n  background-color: var(--ff-search-field-hover-color);\n}\n.ff-search-container .ff-search-icon .ff-icon-container svg path {\n  fill: var(--brand-color);\n}\n.ff-search-container .ff-search-input {\n  border: none;\n  color: var(--tooltip-bg-color);\n  line-height: 12px;\n  visibility: hidden;\n  transition: width 0.4s ease;\n}\n.ff-search-container .ff-search-input:focus {\n  outline: none;\n  border: none;\n}\n.ff-search-container .ff-search-input:hover {\n  border: none;\n}\n.ff-search-container.disabled {\n  opacity: 0.5;\n}\n.ff-search-container.expanded {\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-search-icon:hover {\n  background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-vertical-line {\n  height: 8px;\n  width: 1px;\n  border-radius: 1px;\n  background-color: var(--border-color);\n}\n.ff-search-container.expanded .ff-search-input {\n  visibility: visible;\n  margin-left: 4px;\n}\n.ff-search-container.expanded .ff-search-input::placeholder {\n  color: var(--ff-search-filed-placeholder-text);\n}\n.ff-search-container.expanded .ff-search-icon {\n  border: none;\n  cursor: default;\n  margin-right: 4px;\n}\n.ff-search-container.expanded .ff-search-clear-button {\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  width: 22px;\n  padding-top: 1px;\n}\n.ff-search-container.expanded .ff-search-clear-button.showClose {\n  display: none;\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.showClose {\n  display: none;\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$M);
+var css_248z$L = ".fontXs, .ff-search-container .ff-search-input {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-search-container {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-search-container .ff-search-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  border-radius: 4px;\n}\n.ff-search-container .ff-search-icon:hover {\n  background-color: var(--ff-search-field-hover-color);\n}\n.ff-search-container .ff-search-icon .ff-icon-container svg path {\n  fill: var(--brand-color);\n}\n.ff-search-container .ff-search-input {\n  border: none;\n  color: var(--tooltip-bg-color);\n  line-height: 12px;\n  visibility: hidden;\n  transition: width 0.4s ease;\n}\n.ff-search-container .ff-search-input:focus {\n  outline: none;\n  border: none;\n}\n.ff-search-container .ff-search-input:hover {\n  border: none;\n}\n.ff-search-container.disabled {\n  opacity: 0.5;\n}\n.ff-search-container.expanded {\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-search-icon:hover {\n  background-color: var(--ff-search-filed-bg-color);\n}\n.ff-search-container.expanded .ff-vertical-line {\n  height: 8px;\n  width: 1px;\n  border-radius: 1px;\n  background-color: var(--border-color);\n}\n.ff-search-container.expanded .ff-search-input {\n  visibility: visible;\n  margin-left: 4px;\n}\n.ff-search-container.expanded .ff-search-input::placeholder {\n  color: var(--ff-search-filed-placeholder-text);\n}\n.ff-search-container.expanded .ff-search-icon {\n  border: none;\n  cursor: default;\n  margin-right: 4px;\n}\n.ff-search-container.expanded .ff-search-clear-button {\n  display: grid;\n  place-items: center;\n  cursor: pointer;\n  width: 22px;\n  padding-top: 1px;\n}\n.ff-search-container.expanded .ff-search-clear-button.showClose {\n  display: none;\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.showClose {\n  display: none;\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$L);
 
 const Search = ({
   placeholder = 'Search',
@@ -25519,8 +25746,8 @@ const TimePicker = ({
   });
 };
 
-var css_248z$L = "@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-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n/* Custom date picker styling */\n.ff-date-picker .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\n.ff-date-picker-container {\n  display: flex;\n  flex-direction: column;\n  position: fixed;\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}\n.ff-date-picker-container .rdp-root {\n  --rdp-accent-color: var(--brand-color);\n  --rdp-day-height: 24px;\n  --rdp-day-width: 36px;\n  --rdp-day_button-height: 24px;\n  --rdp-day_button-width: 36px;\n  font-family: \"Poppins\";\n  font-size: 12px;\n  --rdp-font-family: \"Poppins\", sans-serif;\n}\n.ff-date-picker-container .ff-calendar-container {\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n  height: 240px;\n}\n.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-container .ff-date-picker-controls .ff-date-picker-button {\n  font-weight: 600;\n  line-height: 15px;\n}\n\n.ff-calendar .ff-calendar-nav-button {\n  margin: 0 5px;\n  border: 1px solid var(--border-color);\n  background-color: var(--toggle-button-bg-color);\n  box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);\n  padding: 0px;\n  border-radius: 30%;\n  cursor: pointer;\n}\n.ff-calendar .ff-calendar-nav-button:disabled {\n  cursor: auto;\n  opacity: 0.5;\n}\n.ff-calendar .ff-calendar-haeder {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  color: var(--text-color);\n}\n.ff-calendar .ff-custom-year_grid,\n.ff-calendar .ff-custom-month_grid {\n  width: calc((var(--rdp-day_button-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-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-calendar .ff-custom-month_grid .ff-custom-year,\n.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: var(--disabled-primary-color);\n}\n.ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.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-calendar .ff-custom-year_grid .ff-custom-year--disabled,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--disabled,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--disabled,\n.ff-calendar .ff-custom-month_grid .ff-custom-month--disabled {\n  color: var(--text-color-light);\n  cursor: default;\n}\n.ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-month--selected, .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-year--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-month--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-year--selected {\n  background-color: var(--disable-color);\n}\n.ff-calendar .rdp-weekdays th {\n  color: #6f7c8e;\n  font-weight: 400;\n}\n.ff-calendar .rdp-day {\n  padding: 2px;\n  font-weight: 500;\n}\n.ff-calendar .rdp-day_button {\n  border-radius: 4px;\n  padding: 3px 9px;\n}\n.ff-calendar .rdp-day_button:hover {\n  background-color: var(--hover-color);\n}\n.ff-calendar .rdp-selected {\n  font: inherit;\n}\n.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-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n  border: 2px solid var(--rdp-accent-color);\n}\n\n.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-time-picker-container::-webkit-scrollbar {\n  display: none;\n}\n.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-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-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n  border: none;\n  padding: 5px;\n  width: 100%;\n  text-align: center;\n  border-radius: 4px 0 0 4px;\n  font-weight: 400;\n}\n.ff-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-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-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-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-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n  border-color: var(--brand-color);\n}\n.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-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-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-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n  border-color: var(--input-error-text-color) !important;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n  outline: none;\n}\n.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-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-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n  border-color: var(--brand-color) !important;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.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-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon svg path {\n  fill: var(--default-icon-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n  position: absolute;\n  top: 100%;\n  left: 0;\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-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-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-time-picker-container .ff-time-picker-options {\n  height: 86%;\n  overflow-y: auto;\n  padding-right: 5px;\n}\n.ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.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-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n  background-color: var(--hover-color);\n  border-radius: 4px;\n}\n.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}\n\n/* Variables declaration */\n/* prettier-ignore */\n.rdp-root {\n  --rdp-accent-color: blue;\n  /* The accent color used for selected days and UI elements. */\n  --rdp-accent-background-color: #f0f0ff;\n  /* The accent background color used for selected days and UI elements. */\n  --rdp-font-family: system-ui;\n  /* The font family used by the calendar. Note that `inherit`does not work here. */\n  --rdp-day-font: inherit;\n  /* The font used for the day cells. */\n  --rdp-day-height: 2.75rem;\n  /* The height of the day cells. */\n  --rdp-day-width: 2.75rem;\n  /* The width of the day cells. */\n  --rdp-day_button-border-radius: 100%;\n  /* The border radius of the day cells. */\n  --rdp-day_button-border: 2px solid transparent;\n  /* The border of the day cells. */\n  --rdp-day_button-height: var(--rdp-day-height);\n  /* The height of the day cells. */\n  --rdp-day_button-width: var(--rdp-day-width);\n  /* The width of the day cells. */\n  --rdp-selected-border: 2px solid var(--rdp-accent-color);\n  /* The border of the selected days. */\n  --rdp-selected-font: bold large var(--rdp-font-family);\n  /* The font of the selected days. */\n  --rdp-disabled-opacity: 0.5;\n  /* The opacity of the disabled days. */\n  --rdp-outside-opacity: 0.75;\n  /* The opacity of the days outside the current month. */\n  --rdp-today-color: var(--rdp-accent-color);\n  /* The color of the today's date. */\n  --rdp-dropdown-gap: 0.5rem;\n  /* The gap between the dropdowns used in the month captons. */\n  --rdp-month_caption-font: bold larger var(--rdp-font-family);\n  /* The font of the month caption. */\n  --rdp-months-gap: 2rem;\n  /* The gap between the months in the multi-month view. */\n  --rdp-nav_button-disabled-opacity: 0.5;\n  /* The opacity of the disabled navigation buttons. */\n  --rdp-nav_button-height: 2.25rem;\n  /* The height of the navigation buttons. */\n  --rdp-nav_button-width: 2.25rem;\n  /* The width of the navigation buttons. */\n  --rdp-nav-height: 2.75rem;\n  /* The height of the navigation bar. */\n  --rdp-range_middle-background-color: var(--rdp-accent-background-color);\n  /* The color of the background for days in the middle of a range. */\n  --rdp-range_middle-font: normal medium var(--rdp-font-family);\n  /* The font for days in the middle of a range. */\n  --rdp-range_middle-foreground-color: white;\n  /* The font for days in the middle of a range. */\n  --rdp-range_middle-color: inherit;\n  /* The color of the range text. */\n  --rdp-range_start-color: white;\n  /* The color of the range text. */\n  --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%);\n  /* Used for the background of the start of the selected range. */\n  --rdp-range_start-date-background-color: var(--rdp-accent-color);\n  /* The background color of the date when at the start of the selected range. */\n  --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%);\n  /* Used for the background of the end of the selected range. */\n  --rdp-range_end-color: white;\n  /* The color of the range text. */\n  --rdp-range_end-date-background-color: var(--rdp-accent-color);\n  /* The background color of the date when at the end of the selected range. */\n  --rdp-week_number-border-radius: 100%;\n  /* The border radius of the week number. */\n  --rdp-week_number-border: 2px solid transparent;\n  /* The border of the week number. */\n  --rdp-week_number-font: 400 small var(--rdp-font-family);\n  /* The font of the week number cells. */\n  --rdp-week_number-height: var(--rdp-day-height);\n  /* The height of the week number cells. */\n  --rdp-week_number-opacity: 0.75;\n  /* The opacity of the week number. */\n  --rdp-week_number-width: var(--rdp-day-width);\n  /* The width of the week number cells. */\n  --rdp-weeknumber-text-align: center;\n  /* The text alignment of the weekday cells. */\n  --rdp-weekday-font: 500 smaller var(--rdp-font-family);\n  /* The font of the weekday. */\n  --rdp-weekday-opacity: 0.75;\n  /* The opacity of the weekday. */\n  --rdp-weekday-padding: 0.5rem 0rem;\n  /* The padding of the weekday. */\n  --rdp-weekday-text-align: center;\n  /* The text alignment of the weekday cells. */\n  --rdp-gradient-direction: 90deg;\n}\n\n.rdp-root[dir=rtl] {\n  --rdp-gradient-direction: -90deg;\n}\n\n/* Root of the component. */\n.rdp-root {\n  position: relative;\n  /* Required to position the navigation toolbar. */\n  box-sizing: border-box;\n}\n\n.rdp-root * {\n  box-sizing: border-box;\n}\n\n.rdp-day {\n  width: var(--rdp-day-width);\n  height: var(--rdp-day-height);\n  font: var(--rdp-day-font);\n  text-align: center;\n}\n\n.rdp-day_button {\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  width: var(--rdp-day_button-width);\n  height: var(--rdp-day_button-height);\n  border: var(--rdp-day_button-border);\n  border-radius: var(--rdp-day_button-border-radius);\n}\n\n.rdp-day_button:disabled {\n  cursor: revert;\n}\n\n.rdp-caption_label {\n  z-index: 1;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n  border: 0;\n}\n\n.rdp-button_next,\n.rdp-button_previous {\n  border: none;\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  appearance: none;\n  width: var(--rdp-nav_button-width);\n  height: var(--rdp-nav_button-height);\n}\n\n.rdp-button_next:disabled,\n.rdp-button_previous:disabled {\n  cursor: revert;\n  opacity: var(--rdp-nav_button-disabled-opacity);\n}\n\n.rdp-chevron {\n  display: inline-block;\n  fill: var(--rdp-accent-color);\n}\n\n.rdp-root[dir=rtl] .rdp-nav .rdp-chevron {\n  transform: rotate(180deg);\n}\n\n.rdp-root[dir=rtl] .rdp-nav .rdp-chevron {\n  transform: rotate(180deg);\n  transform-origin: 50%;\n}\n\n.rdp-dropdowns {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rdp-dropdown-gap);\n}\n\n.rdp-dropdown {\n  z-index: 2;\n  /* Reset */\n  opacity: 0;\n  appearance: none;\n  position: absolute;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  border: none;\n  line-height: inherit;\n}\n\n.rdp-dropdown_root {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown_root[data-disabled=true] .rdp-chevron {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-month_caption {\n  display: flex;\n  align-content: center;\n  height: var(--rdp-nav-height);\n  font: var(--rdp-month_caption-font);\n}\n\n.rdp-months {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--rdp-months-gap);\n  max-width: fit-content;\n}\n\n.rdp-month_grid {\n  border-collapse: collapse;\n}\n\n.rdp-nav {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  display: flex;\n  align-items: center;\n  height: var(--rdp-nav-height);\n}\n\n.rdp-weekday {\n  opacity: var(--rdp-weekday-opacity);\n  padding: var(--rdp-weekday-padding);\n  font: var(--rdp-weekday-font);\n  text-align: var(--rdp-weekday-text-align);\n  text-transform: var(--rdp-weekday-text-transform);\n}\n\n.rdp-week_number {\n  opacity: var(--rdp-week_number-opacity);\n  font: var(--rdp-week_number-font);\n  height: var(--rdp-week_number-height);\n  width: var(--rdp-week_number-width);\n  border: var(--rdp-week_number-border);\n  border-radius: var(--rdp-week_number-border-radius);\n  text-align: var(--rdp-weeknumber-text-align);\n}\n\n/* DAY MODIFIERS */\n.rdp-today:not(.rdp-outside) {\n  color: var(--rdp-today-color);\n}\n\n.rdp-selected {\n  font: var(--rdp-selected-font);\n}\n\n.rdp-selected .rdp-day_button {\n  border: var(--rdp-selected-border);\n}\n\n.rdp-outside {\n  opacity: var(--rdp-outside-opacity);\n}\n\n.rdp-disabled {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-hidden {\n  visibility: hidden;\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_start {\n  background: var(--rdp-range_start-background);\n}\n\n.rdp-range_start .rdp-day_button {\n  background-color: var(--rdp-range_start-date-background-color);\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_middle {\n  background-color: var(--rdp-range_middle-background-color);\n  font: var(--rdp-range_middle-font);\n}\n\n.rdp-range_middle .rdp-day_button {\n  border-color: transparent;\n  border: unset;\n  border-radius: unset;\n  color: var(--rdp-range_middle-color);\n}\n\n.rdp-range_end {\n  background: var(--rdp-range_end-background);\n  color: var(--rdp-range_end-color);\n}\n\n.rdp-range_end .rdp-day_button {\n  color: var(--rdp-range_start-color);\n  background-color: var(--rdp-range_end-date-background-color);\n}\n\n.rdp-range_start.rdp-range_end {\n  background: revert;\n}\n\n.rdp-focusable {\n  cursor: pointer;\n}";
-styleInject(css_248z$L);
+var css_248z$K = "@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-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-date-picker .ff-datepicker-input-container .ff-date-input-field .ff-date-input-message {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n/* Custom date picker styling */\n.ff-date-picker .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\n.ff-date-picker-container {\n  display: flex;\n  flex-direction: column;\n  position: fixed;\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}\n.ff-date-picker-container .rdp-root {\n  --rdp-accent-color: var(--brand-color);\n  --rdp-day-height: 24px;\n  --rdp-day-width: 36px;\n  --rdp-day_button-height: 24px;\n  --rdp-day_button-width: 36px;\n  font-family: \"Poppins\";\n  font-size: 12px;\n  --rdp-font-family: \"Poppins\", sans-serif;\n}\n.ff-date-picker-container .ff-calendar-container {\n  display: flex;\n  align-items: flex-start;\n  gap: 4px;\n  height: 240px;\n}\n.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-container .ff-date-picker-controls .ff-date-picker-button {\n  font-weight: 600;\n  line-height: 15px;\n}\n\n.ff-calendar .ff-calendar-nav-button {\n  margin: 0 5px;\n  border: 1px solid var(--border-color);\n  background-color: var(--toggle-button-bg-color);\n  box-shadow: 0 -1px 2px 0 var(--ff-mini-modal-box-shadow);\n  padding: 0px;\n  border-radius: 30%;\n  cursor: pointer;\n}\n.ff-calendar .ff-calendar-nav-button:disabled {\n  cursor: auto;\n  opacity: 0.5;\n}\n.ff-calendar .ff-calendar-haeder {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n  color: var(--text-color);\n}\n.ff-calendar .ff-custom-year_grid,\n.ff-calendar .ff-custom-month_grid {\n  width: calc((var(--rdp-day_button-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-calendar .ff-custom-year_grid .ff-custom-year,\n.ff-calendar .ff-custom-year_grid .ff-custom-month,\n.ff-calendar .ff-custom-month_grid .ff-custom-year,\n.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: var(--disabled-primary-color);\n}\n.ff-calendar .ff-custom-year_grid .ff-custom-year--selected,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--selected,\n.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-calendar .ff-custom-year_grid .ff-custom-year--disabled,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--disabled,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--disabled,\n.ff-calendar .ff-custom-month_grid .ff-custom-month--disabled {\n  color: var(--text-color-light);\n  cursor: default;\n}\n.ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-month--selected, .ff-calendar .ff-custom-year_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-calendar .ff-custom-year_grid .ff-custom-month--disabled.ff-custom-year--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-month--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-year--disabled.ff-custom-year--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-month--selected,\n.ff-calendar .ff-custom-month_grid .ff-custom-month--disabled.ff-custom-year--selected {\n  background-color: var(--disable-color);\n}\n.ff-calendar .rdp-weekdays th {\n  color: #6f7c8e;\n  font-weight: 400;\n}\n.ff-calendar .rdp-day {\n  padding: 2px;\n  font-weight: 500;\n}\n.ff-calendar .rdp-day_button {\n  border-radius: 4px;\n  padding: 3px 9px;\n}\n.ff-calendar .rdp-day_button:hover {\n  background-color: var(--hover-color);\n}\n.ff-calendar .rdp-selected {\n  font: inherit;\n}\n.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-calendar .rdp-today:not(.rdp-outside) .rdp-day_button {\n  border: 2px solid var(--rdp-accent-color);\n}\n\n.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-time-picker-container::-webkit-scrollbar {\n  display: none;\n}\n.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-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-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input {\n  border: none;\n  padding: 5px;\n  width: 100%;\n  text-align: center;\n  border-radius: 4px 0 0 4px;\n  font-weight: 400;\n}\n.ff-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-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-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-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-time-picker-container .ff-time-picker-fields .ff-time-input-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container:focus-within {\n  border-color: var(--brand-color);\n}\n.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-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-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-time-picker-container .ff-time-picker-fields .ff-time-input-container--danger {\n  border-color: var(--input-error-text-color) !important;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-input-container .ff-time-input:focus {\n  outline: none;\n}\n.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-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-time-picker-container .ff-time-picker-fields .ff-time-period-container--active {\n  border-color: var(--brand-color) !important;\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover {\n  border-color: var(--input-hover-border-color);\n}\n.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-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-icon svg path {\n  fill: var(--default-icon-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container:hover svg path {\n  fill: var(--brand-color);\n}\n.ff-time-picker-container .ff-time-picker-fields .ff-time-period-container .ff-time-period-options {\n  position: absolute;\n  top: 100%;\n  left: 0;\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-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-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-time-picker-container .ff-time-picker-options {\n  height: 86%;\n  overflow-y: auto;\n  padding-right: 5px;\n}\n.ff-time-picker-container .ff-time-picker-options::-webkit-scrollbar {\n  width: 4px;\n  height: 12px;\n}\n.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-time-picker-container .ff-time-picker-options::-webkit-scrollbar-track {\n  background-color: var(--hover-color);\n  border-radius: 4px;\n}\n.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}\n\n/* Variables declaration */\n/* prettier-ignore */\n.rdp-root {\n  --rdp-accent-color: blue;\n  /* The accent color used for selected days and UI elements. */\n  --rdp-accent-background-color: #f0f0ff;\n  /* The accent background color used for selected days and UI elements. */\n  --rdp-font-family: system-ui;\n  /* The font family used by the calendar. Note that `inherit`does not work here. */\n  --rdp-day-font: inherit;\n  /* The font used for the day cells. */\n  --rdp-day-height: 2.75rem;\n  /* The height of the day cells. */\n  --rdp-day-width: 2.75rem;\n  /* The width of the day cells. */\n  --rdp-day_button-border-radius: 100%;\n  /* The border radius of the day cells. */\n  --rdp-day_button-border: 2px solid transparent;\n  /* The border of the day cells. */\n  --rdp-day_button-height: var(--rdp-day-height);\n  /* The height of the day cells. */\n  --rdp-day_button-width: var(--rdp-day-width);\n  /* The width of the day cells. */\n  --rdp-selected-border: 2px solid var(--rdp-accent-color);\n  /* The border of the selected days. */\n  --rdp-selected-font: bold large var(--rdp-font-family);\n  /* The font of the selected days. */\n  --rdp-disabled-opacity: 0.5;\n  /* The opacity of the disabled days. */\n  --rdp-outside-opacity: 0.75;\n  /* The opacity of the days outside the current month. */\n  --rdp-today-color: var(--rdp-accent-color);\n  /* The color of the today's date. */\n  --rdp-dropdown-gap: 0.5rem;\n  /* The gap between the dropdowns used in the month captons. */\n  --rdp-month_caption-font: bold larger var(--rdp-font-family);\n  /* The font of the month caption. */\n  --rdp-months-gap: 2rem;\n  /* The gap between the months in the multi-month view. */\n  --rdp-nav_button-disabled-opacity: 0.5;\n  /* The opacity of the disabled navigation buttons. */\n  --rdp-nav_button-height: 2.25rem;\n  /* The height of the navigation buttons. */\n  --rdp-nav_button-width: 2.25rem;\n  /* The width of the navigation buttons. */\n  --rdp-nav-height: 2.75rem;\n  /* The height of the navigation bar. */\n  --rdp-range_middle-background-color: var(--rdp-accent-background-color);\n  /* The color of the background for days in the middle of a range. */\n  --rdp-range_middle-font: normal medium var(--rdp-font-family);\n  /* The font for days in the middle of a range. */\n  --rdp-range_middle-foreground-color: white;\n  /* The font for days in the middle of a range. */\n  --rdp-range_middle-color: inherit;\n  /* The color of the range text. */\n  --rdp-range_start-color: white;\n  /* The color of the range text. */\n  --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%);\n  /* Used for the background of the start of the selected range. */\n  --rdp-range_start-date-background-color: var(--rdp-accent-color);\n  /* The background color of the date when at the start of the selected range. */\n  --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%);\n  /* Used for the background of the end of the selected range. */\n  --rdp-range_end-color: white;\n  /* The color of the range text. */\n  --rdp-range_end-date-background-color: var(--rdp-accent-color);\n  /* The background color of the date when at the end of the selected range. */\n  --rdp-week_number-border-radius: 100%;\n  /* The border radius of the week number. */\n  --rdp-week_number-border: 2px solid transparent;\n  /* The border of the week number. */\n  --rdp-week_number-font: 400 small var(--rdp-font-family);\n  /* The font of the week number cells. */\n  --rdp-week_number-height: var(--rdp-day-height);\n  /* The height of the week number cells. */\n  --rdp-week_number-opacity: 0.75;\n  /* The opacity of the week number. */\n  --rdp-week_number-width: var(--rdp-day-width);\n  /* The width of the week number cells. */\n  --rdp-weeknumber-text-align: center;\n  /* The text alignment of the weekday cells. */\n  --rdp-weekday-font: 500 smaller var(--rdp-font-family);\n  /* The font of the weekday. */\n  --rdp-weekday-opacity: 0.75;\n  /* The opacity of the weekday. */\n  --rdp-weekday-padding: 0.5rem 0rem;\n  /* The padding of the weekday. */\n  --rdp-weekday-text-align: center;\n  /* The text alignment of the weekday cells. */\n  --rdp-gradient-direction: 90deg;\n}\n\n.rdp-root[dir=rtl] {\n  --rdp-gradient-direction: -90deg;\n}\n\n/* Root of the component. */\n.rdp-root {\n  position: relative;\n  /* Required to position the navigation toolbar. */\n  box-sizing: border-box;\n}\n\n.rdp-root * {\n  box-sizing: border-box;\n}\n\n.rdp-day {\n  width: var(--rdp-day-width);\n  height: var(--rdp-day-height);\n  font: var(--rdp-day-font);\n  text-align: center;\n}\n\n.rdp-day_button {\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  width: var(--rdp-day_button-width);\n  height: var(--rdp-day_button-height);\n  border: var(--rdp-day_button-border);\n  border-radius: var(--rdp-day_button-border-radius);\n}\n\n.rdp-day_button:disabled {\n  cursor: revert;\n}\n\n.rdp-caption_label {\n  z-index: 1;\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  white-space: nowrap;\n  border: 0;\n}\n\n.rdp-button_next,\n.rdp-button_previous {\n  border: none;\n  background: none;\n  padding: 0;\n  margin: 0;\n  cursor: pointer;\n  font: inherit;\n  color: inherit;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  appearance: none;\n  width: var(--rdp-nav_button-width);\n  height: var(--rdp-nav_button-height);\n}\n\n.rdp-button_next:disabled,\n.rdp-button_previous:disabled {\n  cursor: revert;\n  opacity: var(--rdp-nav_button-disabled-opacity);\n}\n\n.rdp-chevron {\n  display: inline-block;\n  fill: var(--rdp-accent-color);\n}\n\n.rdp-root[dir=rtl] .rdp-nav .rdp-chevron {\n  transform: rotate(180deg);\n}\n\n.rdp-root[dir=rtl] .rdp-nav .rdp-chevron {\n  transform: rotate(180deg);\n  transform-origin: 50%;\n}\n\n.rdp-dropdowns {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--rdp-dropdown-gap);\n}\n\n.rdp-dropdown {\n  z-index: 2;\n  /* Reset */\n  opacity: 0;\n  appearance: none;\n  position: absolute;\n  inset-block-start: 0;\n  inset-block-end: 0;\n  inset-inline-start: 0;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  cursor: inherit;\n  border: none;\n  line-height: inherit;\n}\n\n.rdp-dropdown_root {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n}\n\n.rdp-dropdown_root[data-disabled=true] .rdp-chevron {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-month_caption {\n  display: flex;\n  align-content: center;\n  height: var(--rdp-nav-height);\n  font: var(--rdp-month_caption-font);\n}\n\n.rdp-months {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--rdp-months-gap);\n  max-width: fit-content;\n}\n\n.rdp-month_grid {\n  border-collapse: collapse;\n}\n\n.rdp-nav {\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  display: flex;\n  align-items: center;\n  height: var(--rdp-nav-height);\n}\n\n.rdp-weekday {\n  opacity: var(--rdp-weekday-opacity);\n  padding: var(--rdp-weekday-padding);\n  font: var(--rdp-weekday-font);\n  text-align: var(--rdp-weekday-text-align);\n  text-transform: var(--rdp-weekday-text-transform);\n}\n\n.rdp-week_number {\n  opacity: var(--rdp-week_number-opacity);\n  font: var(--rdp-week_number-font);\n  height: var(--rdp-week_number-height);\n  width: var(--rdp-week_number-width);\n  border: var(--rdp-week_number-border);\n  border-radius: var(--rdp-week_number-border-radius);\n  text-align: var(--rdp-weeknumber-text-align);\n}\n\n/* DAY MODIFIERS */\n.rdp-today:not(.rdp-outside) {\n  color: var(--rdp-today-color);\n}\n\n.rdp-selected {\n  font: var(--rdp-selected-font);\n}\n\n.rdp-selected .rdp-day_button {\n  border: var(--rdp-selected-border);\n}\n\n.rdp-outside {\n  opacity: var(--rdp-outside-opacity);\n}\n\n.rdp-disabled {\n  opacity: var(--rdp-disabled-opacity);\n}\n\n.rdp-hidden {\n  visibility: hidden;\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_start {\n  background: var(--rdp-range_start-background);\n}\n\n.rdp-range_start .rdp-day_button {\n  background-color: var(--rdp-range_start-date-background-color);\n  color: var(--rdp-range_start-color);\n}\n\n.rdp-range_middle {\n  background-color: var(--rdp-range_middle-background-color);\n  font: var(--rdp-range_middle-font);\n}\n\n.rdp-range_middle .rdp-day_button {\n  border-color: transparent;\n  border: unset;\n  border-radius: unset;\n  color: var(--rdp-range_middle-color);\n}\n\n.rdp-range_end {\n  background: var(--rdp-range_end-background);\n  color: var(--rdp-range_end-color);\n}\n\n.rdp-range_end .rdp-day_button {\n  color: var(--rdp-range_start-color);\n  background-color: var(--rdp-range_end-date-background-color);\n}\n\n.rdp-range_start.rdp-range_end {\n  background: revert;\n}\n\n.rdp-focusable {\n  cursor: pointer;\n}";
+styleInject(css_248z$K);
 
 const CustomDatePicker = ({
   minDate,
@@ -26118,8 +26345,8 @@ const StateDropdown = ({
   });
 };
 
-var css_248z$K = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-plus-icon {\n  border-radius: 16px;\n  border-style: none;\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  gap: 8px;\n  background-color: var(--hover-color);\n  padding: 2px 8px 2px 2px;\n  border: 1px solid var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon {\n  width: 20px;\n  height: 20px;\n  border: 1px solid var(--primary-icon-color);\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon .ff-icon-color path {\n  color: var(--primary-icon-color);\n}\n.ff-plus-icon .icon-name {\n  color: var(--secondary-icon-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-plus-icon:hover {\n  border: 1px solid transparent;\n  background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon:hover .icon-name {\n  font-weight: 600;\n  color: var(--primary-icon-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-plus-icon:hover .button-icon {\n  width: 20px;\n  height: 20px;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  background-color: var(--hover-color);\n}\n.ff-plus-icon:hover .button-icon .ff-icon-color path {\n  color: var(--secondary-icon-color);\n}";
-styleInject(css_248z$K);
+var css_248z$J = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-plus-icon {\n  border-radius: 16px;\n  border-style: none;\n  text-align: center;\n  text-decoration: none;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  gap: 8px;\n  background-color: var(--hover-color);\n  padding: 2px 8px 2px 2px;\n  border: 1px solid var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon {\n  width: 20px;\n  height: 20px;\n  border: 1px solid var(--primary-icon-color);\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon .button-icon .ff-icon-color path {\n  color: var(--primary-icon-color);\n}\n.ff-plus-icon .icon-name {\n  color: var(--secondary-icon-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-plus-icon:hover {\n  border: 1px solid transparent;\n  background-color: var(--secondary-icon-color);\n}\n.ff-plus-icon:hover .icon-name {\n  font-weight: 600;\n  color: var(--primary-icon-color);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-plus-icon:hover .button-icon {\n  width: 20px;\n  height: 20px;\n  border: 1px solid transparent;\n  border-radius: 50%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  background-color: var(--hover-color);\n}\n.ff-plus-icon:hover .button-icon .ff-icon-color path {\n  color: var(--secondary-icon-color);\n}";
+styleInject(css_248z$J);
 
 const IconButton = /*#__PURE__*/React.forwardRef(({
   label,
@@ -26148,8 +26375,8 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
   });
 });
 
-var css_248z$J = ".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$J);
+var css_248z$I = ".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$I);
 
 const useKeyboardActions = actions => {
   React.useEffect(() => {
@@ -26248,8 +26475,8 @@ const DragAndDrop = {
   DNDUtilities
 };
 
-var css_248z$I = ".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$I);
+var css_248z$H = ".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$H);
 
 const VariableInput = ({
   type = 'url',
@@ -26527,8 +26754,8 @@ const VariableInput = ({
   });
 };
 
-var css_248z$H = ".ff-all-project {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n.ff-all-project .ff-all-project-dropdown {\n  width: fit-content;\n  border-radius: 16px;\n  color: var(--expandable-menu-default-bg);\n  line-height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  padding: 3px;\n  cursor: pointer;\n}\n.ff-all-project .ff-all-project-dropdown--selected {\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n}\n.ff-all-project .ff-all-project-dropdown--selected .ff-all-project-container {\n  border-radius: 20px;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n  background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n  text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label {\n  position: relative;\n  white-space: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label:hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label::after {\n  content: \"\";\n  position: absolute;\n  top: 20px;\n  left: 0%;\n  width: 0%;\n  height: 2px;\n  background-color: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container {\n  display: flex;\n  padding: 4px;\n  gap: 4px;\n  justify-content: center;\n  text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container .label-icon {\n  height: 16px;\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-all-project .ff-projects-dropdown {\n  width: 202px;\n  position: absolute;\n  top: 50px;\n  padding: 1px;\n  border: 0.5px solid var(--expandable-menu-default-bg);\n  border-radius: 4px;\n  background-color: var(--secondary-icon-color);\n  color: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .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 .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  border-radius: 4px;\n  margin: 1px;\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-all-projects-option {\n  margin-top: 1px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-option,\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-all-projects-option .ff-projects-icons svg path,\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$H);
+var css_248z$G = ".ff-all-project {\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-start;\n}\n.ff-all-project .ff-all-project-dropdown {\n  width: fit-content;\n  border-radius: 16px;\n  color: var(--expandable-menu-default-bg);\n  line-height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  padding: 3px;\n  cursor: pointer;\n}\n.ff-all-project .ff-all-project-dropdown--selected {\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n}\n.ff-all-project .ff-all-project-dropdown--selected .ff-all-project-container {\n  border-radius: 20px;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n  background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n  text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label {\n  position: relative;\n  white-space: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label:hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-all-project .ff-all-project-dropdown:not(.ff-all-project-dropdown--selected):hover .projects-label::after {\n  content: \"\";\n  position: absolute;\n  top: 20px;\n  left: 0%;\n  width: 0%;\n  height: 2px;\n  background-color: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container {\n  display: flex;\n  padding: 4px;\n  gap: 4px;\n  justify-content: center;\n  text-wrap-mode: nowrap;\n}\n.ff-all-project .ff-all-project-dropdown .ff-all-project-container .label-icon {\n  height: 16px;\n  width: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n}\n.ff-all-project .ff-projects-dropdown {\n  width: 202px;\n  position: absolute;\n  top: 50px;\n  padding: 1px;\n  border: 0.5px solid var(--expandable-menu-default-bg);\n  border-radius: 4px;\n  background-color: var(--secondary-icon-color);\n  color: var(--primary-icon-color);\n}\n.ff-all-project .ff-projects-dropdown .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 .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  border-radius: 4px;\n  margin: 1px;\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-all-projects-option {\n  margin-top: 1px;\n}\n.ff-all-project .ff-projects-dropdown .ff-all-projects-option,\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-all-projects-option .ff-projects-icons svg path,\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$G);
 
 const AllProjectsDropdown = ({
   onClick = () => {},
@@ -26664,8 +26891,8 @@ const AllProjectsDropdown = ({
   });
 };
 
-var css_248z$G = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-pie-chart-container .ff-pie-chart-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-pie-chart-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  font-size: var(--fontSize);\n}\n.ff-pie-chart-container .ff-pie-chart-border {\n  display: inline-block;\n  border: 2px solid var(--pie-chart-border-color);\n  border-radius: 50%;\n}\n.ff-pie-chart-container .ff-pie-chart-tooltip {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -100%);\n  padding: 8px;\n  border-radius: 4px;\n  background-color: var(--tooltip-bg-color);\n  color: var(--primary-icon-color);\n  font-weight: 400;\n  pointer-events: none;\n}\n.ff-pie-chart-container .ff-pie-chart-legend {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 16px;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-value {\n  color: var(--drawer-title-color);\n}";
-styleInject(css_248z$G);
+var css_248z$F = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-pie-chart-container .ff-pie-chart-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-pie-chart-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  font-size: var(--fontSize);\n}\n.ff-pie-chart-container .ff-pie-chart-border {\n  display: inline-block;\n  border: 2px solid var(--pie-chart-border-color);\n  border-radius: 50%;\n}\n.ff-pie-chart-container .ff-pie-chart-tooltip {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -100%);\n  padding: 8px;\n  border-radius: 4px;\n  background-color: var(--tooltip-bg-color);\n  color: var(--primary-icon-color);\n  font-weight: 400;\n  pointer-events: none;\n}\n.ff-pie-chart-container .ff-pie-chart-legend {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 16px;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n}\n.ff-pie-chart-container .ff-pie-chart-legend .ff-pie-chart-legend-value {\n  color: var(--drawer-title-color);\n}";
+styleInject(css_248z$F);
 
 const calculateArc$3 = ({
   x,
@@ -26819,8 +27046,8 @@ const PieChart = ({
   });
 };
 
-var css_248z$F = ".ff-app-header-main {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header {\n  display: flex;\n  flex-basis: 100%;\n  justify-content: space-between;\n  background-color: var(--brand-color);\n  padding-left: 8px;\n  height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n  padding: 4px;\n  height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--brand-color);\n  transform: translateY(12px);\n  border-radius: 20px;\n  padding: 4px;\n  padding-bottom: 16px;\n  z-index: 1000;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n  display: flex;\n  align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n  margin-left: 8px;\n  padding: 7px;\n  color: var(--ff-header-text-color);\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  flex: 1 1 auto;\n  overflow: hidden;\n  transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n  max-width: 150px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  background: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n  white-space: nowrap;\n  align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n  padding: 3px;\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n  flex-grow: 12; /* Increase size on hover */\n  max-width: 700px;\n  opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n  background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n  border-radius: 20px;\n  padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n  margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n  margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n  color: var(--ff-header-submenu-text-color);\n  align-content: center;\n  position: relative;\n  white-space: nowrap;\n  padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n  color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 20%;\n  width: 70%;\n  height: 2px;\n  border-radius: 4px;\n  box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n  margin-right: 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-quickmenu-container .ff-app-header-nav-bar-quickmenu-item:last-child {\n  margin: 0px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n  display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n  padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n  background: var(--brand-color);\n  border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n  background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n  fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n  animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n  animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n  width: 40px;\n  display: flex;\n  justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n  cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n  height: 24px;\n  padding: 8px;\n  align-content: center;\n}\n\n@keyframes oscillate-border-width {\n  0% {\n    width: 50%;\n    left: 25%;\n  }\n  50% {\n    width: 70%;\n    left: 15%;\n  }\n  100% {\n    width: 50%;\n    left: 25%;\n  }\n}\n@keyframes quickmenu-expand {\n  from {\n    max-height: 0;\n    opacity: 0;\n  }\n  to {\n    max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n    opacity: 1;\n  }\n}\n@keyframes quickmenu-collapse {\n  from {\n    max-height: 500px;\n    opacity: 1;\n  }\n  to {\n    max-height: 0;\n    opacity: 0;\n  }\n}";
-styleInject(css_248z$F);
+var css_248z$E = ".ff-app-header-main {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header {\n  display: flex;\n  flex-basis: 100%;\n  justify-content: space-between;\n  background-color: var(--brand-color);\n  padding-left: 8px;\n  height: 40px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-container .ff-app-header-logo-icon {\n  padding: 4px;\n  height: 24px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--brand-color);\n  transform: translateY(12px);\n  border-radius: 20px;\n  padding: 4px;\n  padding-bottom: 16px;\n  z-index: 1000;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items {\n  display: flex;\n  align-items: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item {\n  margin-left: 8px;\n  padding: 7px;\n  color: var(--ff-header-text-color);\n  cursor: pointer;\n  display: flex;\n  position: relative;\n  flex: 1 1 auto;\n  overflow: hidden;\n  transition: flex-grow 1s ease, opacity 1s ease, max-width 1s ease;\n  max-width: 150px; /* Initial max-width */\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  background: var(--ff-app-header-menu-border-bottom-color);\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-nav-bar-item-label {\n  white-space: nowrap;\n  align-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected {\n  padding: 3px;\n  background-color: var(--primary-icon-color);\n  border-radius: 20px;\n  flex-grow: 12; /* Increase size on hover */\n  max-width: 700px;\n  opacity: 1;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-nav-bar-item-label {\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922) inset;\n  background: linear-gradient(90deg, var(--brand-color) 0%, var(--button-background-gradient-color) 100%);\n  border-radius: 20px;\n  padding: 4px 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :last-child {\n  margin-right: 3px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected :first-child {\n  margin: 0;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item {\n  color: var(--ff-header-submenu-text-color);\n  align-content: center;\n  position: relative;\n  white-space: nowrap;\n  padding-left: 8px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item:not(.ff-app-header-nav-bar-submenu-item--selected):hover::after {\n  animation: oscillate-border-width 0.5s ease-in-out forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 25%;\n  width: 0%;\n  height: 2px;\n  border-radius: 4px;\n  transition: width 0.15s ease-in-out;\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected {\n  color: var(--ff-header-submenu-highlight-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-nav-bar-submenu-item--selected::after {\n  content: \"\";\n  position: absolute;\n  bottom: 0;\n  left: 20%;\n  width: 70%;\n  height: 2px;\n  border-radius: 4px;\n  box-shadow: 0px 1px 0.2px 0px rgba(0, 0, 0, 0.1607843137);\n  background: var(--ff-app-header-submenu-border-bottom-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container {\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item {\n  margin-right: 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-quickmenu-container .ff-app-header-nav-bar-quickmenu-item:last-child {\n  margin: 0px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container {\n  display: inline;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item .ff-tooltip-container .ff-icon-container {\n  padding: 2px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected {\n  background: var(--brand-color);\n  border-radius: 5px;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected :hover {\n  background: transparent;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item .ff-app-header-submenu-container .ff-app-header-quickmenu-container .ff-app-header-nav-bar-quickmenu-item--selected svg path {\n  fill: var(--primary-button-text-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item--selected .ff-app-header-quickmenu-container {\n  animation: quickmenu-expand 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .ff-app-header-nav-bar-items .ff-app-header-nav-bar-item:not(.ff-app-header-nav-bar-item--selected) .ff-app-header-quickmenu-container {\n  animation: quickmenu-collapse 1s ease forwards;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu {\n  width: 40px;\n  display: flex;\n  justify-content: center;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg {\n  cursor: pointer;\n}\n.ff-app-header-main .ff-app-header .ff-app-header-nav-bar .more-menu .ff-app-header-more-icon svg path {\n  fill: var(--primary-icon-color);\n}\n.ff-app-header-main .ff-app-header .ff-app-header-left-content,\n.ff-app-header-main .ff-app-header .ff-app-header-right-content {\n  height: 24px;\n  padding: 8px;\n  align-content: center;\n}\n\n@keyframes oscillate-border-width {\n  0% {\n    width: 50%;\n    left: 25%;\n  }\n  50% {\n    width: 70%;\n    left: 15%;\n  }\n  100% {\n    width: 50%;\n    left: 25%;\n  }\n}\n@keyframes quickmenu-expand {\n  from {\n    max-height: 0;\n    opacity: 0;\n  }\n  to {\n    max-height: 500px; /* Ensure this value covers the full height of your quick menu */\n    opacity: 1;\n  }\n}\n@keyframes quickmenu-collapse {\n  from {\n    max-height: 500px;\n    opacity: 1;\n  }\n  to {\n    max-height: 0;\n    opacity: 0;\n  }\n}";
+styleInject(css_248z$E);
 
 const AppHeader = ({
   logoIconName = 'fireflink_icon',
@@ -26962,8 +27189,8 @@ const AppHeader = ({
   });
 };
 
-var css_248z$E = ".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$E);
+var css_248z$D = ".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$D);
 
 const Paper = ({
   children,
@@ -26979,8 +27206,8 @@ const Paper = ({
   });
 };
 
-var css_248z$D = ".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 {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n  flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n  flex-direction: row-reverse;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n  flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n  text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg {\n  display: block;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n  position: absolute;\n  padding: 5px;\n  border-radius: 4px;\n  pointer-events: none;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  gap: var(--donut-legend-gap, 5px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container .ff-legend-item {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container .ff-legend-item .ff-legend-value {\n  white-space: nowrap;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-2 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-count-4 .ff-legend-item {\n  flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-5 .ff-legend-item:nth-child(-n+3) {\n  flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-5 .ff-legend-item:nth-child(n+4) {\n  flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-3 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-count-6 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-count-more .ff-legend-item {\n  flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend {\n  flex-direction: column;\n  flex-wrap: wrap;\n  height: 200px;\n  width: auto;\n  justify-content: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend .ff-legend-item {\n  flex: 0 0 auto !important;\n  width: 100%;\n  justify-content: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-2 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-4 .ff-legend-item {\n  height: calc(50% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-3 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-5 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-6 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-more .ff-legend-item {\n  height: calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: var(--donut-legend-gap, 5px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 15px;\n  min-width: 25px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n  margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  margin-left: 1rem;\n  overflow-y: auto;\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-legend-table-thead {\n  position: static;\n  top: auto;\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: 7px 5px 9px 20px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n  text-align: right;\n  padding-right: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:nth-last-child(2) {\n  width: 58px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 1rem;\n  min-width: 22px;\n  height: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n  margin-left: 10px;\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: 4px 8px 4px 8px;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count:last-child {\n  padding-right: 22px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n  display: flex;\n  align-items: baseline;\n  gap: 5px;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  text-align: right;\n}";
-styleInject(css_248z$D);
+var css_248z$C = ".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 {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-dashboard-donut-chart-section {\n  display: flex;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section.legend-position-bottom {\n  flex-direction: column;\n}\n.ff-dashboard-donut-chart-section.legend-position-left {\n  flex-direction: row-reverse;\n}\n.ff-dashboard-donut-chart-section-table-legend {\n  flex-direction: row;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container {\n  text-align: center;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg {\n  display: block;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(1) {\n  font-weight: 600;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container svg text:nth-of-type(2) {\n  font-weight: 500;\n}\n.ff-dashboard-donut-chart-section .ff-dashboard-donut-chart-svg-container .ff-donut-chart-tooltip {\n  position: absolute;\n  padding: 5px;\n  border-radius: 4px;\n  pointer-events: none;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container {\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  gap: var(--donut-legend-gap, 5px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container .ff-legend-item {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container .ff-legend-item .ff-legend-value {\n  white-space: nowrap;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-2 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-count-4 .ff-legend-item {\n  flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-5 .ff-legend-item:nth-child(-n+3) {\n  flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-5 .ff-legend-item:nth-child(n+4) {\n  flex: 1 1 calc(50% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-count-3 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-count-6 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-count-more .ff-legend-item {\n  flex: 1 1 calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend {\n  flex-direction: column;\n  flex-wrap: wrap;\n  height: 200px;\n  width: auto;\n  justify-content: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend .ff-legend-item {\n  flex: 0 0 auto !important;\n  width: 100%;\n  justify-content: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-2 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-4 .ff-legend-item {\n  height: calc(50% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-3 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-5 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-6 .ff-legend-item, .ff-dashboard-donut-chart-section .ff-legend-container.ff-side-legend.ff-count-more .ff-legend-item {\n  height: calc(33.33% - var(--donut-legend-gap, 5px));\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend {\n  display: grid;\n  grid-template-columns: repeat(2, 1fr);\n  gap: var(--donut-legend-gap, 5px);\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 15px;\n  min-width: 25px;\n  height: 18px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n  margin-left: 8px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table-wrapper {\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  margin-left: 1rem;\n  overflow-y: auto;\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-legend-table-thead {\n  position: static;\n  top: auto;\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: 7px 5px 9px 20px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:last-child {\n  text-align: right;\n  padding-right: 10px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-table-header:nth-last-child(2) {\n  width: 58px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--tooltip-text-color);\n  border-radius: 1rem;\n  min-width: 22px;\n  height: 16px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n  margin-left: 10px;\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: 4px 8px 4px 8px;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-percentage:last-child,\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count:last-child {\n  padding-right: 22px;\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-name {\n  display: flex;\n  align-items: baseline;\n  gap: 5px;\n  color: var(--input-hover-border-color);\n}\n.ff-dashboard-donut-chart-section .ff-legend-table .ff-legend-item .ff-legend-count {\n  text-align: right;\n}";
+styleInject(css_248z$C);
 
 const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
   const startX = x + radius * Math.cos(startAngle);
@@ -29111,8 +29338,8 @@ var RecaptchaWrapper = makeAsyncScript(getURL, {
   } : {}
 })(ReCAPTCHA);
 
-var css_248z$C = ".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$C);
+var css_248z$B = ".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$B);
 
 // Extend the props to include React.RefAttributes
 const FixedReCAPTCHA = RecaptchaWrapper;
@@ -29157,8 +29384,8 @@ const nlpDropdownDefaultCSSData = {
   dropDownWrapperPadding: 0
 };
 
-var css_248z$B = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-nlp-option {\n  color: var(--nlp-option-color);\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper {\n  max-height: 256px;\n  z-index: 999;\n  position: absolute;\n  border: 1px solid var(--nlp-border-color);\n  box-sizing: border-box;\n  margin-top: 4px;\n  border-radius: 4px;\n  background-color: var(--primary-icon-color);\n  overflow: hidden auto;\n  display: flex;\n  justify-content: space-between;\n  overflow: hidden;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-primary-wrapper {\n  max-height: 240px;\n  z-index: 100;\n  min-width: 290px;\n  box-sizing: border-box;\n  overflow: scroll;\n  scrollbar-width: none;\n  flex-grow: 1;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-primary-wrapper::-webkit-scrollbar {\n  display: none;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option {\n  width: calc(100% - 10px);\n  border: 1px solid transparent;\n  padding: 0 4px;\n  overflow: hidden;\n  white-space: nowrap;\n  height: 32px;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option:hover {\n  background-color: var(--nlp-hover-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-no-option {\n  width: calc(100% - 16px);\n  margin: 0;\n  overflow: hidden;\n  padding: 0 8px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-show {\n  width: 380px;\n  height: 235px;\n  border: 1px solid transparent;\n  overflow: scroll;\n  scrollbar-width: none;\n  padding: 8px;\n  border: 1px solid var(--nlp-border-color);\n  position: relative;\n  border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-hide {\n  display: none;\n}\n.ff-nlp-dropdown-wrapper .nlp-categories {\n  padding: 0px 2px;\n  gap: 10px;\n  border-radius: 2px;\n  background: var(--nlp-background-color);\n  color: var(--nlp-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-side-menu {\n  display: flex;\n  flex-direction: column;\n  row-gap: 8px;\n  color: var(--nlp-option-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-show::-webkit-scrollbar {\n  display: none;\n}\n.ff-nlp-dropdown-wrapper .nlp-details-header {\n  color: var(--status-skipped-text-color);\n  display: flex;\n  flex-direction: column;\n}\n.ff-nlp-dropdown-wrapper .nlp-details {\n  color: var(--status-skipped-text-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper-main {\n  display: flex;\n  flex-direction: column;\n  width: 302px;\n  justify-content: space-between;\n  flex-grow: 1;\n}\n\n.ff-nlp {\n  color: var(--nlp-color);\n}\n\n.ff-sg {\n  color: var(--nlp-step-group-color);\n  background-color: var(--nlp-step-group-background);\n}\n\n.ff-pe {\n  color: var(--nlp-pe-color);\n  background-color: var(--nlp-pe-background);\n}\n\n.ff-nlp-web-service-div {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}";
-styleInject(css_248z$B);
+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-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-nlp-option {\n  color: var(--nlp-option-color);\n  display: flex;\n  gap: 4px;\n  align-items: center;\n}\n\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper {\n  max-height: 256px;\n  z-index: 999;\n  position: absolute;\n  border: 1px solid var(--nlp-border-color);\n  box-sizing: border-box;\n  margin-top: 4px;\n  border-radius: 4px;\n  background-color: var(--primary-icon-color);\n  overflow: hidden auto;\n  display: flex;\n  justify-content: space-between;\n  overflow: hidden;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-primary-wrapper {\n  max-height: 240px;\n  z-index: 100;\n  min-width: 290px;\n  box-sizing: border-box;\n  overflow: scroll;\n  scrollbar-width: none;\n  flex-grow: 1;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-options-primary-wrapper::-webkit-scrollbar {\n  display: none;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option {\n  width: calc(100% - 10px);\n  border: 1px solid transparent;\n  padding: 0 4px;\n  overflow: hidden;\n  white-space: nowrap;\n  height: 32px;\n  text-overflow: ellipsis;\n  cursor: pointer;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-option:hover {\n  background-color: var(--nlp-hover-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper .ff-nlp-no-option {\n  width: calc(100% - 16px);\n  margin: 0;\n  overflow: hidden;\n  padding: 0 8px;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  cursor: not-allowed;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-show {\n  width: 380px;\n  height: 235px;\n  border: 1px solid transparent;\n  overflow: scroll;\n  scrollbar-width: none;\n  padding: 8px;\n  border: 1px solid var(--nlp-border-color);\n  position: relative;\n  border-radius: 4px;\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-hide {\n  display: none;\n}\n.ff-nlp-dropdown-wrapper .nlp-categories {\n  padding: 0px 2px;\n  gap: 10px;\n  border-radius: 2px;\n  background: var(--nlp-background-color);\n  color: var(--nlp-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-side-menu {\n  display: flex;\n  flex-direction: column;\n  row-gap: 8px;\n  color: var(--nlp-option-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-data-show::-webkit-scrollbar {\n  display: none;\n}\n.ff-nlp-dropdown-wrapper .nlp-details-header {\n  color: var(--status-skipped-text-color);\n  display: flex;\n  flex-direction: column;\n}\n.ff-nlp-dropdown-wrapper .nlp-details {\n  color: var(--status-skipped-text-color);\n}\n.ff-nlp-dropdown-wrapper .ff-nlp-options-wrapper-main {\n  display: flex;\n  flex-direction: column;\n  width: 302px;\n  justify-content: space-between;\n  flex-grow: 1;\n}\n\n.ff-nlp {\n  color: var(--nlp-color);\n}\n\n.ff-sg {\n  color: var(--nlp-step-group-color);\n  background-color: var(--nlp-step-group-background);\n}\n\n.ff-pe {\n  color: var(--nlp-pe-color);\n  background-color: var(--nlp-pe-background);\n}\n\n.ff-nlp-web-service-div {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}";
+styleInject(css_248z$A);
 
 const NlpDropdown = ({
   onSelectBlur,
@@ -29411,8 +29638,8 @@ const NlpDropdown = ({
   });
 };
 
-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, .ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-nlp-input-wrapper {\n  position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  min-height: 32px;\n  min-width: 482px;\n  display: flex;\n  align-items: end;\n  position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset {\n  margin: 0;\n  padding: 25px 0px 0px 8px;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  height: 32px;\n  width: 100%;\n  border-radius: 4px;\n  display: block;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-label {\n  padding: 30px 0px 0px 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--default {\n  opacity: 0;\n  border-color: var(--nlp-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--active {\n  opacity: 1;\n  border-color: var(--nlp-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--option {\n  opacity: 1;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--error {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n  padding: 0 2px;\n  letter-spacing: 0.5px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--active {\n  transition: opacity 0.25s ease-out, transform 0.25s ease-out, font-size 0.25s ease-out, padding 0.25s ease-out;\n  opacity: 1;\n  color: var(--nlp-input-placeholder-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--option {\n  opacity: 1;\n  color: var(--nlp-input-placeholder-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--error {\n  color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--required {\n  margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container {\n  position: absolute;\n  top: 6px;\n  right: auto;\n  bottom: auto;\n  left: auto;\n  width: calc(100% - 38px);\n  height: 32px;\n  padding: 0 28px 0 8px;\n  border-radius: 4px;\n  border: 1px solid transparent;\n  z-index: 100;\n  background: transparent;\n  outline: none;\n  color: var(--ff-nlp-input-text-color);\n  text-indent: 22px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container:hover ~ .ff-nlp-input-label {\n  color: var(--nlp-input-placeholder-color);\n  padding-left: 26px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--default {\n  opacity: 1;\n  border-color: var(--nlp-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--default:hover {\n  border-color: var(--nlp-input-placeholder-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--default:hover ~ .ff-nlp-input-fieldset--option {\n  border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--default:hover ~ .ff-nlp-input-fieldset--option .ff-nlp-input-legend--option {\n  color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--no-label {\n  min-height: calc(100% - 2px);\n  margin-top: 0px;\n  top: 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--active {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--active:hover {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--no-border {\n  border: none;\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--no-border:hover {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--no-border:hover ~ .ff-nlp-input-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--disable {\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--disable:hover {\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--disable:hover ~ .ff-nlp-input-label--default {\n  color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--error {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--error:hover {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n  position: absolute;\n  top: 13px;\n  right: auto;\n  bottom: auto;\n  left: 8px;\n  z-index: 1;\n  font-size: 12px;\n  top: 60%;\n  padding-left: 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 1;\n  color: var(--nlp-input-placeholder-color);\n  transform: translateY(-50%);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--active {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n  transform: translateY(-150%);\n  padding: 0 6px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--required {\n  margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow {\n  position: absolute;\n  top: 60%;\n  height: 100%;\n  right: 10px;\n  transform: rotateX(0deg) translateY(-50%);\n  cursor: pointer;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--no-label {\n  top: 50%;\n}\n.ff-nlp-input-wrapper-error-text {\n  position: absolute;\n  top: auto;\n  right: auto;\n  bottom: -14px;\n  left: 12px;\n  white-space: nowrap;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n  display: flex;\n  align-items: center;\n  padding-left: 26px;\n  gap: 4px;\n}\n.ff-nlp-input-wrapper .ff-nlp-help_icon {\n  position: absolute;\n  bottom: 2px;\n  left: 8px;\n  width: 30px;\n  height: 30px;\n  z-index: 100;\n  cursor: pointer;\n}\n\n.ff-nlp-input-arrow {\n  z-index: 111;\n}\n\n.icon-container {\n  position: relative;\n  display: inline-block;\n}\n\n.icon-label {\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-55%);\n  transform: translateY(-145%);\n  margin-bottom: 5px;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.3s ease, visibility 0s linear 0.3s;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n  padding: 2px 5px;\n  border-radius: 3px;\n  white-space: nowrap;\n}\n\n.icon-container:hover .icon-label {\n  visibility: visible;\n  opacity: 1;\n  transition-delay: 0s;\n}\n\n.help-icon-label {\n  position: absolute;\n  bottom: 80%;\n  left: 96%;\n  transform: translateX(-50%);\n  margin-bottom: 5px;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.3s ease, visibility 0s linear 0.3s;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n  padding: 2px 5px;\n  border-radius: 3px;\n  white-space: nowrap;\n}\n\n.help-icon-container:hover .help-icon-label {\n  visibility: visible;\n  opacity: 1;\n  transition-delay: 0s;\n}";
-styleInject(css_248z$A);
+var css_248z$z = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-nlp-input-wrapper {\n  position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  min-height: 32px;\n  min-width: 482px;\n  display: flex;\n  align-items: end;\n  position: relative;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset {\n  margin: 0;\n  padding: 25px 0px 0px 8px;\n  border: 1px solid transparent;\n  box-sizing: border-box;\n  height: 32px;\n  width: 100%;\n  border-radius: 4px;\n  display: block;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-label {\n  padding: 30px 0px 0px 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--default {\n  opacity: 0;\n  border-color: var(--nlp-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--active {\n  opacity: 1;\n  border-color: var(--nlp-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--option {\n  opacity: 1;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset--error {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend {\n  padding: 0 2px;\n  letter-spacing: 0.5px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--active {\n  transition: opacity 0.25s ease-out, transform 0.25s ease-out, font-size 0.25s ease-out, padding 0.25s ease-out;\n  opacity: 1;\n  color: var(--nlp-input-placeholder-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--option {\n  opacity: 1;\n  color: var(--nlp-input-placeholder-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--error {\n  color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-fieldset .ff-nlp-input-legend--required {\n  margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container {\n  position: absolute;\n  top: 6px;\n  right: auto;\n  bottom: auto;\n  left: auto;\n  width: calc(100% - 38px);\n  height: 32px;\n  padding: 0 28px 0 8px;\n  border-radius: 4px;\n  border: 1px solid transparent;\n  z-index: 100;\n  background: transparent;\n  outline: none;\n  color: var(--ff-nlp-input-text-color);\n  text-indent: 22px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container:hover ~ .ff-nlp-input-label {\n  color: var(--nlp-input-placeholder-color);\n  padding-left: 26px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--border-radius {\n  border-radius: 0px 4px 4px 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--default {\n  opacity: 1;\n  border-color: var(--nlp-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--default:hover {\n  border-color: var(--nlp-input-placeholder-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--default:hover ~ .ff-nlp-input-fieldset--option {\n  border-color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--default:hover ~ .ff-nlp-input-fieldset--option .ff-nlp-input-legend--option {\n  color: var(--ff-nlp-input-text-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--no-label {\n  min-height: calc(100% - 2px);\n  margin-top: 0px;\n  top: 0px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--active {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--active:hover {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--no-border {\n  border: none;\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--no-border:hover {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--no-border:hover ~ .ff-nlp-input-fieldset--no-border {\n  border-color: transparent;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--disable {\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--disable:hover {\n  border-color: var(--ff-nlp-input-border-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--disable:hover ~ .ff-nlp-input-label--default {\n  color: var(--ff-nlp-input-default-color);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--error {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-container--error:hover {\n  border-color: var(--error-light);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n  position: absolute;\n  top: 13px;\n  right: auto;\n  bottom: auto;\n  left: 8px;\n  z-index: 1;\n  font-size: 12px;\n  top: 60%;\n  padding-left: 8px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--default {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 1;\n  color: var(--nlp-input-placeholder-color);\n  transform: translateY(-50%);\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--active {\n  transition: opacity 0.3s ease-out, transform 0.3s ease-out, font-size 0.3s ease-out, padding 0.3s ease-out;\n  opacity: 0;\n  transform: translateY(-150%);\n  padding: 0 6px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label--required {\n  margin-right: 2px;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow {\n  position: absolute;\n  top: 60%;\n  height: 100%;\n  right: 10px;\n  transform: rotateX(0deg) translateY(-50%);\n  cursor: pointer;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-arrow--no-label {\n  top: 50%;\n}\n.ff-nlp-input-wrapper-error-text {\n  position: absolute;\n  top: auto;\n  right: auto;\n  bottom: -14px;\n  left: 12px;\n  white-space: nowrap;\n}\n.ff-nlp-input-wrapper .ff-nlp-input-label {\n  display: flex;\n  align-items: center;\n  padding-left: 26px;\n  gap: 4px;\n}\n.ff-nlp-input-wrapper .ff-nlp-help_icon {\n  position: absolute;\n  bottom: 2px;\n  left: 8px;\n  width: 30px;\n  height: 30px;\n  z-index: 100;\n  cursor: pointer;\n}\n\n.ff-nlp-input-arrow {\n  z-index: 111;\n}\n\n.icon-container {\n  position: relative;\n  display: inline-block;\n}\n\n.icon-label {\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-55%);\n  transform: translateY(-145%);\n  margin-bottom: 5px;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.3s ease, visibility 0s linear 0.3s;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n  padding: 2px 5px;\n  border-radius: 3px;\n  white-space: nowrap;\n}\n\n.icon-container:hover .icon-label {\n  visibility: visible;\n  opacity: 1;\n  transition-delay: 0s;\n}\n\n.help-icon-label {\n  position: absolute;\n  bottom: 80%;\n  left: 96%;\n  transform: translateX(-50%);\n  margin-bottom: 5px;\n  visibility: hidden;\n  opacity: 0;\n  transition: opacity 0.3s ease, visibility 0s linear 0.3s;\n  background-color: var(--tooltip-bg-color);\n  color: var(--tooltip-text-color);\n  padding: 2px 5px;\n  border-radius: 3px;\n  white-space: nowrap;\n}\n\n.help-icon-container:hover .help-icon-label {\n  visibility: visible;\n  opacity: 1;\n  transition-delay: 0s;\n}";
+styleInject(css_248z$z);
 
 const nlpInputReducer = (state, action) => {
   switch (action.type) {
@@ -29751,8 +29978,8 @@ const NlpInput = ({
   });
 };
 
-var css_248z$z = ".ff-icon-radio-group {\n  width: 237px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  gap: 47px;\n  position: relative;\n}\n\n.ff-icon-radio-button {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  position: relative;\n  z-index: 5;\n}\n.ff-icon-radio-button.selected {\n  background-color: var(--brand-color);\n}\n.ff-icon-radio-button.disabled {\n  opacity: 50%;\n  cursor: not-allowed;\n}\n.ff-icon-radio-button .icon-container {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid var(--border-color);\n  background: var(--drawer-footer-bg);\n}\n.ff-icon-radio-button .icon-container:hover {\n  background: var(--border-color);\n}\n.ff-icon-radio-button .icon-container.selected {\n  background-color: var(--brand-color);\n}\n.ff-icon-radio-button .icon-container .icon {\n  width: 14px;\n  height: 14px;\n}\n\n.line-connector {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background-color: var(--border-color);\n  z-index: 3;\n  border-radius: 2px 0px 0px 0px;\n  opacity: 0px;\n}";
-styleInject(css_248z$z);
+var css_248z$y = ".ff-icon-radio-group {\n  width: 237px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  gap: 47px;\n  position: relative;\n}\n\n.ff-icon-radio-button {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  cursor: pointer;\n  position: relative;\n  z-index: 5;\n}\n.ff-icon-radio-button.selected {\n  background-color: var(--brand-color);\n}\n.ff-icon-radio-button.disabled {\n  opacity: 50%;\n  cursor: not-allowed;\n}\n.ff-icon-radio-button .icon-container {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 1px solid var(--border-color);\n  background: var(--drawer-footer-bg);\n}\n.ff-icon-radio-button .icon-container:hover {\n  background: var(--border-color);\n}\n.ff-icon-radio-button .icon-container.selected {\n  background-color: var(--brand-color);\n}\n.ff-icon-radio-button .icon-container .icon {\n  width: 14px;\n  height: 14px;\n}\n\n.line-connector {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  right: 0;\n  height: 1px;\n  background-color: var(--border-color);\n  z-index: 3;\n  border-radius: 2px 0px 0px 0px;\n  opacity: 0px;\n}";
+styleInject(css_248z$y);
 
 const IconRadioGroup = ({
   items,
@@ -29803,8 +30030,8 @@ const IconRadioGroup = ({
   });
 };
 
-var css_248z$y = ".ff-machine-input-field-wrapper {\n  min-width: 100px;\n  height: 32px;\n  position: relative;\n  cursor: pointer;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n  height: 100%;\n  width: 100%;\n  border: 1px solid var(--ff-machine-input-field-border-color);\n  padding: 0 8px 0 0;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field:hover,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse:hover {\n  border-color: var(--ff-connecting-branch-color);\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n  display: flex;\n  align-items: center;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-icon {\n  margin-left: 4px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text {\n  max-width: fit-content;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse {\n  direction: ltr;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n  flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n  flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-label {\n  position: absolute;\n  top: -6px;\n  left: 8px;\n  background-color: var(--ff-machine-input-field-label-color);\n  border-radius: 4px;\n  padding: 1px 2px;\n  height: 12px;\n}";
-styleInject(css_248z$y);
+var css_248z$x = ".ff-machine-input-field-wrapper {\n  min-width: 100px;\n  height: 32px;\n  position: relative;\n  cursor: pointer;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n  height: 100%;\n  width: 100%;\n  border: 1px solid var(--ff-machine-input-field-border-color);\n  padding: 0 8px 0 0;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field:hover,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse:hover {\n  border-color: var(--ff-connecting-branch-color);\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n  display: flex;\n  align-items: center;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-icon,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-icon {\n  margin-left: 4px;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text {\n  max-width: fit-content;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper .ff-machine-text-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse .ff-machine-text-reverse {\n  direction: ltr;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field .ff-machine-icon-text-wrapper-reverse,\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse .ff-machine-icon-text-wrapper-reverse {\n  flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-field-reverse {\n  flex-direction: row-reverse;\n}\n.ff-machine-input-field-wrapper .ff-machine-input-label {\n  position: absolute;\n  top: -6px;\n  left: 8px;\n  background-color: var(--ff-machine-input-field-label-color);\n  border-radius: 4px;\n  padding: 1px 2px;\n  height: 12px;\n}";
+styleInject(css_248z$x);
 
 const MachineInputField = ({
   width = '',
@@ -29873,12 +30100,12 @@ const MachineInputField = ({
 };
 MachineInputField.displayName = 'MachineInputField';
 
-var css_248z$x = ".ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper {\n  height: 66px;\n  box-sizing: border-box;\n  width: fit-content;\n  margin-bottom: 16px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-sequential-select-branch {\n  width: 240px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper {\n  margin: 0;\n  width: 40px;\n  border-top: 1px solid var(--ff-connecting-branch-color);\n  position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper .ff-branch-arrow {\n  width: 6px;\n  height: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  clip-path: polygon(100% 50%, 0 100%, 0 0);\n  position: absolute;\n  right: -1px;\n  top: -3px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-select-branch-point {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background-color: var(--ff-connecting-branch-color);\n  position: absolute;\n  left: -3px;\n  z-index: 102;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down {\n  position: absolute;\n  height: 38px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-point {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background-color: var(--ff-connecting-branch-color);\n  position: absolute;\n  left: -2px;\n  z-index: 102;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-arrow {\n  width: 0;\n  height: 62px;\n  top: calc(50% + 1px);\n  border-left: 1px solid var(--ff-connecting-branch-color);\n  z-index: 102;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist {\n  box-sizing: border-box;\n  width: 240px;\n  display: flex;\n  justify-content: space-between;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper {\n  display: flex;\n  align-items: center;\n  margin-right: 12px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper .ff-scope-text {\n  text-transform: capitalize;\n  margin: 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper {\n  display: flex;\n  align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper #ff-sequential-machine-datalist {\n  display: flex;\n  align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-dataset-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-run-delete-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n  cursor: pointer;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n  margin: 0 12px 0 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-sequential-branches-wrapper {\n  box-sizing: border-box;\n  width: fit-content;\n  height: fit-content;\n}";
-styleInject(css_248z$x);
-
-var css_248z$w = ".ff-connecting-branch-grid,\n.ff-connecting-branch-grid-reverse {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: 24px 180px 40px 180px 24px;\n  height: 66px;\n  margin-bottom: 16px;\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper {\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow {\n  position: absolute;\n  height: 6px;\n  width: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  z-index: 2;\n  clip-path: polygon(0 0, 0% 100%, 100% 50%);\n  top: calc(25% - 3px);\n  right: -2px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse {\n  position: absolute;\n  height: 6px;\n  width: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  z-index: 2;\n  left: -2px;\n  top: calc(25% - 3px);\n  clip-path: polygon(0 50%, 100% 100%, 100% 0);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container {\n  width: 100%;\n  height: 25%;\n  border: 1px solid var(--ff-connecting-branch-color);\n  border-top: none;\n  border-right: none;\n  border-bottom-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse {\n  width: 100%;\n  height: 25%;\n  border: 1px solid var(--ff-connecting-branch-color);\n  border-top: none;\n  border-left: none;\n  border-bottom-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist {\n  display: flex;\n  padding-top: 4px;\n  height: 24px;\n  justify-content: flex-end;\n  width: 100%;\n  align-items: center;\n  flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-dataset-list-branch {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-icon {\n  margin-right: 4px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-text {\n  margin-right: 8px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-delete-icon {\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse {\n  display: flex;\n  padding-top: 4px;\n  height: 24px;\n  justify-content: flex-end;\n  width: 100%;\n  align-items: center;\n  flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-icon {\n  margin-right: 4px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-text {\n  margin-right: 8px;\n  cursor: pointer;\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}";
+var css_248z$w = ".ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper {\n  height: 66px;\n  box-sizing: border-box;\n  width: fit-content;\n  margin-bottom: 16px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-sequential-select-branch {\n  width: 240px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow {\n  display: flex;\n  align-items: center;\n  position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper {\n  margin: 0;\n  width: 40px;\n  border-top: 1px solid var(--ff-connecting-branch-color);\n  position: relative;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-branch-arrow-wrapper .ff-branch-arrow {\n  width: 6px;\n  height: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  clip-path: polygon(100% 50%, 0 100%, 0 0);\n  position: absolute;\n  right: -1px;\n  top: -3px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow .ff-select-branch-point {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background-color: var(--ff-connecting-branch-color);\n  position: absolute;\n  left: -3px;\n  z-index: 102;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down {\n  position: absolute;\n  height: 38px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-point {\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  background-color: var(--ff-connecting-branch-color);\n  position: absolute;\n  left: -2px;\n  z-index: 102;\n  top: 50%;\n  transform: translateY(-50%);\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-branch-wrapper .ff-select-branch-arrow-down .ff-select-branch-arrow {\n  width: 0;\n  height: 62px;\n  top: calc(50% + 1px);\n  border-left: 1px solid var(--ff-connecting-branch-color);\n  z-index: 102;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist {\n  box-sizing: border-box;\n  width: 240px;\n  display: flex;\n  justify-content: space-between;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper {\n  display: flex;\n  align-items: center;\n  margin-right: 12px;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-scope-wrapper .ff-scope-text {\n  text-transform: capitalize;\n  margin: 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper {\n  display: flex;\n  align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper #ff-sequential-machine-datalist {\n  display: flex;\n  align-items: center;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-dataset-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-run-delete-icon,\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n  cursor: pointer;\n}\n.ff-sequential-connecting-branch-wrapper .ff-connecting-select-branch-wrapper .ff-select-scope-datalist .ff-datalist-wrapper .ff-datalist-text {\n  margin: 0 12px 0 0;\n}\n.ff-sequential-connecting-branch-wrapper .ff-sequential-branches-wrapper {\n  box-sizing: border-box;\n  width: fit-content;\n  height: fit-content;\n}";
 styleInject(css_248z$w);
 
+var css_248z$v = ".ff-connecting-branch-grid,\n.ff-connecting-branch-grid-reverse {\n  box-sizing: border-box;\n  display: grid;\n  grid-template-columns: 24px 180px 40px 180px 24px;\n  height: 66px;\n  margin-bottom: 16px;\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper {\n  position: relative;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow {\n  position: absolute;\n  height: 6px;\n  width: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  z-index: 2;\n  clip-path: polygon(0 0, 0% 100%, 100% 50%);\n  top: calc(25% - 3px);\n  right: -2px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-arrow-reverse {\n  position: absolute;\n  height: 6px;\n  width: 6px;\n  background-color: var(--ff-connecting-branch-color);\n  z-index: 2;\n  left: -2px;\n  top: calc(25% - 3px);\n  clip-path: polygon(0 50%, 100% 100%, 100% 0);\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container {\n  width: 100%;\n  height: 25%;\n  border: 1px solid var(--ff-connecting-branch-color);\n  border-top: none;\n  border-right: none;\n  border-bottom-left-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-start-wrapper .ff-connecting-branch-container-reverse {\n  width: 100%;\n  height: 25%;\n  border: 1px solid var(--ff-connecting-branch-color);\n  border-top: none;\n  border-left: none;\n  border-bottom-right-radius: 8px;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist {\n  display: flex;\n  padding-top: 4px;\n  height: 24px;\n  justify-content: flex-end;\n  width: 100%;\n  align-items: center;\n  flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-dataset-list-branch {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-icon {\n  margin-right: 4px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-text {\n  margin-right: 8px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist .ff-connecting-delete-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist .ff-connecting-delete-icon {\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse {\n  display: flex;\n  padding-top: 4px;\n  height: 24px;\n  justify-content: flex-end;\n  width: 100%;\n  align-items: center;\n  flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-dataset-list-branch {\n  display: flex;\n  align-items: center;\n  flex-direction: row-reverse;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-icon,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-icon {\n  margin-right: 4px;\n  cursor: pointer;\n}\n.ff-connecting-branch-grid .ff-connecting-branch-datalist-reverse .ff-connecting-text,\n.ff-connecting-branch-grid-reverse .ff-connecting-branch-datalist-reverse .ff-connecting-text {\n  margin-right: 8px;\n  cursor: pointer;\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$v);
+
 const DataSetTooltip = ({
   datSetToolTip: {
     globalVariableSetName = '',
@@ -30140,8 +30367,8 @@ const Branches = ({
   });
 };
 
-var css_248z$v = ".ff-connecting-branch-grid-wrapper {\n  box-sizing: border-box;\n}";
-styleInject(css_248z$v);
+var css_248z$u = ".ff-connecting-branch-grid-wrapper {\n  box-sizing: border-box;\n}";
+styleInject(css_248z$u);
 
 const ConnectingBranches = ({
   machineBranchInstances,
@@ -30355,8 +30582,8 @@ const SequentialConnectingBranch = ({
   });
 };
 
-var css_248z$u = ".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$u);
+var css_248z$t = ".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$t);
 
 const AttachmentButton = ({
   label,
@@ -30533,8 +30760,8 @@ const toast = {
   alert: (arg1, arg2) => openToast('alert', arg1, arg2)
 };
 
-var css_248z$t = "/* 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$t);
+var css_248z$s = "/* 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$s);
 
 const ToggleSwitch = ({
   selected = "text",
@@ -30556,8 +30783,8 @@ const ToggleSwitch = ({
   });
 };
 
-var css_248z$s = ".ff-avatar {\n  border-radius: 50%;\n  overflow: hidden;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--ff-avatar-background-color);\n}\n.ff-avatar--small {\n  width: 32px;\n  height: 32px;\n}\n.ff-avatar--medium {\n  width: 48px;\n  height: 48px;\n}\n.ff-avatar--large {\n  width: 64px;\n  height: 64px;\n}\n.ff-avatar .ff-avatar-label {\n  font-weight: bold;\n  text-align: center;\n}";
-styleInject(css_248z$s);
+var css_248z$r = ".ff-avatar {\n  border-radius: 50%;\n  overflow: hidden;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--ff-avatar-background-color);\n}\n.ff-avatar--small {\n  width: 32px;\n  height: 32px;\n}\n.ff-avatar--medium {\n  width: 48px;\n  height: 48px;\n}\n.ff-avatar--large {\n  width: 64px;\n  height: 64px;\n}\n.ff-avatar .ff-avatar-label {\n  font-weight: bold;\n  text-align: center;\n}";
+styleInject(css_248z$r);
 
 const Avatar = ({
   variant = "small",
@@ -30593,227 +30820,6 @@ const Avatar = ({
   });
 };
 
-var css_248z$r = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown, .ff-label-edit-text-field .ff-text-dropdown-field {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n}\n.ff-label-edit-text-field .ff-label-text-field {\n  display: flex;\n  gap: 5px;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  position: absolute;\n  top: 0;\n  left: 10px;\n  transform: translateY(-50%);\n  transition: all 0.2s ease;\n  color: var(--label-edit-text-label-color);\n  background: var(--label-edit-text-background-color);\n  padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n  top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n  padding: 4px;\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field,\n.ff-label-edit-text-field .dropdown {\n  border: 1px solid var(--label-edit-text-label-color);\n  outline: none;\n  width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field {\n  position: relative;\n  padding: 0 4px;\n  border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field {\n  flex: 2;\n  border: 1px solid var(--label-edit-text-label-color);\n  border-radius: 4px 0 0 4px;\n  border-right: none;\n  border-width: thin;\n  padding-left: 5px;\n}\n.ff-label-edit-text-field .ff-text-dropdown-field:focus-visible {\n  outline: none;\n}\n.ff-label-edit-text-field .dropdown {\n  border-radius: 0 4px 4px 0;\n  flex: 1;\n  height: inherit;\n}\n.ff-label-edit-text-field .ff-icon-container {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n  cursor: pointer;\n}\n.ff-label-edit-text-field .ff-icon-container .disabled-confirm-icon {\n  cursor: default;\n  opacity: 0.5;\n}\n.ff-label-edit-text-field .error-text {\n  margin: 0;\n  color: var(--label-edit-error-text);\n}\n\n.custom-edit-text-field {\n  height: 10px;\n  width: 100px;\n}";
-styleInject(css_248z$r);
-
-const getErrorMessage$1 = (inputValue, text, customError, customErrorCondition) => {
-  if (inputValue === text) {
-    return 'No changes were made.';
-  } else if (!inputValue) {
-    return 'Text is required';
-  } else if (inputValue.length < 3) {
-    return 'Please enter at least 3 characters.';
-  } else ;
-  return '';
-};
-const LabelEditTextField = ({
-  label,
-  placeholder,
-  text,
-  showText = true,
-  highlightText,
-  customError,
-  confirmIcon,
-  customErrorCondition,
-  cancelIcon,
-  variant = 'textField',
-  onInputChange,
-  dropdownData = [],
-  // width,
-  className,
-  height,
-  isOpen = false,
-  confirmAction,
-  onClick,
-  tooltip
-}) => {
-  const [isEditing, setIsEditing] = React.useState(isOpen ?? false);
-  const [inputValue, setInputValue] = React.useState(text ?? '');
-  const [dropdownValue, setDropdownValue] = React.useState(dropdownData[0]?.value ?? '');
-  const [showError, setShowError] = React.useState('');
-  const [disabled, isDisabled] = React.useState(true);
-  const [isTextFieldModified, setIsTextFieldModified] = React.useState(false);
-  const isThrowingError = showError && isEditing ? true : false;
-  const containerRef = React.useRef(null);
-  const cancelRef = React.useRef(null);
-  const [clickTimeout, setClickTimeout] = React.useState(null);
-  const handleEsc = useEscapeKey('Escape');
-  React.useEffect(() => {
-    return () => {
-      if (clickTimeout) {
-        clearTimeout(clickTimeout);
-      }
-    };
-  }, [clickTimeout]);
-  const handleDoubleClick = () => {
-    if (clickTimeout) {
-      clearTimeout(clickTimeout);
-      setClickTimeout(null);
-    }
-    setIsEditing(true);
-    setShowError('');
-  };
-  const handleSingleClick = () => {
-    if (onClick) onClick();
-  };
-  const handleClick = () => {
-    if (clickTimeout) {
-      clearTimeout(clickTimeout);
-      setClickTimeout(null);
-    }
-    const timeout = window.setTimeout(() => {
-      handleSingleClick();
-      setClickTimeout(null);
-    }, 1000);
-    setClickTimeout(timeout);
-  };
-  const handleConfirm = () => {
-    let errorMessage = '';
-    if (inputValue.length === 0 || inputValue.trim().length === 0) {
-      errorMessage = 'Please type any text.';
-    } else if (inputValue.length < 3) {
-      errorMessage = 'Please enter at least 3 characters.';
-    } else if (customErrorCondition) {
-      errorMessage = customError ?? 'Invalid input.';
-    }
-    if (errorMessage) {
-      setShowError(errorMessage);
-    } else {
-      setIsEditing(false);
-      setShowError('');
-      if (confirmAction) confirmAction(inputValue, dropdownValue);
-    }
-  };
-  const handleCancel = () => {
-    setInputValue(text ?? '');
-    setDropdownValue(dropdownData[0]?.value ?? '');
-    setIsEditing(false);
-    setShowError('');
-    setIsTextFieldModified(false);
-  };
-  const handleTextFieldChange = e => {
-    const newValue = e.target.value;
-    setInputValue(newValue);
-    isDisabled(false);
-    if (newValue.length === 0 || newValue.trim().length === 0) {
-      setShowError('Please type any text.');
-    } else if (newValue.length < 3) {
-      setShowError('Please enter at least 3 characters.');
-    } else if (customErrorCondition) {
-      setShowError(customError ?? 'Invalid input.');
-    } else {
-      setShowError('');
-    }
-    setIsTextFieldModified(newValue !== text);
-    if (onInputChange) {
-      onInputChange(newValue);
-    }
-  };
-  const handleBlur = e => {
-    if (containerRef.current && !containerRef.current.contains(e.target) && cancelRef.current !== e.target) {
-      const errorMessage = getErrorMessage$1(inputValue, text ?? '');
-      if (errorMessage && isEditing) {
-        setShowError(errorMessage);
-      } else {
-        setIsEditing(false);
-        setShowError('');
-      }
-    }
-  };
-  React.useEffect(() => {
-    document.addEventListener('click', handleBlur);
-    return () => {
-      document.removeEventListener('click', handleBlur);
-    };
-  }, [inputValue]);
-  handleEsc(handleCancel);
-  return jsxRuntime.jsxs("div", {
-    className: "ff-label-edit-text-field",
-    ref: containerRef,
-    children: [isEditing ? jsxRuntime.jsxs("div", {
-      className: "ff-label-text-field",
-      children: [variant === 'textFieldWithDropdown' ? jsxRuntime.jsxs("div", {
-        className: `ff-label-text-field-with-dropdown ${isEditing ? 'open' : ''}`,
-        style: {
-          height
-        },
-        children: [jsxRuntime.jsx(Input, {
-          name: "input",
-          type: "text",
-          label: label ? label : '',
-          disabled: false,
-          error: isThrowingError,
-          placeholder: placeholder ? placeholder : '',
-          value: inputValue,
-          onChange: handleTextFieldChange,
-          className: `${className} 
-                
-               ${isTextFieldModified ? 'modified' : ''}`
-        }), jsxRuntime.jsx(Select$1, {
-          label: '',
-          optionsList: dropdownData,
-          selectedOption: {
-            value: dropdownValue,
-            label: dropdownValue
-          },
-          onChange: option => setDropdownValue(option.value)
-        })]
-      }) : jsxRuntime.jsx("div", {
-        className: "ff-label-text-field-without-dropdown",
-        children: jsxRuntime.jsx(Input, {
-          name: "input",
-          type: "text",
-          label: label ? label : '',
-          disabled: false,
-          placeholder: placeholder ? placeholder : '',
-          value: inputValue,
-          onChange: handleTextFieldChange,
-          className: `${className} 
-               
-               ${isTextFieldModified ? 'modified' : ''}`
-        })
-      }), jsxRuntime.jsxs("div", {
-        className: "ff-icon-container",
-        children: [confirmIcon && jsxRuntime.jsx(Icon, {
-          color: "var(--label-edit-confirm-icon)",
-          height: 20,
-          width: 20,
-          name: confirmIcon.name,
-          disabled: disabled,
-          className: `${disabled ? 'disabled-confirm-icon' : 'confirm-icon'}`,
-          onClick: handleConfirm
-        }), cancelIcon && jsxRuntime.jsx(Icon, {
-          color: "var(--label-edit-cancel-icon)",
-          height: 12,
-          width: 20,
-          name: cancelIcon.name,
-          className: "cancel-icon",
-          onClick: handleCancel,
-          ref: cancelRef
-        })]
-      })]
-    }) : jsxRuntime.jsx(Tooltip, {
-      title: tooltip?.tooltipTitle ? tooltip?.tooltipTitle : '',
-      placement: 'bottom',
-      children: showText && jsxRuntime.jsx("span", {
-        className: "display-text",
-        onDoubleClick: handleDoubleClick,
-        role: "button",
-        onClick: handleClick,
-        children: jsxRuntime.jsx(HighlightText, {
-          text: inputValue,
-          highlight: highlightText
-        })
-      })
-    }), showError && isEditing && jsxRuntime.jsx(Typography, {
-      as: "p",
-      fontSize: 8,
-      className: "error-text",
-      children: showError
-    })]
-  });
-};
-
 var css_248z$q = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-label-edit-text-field .ff-text-field {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-label-edit-text-field {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n}\n.ff-label-edit-text-field .display-text-container {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button {\n  padding: 4px 8px;\n  background-color: var(--button-background-color);\n  color: var(--button-text-color);\n  border: 1px solid var(--button-border-color);\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 12px;\n}\n.ff-label-edit-text-field .display-text-container .edit-button:hover {\n  background-color: var(--button-hover-background-color);\n}\n.ff-label-edit-text-field .ff-label-text-field {\n  display: flex;\n}\n.ff-label-edit-text-field .ff-label-text-field-with-dropdown,\n.ff-label-edit-text-field .ff-label-text-field-without-dropdown {\n  position: relative;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-label, .ff-label-edit-text-field .ff-textfield-label {\n  position: absolute;\n  top: 0;\n  left: 10px;\n  transform: translateY(-50%);\n  transition: all 0.2s ease;\n  color: var(--label-edit-text-label-color);\n  background: var(--label-edit-text-background-color);\n  padding: 0 4px;\n}\n.ff-label-edit-text-field .ff-textfield-label {\n  top: 5px;\n}\n.ff-label-edit-text-field .display-text {\n  border-radius: 4px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-text-field {\n  outline: none;\n  width: fit-content;\n}\n.ff-label-edit-text-field .ff-text-field-error-border {\n  border: 1px solid var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-border {\n  border: 1px solid var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field-error-text {\n  color: var(--label-edit-error-text);\n}\n.ff-label-edit-text-field .ff-text-field-text {\n  color: var(--label-edit-text-label-color);\n}\n.ff-label-edit-text-field .ff-text-field {\n  padding: 0 4px;\n  border-radius: 4px;\n}\n.ff-label-edit-text-field .ff-icon-container {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n.ff-label-edit-text-field .ff-icon-container .confirm-icon,\n.ff-label-edit-text-field .ff-icon-container .cancel-icon {\n  cursor: pointer;\n}\n.ff-label-edit-text-field .error-text {\n  color: var(--label-edit-error-text);\n  margin: 0;\n}";
 styleInject(css_248z$q);
 
@@ -53892,9 +53898,9 @@ const getTreeDetails = (action, oldData, newData, index) => {
       }
       break;
     case 'start':
-      if (oldData.length > 0) {
-        root = oldData[0];
-        treeDataList = oldData.slice(1);
+      if (newData.length > 0) {
+        root = newData[0];
+        treeDataList = newData.slice(1);
       } else {
         throw new Error('Tree data list is empty, cannot determine root.');
       }
@@ -53944,13 +53950,10 @@ const handleTreeNodeSect = (data, key, isChecked) => {
       }
     }
   }
-  // Find the target node and update its state
   const targetNode = nodesMap.get(key);
   if (targetNode) {
     targetNode.checked = isChecked;
-    // Update children recursively
     updateChildren(key, isChecked);
-    // Update parents recursively
     updateParents(key);
   }
   return data;