pixel-react 1.10.10-2 → 1.10.10-4

package/lib/index.js

@@ -2957,7 +2957,7 @@ const Dropdown$1 = ({
       }),
       children: !checkEmpty(options) ? options.map(option => jsxRuntime.jsx("div", {
         className: classNames('ff-select-dropdown-option', {
-          'ff-select-dropdown-option__selected': getLabel(option, valueAccessor) === selectedOption
+          'ff-select-dropdown-option__selected': getValue$1(option, valueAccessor) === selectedOption
         }, currentTheme),
         onClick: () => {
           if ('disable' in option && option['disable']) return;
@@ -3285,7 +3285,8 @@ const Select$1 = ({
         onSaveModal: onSaveModal,
         onCancelModal: onCancelModal,
         modalJSXProps: modalJSXProps,
-        recurrence: recurrence
+        recurrence: recurrence,
+        valueAccessor: valueAccessor
       }), document.body)
     })]
   });
@@ -14586,7 +14587,7 @@ const MiniModal = /*#__PURE__*/React.forwardRef(({
   }), document.body);
 });
 
-var css_248z$R = ":root {\n  --table-height: auto;\n}\n\n.tree-table-space-block {\n  display: inline-block;\n  width: 20px;\n  height: 16px;\n  text-align: center;\n  line-height: 16px;\n  vertical-align: top;\n  font-size: 19px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 50%;\n}\n.tree-table-space-block.btn-toggle {\n  position: relative;\n  cursor: pointer;\n  width: 22px;\n  height: 18px;\n  z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n  display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n  position: absolute;\n  content: \"\";\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n  width: 12px;\n  left: -10px;\n}\n.tree-table-space-block.no-folder {\n  width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n  width: 22px;\n  left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 40px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 12px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n  height: 13px;\n}\n\n.tree-title-container .tree-table-space-block {\n  width: 16px;\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  display: table-row;\n  visibility: visible;\n}\n\n.btn-toggle {\n  cursor: pointer;\n}\n.btn-toggle.is-close {\n  background: #f1f1f1;\n  border: 1px solid transparent;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n  display: none;\n}\n\n.tree-table-wrap {\n  width: 100%;\n  padding-left: 4px;\n  overflow: hidden;\n  overflow-x: auto;\n}\n\n.table-scrollable {\n  height: var(--table-height);\n  /* Adjust height as needed */\n  overflow-y: auto;\n  position: relative;\n}\n\n.ff-table-tree-body {\n  overflow: scroll;\n}\n\n.tree-table {\n  table-layout: fixed;\n  width: 100%;\n  border-collapse: collapse;\n  overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n.tree-table .ff-table-tree-row:hover,\n.tree-table .ff-table-tree-row.hover {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child,\n.tree-table .ff-table-tree-row.hover .ff-table-tree-td:first-child {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action {\n  display: inline-flex;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row {\n  background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n  display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n  display: inline-flex;\n  z-index: 9999;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n  content: \"\";\n  display: block;\n  visibility: hidden;\n  clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n  text-align: left;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n  color: var(--table-header-text-color);\n  background: var(--border-color);\n  font-size: 12px;\n  font-weight: 600;\n  width: 400px;\n  height: 32px;\n  box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n  width: 400px !important;\n  position: sticky;\n  left: 0;\n  padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n  font-size: 12px;\n  color: var(--nlp-color);\n  height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n  overflow: initial;\n  position: sticky;\n  left: 0;\n  background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n  padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n  margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n  height: 28px;\n}\n\n.tree-table-td-content {\n  display: inline-flex;\n  align-items: center;\n  font-size: 12px;\n  font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n  font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n  height: 12px;\n  width: 12px;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n  fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n  transform: rotate(-90deg);\n  transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n  display: inline-flex;\n}\n\n.tree-title-container {\n  display: inline-flex;\n  align-items: center;\n}";
+var css_248z$R = ":root {\n  --table-height: auto;\n}\n\n.tree-table-space-block {\n  display: inline-block;\n  width: 20px;\n  height: 16px;\n  text-align: center;\n  line-height: 16px;\n  vertical-align: top;\n  font-size: 19px;\n  position: relative;\n  box-sizing: border-box;\n  border-radius: 50%;\n  /* Hover background for all elements of the same level */\n}\n.tree-table-space-block.btn-toggle {\n  position: relative;\n  cursor: pointer;\n  width: 22px;\n  height: 18px;\n  z-index: 12;\n}\n.tree-table-space-block.btn-toggle::before {\n  display: none;\n}\n.tree-table-space-block.last-block::after, .tree-table-space-block.no-folder::after {\n  position: absolute;\n  content: \"\";\n  height: 1px;\n  background: var(--tree-connecting-lines-color);\n  top: 50%;\n  margin-top: -1px;\n}\n.tree-table-space-block.last-block::after {\n  width: 12px;\n  left: -10px;\n}\n.tree-table-space-block.no-folder {\n  width: 8px;\n}\n.tree-table-space-block.no-folder::after {\n  width: 22px;\n  left: -10px;\n}\n.tree-table-space-block:not(.last-block, .no-lines, .last-node)::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 40px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: 99;\n}\n.tree-table-space-block.last-node::before {\n  position: absolute;\n  content: \"\";\n  width: 1px;\n  height: 12px;\n  background: var(--tree-connecting-lines-color);\n  left: 50%;\n  top: -4px;\n  z-index: -1;\n}\n.tree-table-space-block.folder.last-node::before {\n  height: 13px;\n}\n.tree-table-space-block.tree-table-hovered::before, .tree-table-space-block.tree-table-hovered::after {\n  background-color: var(--brand-color);\n}\n\n.tree-title-container .tree-table-space-block {\n  width: 16px;\n}\n\n.hidden {\n  display: none;\n}\n\n.show {\n  display: table-row;\n  visibility: visible;\n}\n\n.btn-toggle {\n  cursor: pointer;\n}\n.btn-toggle.is-close {\n  background: #f1f1f1;\n  border: 1px solid transparent;\n  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);\n}\n.btn-toggle::before, .btn-toggle::after {\n  display: none;\n}\n\n.tree-table-wrap {\n  width: 100%;\n  padding-left: 4px;\n  overflow: hidden;\n  overflow-x: auto;\n}\n\n.table-scrollable {\n  height: var(--table-height);\n  /* Adjust height as needed */\n  overflow-y: auto;\n  position: relative;\n}\n\n.ff-table-tree-body {\n  overflow: scroll;\n}\n\n.tree-table {\n  table-layout: fixed;\n  width: 100%;\n  border-collapse: collapse;\n  overflow: scroll;\n}\n.tree-table .ff-table-tree-head {\n  position: sticky;\n  top: 0;\n  z-index: 2;\n}\n.tree-table .ff-table-tree-row:hover,\n.tree-table .ff-table-tree-row.hover {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .ff-table-tree-td:first-child,\n.tree-table .ff-table-tree-row.hover .ff-table-tree-td:first-child {\n  background-color: var(--hover-color);\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action {\n  display: inline-flex;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row:hover .table-tree-row-action svg,\n.tree-table .ff-table-tree-row.hover .table-tree-row-action svg {\n  height: 14px;\n  width: 14px;\n}\n.tree-table .ff-table-tree-row {\n  background-color: var(--base-bg-color);\n}\n.tree-table .ff-table-tree-row .table-tree-row-action {\n  display: none;\n}\n.tree-table .ff-table-tree-row .table-row-add-button {\n  display: inline-flex;\n  z-index: 9999;\n  align-items: center;\n}\n.tree-table .ff-table-tree-row::after {\n  content: \"\";\n  display: block;\n  visibility: hidden;\n  clear: both;\n}\n.tree-table .ff-table-tree-th,\n.tree-table .ff-table-tree-td {\n  text-align: left;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n}\n.tree-table .ff-table-tree-th {\n  color: var(--table-header-text-color);\n  background: var(--border-color);\n  font-size: 12px;\n  font-weight: 600;\n  width: 400px;\n  height: 32px;\n  box-sizing: border-box;\n}\n.tree-table .ff-table-tree-th:first-child {\n  width: 600px !important;\n  position: sticky;\n  left: 0;\n  padding-left: 8px;\n}\n.tree-table .ff-table-tree-td {\n  font-size: 12px;\n  color: var(--nlp-color);\n  height: 18px;\n}\n.tree-table .ff-table-tree-td:first-child {\n  overflow: initial;\n  position: sticky;\n  left: 0;\n  background-color: white;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  margin-left: 8px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content {\n  padding-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-td-content .tree-table-td-content-text {\n  margin-left: 4px;\n}\n.tree-table .ff-table-tree-td:first-child .tree-table-default-content {\n  font-weight: 700;\n}\n.tree-table .ff-table-tree-td.folder {\n  height: 28px;\n}\n\n.tree-table-td-content {\n  display: inline-flex;\n  align-items: center;\n  font-size: 12px;\n  font-family: \"Poppins\", sans-serif;\n}\n.tree-table-td-content.folder {\n  font-weight: 600;\n}\n\n.tree-row-expanded span svg,\n.tree-row-collapsed span svg {\n  height: 12px;\n  width: 12px;\n  transition: transform 0.3s ease;\n}\n.tree-row-expanded span svg path,\n.tree-row-collapsed span svg path {\n  fill: var(--brand-color);\n}\n\n.tree-row-collapsed svg {\n  transform: rotate(-90deg);\n  transition: transform 0.3s ease;\n}\n\n.tree-table-space-container {\n  display: inline-flex;\n}\n\n.tree-title-container {\n  display: inline-flex;\n  align-items: center;\n}";
 styleInject(css_248z$R);
 
 const TableHead = /*#__PURE__*/React.memo(({
@@ -14628,33 +14629,58 @@ const TableHead = /*#__PURE__*/React.memo(({
   });
 });
 
-var css_248z$Q = ".add-module-container {\n  display: flex;\n}\n.add-module-container .icons {\n  cursor: pointer;\n}";
+var css_248z$Q = ".fontXs, .add-module-container .ff-add-module-input-container:focus-within .ff-add-module-label-container, .add-module-container .ff-add-module-input-container--float .ff-add-module-label-container {\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.add-module-container {\n  display: flex;\n}\n.add-module-container .icons {\n  cursor: pointer;\n}\n.add-module-container .ff-add-module-input-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n}\n.add-module-container .ff-add-module-input-container .ff-add-module-label-container {\n  display: flex;\n  gap: 2px;\n  position: absolute;\n  border: none;\n  outline: none;\n  line-height: 18px;\n  margin-top: 1px;\n  padding: 4px 6px;\n  transition: all 0.3s ease-in-out;\n}\n.add-module-container .ff-add-module-input-container .ff-add-module-label-container .ff-add-module-label {\n  color: var(--input-default-label-color);\n}\n.add-module-container .ff-add-module-input-container .add-module-input {\n  height: 24px;\n  padding: 0px 6px;\n  width: 430px;\n  border: 0.5px solid var(--nlp-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n  color: var(--nlp-color);\n}\n.add-module-container .ff-add-module-input-container:focus-within .ff-add-module-label-container {\n  top: -9px;\n  background-color: var(--input-label-bg-color);\n  line-height: 15px;\n  padding: 0px 2px;\n  margin-left: 10px;\n}\n.add-module-container .ff-add-module-input-container:focus-within .ff-add-module-label-container .ff-add-module-label {\n  color: var(--nlp-color);\n}\n.add-module-container .ff-add-module-input-container--float .ff-add-module-label-container {\n  top: -9px;\n  background-color: var(--input-label-bg-color);\n  line-height: 15px;\n  padding: 0px 2px;\n  margin-left: 10px;\n}\n.add-module-container .ff-add-module-input-container--float .ff-add-module-label-container .ff-add-module-label {\n  color: var(--nlp-color);\n}\n.add-module-container .ff-module-icon-container {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}";
 styleInject(css_248z$Q);
 
 const AddModule = ({
   onConfirm,
   onCancel,
   error,
-  value = ''
+  value = '',
+  label = 'Add Script'
 }) => {
-  console.log('🚀 ~ value:', value);
   const [text, setText] = React.useState(value);
+  const isValueFilled = !checkEmpty(text);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsxs("div", {
-      className: "add-module-container",
-      children: [jsxRuntime.jsx("input", {
-        type: "text",
-        className: "add-module-input",
-        onChange: e => setText(e.target.value),
-        value: text
-      }), jsxRuntime.jsx(Icon, {
-        className: "icons",
-        name: "update_icon",
-        onClick: () => onConfirm && onConfirm(text)
-      }), jsxRuntime.jsx(Icon, {
-        className: "icons",
-        name: "close",
-        onClick: onCancel
+      className: classNames('add-module-container'),
+      children: [jsxRuntime.jsxs("div", {
+        className: classNames('ff-add-module-input-container', {
+          'ff-add-module-input-container--float': isValueFilled
+        }),
+        children: [jsxRuntime.jsx("label", {
+          className: "ff-add-module-label-container",
+          htmlFor: "add-module-input",
+          children: jsxRuntime.jsx("span", {
+            className: classNames('ff-add-module-label', {
+              'ff-input-label--no-hover': !!text
+            }),
+            children: label
+          })
+        }), jsxRuntime.jsx("input", {
+          name: "add-module-input",
+          type: "text",
+          className: "add-module-input",
+          onChange: e => setText(e.target.value),
+          value: text
+        })]
+      }), jsxRuntime.jsxs("div", {
+        className: "ff-module-icon-container",
+        children: [jsxRuntime.jsx(Icon, {
+          className: "icons",
+          name: "update_icon",
+          onClick: () => onConfirm && onConfirm(text),
+          color: "var(--label-edit-confirm-icon)",
+          height: 18,
+          width: 18
+        }), jsxRuntime.jsx(Icon, {
+          className: "icons",
+          name: "close",
+          onClick: onCancel,
+          color: "var(--label-edit-cancel-icon)",
+          height: 14,
+          width: 14
+        })]
       })]
     }), jsxRuntime.jsx("small", {
       children: error
@@ -14662,6 +14688,8 @@ const AddModule = ({
   });
 };
 
+const SvgSpinner = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("style", null, "\r\n    .spinner_DupU {\r\n      animation: spinner_sM3D 1.2s infinite;\r\n      fill: #71347b;\r\n    }\r\n    .spinner_GWtZ { animation-delay: .1s; }\r\n    .spinner_dwN6 { animation-delay: .2s; }\r\n    .spinner_46QP { animation-delay: .3s; }\r\n    .spinner_PD82 { animation-delay: .4s; }\r\n    .spinner_eUgh { animation-delay: .5s; }\r\n    .spinner_eUaP { animation-delay: .6s; }\r\n    .spinner_j38H { animation-delay: .7s; }\r\n    .spinner_tVmX { animation-delay: .8s; }\r\n    .spinner_DQhX { animation-delay: .9s; }\r\n    .spinner_GIL4 { animation-delay: 1s; }\r\n    .spinner_n0Yb { animation-delay: 1.1s; }\r\n\r\n    @keyframes spinner_sM3D {\r\n      0%, 50% {\r\n        animation-timing-function: cubic-bezier(0, 1, 0, 1);\r\n        r: 0;\r\n      }\r\n      10% {\r\n        animation-timing-function: cubic-bezier(.53, 0, .61, .73);\r\n        r: 2px;\r\n      }\r\n    }\r\n  "), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU", cx: 12, cy: 3, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_GWtZ", cx: 16.5, cy: 4.21, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_n0Yb", cx: 7.5, cy: 4.21, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_dwN6", cx: 19.79, cy: 7.5, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_GIL4", cx: 4.21, cy: 7.5, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_46QP", cx: 21, cy: 12, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_DQhX", cx: 3, cy: 12, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_PD82", cx: 19.79, cy: 16.5, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_tVmX", cx: 4.21, cy: 16.5, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_eUgh", cx: 16.5, cy: 19.79, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_j38H", cx: 7.5, cy: 19.79, r: 0 }), /* @__PURE__ */ React__namespace.createElement("circle", { className: "spinner_DupU spinner_eUaP", cx: 12, cy: 21, r: 0 }));
+
 const renderSpaces = (level, parentSiblings = [], isLast, isContainer) => {
   let siblingsArray = parentSiblings;
   let isLastNode = isLast;
@@ -14687,48 +14715,82 @@ const TableCell = /*#__PURE__*/React.memo(({
   onCheckBoxChange,
   onToggleExpand,
   onAddConfirm,
-  onAddCancel
-}) => jsxRuntime.jsxs("td", {
-  className: `ff-table-tree-td ${col.isTree && node.container ? 'folder' : ''}`,
-  children: [col.isTree && renderSpaces(node.hierarchy + 1, node.parentSiblings, node.lastResource, node.container), jsxRuntime.jsxs("div", {
-    className: "tree-title-container",
-    children: [col.isTree && jsxRuntime.jsx("span", {
-      className: `tree-table-space-block last-block  ${node.expand ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.container ? '' : 'no-folder'}`,
-      onClick: () => onToggleExpand(node),
-      children: node.container && node?.resourceCount + node?.subContainerCount > 0 && jsxRuntime.jsxs("span", {
-        onClick: () => onToggleExpand(node),
-        children: [' ', jsxRuntime.jsx(SvgArrowsDownIcon, {})]
-      })
-    }), jsxRuntime.jsxs("span", {
-      className: `tree-table-td-content ${col.isTree && node.container ? 'folder' : ''}`,
-      children: [!node?.isNewNode && 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.key),
-          value: node.key,
-          onChange: e => onCheckBoxChange(e, node)
+  onAddCancel,
+  isExpanding
+}) => {
+  React.useEffect(() => {
+    const handleHover = (event, isHovering) => {
+      const target = event.target;
+      const levelClass = Array.from(target.classList).find(cls => cls.startsWith('tree-table-space-block-'));
+      if (levelClass) {
+        const level = levelClass.split('-').pop();
+        // Check if level is valid before selecting elements
+        if (level) {
+          const sameLevelBlocks = document.querySelectorAll(`.tree-table-space-block-${level}`);
+          sameLevelBlocks.forEach(block => {
+            if (isHovering) {
+              block.classList.add('tree-table-hovered');
+            } else {
+              block.classList.remove('tree-table-hovered');
+            }
+          });
+        }
+      }
+    };
+    const spaceBlocks = document.querySelectorAll('.tree-table-space-block');
+    spaceBlocks.forEach(block => {
+      block.addEventListener('mouseenter', e => handleHover(e, true));
+      block.addEventListener('mouseleave', e => handleHover(e, false));
+    });
+    return () => {
+      spaceBlocks.forEach(block => {
+        block.removeEventListener('mouseenter', e => handleHover(e, true));
+        block.removeEventListener('mouseleave', e => handleHover(e, false));
+      });
+    };
+  }, []);
+  return jsxRuntime.jsxs("td", {
+    className: `ff-table-tree-td ${col.isTree && node.container ? 'folder' : ''}`,
+    children: [col.isTree && renderSpaces(node.hierarchy + 1, node.parentSiblings, node.lastResource, node.container), jsxRuntime.jsxs("div", {
+      className: "tree-title-container",
+      children: [col.isTree && jsxRuntime.jsx("span", {
+        className: `tree-table-space-block tree-table-space-block-${node.hierarchy} last-block  ${node?.expanded ? 'tree-row-expanded' : 'tree-row-collapsed'} ${node.container ? '' : 'no-folder'}`,
+        children: node.container && (node?.resourceCount + node?.subContainerCount > 0 || node.expandable) && jsxRuntime.jsxs("span", {
+          onClick: () => onToggleExpand(node),
+          children: [' ', isExpanding ? jsxRuntime.jsx(SvgSpinner, {}) : jsxRuntime.jsx(SvgArrowsDownIcon, {})]
+        })
+      }), jsxRuntime.jsxs("span", {
+        className: `tree-table-td-content ${col.isTree && node.container ? 'folder' : ''}`,
+        children: [!node?.isNewNode && 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.key,
+            checked: selected.includes(node.key),
+            value: node.key,
+            onChange: e => onCheckBoxChange(e, node)
+          })]
+        }), node.isNewNode && col.isTree ? jsxRuntime.jsx(AddModule, {
+          onCancel: onAddCancel,
+          onConfirm: onAddConfirm,
+          error: node?.error || '',
+          value: node.value,
+          label: node?.label || ''
+        }) : jsxRuntime.jsx("span", {
+          className: "tree-table-td-content-text",
+          children: prepareData(node, col)
         })]
-      }), node.isNewNode && col.isTree ? jsxRuntime.jsx(AddModule, {
-        onCancel: onAddCancel,
-        onConfirm: onAddConfirm,
-        error: node?.error || '',
-        value: node.value
-      }) : jsxRuntime.jsx("span", {
-        className: "tree-table-td-content-text",
-        children: prepareData(node, col)
       })]
+    }), col.actions && !node?.isNewNode && jsxRuntime.jsx("div", {
+      className: `table-tree-row-action`,
+      children: (() => {
+        return col.actions(node, treeRowRef);
+      })()
     })]
-  }), col.actions && jsxRuntime.jsx("div", {
-    className: `table-tree-row-action`,
-    children: (() => {
-      return col.actions(node, treeRowRef);
-    })()
-  })]
-}));
+  });
+});
 
 const TableRow = /*#__PURE__*/React.memo(({
   node,
@@ -14739,7 +14801,8 @@ const TableRow = /*#__PURE__*/React.memo(({
   onToggleExpand,
   onCheckBoxChange,
   onAddConfirm,
-  onAddCancel
+  onAddCancel,
+  isExpanding
 }) => {
   const treeRowRef = React.useRef(null);
   return jsxRuntime.jsx("tr", {
@@ -14756,7 +14819,8 @@ const TableRow = /*#__PURE__*/React.memo(({
       onCheckBoxChange: onCheckBoxChange,
       onToggleExpand: onToggleExpand,
       onAddConfirm: onAddConfirm,
-      onAddCancel: onAddCancel
+      onAddCancel: onAddCancel,
+      isExpanding: isExpanding
     }, col.name))
   });
 });
@@ -14766,7 +14830,8 @@ const addNewRow = (treeData, newNode) => {
     sourceId,
     action,
     value = '',
-    error = ''
+    error = '',
+    label
   } = newNode;
   if (!sourceId || !action) return treeData;
   const nodeMap = new Map(treeData.map(node => [node.key, node]));
@@ -14780,7 +14845,8 @@ const addNewRow = (treeData, newNode) => {
     isNewNode: true,
     key: 'new-node',
     value,
-    error
+    error,
+    label
   };
   switch (action) {
     case 'addAbove':
@@ -14809,7 +14875,8 @@ const TableBody = ({
   onCheckBoxChange,
   newNode = {},
   onAddConfirm,
-  onAddCancel
+  onAddCancel,
+  expanding
 }) => {
   if (checkEmpty(flattenedTreeData)) {
     return null;
@@ -14827,7 +14894,8 @@ const TableBody = ({
       onToggleExpand: node => onToggleExpand(node, index),
       onCheckBoxChange: onCheckBoxChange,
       onAddConfirm: onAddConfirm,
-      onAddCancel: onAddCancel
+      onAddCancel: onAddCancel,
+      isExpanding: node.key === expanding
     }, node.key)), jsxRuntime.jsx("tr", {
       id: "ff-table-tree-last-node"
     })]
@@ -14870,14 +14938,11 @@ const TreeTable = ({
   loadMore = () => {},
   tableBorder,
   height = 'auto',
-  newNode = {
-    action: 'addInside',
-    sourceId: 'PAG1013',
-    value: 'newNode'
-  },
+  newNode = {},
   onAddConfirm = _name => {},
   onAddCancel = () => {}
 }) => {
+  const [expanding, setExpanding] = React.useState(null);
   const observerRef = React.useRef(null);
   const isTriggeredAbove = React.useRef(false); // Track if pagination for "above" direction has been triggered
   const isTriggeredBelow = React.useRef(false); // Track if pagination for "below" direction has been triggered
@@ -14949,11 +15014,33 @@ const TreeTable = ({
       throttledLoadMore.cancel();
     };
   }, [treeData, throttledLoadMore]);
-  const handleToggleExpand = React.useCallback((node, index) => onExpand?.(node, index), [onExpand]);
+  React.useEffect(() => {
+    if (expanding) {
+      setExpanding(null);
+    }
+  }, [treeData]);
+  React.useEffect(() => {
+    if (expanding) {
+      setTimeout(() => {
+        if (expanding) {
+          setExpanding(null);
+        }
+      }, 3000);
+    }
+  }, [expanding]);
+  const handleToggleExpand = React.useCallback((node, index) => {
+    if (expanding) return;
+    setExpanding(node.key);
+    onExpand?.(node, index);
+  }, [onExpand]);
   const handleCheckBoxChange = React.useCallback((e, node) => {
+    if (expanding) return;
     onChange?.(e, node);
   }, [onChange]);
-  const handleRowClick = React.useCallback((e, node) => onClick?.(e, node), [onClick]);
+  const handleRowClick = React.useCallback((e, node) => {
+    if (expanding) return;
+    onClick?.(e, node);
+  }, [onClick]);
   return jsxRuntime.jsx("div", {
     className: "tree-table-wrap",
     children: jsxRuntime.jsx("div", {
@@ -14977,13 +15064,13 @@ const TreeTable = ({
           onCheckBoxChange: handleCheckBoxChange,
           newNode: newNode,
           onAddConfirm: onAddConfirm,
-          onAddCancel: onAddCancel
+          onAddCancel: onAddCancel,
+          expanding: expanding
         })]
       })
     })
   });
 };
-var TableTree = /*#__PURE__*/React.memo(TreeTable);
 
 var css_248z$P = ":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$P);
@@ -27301,12 +27388,13 @@ 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  z-index: 1000;\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}\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}";
+var css_248z$F = ".ff-app-header-main {\n  display: flex;\n}\n.ff-app-header-main .ff-app-header {\n  display: flex;\n  z-index: 1000;\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}\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  margin-left: 8px;\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-nav-bar .more-menu .ff-menuicon-container {\n  width: 40px !important;\n  height: 32px !important;\n  border-radius: 16px !important;\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);
 
 const AppHeader = ({
   logoIconName = 'fireflink_icon',
   width,
+  borderRadius,
   leftContent,
   rightContent,
   projectsList,
@@ -27332,6 +27420,10 @@ const AppHeader = ({
     className: "ff-app-header-main",
     children: jsxRuntime.jsxs("div", {
       className: "ff-app-header",
+      style: {
+        borderStartStartRadius: borderRadius,
+        borderStartEndRadius: borderRadius
+      },
       children: [jsxRuntime.jsxs("div", {
         className: "ff-app-header-left-container",
         children: [jsxRuntime.jsx("div", {
@@ -30411,7 +30503,8 @@ const Branches = ({
   readOnly
 }) => {
   const evenRow = rowIndex % 2 === 0;
-  const lastMachineInstance = checkEmpty(machineInstances[machineColumnCount - 1]);
+  const getLastIndex = readOnly ? 0 : 1;
+  const lastMachineInstance = checkEmpty(machineInstances[machineColumnCount - getLastIndex]);
   const getBorderStyle = (currentBranch, nextBranch) => {
     if (currentBranch && nextBranch && 'machineInstanceId' in currentBranch && 'machineInstanceId' in nextBranch) {
       return currentBranch.machineInstanceId === nextBranch.machineInstanceId ? 'dashed' : 'solid';
@@ -30568,16 +30661,18 @@ const Branches = ({
                   color: "var(--ff-connecting-branch-color)",
                   children: "Dataset List"
                 })]
-              }), jsxRuntime.jsx(Icon, {
-                name: "plus_icon",
-                className: "ff-connecting-icon",
-                onClick: () => onAddRunBrowser(machineInstanceId),
-                color: "var(--ff-connecting-branch-color)",
-                hoverEffect: true
-              }), jsxRuntime.jsx(Typography, {
-                className: "ff-connecting-text",
-                color: "var(--ff-connecting-branch-color)",
-                children: "Run"
+              }), !readOnly && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                children: [jsxRuntime.jsx(Icon, {
+                  name: "plus_icon",
+                  className: "ff-connecting-icon",
+                  onClick: () => onAddRunBrowser(machineInstanceId),
+                  color: "var(--ff-connecting-branch-color)",
+                  hoverEffect: true
+                }), jsxRuntime.jsx(Typography, {
+                  className: "ff-connecting-text",
+                  color: "var(--ff-connecting-branch-color)",
+                  children: "Run"
+                })]
               })]
             }), !readOnly && jsxRuntime.jsx(Icon, {
               name: "delete",
@@ -51619,28 +51714,31 @@ const MachineInstances = ({
   datasetHeight,
   curveHeights,
   itemRefs,
-  datasetRef
+  datasetRef,
+  isReadOnlyMode
 }) => {
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: parentNodeData?.machineInstances?.length === 0 ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [jsxRuntime.jsx("div", {
-        className: "ff-selectedMachines-connecting-line",
-        children: jsxRuntime.jsxs("div", {
-          className: "ff-line",
-          children: [jsxRuntime.jsx("div", {
-            className: "ff-left-icon"
-          }), jsxRuntime.jsx("div", {
-            className: "ff-right-icon"
-          })]
-        })
-      }), jsxRuntime.jsx("div", {
-        className: "ff-machine-instance ff-machine-env-button",
-        children: getChildNodeComponent({
-          isButton: true,
-          parentNodeData,
-          parentNodeIndex
-        })
-      })]
+    children: parentNodeData?.machineInstances?.length === 0 ? jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: !isReadOnlyMode && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx("div", {
+          className: "ff-selectedMachines-connecting-line",
+          children: jsxRuntime.jsxs("div", {
+            className: "ff-line",
+            children: [jsxRuntime.jsx("div", {
+              className: "ff-left-icon"
+            }), jsxRuntime.jsx("div", {
+              className: "ff-right-icon"
+            })]
+          })
+        }), jsxRuntime.jsx("div", {
+          className: "ff-machine-instance ff-machine-env-button",
+          children: getChildNodeComponent({
+            isButton: true,
+            parentNodeData,
+            parentNodeIndex
+          })
+        })]
+      })
     }) : parentNodeData?.machineInstances?.map((childNodeData, childNodeIndex) => {
       const isFirstLine = childNodeIndex === 0;
       return jsxRuntime.jsxs("div", {
@@ -51703,26 +51801,28 @@ const MachineInstances = ({
               })]
             }, ffid())
           }, runLevelExecutionDataSet?.runLevelExecutionDataSetId + ffid()))
-        }), childNodeIndex === parentNodeData.machineInstances.length - 1 && jsxRuntime.jsxs(jsxRuntime.Fragment, {
-          children: [jsxRuntime.jsx("div", {
-            className: "ff-selectedMachines-connecting-line ff-second-line",
-            children: jsxRuntime.jsxs("div", {
-              className: "ff-line",
-              children: [jsxRuntime.jsx("div", {
-                className: "ff-left-icon"
-              }), jsxRuntime.jsx("div", {
-                className: "ff-right-icon"
-              })]
-            })
-          }), jsxRuntime.jsx("div", {
-            className: "ff-machine-instance ff-machine-env-button",
-            children: getChildNodeComponent({
-              isButton: true,
-              parentNodeData,
-              parentNodeIndex,
-              childNodeIndex: childNodeIndex + 1
-            })
-          })]
+        }), childNodeIndex === parentNodeData.machineInstances.length - 1 && jsxRuntime.jsx(jsxRuntime.Fragment, {
+          children: !isReadOnlyMode && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [jsxRuntime.jsx("div", {
+              className: "ff-selectedMachines-connecting-line ff-second-line",
+              children: jsxRuntime.jsxs("div", {
+                className: "ff-line",
+                children: [jsxRuntime.jsx("div", {
+                  className: "ff-left-icon"
+                }), jsxRuntime.jsx("div", {
+                  className: "ff-right-icon"
+                })]
+              })
+            }), jsxRuntime.jsx("div", {
+              className: "ff-machine-instance ff-machine-env-button",
+              children: getChildNodeComponent({
+                isButton: true,
+                parentNodeData,
+                parentNodeIndex,
+                childNodeIndex: childNodeIndex + 1
+              })
+            })]
+          })
         })]
       }, ffid());
     })
@@ -51734,17 +51834,19 @@ const ConnectingBranch = ({
   getChildNodeComponent,
   getParentNodeComponent,
   getParentNodeComponentActionItems,
-  childNodeCurveHeight = 1.28
+  childNodeCurveHeight = 1.28,
+  isReadOnlyMode = false
 }) => {
   const datasetRef = React.useRef(null);
   const [datasetHeight, setDatasetHeight] = React.useState(0);
   const [curveHeights, setCurveHeights] = React.useState([]);
   const itemRefs = React.useRef([]);
   const calculateVerticalLineHeight = (machineInstances, datasetHeight, gap) => {
-    const totalDataSets = machineInstances.reduce((acc, instance) => {
-      return acc + (instance.runLevelExecutionDataSets?.length || 0);
-    }, 0);
-    return totalDataSets * datasetHeight + totalDataSets * gap;
+    if (machineInstances.length === 1 && isReadOnlyMode) {
+      return 0;
+    }
+    const totalDataSets = machineInstances.reduce((acc, instance, index) => acc + (index !== machineInstances.length - 1 || !isReadOnlyMode ? instance.runLevelExecutionDataSets?.length || 0 : 0), 0);
+    return totalDataSets * (datasetHeight + gap);
   };
   React.useEffect(() => {
     if (datasetRef.current) {
@@ -51848,11 +51950,12 @@ const ConnectingBranch = ({
                 curveHeights: curveHeights,
                 itemRefs: itemRefs,
                 datasetRef: datasetRef,
-                getChildNodeComponent: getChildNodeComponent
+                getChildNodeComponent: getChildNodeComponent,
+                isReadOnlyMode: isReadOnlyMode
               })]
             })]
           }, ffid());
-        }), jsxRuntime.jsx("div", {
+        }), !isReadOnlyMode && jsxRuntime.jsx("div", {
           className: "ff-select-machine-input",
           style: {
             gridRow: `${currentRow}`
@@ -54815,7 +54918,7 @@ exports.StatusCard = StatusCard;
 exports.TIME_REGEX = TIME_REGEX;
 exports.TWITTER_HANDLE_REGEX = TWITTER_HANDLE_REGEX;
 exports.Table = Table$1;
-exports.TableTree = TableTree;
+exports.TableTree = TreeTable;
 exports.TableWithAccordion = TableWithAccordion;
 exports.Tabs = Tabs;
 exports.TextArea = Textarea;