abdul-react 0.0.34 → 0.0.36

package/lib/index.cjs

@@ -426,7 +426,7 @@ const SvgNoAccessIcon = (props) => /* @__PURE__ */ React__namespace.createElemen
 
 const SvgFullAccessIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.3023 1.71582C14.0651 1.7172 13.838 1.81245 13.6708 1.98077C13.6708 1.98077 9.91509 5.72922 7.63431 8.00848L6.02693 6.40109C5.67669 6.05175 5.1098 6.05175 4.75956 6.40109C4.41022 6.75132 4.41022 7.31822 4.75956 7.66845L7.00284 9.91173C7.35309 10.261 7.91995 10.261 8.2702 9.91173C10.3923 7.79041 14.9382 3.24814 14.9382 3.24814C15.2875 2.8979 15.2875 2.33101 14.9382 1.98077C14.7699 1.81138 14.5411 1.71603 14.3023 1.71582Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M8.00172 1C4.14578 1.00003 1 4.14236 1 7.99832C1 11.8542 4.14578 15 8.00172 15C11.166 15 13.944 12.8676 14.763 9.8111C14.9214 9.22021 15 8.61007 15 7.99832C15 7.51546 14.6089 7.12387 14.1261 7.12323C13.6432 7.12387 13.2521 7.51546 13.2521 7.99832C13.2521 8.45716 13.1897 8.91556 13.071 9.35875C12.4548 11.6582 10.3823 13.2521 8.00172 13.2522C5.09163 13.2521 2.74786 10.9084 2.74786 7.99832C2.74786 5.08823 5.09162 2.74788 8.00172 2.74788C8.46061 2.74791 8.91551 2.81042 9.35875 2.92902C9.82555 3.05418 10.3054 2.77725 10.4306 2.31044C10.4307 2.31004 10.4308 2.3096 10.4309 2.30919C10.5561 1.84238 10.2791 1.36252 9.81234 1.23736C9.81192 1.23726 9.81152 1.23712 9.8111 1.23702C9.22011 1.07869 8.61357 1.00003 8.00172 1Z", fill: "currentColor" }));
 
-const SvgViewAccessIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.911 7.18924C14.786 7.01815 11.806 3 7.99994 3C4.19392 3 1.21377 7.01815 1.08884 7.18907C0.970387 7.35139 0.970387 7.57153 1.08884 7.73385C1.21377 7.90494 4.19392 11.9231 7.99994 11.9231C11.806 11.9231 14.786 7.90491 14.911 7.73398C15.0297 7.5717 15.0297 7.35139 14.911 7.18924ZM7.99994 11C5.1964 11 2.76824 8.33309 2.04946 7.46123C2.76731 6.5886 5.19039 3.92307 7.99994 3.92307C10.8033 3.92307 13.2313 6.58953 13.9504 7.46186C13.2326 8.33445 10.8095 11 7.99994 11Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.99996 4.69238C6.47302 4.69238 5.23071 5.9347 5.23071 7.46163C5.23071 8.98856 6.47302 10.2309 7.99996 10.2309C9.52689 10.2309 10.7692 8.98856 10.7692 7.46163C10.7692 5.9347 9.52689 4.69238 7.99996 4.69238ZM7.99996 9.30778C6.98195 9.30778 6.15381 8.47961 6.15381 7.46163C6.15381 6.44365 6.98198 5.61548 7.99996 5.61548C9.01794 5.61548 9.84611 6.44365 9.84611 7.46163C9.84611 8.47961 9.01797 9.30778 7.99996 9.30778Z", fill: "currentColor" }));
+const SvgViewAccessIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.8985 6.29701C13.5046 8.80023 10.861 10.3552 8.00093 10.3552C5.13896 10.3552 2.49546 8.80023 1.10149 6.29701C0.994127 6.10264 0.994127 5.89717 1.10149 5.70297C2.49546 3.19978 5.13896 1.64494 8.00093 1.64494C10.861 1.64494 13.5045 3.19978 14.8985 5.70297C15.0078 5.89717 15.0078 6.10264 14.8985 6.29701ZM15.789 5.20666C14.2154 2.38043 11.2313 0.624939 8.00093 0.624939C4.76871 0.624939 1.78457 2.38043 0.211039 5.20666C-0.0703464 5.71093 -0.0703464 6.28905 0.211039 6.79295C1.78457 9.61918 4.76871 11.375 8.00093 11.375C11.2313 11.375 14.2154 9.61918 15.789 6.79295C16.0703 6.28909 16.0703 5.71093 15.789 5.20666ZM8.00093 8.09231C9.15424 8.09231 10.0928 7.15375 10.0928 5.99991C10.0928 4.84606 9.15424 3.9075 8.00093 3.9075C6.84576 3.9075 5.9072 4.84606 5.9072 5.99991C5.9072 7.15375 6.8458 8.09231 8.00093 8.09231ZM8.00093 2.88749C6.28299 2.88749 4.8872 4.28386 4.8872 5.99994C4.8872 7.71639 6.28303 9.11218 8.00093 9.11218C9.71701 9.11218 11.1128 7.71636 11.1128 5.99994C11.1128 4.28386 9.71701 2.88749 8.00093 2.88749Z", fill: "currentColor" }));
 
 const SvgHideAccessIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M3.71305 9.66393C5.04428 10.4052 6.50768 10.7961 7.94891 10.7961H8.00016C9.00732 10.803 10.0251 10.6177 11.002 10.2561L12.2785 11.5326C12.3944 11.6486 12.5463 11.7067 12.6985 11.7067C12.8507 11.7067 13.0026 11.6486 13.1185 11.5326C13.3504 11.3008 13.3504 10.9248 13.1185 10.693L2.89276 0.467238C2.66089 0.235367 2.28496 0.235367 2.05308 0.467238C1.82121 0.699108 1.82121 1.07504 2.05308 1.30691L2.82682 2.08064C1.84059 2.78094 0.969356 3.67405 0.272807 4.70528C-0.0909357 5.24433 -0.0909357 5.94088 0.272807 6.48025C1.17123 7.81053 2.36089 8.91145 3.71274 9.66424L3.71305 9.66393ZM7.92234 7.17586C7.10986 7.13617 6.45644 6.48274 6.41675 5.67026L7.92234 7.17586ZM1.25716 5.36933C1.91277 4.39841 2.74182 3.56718 3.68024 2.93375L5.39333 4.64684C5.28583 4.94215 5.2274 5.26027 5.2274 5.59214C5.2274 7.12117 6.47144 8.36521 8.00047 8.36521C8.33234 8.36521 8.65045 8.30646 8.94576 8.19896L10.0629 9.31613C9.3995 9.50894 8.72233 9.60831 8.05203 9.60831H8.00484H7.99672C6.7408 9.61675 5.46083 9.27738 4.29117 8.62645C3.10119 7.96397 2.05215 6.9918 1.25779 5.81557C1.16623 5.67995 1.16623 5.50495 1.25779 5.36964L1.25716 5.36933ZM9.58103 5.47651L10.6163 6.51181C10.7179 6.224 10.7732 5.91463 10.7732 5.59245C10.7732 4.06342 9.52916 2.81938 8.00012 2.81938C7.67794 2.81938 7.36857 2.87469 7.08077 2.97625L8.11606 4.01154C8.89792 4.06842 9.52416 4.69465 9.58103 5.47651ZM12.2875 1.52096C13.6394 2.27376 14.8291 3.37468 15.7275 4.70497L15.7272 4.70465C16.0909 5.2437 16.0909 5.94025 15.7272 6.47931C15.0356 7.50335 14.1716 8.39114 13.1938 9.08925L12.341 8.23646C13.2706 7.60491 14.0922 6.77867 14.7431 5.81494C14.8347 5.67963 14.8347 5.50464 14.7431 5.36901C13.9488 4.19279 12.8997 3.22062 11.7097 2.55813C10.5401 1.90721 9.25854 1.5669 8.00419 1.57628H7.99606H7.94888C7.28764 1.57628 6.61953 1.67284 5.96485 1.86033L5.02393 0.919414C5.97673 0.570046 6.96796 0.3888 7.94888 0.3888H8.00013H8.05137C9.49291 0.3888 10.9563 0.779729 12.2875 1.52096Z", fill: "currentColor" }));
 
@@ -1936,11 +1936,11 @@ const SvgAdbShell = (props) => /* @__PURE__ */ React__namespace.createElement("s
 
 const SvgUiInspector = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.1663 8.33337V3.33337C15.1663 1.95271 14.047 0.833374 12.6663 0.833374C10.149 0.833374 5.85034 0.833374 3.33301 0.833374C1.95234 0.833374 0.833008 1.95271 0.833008 3.33337V12.6667C0.833008 14.0474 1.95234 15.1667 3.33301 15.1667H8.33301C8.60901 15.1667 8.83301 14.9427 8.83301 14.6667C8.83301 14.3907 8.60901 14.1667 8.33301 14.1667H3.33301C2.50434 14.1667 1.83301 13.4954 1.83301 12.6667V3.33337C1.83301 2.50471 2.50434 1.83337 3.33301 1.83337H12.6663C13.495 1.83337 14.1663 2.50471 14.1663 3.33337V8.33337C14.1663 8.60937 14.3903 8.83337 14.6663 8.83337C14.9423 8.83337 15.1663 8.60937 15.1663 8.33337Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M14.6663 4.16675H1.33301C1.05701 4.16675 0.833008 4.39075 0.833008 4.66675C0.833008 4.94275 1.05701 5.16675 1.33301 5.16675H14.6663C14.9423 5.16675 15.1663 4.94275 15.1663 4.66675C15.1663 4.39075 14.9423 4.16675 14.6663 4.16675Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M8.5 3.5C8.77614 3.5 9 3.27614 9 3C9 2.72386 8.77614 2.5 8.5 2.5C8.22386 2.5 8 2.72386 8 3C8 3.27614 8.22386 3.5 8.5 3.5Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.333 3.5C10.6092 3.5 10.833 3.27614 10.833 3C10.833 2.72386 10.6092 2.5 10.333 2.5C10.0569 2.5 9.83301 2.72386 9.83301 3C9.83301 3.27614 10.0569 3.5 10.333 3.5Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M12.166 3.5C12.4422 3.5 12.666 3.27614 12.666 3C12.666 2.72386 12.4422 2.5 12.166 2.5C11.8899 2.5 11.666 2.72386 11.666 3C11.666 3.27614 11.8899 3.5 12.166 3.5Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.666 7.16675C8.73402 7.16675 7.16602 8.73475 7.16602 10.6667C7.16602 12.5987 8.73402 14.1667 10.666 14.1667C12.598 14.1667 14.166 12.5987 14.166 10.6667C14.166 8.73475 12.598 7.16675 10.666 7.16675ZM10.666 8.16675C12.046 8.16675 13.166 9.28675 13.166 10.6667C13.166 12.0467 12.046 13.1667 10.666 13.1667C9.28602 13.1667 8.16602 12.0467 8.16602 10.6667C8.16602 9.28675 9.28602 8.16675 10.666 8.16675Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.6465 13.3534L14.3132 15.0201C14.5078 15.2154 14.8252 15.2154 15.0198 15.0201C15.2152 14.8254 15.2152 14.5081 15.0198 14.3134L13.3532 12.6467C13.1585 12.4514 12.8412 12.4514 12.6465 12.6467C12.4512 12.8414 12.4512 13.1587 12.6465 13.3534Z", fill: "currentColor" }));
 
-const SvgRecord = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_20310_13972)" }, /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 0C3.5875 0 0 3.5875 0 8C0 12.4125 3.5875 16 8 16C12.4125 16 16 12.4125 16 8C16 3.5875 12.4125 0 8 0ZM5.03125 6.20312H3.78125C3.64375 6.20312 3.53125 6.31563 3.53125 6.45312V8.22812V9.54375C3.53125 9.68125 3.64375 9.79375 3.78125 9.79375C3.91875 9.79375 4.03125 9.68125 4.03125 9.54375V8.47812H4.425L5.34375 9.65C5.39375 9.7125 5.46563 9.74687 5.54063 9.74687C5.59375 9.74687 5.65 9.72813 5.69375 9.69375C5.80312 9.60938 5.82188 9.45 5.7375 9.34375L5.05937 8.48125C5.675 8.46562 6.16875 7.9625 6.16875 7.34375C6.17188 6.71562 5.65938 6.20312 5.03125 6.20312ZM7.30625 6.70312V7.75H9.09375C9.23125 7.75 9.34375 7.8625 9.34375 8C9.34375 8.1375 9.23125 8.25 9.09375 8.25H7.30625V9.29688H9.09375C9.23125 9.29688 9.34375 9.40938 9.34375 9.54688C9.34375 9.68437 9.23125 9.79688 9.09375 9.79688H7.05312C6.91563 9.79688 6.80312 9.68437 6.80312 9.54688V6.45312C6.80312 6.31563 6.91563 6.20312 7.05312 6.20312H9.09375C9.23125 6.20312 9.34375 6.31563 9.34375 6.45312C9.34375 6.59062 9.23125 6.70312 9.09375 6.70312H7.30625ZM10.4312 7.325V8.67188C10.4312 9.01562 10.7094 9.29375 11.0531 9.29375H11.35C11.6875 9.29375 11.9656 9.01875 11.9719 8.68437C11.975 8.54688 12.0875 8.43437 12.2281 8.4375C12.3656 8.44063 12.475 8.55313 12.475 8.69375C12.4625 9.3 11.9594 9.79375 11.3531 9.79375H11.0562C10.4375 9.79375 9.93437 9.29062 9.93437 8.67188V7.325C9.93437 6.70625 10.4375 6.20312 11.0562 6.20312H11.3531C11.9594 6.20312 12.4625 6.69688 12.475 7.30312C12.4781 7.44062 12.3687 7.55625 12.2281 7.55937C12.0875 7.5625 11.975 7.45312 11.9719 7.3125C11.9656 6.975 11.6875 6.70312 11.35 6.70312H11.0531C10.7094 6.70312 10.4312 6.98438 10.4312 7.325ZM5.03125 7.98125H4.03125V6.70625H5.03125C5.38438 6.70625 5.66875 6.99062 5.66875 7.34375C5.66875 7.69375 5.38438 7.98125 5.03125 7.98125Z", fill: "currentColor" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_20310_13972" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 16, height: 16, fill: "white" }))));
+const SvgTimerIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M14.9827 3.53063L13.3034 1.85125C13.0593 1.60716 12.6635 1.60716 12.4195 1.85125C12.1754 2.09534 12.1754 2.49106 12.4195 2.73513L12.8172 3.13287L12.0015 3.94856C10.9397 3.06275 9.64867 2.528 8.27148 2.40353V1.25H8.83398C9.17917 1.25 9.45898 0.970187 9.45898 0.625C9.45898 0.279813 9.17917 0 8.83398 0H6.45898C6.1138 0 5.83398 0.279813 5.83398 0.625C5.83398 0.970187 6.1138 1.25 6.45898 1.25H7.02148V2.40353C3.59261 2.71341 0.833984 5.59275 0.833984 9.1875C0.833984 12.9526 3.88089 16 7.64648 16C11.4115 16 14.459 12.9531 14.459 9.1875C14.459 7.57778 13.9041 6.05356 12.8854 4.83244L13.7011 4.01675L14.0989 4.4145C14.3429 4.65856 14.7386 4.65859 14.9827 4.4145C15.2268 4.17044 15.2268 3.77472 14.9827 3.53063ZM7.64648 14.75C4.57933 14.75 2.08398 12.2547 2.08398 9.1875C2.08398 6.12034 4.57933 3.625 7.64648 3.625C10.7136 3.625 13.209 6.12034 13.209 9.1875C13.209 12.2547 10.7137 14.75 7.64648 14.75ZM10.8941 9.1875C10.8941 9.53269 10.6143 9.8125 10.2691 9.8125H7.64652C7.30133 9.8125 7.02152 9.53269 7.02152 9.1875V5.51016C7.02152 5.16497 7.30133 4.88516 7.64652 4.88516C7.9917 4.88516 8.27152 5.16497 8.27152 5.51016V8.5625H10.2691C10.6143 8.5625 10.8941 8.84231 10.8941 9.1875Z", fill: "white" }));
 
-const SvgAddElement = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 16, height: 16, rx: 8, fill: "#F7EBFF" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M8 2C4.6863 2 2 4.68627 2 8C2 11.3137 4.6863 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68627 11.3137 2 8 2ZM10.0537 11.15H5.94644V4.85002H9.97758V6.35024H7.67444V7.27779H9.74365V8.70142H7.67444V9.64463H10.0538L10.0537 11.15Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("mask", { id: "path-3-outside-1_20264_6770", maskUnits: "userSpaceOnUse", x: 2.80005, y: 5.2002, width: 6, height: 6, fill: "black" }, /* @__PURE__ */ React__namespace.createElement("rect", { fill: "white", x: 2.80005, y: 5.2002, width: 6, height: 6 }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M5.89966 7.2002C5.89966 7.61441 6.23544 7.9502 6.64966 7.9502H7.04956C7.24291 7.9502 7.39966 8.10694 7.39966 8.30029C7.39966 8.49365 7.24291 8.65039 7.04956 8.65039H6.64966C6.23544 8.65039 5.89966 8.98618 5.89966 9.40039V10.1006C5.89966 10.2662 5.76543 10.4004 5.59985 10.4004C5.43428 10.4004 5.30005 10.2662 5.30005 10.1006V9.40039C5.30005 8.98618 4.96426 8.65039 4.55005 8.65039H4.15015C3.95679 8.65039 3.80005 8.49365 3.80005 8.30029C3.80005 8.10694 3.95679 7.9502 4.15015 7.9502H4.55005C4.96426 7.9502 5.30005 7.61441 5.30005 7.2002V6.5C5.30005 6.33442 5.43428 6.2002 5.59985 6.2002C5.76543 6.2002 5.89966 6.33442 5.89966 6.5V7.2002Z" })), /* @__PURE__ */ React__namespace.createElement("path", { d: "M5.89966 7.2002C5.89966 7.61441 6.23544 7.9502 6.64966 7.9502H7.04956C7.24291 7.9502 7.39966 8.10694 7.39966 8.30029C7.39966 8.49365 7.24291 8.65039 7.04956 8.65039H6.64966C6.23544 8.65039 5.89966 8.98618 5.89966 9.40039V10.1006C5.89966 10.2662 5.76543 10.4004 5.59985 10.4004C5.43428 10.4004 5.30005 10.2662 5.30005 10.1006V9.40039C5.30005 8.98618 4.96426 8.65039 4.55005 8.65039H4.15015C3.95679 8.65039 3.80005 8.49365 3.80005 8.30029C3.80005 8.10694 3.95679 7.9502 4.15015 7.9502H4.55005C4.96426 7.9502 5.30005 7.61441 5.30005 7.2002V6.5C5.30005 6.33442 5.43428 6.2002 5.59985 6.2002C5.76543 6.2002 5.89966 6.33442 5.89966 6.5V7.2002Z", fill: "#F7EBFF" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M6.64966 7.9502V8.4502H7.04956V7.9502V7.4502H6.64966V7.9502ZM7.04956 8.65039V8.15039H6.64966V8.65039V9.15039H7.04956V8.65039ZM5.89966 9.40039H5.39966V10.1006H5.89966H6.39966V9.40039H5.89966ZM5.30005 10.1006H5.80005V9.40039H5.30005H4.80005V10.1006H5.30005ZM4.55005 8.65039V8.15039H4.15015V8.65039V9.15039H4.55005V8.65039ZM4.15015 7.9502V8.4502H4.55005V7.9502V7.4502H4.15015V7.9502ZM5.30005 7.2002H5.80005V6.5H5.30005H4.80005V7.2002H5.30005ZM5.89966 6.5H5.39966V7.2002H5.89966H6.39966V6.5H5.89966ZM5.59985 6.2002V6.7002C5.48929 6.7002 5.39966 6.61056 5.39966 6.5H5.89966H6.39966C6.39966 6.05828 6.04157 5.7002 5.59985 5.7002V6.2002ZM5.30005 6.5H5.80005C5.80005 6.61056 5.71042 6.7002 5.59985 6.7002V6.2002V5.7002C5.15813 5.7002 4.80005 6.05828 4.80005 6.5H5.30005ZM4.55005 7.9502V8.4502C5.2404 8.4502 5.80005 7.89055 5.80005 7.2002H5.30005H4.80005C4.80005 7.33827 4.68812 7.4502 4.55005 7.4502V7.9502ZM3.80005 8.30029H4.30005C4.30005 8.38308 4.23294 8.4502 4.15015 8.4502V7.9502V7.4502C3.68065 7.4502 3.30005 7.8308 3.30005 8.30029H3.80005ZM4.15015 8.65039V8.15039C4.23294 8.15039 4.30005 8.2175 4.30005 8.30029H3.80005H3.30005C3.30005 8.76979 3.68065 9.15039 4.15015 9.15039V8.65039ZM5.30005 9.40039H5.80005C5.80005 8.71003 5.2404 8.15039 4.55005 8.15039V8.65039V9.15039C4.68812 9.15039 4.80005 9.26232 4.80005 9.40039H5.30005ZM5.59985 10.4004V9.90039C5.71042 9.90039 5.80005 9.99002 5.80005 10.1006H5.30005H4.80005C4.80005 10.5423 5.15813 10.9004 5.59985 10.9004V10.4004ZM5.89966 10.1006H5.39966C5.39966 9.99002 5.48929 9.90039 5.59985 9.90039V10.4004V10.9004C6.04157 10.9004 6.39966 10.5423 6.39966 10.1006H5.89966ZM6.64966 8.65039V8.15039C5.9593 8.15039 5.39966 8.71003 5.39966 9.40039H5.89966H6.39966C6.39966 9.26232 6.51159 9.15039 6.64966 9.15039V8.65039ZM7.39966 8.30029H6.89966C6.89966 8.2175 6.96677 8.15039 7.04956 8.15039V8.65039V9.15039C7.51906 9.15039 7.89966 8.76979 7.89966 8.30029H7.39966ZM7.04956 7.9502V8.4502C6.96677 8.4502 6.89966 8.38308 6.89966 8.30029H7.39966H7.89966C7.89966 7.8308 7.51906 7.4502 7.04956 7.4502V7.9502ZM6.64966 7.9502V7.4502C6.51159 7.4502 6.39966 7.33827 6.39966 7.2002H5.89966H5.39966C5.39966 7.89055 5.9593 8.4502 6.64966 8.4502V7.9502Z", fill: "currentColor", mask: "url(#path-3-outside-1_20264_6770)" }));
+const SvgMaximizeLivetesting = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M16.418 0.900391C16.463 0.900408 16.5078 0.904749 16.5508 0.913086H16.5518C16.5655 0.915934 16.578 0.919968 16.5869 0.922852C16.5974 0.926251 16.6025 0.928007 16.6084 0.929688L16.6787 0.952148L16.6777 0.953125L16.7432 0.985352L16.7637 0.996094C16.772 1.00039 16.7831 1.00675 16.7949 1.01465C16.87 1.06446 16.9347 1.12881 16.9844 1.20312C16.9925 1.21517 16.9986 1.22697 17.0029 1.23535L17.0127 1.25488L17.0137 1.25586C17.0204 1.26803 17.0362 1.29485 17.0469 1.32031L17.0479 1.32129C17.0582 1.34671 17.0655 1.37669 17.0693 1.38965L17.0859 1.44824V1.44922C17.0942 1.49237 17.0996 1.53688 17.0996 1.58203V5.07227C17.0996 5.44854 16.7946 5.75475 16.418 5.75488C16.0416 5.75488 15.7363 5.44866 15.7363 5.07227V3.22656L11.6631 7.2998C11.5301 7.43308 11.3559 7.49993 11.1816 7.5C11.0508 7.5 10.9192 7.4628 10.8057 7.3877L10.6992 7.2998C10.4332 7.03353 10.4331 6.6021 10.6992 6.33594L14.7715 2.26367H12.9268C12.5505 2.26364 12.2452 1.95831 12.2451 1.58203C12.2451 1.20566 12.5504 0.900419 12.9268 0.900391H16.418Z", fill: "white", stroke: "white", strokeWidth: 0.2 }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M6.33594 10.6995C6.60181 10.4333 7.03381 10.4335 7.2998 10.6995C7.56606 10.9657 7.56606 11.3971 7.2998 11.6633L3.22656 15.7366H5.07227C5.44866 15.7366 5.75488 16.0418 5.75488 16.4182C5.75475 16.7945 5.44857 17.0999 5.07227 17.0999H1.58203C1.53681 17.0999 1.49193 17.0949 1.44824 17.0862V17.0852C1.42485 17.0806 1.39347 17.0707 1.38965 17.0696C1.37703 17.0659 1.34651 17.0584 1.32129 17.0481L1.32031 17.0471C1.29496 17.0364 1.26737 17.0202 1.25586 17.0139V17.0129C1.24872 17.0093 1.22091 16.9966 1.20312 16.9846C1.16572 16.9597 1.13109 16.9312 1.09961 16.8997L1.01465 16.7961C1.00656 16.7841 1.00042 16.7724 0.996094 16.7639L0.986328 16.7444C0.979286 16.7317 0.963078 16.7051 0.952148 16.679V16.678C0.941952 16.653 0.934497 16.6238 0.930664 16.6106L0.913086 16.55L0.914062 16.5491C0.90563 16.5062 0.900408 16.4626 0.900391 16.4182V12.927C0.900419 12.5507 1.20533 12.2454 1.58203 12.2454C1.95863 12.2455 2.26364 12.5507 2.26367 12.927V14.7717L6.33594 10.6995Z", fill: "white", stroke: "white", strokeWidth: 0.2 }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M5.07227 0.900391C5.44866 0.900391 5.75488 1.20564 5.75488 1.58203C5.75477 1.95833 5.44859 2.26367 5.07227 2.26367H3.22754L7.2998 6.33594C7.56593 6.6022 7.56602 7.03359 7.2998 7.2998C7.1667 7.43257 6.99228 7.4989 6.81836 7.49902C6.64404 7.49902 6.46894 7.43281 6.33594 7.2998L2.26367 3.22754V5.07227C2.26367 5.44855 1.95865 5.75477 1.58203 5.75488C1.20532 5.75488 0.900391 5.44863 0.900391 5.07227V1.58203C0.900391 1.5371 0.905435 1.49264 0.914062 1.44922C0.918491 1.42575 0.929166 1.3946 0.930664 1.38965L0.952148 1.32129V1.32031C0.96291 1.29466 0.979683 1.26797 0.986328 1.25586V1.25488C0.989195 1.24976 0.990971 1.24535 0.996094 1.23535C1.00039 1.22696 1.00649 1.21525 1.01465 1.20312C1.03947 1.16593 1.06801 1.13123 1.09961 1.09961L1.2041 1.01465C1.22329 1.00182 1.25315 0.987348 1.25684 0.985352L1.25781 0.984375C1.26587 0.980073 1.29557 0.963447 1.32031 0.953125C1.34656 0.942156 1.37716 0.933567 1.39062 0.929688H1.3916C1.39739 0.928029 1.40179 0.926199 1.41211 0.922852C1.42101 0.919966 1.43338 0.91597 1.44727 0.913086H1.44922C1.49235 0.904811 1.53692 0.900391 1.58203 0.900391H5.07227Z", fill: "white", stroke: "white", strokeWidth: 0.2 }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M10.6992 10.6995C10.9655 10.4332 11.3978 10.4332 11.6641 10.6995L15.7363 14.7717V12.927C15.7365 12.5508 16.0417 12.2454 16.418 12.2454C16.7946 12.2454 17.0994 12.5508 17.0996 12.927V16.4182C17.0996 16.4634 17.0952 16.5079 17.0869 16.551V16.552L17.0693 16.6106L17.0479 16.679C17.0368 16.7053 17.0206 16.7328 17.0137 16.7454C17.0108 16.7506 17.0088 16.7543 17.0039 16.7639C16.9996 16.7723 16.9923 16.7833 16.9844 16.7952L16.9854 16.7961C16.9356 16.8707 16.8712 16.9357 16.7959 16.9856C16.7767 16.9984 16.7471 17.0128 16.7432 17.0149L16.7422 17.0139C16.7302 17.0206 16.7043 17.0376 16.6797 17.0481H16.6787C16.6532 17.0585 16.6217 17.065 16.6094 17.0686L16.6104 17.0696C16.6065 17.0707 16.5743 17.0827 16.5508 17.0872L16.5498 17.0862C16.5066 17.0947 16.4626 17.0999 16.418 17.0999H12.9268C12.5505 17.0997 12.2451 16.7945 12.2451 16.4182C12.2451 16.042 12.5505 15.7368 12.9268 15.7366H14.7715L10.6992 11.6643C10.433 11.3981 10.433 10.9657 10.6992 10.6995Z", fill: "white", stroke: "white", strokeWidth: 0.2 }));
 
-const SvgElementSlider = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 16, height: 16, rx: 8, fill: "#F7EBFF" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.99994 2C4.68623 2 1.99994 4.68627 1.99994 8C1.99994 11.3137 4.68623 14 7.99994 14C11.3136 14 13.9999 11.3137 13.9999 8C13.9999 4.68627 11.3136 2 7.99994 2Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.05737 4.3999C9.1964 4.3999 9.30911 4.50735 9.30911 4.6399V5.2399H9.58604C9.8067 5.2399 10.0133 5.24651 10.2027 5.27201C10.6976 5.32459 11.0802 5.47008 11.3176 5.81369C11.5406 6.13661 11.6 6.58969 11.6 7.1599V8.8399C11.6 9.41011 11.5406 9.8632 11.3176 10.1861C11.0802 10.5297 10.6976 10.6752 10.2027 10.7278C10.0133 10.7533 9.8067 10.7599 9.58604 10.7599H9.30911V11.3599C9.30911 11.4925 9.1964 11.5999 9.05737 11.5999C8.91833 11.5999 8.80562 11.4925 8.80562 11.3599V4.6399C8.80562 4.50735 8.91833 4.3999 9.05737 4.3999ZM9.30911 10.2799H9.58604C9.80085 10.2799 9.98062 10.2732 10.1355 10.2521L10.1435 10.2511C10.5736 10.2059 10.7782 10.0942 10.897 9.92213C11.0308 9.72845 11.0965 9.40537 11.0965 8.8399V7.1599C11.0965 6.59443 11.0308 6.27136 10.897 6.07768C10.7782 5.9056 10.5736 5.79391 10.1435 5.7487L10.1355 5.74773C9.98062 5.72663 9.80085 5.7199 9.58604 5.7199H9.30911V10.2799ZM6.41401 5.7199C6.1992 5.7199 6.01945 5.72663 5.86456 5.74773L5.85655 5.7487C5.42643 5.79391 5.22188 5.9056 5.10301 6.07768C4.96923 6.27136 4.90352 6.59443 4.90352 7.1599V8.8399C4.90352 9.40537 4.96923 9.72845 5.10301 9.92212C5.22188 10.0942 5.42643 10.2059 5.85655 10.2511L5.86456 10.2521C6.01945 10.2732 6.1992 10.2799 6.41401 10.2799H7.65463C7.79367 10.2799 7.90638 10.3874 7.90638 10.5199C7.90638 10.6525 7.79367 10.7599 7.65463 10.7599H6.41401C6.19335 10.7599 5.98678 10.7533 5.79737 10.7278C5.30248 10.6752 4.91986 10.5297 4.68251 10.1861C4.45944 9.8632 4.40002 9.41011 4.40002 8.8399V7.1599C4.40002 6.58969 4.45944 6.13661 4.68251 5.81368C4.91986 5.47008 5.30249 5.32459 5.79738 5.27201C5.98679 5.24651 6.19335 5.2399 6.41401 5.2399H7.63349C7.77252 5.2399 7.88523 5.34735 7.88523 5.4799C7.88523 5.61245 7.77252 5.7199 7.63349 5.7199H6.41401Z", fill: "white" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M6.51232 7.20682V7.71802H7.37707V8.19322H6.51232V8.74762H7.49036V9.24082H5.86658V6.71362H7.49036V7.20682H6.51232Z", fill: "white" }));
+const SvgMacWhiteIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 14 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M6.90345 4.81948C7.79923 4.81948 8.58506 4.4701 9.26091 3.77134C9.93677 3.07257 10.2747 2.26003 10.2747 1.33372C10.2747 1.23198 10.2667 1.08741 10.2506 0.9C10.1326 0.916063 10.0441 0.92945 9.98506 0.940159C9.15901 1.05796 8.43218 1.46222 7.80459 2.15294C7.17701 2.84368 6.86323 3.5826 6.86323 4.36972C6.86323 4.46073 6.87663 4.61067 6.90345 4.81948ZM10.1138 17.1C10.7521 17.1 11.4575 16.6636 12.2299 15.7908C13.0023 14.918 13.5923 13.8927 14 12.7147C12.482 11.9329 11.723 10.8112 11.723 9.34937C11.723 8.12856 12.3372 7.08444 13.5655 6.21701C12.7126 5.15146 11.5862 4.61868 10.1862 4.61868C9.59616 4.61868 9.0571 4.70703 8.56897 4.88373L8.26323 4.99618L7.85287 5.15681C7.58467 5.25855 7.34061 5.30943 7.12069 5.30943C6.94904 5.30943 6.72374 5.25052 6.44483 5.13272L6.13103 5.00421L5.83334 4.88373C5.39884 4.70168 4.93218 4.61065 4.43334 4.61065C3.0977 4.61065 2.02491 5.06043 1.21494 5.95999C0.404976 6.85954 0 8.04556 0 9.51804C0 11.5902 0.649037 13.5045 1.94713 15.2607C2.84828 16.4869 3.67165 17.1 4.41724 17.1C4.73372 17.1 5.04751 17.0384 5.35862 16.9153L5.75287 16.7546L6.06668 16.6422C6.50652 16.4869 6.91149 16.4093 7.2816 16.4093C7.67318 16.4093 8.12376 16.5083 8.63334 16.7064L8.88276 16.8028C9.40305 17.0009 9.81342 17.1 10.1138 17.1Z", fill: "white" }));
 
 const SvgAzureIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 36 28", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M19.6227 0L9.30269 8.97083L0.499817 24.8156H8.43836L19.6227 0ZM20.9952 2.09862L16.5914 14.5423L25.0344 25.1781L8.65282 28H35.4998L20.9952 2.09862Z", fill: "#0072C6" }));
 
@@ -1948,6 +1948,8 @@ const SvgOktaIcon = (props) => /* @__PURE__ */ React__namespace.createElement("s
 
 const SvgGenerateCommand = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.9999 9.3335H10.6666V6.66683H11.9999C13.4726 6.66683 14.6666 5.47283 14.6666 4.00016C14.6666 2.5275 13.4726 1.3335 11.9999 1.3335C10.5271 1.3335 9.33325 2.5275 9.33325 4.00016V5.3335H6.66658V4.00016C6.66658 2.5275 5.47259 1.3335 3.99992 1.3335C2.52725 1.3335 1.33325 2.5275 1.33325 4.00016C1.33325 5.47283 2.52725 6.66683 3.99992 6.66683H5.33325V9.3335H3.99992C2.52725 9.3335 1.33325 10.5275 1.33325 12.0002C1.33325 13.4728 2.52725 14.6668 3.99992 14.6668C5.47275 14.6668 6.66658 13.4728 6.66658 12.0002V10.6668H9.33325V11.9968L9.33309 12.0002C9.33309 13.4728 10.5271 14.6668 11.9998 14.6668C13.4724 14.6668 14.6664 13.4728 14.6664 12.0002C14.6664 10.5275 13.4726 9.33383 11.9999 9.3335ZM11.9999 2.66683C12.3535 2.66683 12.6927 2.80731 12.9427 3.05735C13.1928 3.3074 13.3333 3.64654 13.3333 4.00016C13.3333 4.35378 13.1928 4.69292 12.9427 4.94297C12.6927 5.19302 12.3535 5.3335 11.9999 5.3335H10.6666V4.00016C10.6666 3.64654 10.8071 3.3074 11.0571 3.05735C11.3072 2.80731 11.6463 2.66683 11.9999 2.66683ZM2.66659 4.00016C2.66659 3.64654 2.80706 3.3074 3.05711 3.05735C3.30716 2.80731 3.6463 2.66683 3.99992 2.66683C4.35354 2.66683 4.69268 2.80731 4.94273 3.05735C5.19278 3.3074 5.33325 3.64654 5.33325 4.00016V5.3335H3.99992C3.26359 5.3335 2.66659 4.73633 2.66659 4.00016ZM3.99992 13.3335C3.6463 13.3335 3.30716 13.193 3.05711 12.943C2.80706 12.6929 2.66659 12.3538 2.66659 12.0002C2.66659 11.6465 2.80706 11.3074 3.05711 11.0574C3.30716 10.8073 3.6463 10.6668 3.99992 10.6668H5.33325V12.0002C5.33325 12.3538 5.19278 12.6929 4.94273 12.943C4.69268 13.193 4.35354 13.3335 3.99992 13.3335ZM6.66658 9.3335V6.66683H9.33325V9.3335H6.66658ZM11.9999 13.3335C11.6463 13.3335 11.3072 13.193 11.0571 12.943C10.8071 12.6929 10.6666 12.3538 10.6666 12.0002V10.6668H11.9998C12.3534 10.6668 12.6925 10.8073 12.9426 11.0573C13.1926 11.3073 13.3331 11.6465 13.3332 12.0001C13.3332 12.3537 13.1927 12.6928 12.9427 12.9429C12.6927 13.193 12.3535 13.3335 11.9999 13.3335Z", fill: "#301349" }));
 
+const SvgWindowsBlueIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M16 15L8 14V8H16V15ZM7 8V13.875L0 13V8H7ZM7 7H0V2L7 1.125V7ZM16 7H8V1L16 0V7Z", fill: "#00BCD4" }));
+
 const SvgCopyIconFilled = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 25 23", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_2166_3137)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M0.303711 4.54669C0.303711 2.33755 2.09457 0.546692 4.30371 0.546692H20.0762C22.2853 0.546692 24.0762 2.33755 24.0762 4.54669V18.3067C24.0762 20.5158 22.2853 22.3067 20.0762 22.3067H4.30371C2.09458 22.3067 0.303711 20.5158 0.303711 18.3067V4.54669Z", fill: "#F7ECF8" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.7828 5.69026C10.43 6.04306 10.1876 6.67337 10.1876 7.86153V7.88218H11.6534C12.9943 7.88218 14.1343 8.14561 14.9195 8.93087C15.7048 9.71613 15.9682 10.8561 15.9682 12.197V13.6628H15.9889C17.177 13.6628 17.8073 13.4204 18.1601 13.0676C18.5129 12.7148 18.7553 12.0845 18.7553 10.8964V7.86153C18.7553 6.67337 18.5129 6.04306 18.1601 5.69026C17.8073 5.33745 17.177 5.09508 15.9889 5.09508H12.954C11.7659 5.09508 11.1356 5.33745 10.7828 5.69026ZM15.9682 15.2112H15.9889C17.3297 15.2112 18.4698 14.9478 19.255 14.1625C20.0403 13.3773 20.3037 12.2372 20.3037 10.8964V7.86153C20.3037 6.52066 20.0403 5.38064 19.255 4.59538C18.4698 3.81013 17.3297 3.54669 15.9889 3.54669H12.954C11.6132 3.54669 10.4731 3.81013 9.68789 4.59538C8.90263 5.38064 8.63919 6.52066 8.63919 7.86153V7.88218H8.61855C7.27768 7.88218 6.13766 8.14561 5.3524 8.93087C4.56714 9.71613 4.30371 10.8561 4.30371 12.197V15.2319C4.30371 16.5727 4.56714 17.7127 5.3524 18.498C6.13766 19.2833 7.27768 19.5467 8.61855 19.5467H11.6534C12.9943 19.5467 14.1343 19.2833 14.9195 18.498C15.7048 17.7127 15.9682 16.5727 15.9682 15.2319V15.2112ZM14.4198 12.197C14.4198 11.0089 14.1775 10.3785 13.8247 10.0257C13.4719 9.67294 12.8415 9.43056 11.6534 9.43056H8.61855C7.43039 9.43056 6.80008 9.67294 6.44728 10.0257C6.09447 10.3785 5.8521 11.0089 5.8521 12.197V15.2319C5.8521 16.42 6.09447 17.0503 6.44728 17.4031C6.80008 17.7559 7.43039 17.9983 8.61855 17.9983H11.6534C12.8415 17.9983 13.4719 17.7559 13.8247 17.4031C14.1775 17.0503 14.4198 16.42 14.4198 15.2319V12.197Z", fill: "#71347B" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_2166_3137" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M0.303711 4.54669C0.303711 2.33755 2.09457 0.546692 4.30371 0.546692H20.0762C22.2853 0.546692 24.0762 2.33755 24.0762 4.54669V18.3067C24.0762 20.5158 22.2853 22.3067 20.0762 22.3067H4.30371C2.09458 22.3067 0.303711 20.5158 0.303711 18.3067V4.54669Z", fill: "white" }))));
 
 const SvgGenerateCommandLogo = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M0 7C0 3.13401 3.13401 0 7 0H17C20.866 0 24 3.13401 24 7V17C24 20.866 20.866 24 17 24H7C3.13401 24 0 20.866 0 17V7Z", fill: "#F7EBFF" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.78395 5.78395C6.71109 4.8568 8.10069 4.5 9.9 4.5H14.1C15.8993 4.5 17.2889 4.8568 18.2161 5.78395C19.1432 6.71109 19.5 8.10069 19.5 9.9V14.1C19.5 15.8993 19.1432 17.2889 18.2161 18.2161C17.2889 19.1432 15.8993 19.5 14.1 19.5H9.9C8.10069 19.5 6.71109 19.1432 5.78395 18.2161C4.8568 17.2889 4.5 15.8993 4.5 14.1V9.9C4.5 8.10069 4.8568 6.71109 5.78395 5.78395ZM6.49105 6.49105C5.8432 7.13891 5.5 8.19931 5.5 9.9V14.1C5.5 15.8007 5.8432 16.8611 6.49105 17.5089C7.13891 18.1568 8.19931 18.5 9.9 18.5H14.1C15.8007 18.5 16.8611 18.1568 17.5089 17.5089C18.1568 16.8611 18.5 15.8007 18.5 14.1V9.9C18.5 8.19931 18.1568 7.13891 17.5089 6.49105C16.8611 5.8432 15.8007 5.5 14.1 5.5H9.9C8.19931 5.5 7.13891 5.8432 6.49105 6.49105Z", fill: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M11.6367 12.0586V14.2734C11.5534 14.3802 11.4219 14.4961 11.2422 14.6211C11.0651 14.7461 10.8333 14.8542 10.5469 14.9453C10.2604 15.0339 9.90885 15.0781 9.49219 15.0781C9.13021 15.0781 8.79948 15.0182 8.5 14.8984C8.20052 14.776 7.94271 14.5977 7.72656 14.3633C7.51042 14.1289 7.34375 13.8424 7.22656 13.5039C7.10938 13.1654 7.05078 12.7786 7.05078 12.3438V11.9688C7.05078 11.5339 7.10547 11.1471 7.21484 10.8086C7.32682 10.4701 7.48568 10.1836 7.69141 9.94922C7.89974 9.71484 8.14844 9.53646 8.4375 9.41406C8.72917 9.29167 9.05469 9.23047 9.41406 9.23047C9.89583 9.23047 10.2917 9.3099 10.6016 9.46875C10.9141 9.6276 11.1536 9.84635 11.3203 10.125C11.487 10.401 11.5911 10.7188 11.6328 11.0781H10.5859C10.5573 10.8802 10.5 10.707 10.4141 10.5586C10.3281 10.4076 10.2057 10.2904 10.0469 10.207C9.89062 10.1211 9.6875 10.0781 9.4375 10.0781C9.22656 10.0781 9.04036 10.1198 8.87891 10.2031C8.71745 10.2865 8.58203 10.4076 8.47266 10.5664C8.36328 10.7253 8.27995 10.9219 8.22266 11.1562C8.16797 11.3906 8.14062 11.6589 8.14062 11.9609V12.3438C8.14062 12.6484 8.17188 12.9193 8.23438 13.1562C8.29688 13.3906 8.38672 13.5885 8.50391 13.75C8.6237 13.9089 8.77083 14.0299 8.94531 14.1133C9.1224 14.194 9.32292 14.2344 9.54688 14.2344C9.75 14.2344 9.91797 14.2174 10.0508 14.1836C10.1862 14.1471 10.2943 14.1042 10.375 14.0547C10.4557 14.0052 10.5182 13.957 10.5625 13.9102V12.8438H9.43359V12.0586H11.6367ZM15.9805 13.1289H17.0547C17.026 13.5091 16.9206 13.8464 16.7383 14.1406C16.556 14.4323 16.3021 14.6615 15.9766 14.8281C15.651 14.9948 15.2565 15.0781 14.793 15.0781C14.4362 15.0781 14.1146 15.0156 13.8281 14.8906C13.5443 14.763 13.3008 14.582 13.0977 14.3477C12.8971 14.1107 12.7435 13.8268 12.6367 13.4961C12.5299 13.1628 12.4766 12.7891 12.4766 12.375V11.9414C12.4766 11.5273 12.5312 11.1536 12.6406 10.8203C12.75 10.487 12.9062 10.2031 13.1094 9.96875C13.3151 9.73177 13.5612 9.54948 13.8477 9.42188C14.1367 9.29427 14.4596 9.23047 14.8164 9.23047C15.2799 9.23047 15.6719 9.31641 15.9922 9.48828C16.3125 9.65755 16.5612 9.89062 16.7383 10.1875C16.9154 10.4844 17.0221 10.8255 17.0586 11.2109H15.9844C15.9635 10.9714 15.9115 10.7682 15.8281 10.6016C15.7474 10.4349 15.625 10.3086 15.4609 10.2227C15.2995 10.1341 15.0846 10.0898 14.8164 10.0898C14.6081 10.0898 14.4245 10.1289 14.2656 10.207C14.1094 10.2852 13.9792 10.4023 13.875 10.5586C13.7708 10.7122 13.6927 10.9049 13.6406 11.1367C13.5885 11.3659 13.5625 11.6315 13.5625 11.9336V12.375C13.5625 12.6641 13.5859 12.9232 13.6328 13.1523C13.6797 13.3815 13.7526 13.5755 13.8516 13.7344C13.9505 13.8932 14.0781 14.0143 14.2344 14.0977C14.3906 14.181 14.5768 14.2227 14.793 14.2227C15.056 14.2227 15.2695 14.181 15.4336 14.0977C15.6003 14.0143 15.7266 13.8919 15.8125 13.7305C15.901 13.569 15.957 13.3685 15.9805 13.1289Z", fill: "#71347B" }));
@@ -1978,6 +1980,14 @@ const SvgRealmeIcon = (props) => /* @__PURE__ */ React__namespace.createElement(
 
 const SvgVivoIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 5", fill: "none", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props }, /* @__PURE__ */ React__namespace.createElement("rect", { y: 0.784546, width: 16, height: 4, fill: "url(#pattern0_6138_26160)" }), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("pattern", { id: "pattern0_6138_26160", patternContentUnits: "objectBoundingBox", width: 1, height: 1 }, /* @__PURE__ */ React__namespace.createElement("use", { xlinkHref: "#image0_6138_26160", transform: "matrix(0.0078125 0 0 0.03125 0 -0.03125)" })), /* @__PURE__ */ React__namespace.createElement("image", { id: "image0_6138_26160", width: 128, height: 34, preserveAspectRatio: "none", xlinkHref: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAAAiCAMAAACgNCEcAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACQ1BMVEUAAABJbf9BX/9BX/9AYP9VVf9BX/9BX/9AYP9VVf9AX/9BX/9BX/88Wv9BXv9AX/9AXP9BX/9BX/9AQP8+YP9CX/9EZv9BXf9AVf9EYv9AYP9NZv9AYP8+Xf8zZv9CY/8+Yf89Yf+AgP9AYP9BX/9AX/9BX/9BX/9BX/9BX/9BX/9AX/9AX/9AYP8AAP9BX/9CX/9CX/9CX/9DZP9BX/9BX/9AXv9BX/9BX/9BYP9BX/9CX/9AXv9BYP9BYP9BX/9CYP9CYP89XP9AX/9DXv9BXv9BX/9AWf9BX/9BXv9JW/9BX/9BX/9DXv9BX/9BXv9BXv9CXv9BYv9CYP9BYP9BX/9BX/9GXf9BX/9BX/9BX/9CX/9BX/9DXv9BX/87Yv9BX/9BXv9CXv9BX/9BX/9BX/9DYP9BYP9AX/9BYP9BX/9BX/9AXv9DYf9BX/9BX/9CX/9BXv9AYP9AX/9CYf9BX/9AX/9CYP85Vf9BX/9AXf9CX/9AX/8+Xf9BX/9BXv9AXv9AXv9BXv9BX/9EXv9BX/9BX/9BX/9BX/9BX/9AYP9AYP9BX/9BXv9CYP9BXv9BXf9BXf9BX/9BX/9BXv9DXv9BX/9CXv9AX/9CYP9CX/9BX/9BX/9BYP9AW/9BX/9BYP9AXv9CX/9BX/9HY/9AX/9BYP9BX/9AX/9CX/9BX/9AYP9BX/9CX/9AXv9BX/9BX/9BX/9BX/9AXv9CX/9AXv9BXv9CYP9CYf9AXv9AXv9BYP9BX/9CX/9CYf9BX/////8RtggjAAAAv3RSTlMAB6TsWAax/WADskPjEeCTJOSqBCWjDzcMIiAKECEFHx0VAkCJut7u/PvbtoM4AeeEs9oX+vZczIZi3NJUmEp+ZXgZxial/hS/rQ7h5S75vXobJ02V18cLnsv0dHET3w28mklmw/VFWsqwmaFEKviU1oIYwkKcc3AJuyx8jyn3xUyHtfEebvO3O91IKMlybaJHP8RLkjmWbGtVRnbBoBwryGeb6xJjwOqXPl4I5lk88NPveVcjb2qIMl93dYFhOqBvFloAAAABYktHRMATYd/4AAAAB3RJTUUH6QccCRo4wo6tFwAAA69JREFUWMPdmOk/VFEYx48lExlLKGNvMEbLlGwJIVshkmrKEiqTbFkqLdIiFUkoFSVaaNG+ab//Wvc+z70zd+49Z3g3n0/Pq/M8z3nO+Tnf+9xzByFLNxdXN3fiRFvmwXGa5c7b39OL403jvDNYwYF5O02A1gcE+DqPgZ8/v//KACc+hYE+XJCnM9uArFpN/kML1ul0IaHsfBifD4/AA9DpInGk5YNRLuyiNXw+Ui/1b3RMrCHOyFktPm7tuvUbTGJ6oxAybmKsFOABJQnQh/H8aLPwECQmCcHkFFa/pELRFnBMaVs5qqVn4OxMdLfR18rCbLYwzoHhdmHRXBgm59GL8iFbEC2MC3dwTNsZLMwoKganREtbalcpJMvguHbDuFwY7kmGcS61Jypw+b2w/z7Oge03w8kWgHOABuAgpCp1RCGAVOEK1ZSiGoDKHarlx/o6zqHlQ0U9OoeZAI4QlQD9UXAaApkALML4mPTYNR5vsllzWYmkoMUhhNY2GQB7AWwIIoAT8Py34/YdnYpJeks6TusC9yRCOOUQgEIAOY0rdCu71t8GgLTAOKmFAurMWaw/5wDCeTsASgEMCK4yAKQHnCxqq9TEQTKHyCD4h8lnXOi1A6AUIEG4qJcXXZIBIATeBw1F9Ga9DDOvEDmEejmARgj1XSUMARKEfhYAYromONcZr6sbMHVA9BBCwSBRbIevILoAfZcKQhBENNHiW15+GirrxGrRU0G4iQDqTGwBJE8JQQQgfbNowYthXULYIZIrQsiULpAhJQCKAHILNxyWbmtvcA3Boh8Ba95mCMiDyW5WvwkhjKCXowJAEyBB8EO3GQGMWvNwrO0MASkwe8jqmwcg4FPLAEATQHSVEBsDCHdQ9F1bOgEC43QBdcqXjwjhnvCXjakBUAWQatz0PgUAbw/wj6R+OExgZYYsJEKYJOQhBQBdgP6RFcKUEgAhj5Ow12vU+7vj2fXVymJF+N1dPD2CAGJNiwsggQ0QnYl6ogLA21MMPuuZbH2utVr5+OyceBnZfwiJEERTAGAIIN1296scAG8hlY6v4xeKs3kpT86SJQkQIaAZXymyrwsc7R8/qJg+n6r8VlhcAOl8YyvKURX1a9j7t71VTQ83SMm50KUKIO/eS0VTJvXTZjGw9v9A+5WR6AWKe30prZMNl7tZnZiegQU/fjJR/6uQ1mVU714a+5nxI+9LStXXiUJaZv7bwkKHhVr0/cfP4Qoz+7fFaNqvjgWr/a7689fafv8AZtmTKdjpF7oAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjUtMDctMjhUMDk6MjY6NTUrMDA6MDBiO/dcAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDI1LTA3LTI4VDA5OjI2OjU1KzAwOjAwE2ZP4AAAAABJRU5ErkJggg==" })));
 
+const SvgMinimizeTree = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M0.257713 8.62399C-0.0859044 8.28038 -0.0859044 7.71952 0.257713 7.37591L6.98841 0.645442C7.33256 0.301292 7.89238 0.301292 8.23649 0.645442L8.61298 1.02193C8.95743 1.36638 8.95751 1.9259 8.61302 2.27043L3.5072 7.37575C3.16267 7.72021 3.16267 8.27985 3.5072 8.6243L8.61298 13.7297C8.95751 14.0741 8.95747 14.6336 8.61294 14.9781L8.23646 15.3546C7.89284 15.6982 7.33198 15.6982 6.98837 15.3546L0.257713 8.62399ZM14.1172 15.3547C14.4612 15.6987 15.0216 15.6986 15.3655 15.3547L15.742 14.9782C16.0858 14.6344 16.0859 14.0735 15.742 13.7297L10.6365 8.6243C10.292 8.27981 10.292 7.72025 10.6365 7.37575L15.742 2.2704C16.086 1.92647 16.086 1.36581 15.742 1.02189L15.3656 0.645404C15.0214 0.301292 14.4614 0.301254 14.1173 0.645404L7.98445 6.77842C6.26412 5.0598 6.69928 5.49564 7.9832 6.77968L7.38701 7.37591C7.04316 7.71975 7.0432 8.28019 7.38701 8.62403L14.1172 15.3547Z", fill: "#71347B" }));
+
+const SvgRecord = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_20310_13972)" }, /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8 0C3.5875 0 0 3.5875 0 8C0 12.4125 3.5875 16 8 16C12.4125 16 16 12.4125 16 8C16 3.5875 12.4125 0 8 0ZM5.03125 6.20312H3.78125C3.64375 6.20312 3.53125 6.31563 3.53125 6.45312V8.22812V9.54375C3.53125 9.68125 3.64375 9.79375 3.78125 9.79375C3.91875 9.79375 4.03125 9.68125 4.03125 9.54375V8.47812H4.425L5.34375 9.65C5.39375 9.7125 5.46563 9.74687 5.54063 9.74687C5.59375 9.74687 5.65 9.72813 5.69375 9.69375C5.80312 9.60938 5.82188 9.45 5.7375 9.34375L5.05937 8.48125C5.675 8.46562 6.16875 7.9625 6.16875 7.34375C6.17188 6.71562 5.65938 6.20312 5.03125 6.20312ZM7.30625 6.70312V7.75H9.09375C9.23125 7.75 9.34375 7.8625 9.34375 8C9.34375 8.1375 9.23125 8.25 9.09375 8.25H7.30625V9.29688H9.09375C9.23125 9.29688 9.34375 9.40938 9.34375 9.54688C9.34375 9.68437 9.23125 9.79688 9.09375 9.79688H7.05312C6.91563 9.79688 6.80312 9.68437 6.80312 9.54688V6.45312C6.80312 6.31563 6.91563 6.20312 7.05312 6.20312H9.09375C9.23125 6.20312 9.34375 6.31563 9.34375 6.45312C9.34375 6.59062 9.23125 6.70312 9.09375 6.70312H7.30625ZM10.4312 7.325V8.67188C10.4312 9.01562 10.7094 9.29375 11.0531 9.29375H11.35C11.6875 9.29375 11.9656 9.01875 11.9719 8.68437C11.975 8.54688 12.0875 8.43437 12.2281 8.4375C12.3656 8.44063 12.475 8.55313 12.475 8.69375C12.4625 9.3 11.9594 9.79375 11.3531 9.79375H11.0562C10.4375 9.79375 9.93437 9.29062 9.93437 8.67188V7.325C9.93437 6.70625 10.4375 6.20312 11.0562 6.20312H11.3531C11.9594 6.20312 12.4625 6.69688 12.475 7.30312C12.4781 7.44062 12.3687 7.55625 12.2281 7.55937C12.0875 7.5625 11.975 7.45312 11.9719 7.3125C11.9656 6.975 11.6875 6.70312 11.35 6.70312H11.0531C10.7094 6.70312 10.4312 6.98438 10.4312 7.325ZM5.03125 7.98125H4.03125V6.70625H5.03125C5.38438 6.70625 5.66875 6.99062 5.66875 7.34375C5.66875 7.69375 5.38438 7.98125 5.03125 7.98125Z", fill: "currentColor" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_20310_13972" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 16, height: 16, fill: "white" }))));
+
+const SvgAddElement = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 16, height: 16, rx: 8, fill: "#F7EBFF" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M8 2C4.6863 2 2 4.68627 2 8C2 11.3137 4.6863 14 8 14C11.3137 14 14 11.3137 14 8C14 4.68627 11.3137 2 8 2ZM10.0537 11.15H5.94644V4.85002H9.97758V6.35024H7.67444V7.27779H9.74365V8.70142H7.67444V9.64463H10.0538L10.0537 11.15Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("mask", { id: "path-3-outside-1_20264_6770", maskUnits: "userSpaceOnUse", x: 2.80005, y: 5.2002, width: 6, height: 6, fill: "black" }, /* @__PURE__ */ React__namespace.createElement("rect", { fill: "white", x: 2.80005, y: 5.2002, width: 6, height: 6 }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M5.89966 7.2002C5.89966 7.61441 6.23544 7.9502 6.64966 7.9502H7.04956C7.24291 7.9502 7.39966 8.10694 7.39966 8.30029C7.39966 8.49365 7.24291 8.65039 7.04956 8.65039H6.64966C6.23544 8.65039 5.89966 8.98618 5.89966 9.40039V10.1006C5.89966 10.2662 5.76543 10.4004 5.59985 10.4004C5.43428 10.4004 5.30005 10.2662 5.30005 10.1006V9.40039C5.30005 8.98618 4.96426 8.65039 4.55005 8.65039H4.15015C3.95679 8.65039 3.80005 8.49365 3.80005 8.30029C3.80005 8.10694 3.95679 7.9502 4.15015 7.9502H4.55005C4.96426 7.9502 5.30005 7.61441 5.30005 7.2002V6.5C5.30005 6.33442 5.43428 6.2002 5.59985 6.2002C5.76543 6.2002 5.89966 6.33442 5.89966 6.5V7.2002Z" })), /* @__PURE__ */ React__namespace.createElement("path", { d: "M5.89966 7.2002C5.89966 7.61441 6.23544 7.9502 6.64966 7.9502H7.04956C7.24291 7.9502 7.39966 8.10694 7.39966 8.30029C7.39966 8.49365 7.24291 8.65039 7.04956 8.65039H6.64966C6.23544 8.65039 5.89966 8.98618 5.89966 9.40039V10.1006C5.89966 10.2662 5.76543 10.4004 5.59985 10.4004C5.43428 10.4004 5.30005 10.2662 5.30005 10.1006V9.40039C5.30005 8.98618 4.96426 8.65039 4.55005 8.65039H4.15015C3.95679 8.65039 3.80005 8.49365 3.80005 8.30029C3.80005 8.10694 3.95679 7.9502 4.15015 7.9502H4.55005C4.96426 7.9502 5.30005 7.61441 5.30005 7.2002V6.5C5.30005 6.33442 5.43428 6.2002 5.59985 6.2002C5.76543 6.2002 5.89966 6.33442 5.89966 6.5V7.2002Z", fill: "#F7EBFF" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M6.64966 7.9502V8.4502H7.04956V7.9502V7.4502H6.64966V7.9502ZM7.04956 8.65039V8.15039H6.64966V8.65039V9.15039H7.04956V8.65039ZM5.89966 9.40039H5.39966V10.1006H5.89966H6.39966V9.40039H5.89966ZM5.30005 10.1006H5.80005V9.40039H5.30005H4.80005V10.1006H5.30005ZM4.55005 8.65039V8.15039H4.15015V8.65039V9.15039H4.55005V8.65039ZM4.15015 7.9502V8.4502H4.55005V7.9502V7.4502H4.15015V7.9502ZM5.30005 7.2002H5.80005V6.5H5.30005H4.80005V7.2002H5.30005ZM5.89966 6.5H5.39966V7.2002H5.89966H6.39966V6.5H5.89966ZM5.59985 6.2002V6.7002C5.48929 6.7002 5.39966 6.61056 5.39966 6.5H5.89966H6.39966C6.39966 6.05828 6.04157 5.7002 5.59985 5.7002V6.2002ZM5.30005 6.5H5.80005C5.80005 6.61056 5.71042 6.7002 5.59985 6.7002V6.2002V5.7002C5.15813 5.7002 4.80005 6.05828 4.80005 6.5H5.30005ZM4.55005 7.9502V8.4502C5.2404 8.4502 5.80005 7.89055 5.80005 7.2002H5.30005H4.80005C4.80005 7.33827 4.68812 7.4502 4.55005 7.4502V7.9502ZM3.80005 8.30029H4.30005C4.30005 8.38308 4.23294 8.4502 4.15015 8.4502V7.9502V7.4502C3.68065 7.4502 3.30005 7.8308 3.30005 8.30029H3.80005ZM4.15015 8.65039V8.15039C4.23294 8.15039 4.30005 8.2175 4.30005 8.30029H3.80005H3.30005C3.30005 8.76979 3.68065 9.15039 4.15015 9.15039V8.65039ZM5.30005 9.40039H5.80005C5.80005 8.71003 5.2404 8.15039 4.55005 8.15039V8.65039V9.15039C4.68812 9.15039 4.80005 9.26232 4.80005 9.40039H5.30005ZM5.59985 10.4004V9.90039C5.71042 9.90039 5.80005 9.99002 5.80005 10.1006H5.30005H4.80005C4.80005 10.5423 5.15813 10.9004 5.59985 10.9004V10.4004ZM5.89966 10.1006H5.39966C5.39966 9.99002 5.48929 9.90039 5.59985 9.90039V10.4004V10.9004C6.04157 10.9004 6.39966 10.5423 6.39966 10.1006H5.89966ZM6.64966 8.65039V8.15039C5.9593 8.15039 5.39966 8.71003 5.39966 9.40039H5.89966H6.39966C6.39966 9.26232 6.51159 9.15039 6.64966 9.15039V8.65039ZM7.39966 8.30029H6.89966C6.89966 8.2175 6.96677 8.15039 7.04956 8.15039V8.65039V9.15039C7.51906 9.15039 7.89966 8.76979 7.89966 8.30029H7.39966ZM7.04956 7.9502V8.4502C6.96677 8.4502 6.89966 8.38308 6.89966 8.30029H7.39966H7.89966C7.89966 7.8308 7.51906 7.4502 7.04956 7.4502V7.9502ZM6.64966 7.9502V7.4502C6.51159 7.4502 6.39966 7.33827 6.39966 7.2002H5.89966H5.39966C5.39966 7.89055 5.9593 8.4502 6.64966 8.4502V7.9502Z", fill: "currentColor", mask: "url(#path-3-outside-1_20264_6770)" }));
+
+const SvgElementSlider = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 16, height: 16, rx: 8, fill: "#F7EBFF" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M7.99994 2C4.68623 2 1.99994 4.68627 1.99994 8C1.99994 11.3137 4.68623 14 7.99994 14C11.3136 14 13.9999 11.3137 13.9999 8C13.9999 4.68627 11.3136 2 7.99994 2Z", fill: "currentColor" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M9.05737 4.3999C9.1964 4.3999 9.30911 4.50735 9.30911 4.6399V5.2399H9.58604C9.8067 5.2399 10.0133 5.24651 10.2027 5.27201C10.6976 5.32459 11.0802 5.47008 11.3176 5.81369C11.5406 6.13661 11.6 6.58969 11.6 7.1599V8.8399C11.6 9.41011 11.5406 9.8632 11.3176 10.1861C11.0802 10.5297 10.6976 10.6752 10.2027 10.7278C10.0133 10.7533 9.8067 10.7599 9.58604 10.7599H9.30911V11.3599C9.30911 11.4925 9.1964 11.5999 9.05737 11.5999C8.91833 11.5999 8.80562 11.4925 8.80562 11.3599V4.6399C8.80562 4.50735 8.91833 4.3999 9.05737 4.3999ZM9.30911 10.2799H9.58604C9.80085 10.2799 9.98062 10.2732 10.1355 10.2521L10.1435 10.2511C10.5736 10.2059 10.7782 10.0942 10.897 9.92213C11.0308 9.72845 11.0965 9.40537 11.0965 8.8399V7.1599C11.0965 6.59443 11.0308 6.27136 10.897 6.07768C10.7782 5.9056 10.5736 5.79391 10.1435 5.7487L10.1355 5.74773C9.98062 5.72663 9.80085 5.7199 9.58604 5.7199H9.30911V10.2799ZM6.41401 5.7199C6.1992 5.7199 6.01945 5.72663 5.86456 5.74773L5.85655 5.7487C5.42643 5.79391 5.22188 5.9056 5.10301 6.07768C4.96923 6.27136 4.90352 6.59443 4.90352 7.1599V8.8399C4.90352 9.40537 4.96923 9.72845 5.10301 9.92212C5.22188 10.0942 5.42643 10.2059 5.85655 10.2511L5.86456 10.2521C6.01945 10.2732 6.1992 10.2799 6.41401 10.2799H7.65463C7.79367 10.2799 7.90638 10.3874 7.90638 10.5199C7.90638 10.6525 7.79367 10.7599 7.65463 10.7599H6.41401C6.19335 10.7599 5.98678 10.7533 5.79737 10.7278C5.30248 10.6752 4.91986 10.5297 4.68251 10.1861C4.45944 9.8632 4.40002 9.41011 4.40002 8.8399V7.1599C4.40002 6.58969 4.45944 6.13661 4.68251 5.81368C4.91986 5.47008 5.30249 5.32459 5.79738 5.27201C5.98679 5.24651 6.19335 5.2399 6.41401 5.2399H7.63349C7.77252 5.2399 7.88523 5.34735 7.88523 5.4799C7.88523 5.61245 7.77252 5.7199 7.63349 5.7199H6.41401Z", fill: "white" }), /* @__PURE__ */ React__namespace.createElement("path", { d: "M6.51232 7.20682V7.71802H7.37707V8.19322H6.51232V8.74762H7.49036V9.24082H5.86658V6.71362H7.49036V7.20682H6.51232Z", fill: "white" }));
+
 let Components = {};
 Components['success'] = SvgSuccess;
 Components['setting_icon'] = SvgSettingIcon;
@@ -2445,9 +2455,9 @@ Components['huawei_icon'] = SvgHuaweiIcon;
 Components['amazon_icon'] = SvgAmazonIcon;
 Components['scripts'] = SvgScripts;
 Components['dialog_info'] = SvgDialogInfo;
-Components['record'] = SvgRecord;
-Components['add_element'] = SvgAddElement;
-Components['element_slider'] = SvgElementSlider;
+Components['timer_icon'] = SvgTimerIcon;
+Components['maximize_livetesting'] = SvgMaximizeLivetesting;
+Components['mac_white_icon'] = SvgMacWhiteIcon;
 Components['ADB_Shell'] = SvgAdbShell; // Newly Added icon
 Components['UI_Inspector'] = SvgUiInspector; // Newly Added icon
 Components['azure_icon'] = SvgAzureIcon; // Newly Added icon
@@ -2468,6 +2478,11 @@ Components['motorola_icon'] = SvgMotorolaIcon; // Newly Added icon
 Components['oppo_icon'] = SvgOppoIcon; // Newly Added icon
 Components['realme_icon'] = SvgRealmeIcon; // Newly Added icon
 Components['vivo_icon'] = SvgVivoIcon; // Newly Added icon
+Components['windows_blue_icon'] = SvgWindowsBlueIcon;
+Components['minimize_tree'] = SvgMinimizeTree;
+Components['record'] = SvgRecord;
+Components['add_element'] = SvgAddElement;
+Components['element_slider'] = SvgElementSlider;
 
 const Icon = /*#__PURE__*/React.forwardRef(({
   name,
@@ -3063,13 +3078,15 @@ const Drawer = ({
             }), _isExpanded && jsxRuntime.jsx(Tooltip, {
               title: isExpanded ? 'Minimize' : 'Maximize',
               placement: "bottom",
-              children: jsxRuntime.jsx("button", {
+              children: jsxRuntime.jsx("div", {
                 className: "ff-expand-collapse-button",
                 onClick: toggleExpand,
                 children: jsxRuntime.jsx(Icon, {
-                  name: isExpanded ? 'minimize_script' : 'maximize_icon',
+                  name: isExpanded ? 'maximize_tree' : 'minimize_tree',
                   height: 16,
-                  width: 16
+                  width: 16,
+                  hoverEffect: true,
+                  cursorType: "pointer"
                 })
               })
             }), isBackButtonVisible && (backButtonIcon || jsxRuntime.jsx(Tooltip, {
@@ -3094,7 +3111,8 @@ const Drawer = ({
                 onClick: onCloseIconClick || onClose,
                 height: 16,
                 width: 16,
-                color: "var(--tabs-label-active-color)"
+                color: "var(--tabs-label-active-color)",
+                cursorType: "pointer"
               })
             })
           })]
@@ -12788,6 +12806,9 @@ var DNDSortable = /*#__PURE__*/Object.freeze({
 	verticalListSortingStrategy: verticalListSortingStrategy
 });
 
+// Add these constants near the top of the file
+const DEFAULT_ROW_HEIGHT = 50; // Estimated row height
+const BUFFER_SIZE = 5; // Number of extra rows to render above/below visible area
 const getColumnLeftPosition = (index, columns, freezeColumns) => {
   if (index === 0) return '0px';
   // Calculate cumulative width of all previous columns including padding
@@ -12824,7 +12845,9 @@ const SortableRow = ({
   isRowCheckBoxDisable,
   isRowDisabled = true,
   freezeColumns,
-  displayCard
+  displayCard,
+  updateRowHeight,
+  index
 }) => {
   const {
     attributes,
@@ -12836,6 +12859,13 @@ const SortableRow = ({
     id: row?._id || row?.id,
     disabled: row.disabled || !!editMode
   });
+  const rowRef = React.useRef(null);
+  React.useEffect(() => {
+    if (rowRef.current && updateRowHeight) {
+      const height = rowRef.current.getBoundingClientRect().height;
+      updateRowHeight(index, height);
+    }
+  }, [index, updateRowHeight]);
   const style = {
     transform: CSS.Transform.toString(transform),
     transition
@@ -12856,7 +12886,7 @@ const SortableRow = ({
           style: {
             position: isFrozen ? 'sticky' : 'static',
             left: isFrozen ? getColumnLeftPosition(index, columns, freezeColumns) : 'auto',
-            zIndex: isFrozen ? 120 : 'auto',
+            zIndex: isFrozen ? 99 : 'auto',
             backgroundColor: isFrozen ? 'var(--input-label-bg-color)' : 'transparent',
             width: column.width ? `${column.width}px` : 'auto',
             padding: '7px 8px',
@@ -12944,6 +12974,104 @@ const Table$1 = ({
   freezeColumns
 }) => {
   const observerRef = React.useRef(null);
+  // Add virtualization state
+  const containerRef = React.useRef(null);
+  const setContainerRef = node => {
+    // 1. Set internal ref
+    containerRef.current = node;
+    // 2. Handle forwarded ref
+    if (tableRef) {
+      if (typeof tableRef === 'function') {
+        // Handle callback refs
+        tableRef(node);
+      } else if (typeof tableRef === 'object' && 'current' in tableRef) {
+        // Handle mutable ref objects only
+        tableRef.current = node;
+      }
+      // Read-only RefObjects are safely ignored
+    }
+  };
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const [containerHeight, setContainerHeight] = React.useState(0);
+  const [rowHeights, setRowHeights] = React.useState([]);
+  // Initialize container height and row heights
+  React.useEffect(() => {
+    if (containerRef.current) {
+      setContainerHeight(containerRef.current.clientHeight);
+    }
+    // Initialize with estimated heights
+    setRowHeights(new Array(data.length).fill(DEFAULT_ROW_HEIGHT));
+  }, [data]);
+  // Handle scroll events
+  const handleScroll = React.useCallback(e => {
+    setScrollTop(e.currentTarget.scrollTop);
+  }, []);
+  // Update row height callback
+  const updateRowHeight = React.useCallback((index, height) => {
+    setRowHeights(prev => {
+      const newHeights = [...prev];
+      if (index < newHeights.length) {
+        const currentHeight = newHeights[index] ?? DEFAULT_ROW_HEIGHT; // Fallback
+        if (Math.abs(currentHeight - height) > 1) {
+          newHeights[index] = height;
+          return newHeights;
+        }
+      }
+      return prev;
+    });
+  }, []);
+  // Calculate visible rows
+  const calculateVisibleRows = () => {
+    let startIndex = 0;
+    let endIndex = data.length - 1;
+    let paddingTop = 0;
+    let paddingBottom = 0;
+    if (rowHeights.length === data.length && containerHeight > 0) {
+      // Calculate based on actual row heights
+      let cumulativeHeight = 0;
+      // Find start index
+      for (let i = 0; i < data.length; i++) {
+        if (cumulativeHeight <= scrollTop) {
+          startIndex = i;
+        }
+        cumulativeHeight += rowHeights[i] || DEFAULT_ROW_HEIGHT;
+      }
+      // Find end index
+      cumulativeHeight = 0;
+      for (let i = 0; i < data.length; i++) {
+        cumulativeHeight += rowHeights[i] || DEFAULT_ROW_HEIGHT;
+        if (cumulativeHeight >= scrollTop + containerHeight && endIndex === data.length - 1) {
+          endIndex = i;
+          break;
+        }
+      }
+      // Apply buffer
+      startIndex = Math.max(0, startIndex - BUFFER_SIZE);
+      endIndex = Math.min(data.length - 1, endIndex + BUFFER_SIZE);
+      // Calculate padding
+      paddingTop = rowHeights.slice(0, startIndex).reduce((sum, height) => sum + height, 0);
+      paddingBottom = rowHeights.slice(endIndex + 1).reduce((sum, height) => sum + height, 0);
+    } else {
+      // Fallback to estimated calculation
+      startIndex = Math.max(0, Math.floor(scrollTop / DEFAULT_ROW_HEIGHT) - BUFFER_SIZE);
+      endIndex = Math.min(data.length - 1, startIndex + Math.ceil(containerHeight / DEFAULT_ROW_HEIGHT) + BUFFER_SIZE);
+      paddingTop = startIndex * DEFAULT_ROW_HEIGHT;
+      paddingBottom = (data.length - endIndex - 1) * DEFAULT_ROW_HEIGHT;
+    }
+    return {
+      startIndex,
+      endIndex,
+      paddingTop,
+      paddingBottom,
+      visibleRows: data.slice(startIndex, endIndex + 1)
+    };
+  };
+  const {
+    startIndex,
+    paddingTop,
+    paddingBottom,
+    visibleRows
+  } = calculateVisibleRows();
   let frozenWidth = 0;
   if (freezeColumns) {
     frozenWidth = calculateFrozenWidth(columns, freezeColumns);
@@ -13000,6 +13128,43 @@ const Table$1 = ({
     if (oldIndex === -1 || newIndex === -1) return;
     if (onDragEnd) onDragEnd(oldIndex, newIndex);
   };
+  const renderRow = (row, absoluteIndex) => {
+    const isOpen = getAccordionStatus(row?.id || row?._id || row?.scriptId);
+    if (editMode === row._id || editMode === row.id) {
+      return jsxRuntime.jsx("tr", {
+        className: "edit-row",
+        children: jsxRuntime.jsx("td", {
+          colSpan: columns.length,
+          style: {
+            padding: '0px'
+          },
+          children: /*#__PURE__*/React.isValidElement(editComponent) && /*#__PURE__*/React.cloneElement(editComponent, {
+            rowData: row,
+            rowIndex: absoluteIndex + 1
+          })
+        })
+      }, `edit-${row._id}`);
+    }
+    return jsxRuntime.jsx(SortableRow, {
+      row: row,
+      index: absoluteIndex,
+      serialNumber: absoluteIndex + 1,
+      columns: columns,
+      tableBodyRowClass: tableBodyRowClass,
+      handleOnclick: handleOnclick,
+      tableDataTextColor: tableDataTextColor,
+      withCheckbox: withCheckbox,
+      onSelectClick: onSelectClick,
+      draggable: draggable,
+      isAccordionOpen: isOpen,
+      accordionContent: accordionContent,
+      isRowCheckBoxDisable: isRowCheckBoxDisable,
+      isRowDisabled: isRowDisabled,
+      freezeColumns: freezeColumns,
+      frozenWidth: frozenWidth,
+      updateRowHeight: updateRowHeight
+    });
+  };
   return jsxRuntime.jsx(DndContext, {
     collisionDetection: closestCorners,
     onDragEnd: handleDragEnd,
@@ -13008,8 +13173,11 @@ const Table$1 = ({
       items: data?.map(row => row._id || row.id),
       strategy: verticalListSortingStrategy,
       children: jsxRuntime.jsxs("div", {
+        ref: setContainerRef,
         style: {
-          height: height,
+          height,
+          overflow: 'auto',
+          position: 'relative',
           scrollbarWidth: draggable ? 'none' : 'auto',
           '--frozen-column-width': freezeColumns ? `${frozenWidth}px` : '0px'
         },
@@ -13018,7 +13186,7 @@ const Table$1 = ({
           'ff-table-fixed-header': withFixedHeader,
           'ff-table-container--border-radius': borderWithRadius
         }, className),
-        ref: tableRef,
+        onScroll: handleScroll,
         children: [jsxRuntime.jsxs("table", {
           className: "ff-table-container",
           cellSpacing: 0,
@@ -13077,46 +13245,38 @@ const Table$1 = ({
               })
             })
           }), jsxRuntime.jsxs("tbody", {
+            className: "ff-fixed-header-table",
             children: [jsxRuntime.jsx("tr", {
-              id: "ff-table-first-node"
-            }), data?.length > 0 && data?.map((row, index) => {
-              const isOpen = getAccordionStatus(row?.id || row?._id || row?.scriptId);
+              id: "ff-table-first-node",
+              style: {
+                display: 'none'
+              }
+            }), paddingTop > 0 && jsxRuntime.jsx("tr", {
+              children: jsxRuntime.jsx("td", {
+                style: {
+                  height: paddingTop,
+                  padding: 0
+                },
+                colSpan: columns.length
+              })
+            }), visibleRows.map((row, index) => {
+              const absoluteIndex = startIndex + index;
               return jsxRuntime.jsx(React.Fragment, {
-                children: editMode === row._id || editMode === row.id ? jsxRuntime.jsx("tr", {
-                  className: classNames('ff-table-data-row', 'ff-table-edit-row', tableBodyRowClass, {
-                    'ff-table-disabled': row.disabled && isRowDisabled
-                  }),
-                  children: jsxRuntime.jsx("td", {
-                    className: "ff-table-data-cell",
-                    colSpan: columns.length,
-                    style: {
-                      padding: '0px'
-                    },
-                    children: editMode && /*#__PURE__*/React.isValidElement(editComponent) && /*#__PURE__*/React.cloneElement(editComponent, {
-                      rowData: row,
-                      rowIndex: index + 1
-                    })
-                  })
-                }, row?._id || index) : jsxRuntime.jsx(SortableRow, {
-                  row: row,
-                  serialNumber: index + 1,
-                  columns: columns,
-                  tableBodyRowClass: tableBodyRowClass,
-                  handleOnclick: handleOnclick,
-                  tableDataTextColor: tableDataTextColor,
-                  withCheckbox: withCheckbox,
-                  onSelectClick: onSelectClick,
-                  draggable: draggable,
-                  isAccordionOpen: isOpen,
-                  accordionContent: accordionContent,
-                  isRowCheckBoxDisable: isRowCheckBoxDisable,
-                  isRowDisabled: isRowDisabled,
-                  freezeColumns: freezeColumns,
-                  frozenWidth: frozenWidth
-                })
-              }, row?._id || index);
+                children: renderRow(row, absoluteIndex)
+              }, row._id || absoluteIndex);
+            }), paddingBottom > 0 && jsxRuntime.jsx("tr", {
+              children: jsxRuntime.jsx("td", {
+                style: {
+                  height: paddingBottom,
+                  padding: 0
+                },
+                colSpan: columns.length
+              })
             }), jsxRuntime.jsx("tr", {
-              id: "ff-table-last-node"
+              id: "ff-table-last-node",
+              style: {
+                display: 'none'
+              }
             })]
           })]
         }), data?.length <= 0 && jsxRuntime.jsx("div", {
@@ -17978,7 +18138,7 @@ const EditLabel = ({
     return window;
   };
   React.useEffect(() => {
-    if (!containerRef.current) return;
+    if (!containerRef.current || !isEditing) return;
     const scrollableParent = getScrollableParent(containerRef.current);
     const handleScroll = () => {
       handleCancel();
@@ -17989,7 +18149,7 @@ const EditLabel = ({
     return () => {
       scrollableParent.removeEventListener('scroll', handleScroll);
     };
-  }, []);
+  }, [isEditing]);
   React.useEffect(() => {
     if (value) {
       setText(value);
@@ -31101,27 +31261,55 @@ const AllProjectsDropdown = ({
   disabled = false
 }) => {
   const [showOptions, setShowOptions] = React.useState(false);
+  const [showClicked, setShowClicked] = React.useState(false);
   const [selectedOptions, setSelectedOptions] = React.useState(selectedOption);
   const optionsRef = React.useRef(null);
   const [optionsList, setOptionsList] = React.useState(options);
   const [closeTimeout, setCloseTimeout] = React.useState(null);
+  const containerRef = React.useRef(null);
+  const [searchValue, setSearchValue] = React.useState('');
+  const [isSecondClickFromOtherTab, setIsSecondClickFromOtherTab] = React.useState(selected);
   React.useEffect(() => {
     if (optionsList !== options) {
       setOptionsList(options);
     }
   }, [options]);
+  React.useEffect(() => {
+    if (!selected) {
+      setIsSecondClickFromOtherTab(false);
+    }
+  }, [selected]);
   React.useEffect(() => {
     if (selectedOption) {
       setSelectedOptions(selectedOption);
     }
   }, [selectedOption]);
   const closeOptions = () => {
-    setShowOptions(false);
-    setSearchValue('');
-    setOptionsList(options);
+    if (showOptions) {
+      setShowOptions(false);
+    }
   };
   const handleMouseEnter = () => {
-    if (!disabled) setShowOptions(true);
+    if (!disabled) {
+      setShowOptions(true);
+    }
+    if (!disabled && !selected) {
+      setShowOptions(true);
+    }
+  };
+  const handleClick = () => {
+    if (!disabled) {
+      if (showOptions) {
+        setShowOptions(false);
+      }
+      if (!isSecondClickFromOtherTab) {
+        setIsSecondClickFromOtherTab(true);
+      } else {
+        setShowClicked(!showClicked);
+      }
+    }
+    setSearchValue('');
+    setOptionsList(options);
   };
   const handleMouseLeave = () => {
     if (!disabled) {
@@ -31145,8 +31333,9 @@ const AllProjectsDropdown = ({
       setSearchValue('');
       setOptionsList(options);
     }
+    setShowClicked(false);
+    setShowOptions(false);
   };
-  const [searchValue, setSearchValue] = React.useState('');
   const handleSearch = query => {
     if (!disabled) {
       setSearchValue(query);
@@ -31164,11 +31353,13 @@ const AllProjectsDropdown = ({
       }
     }
   };
-  useClickOutside(optionsRef, closeOptions);
+  useClickOutside(optionsRef, () => setShowClicked(false), [containerRef]);
   return jsxRuntime.jsxs("div", {
     className: classNames('ff-all-project', {
       'ff-all-project--disabled': disabled
     }),
+    ref: containerRef,
+    onClick: handleClick,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     children: [jsxRuntime.jsx("div", {
@@ -31186,23 +31377,26 @@ const AllProjectsDropdown = ({
           className: classNames('projects-label'),
           onClick: onMenuClick,
           children: selectedOptions.label.length <= 12 ? selectedOptions.label : truncateText(selectedOptions?.label, 12)
-        }), jsxRuntime.jsx("div", {
+        }), jsxRuntime.jsxs("div", {
           className: classNames('label-icon'),
-          children: jsxRuntime.jsx(Icon, {
-            name: showOptions ? 'arrows_top_icon' : 'arrows_down_icon',
+          children: [jsxRuntime.jsx("div", {
+            className: "icon-click-layer"
+          }), jsxRuntime.jsx(Icon, {
+            name: showOptions || showClicked ? 'arrows_top_icon' : 'arrows_down_icon',
             color: disabled ? 'var(--disabled-icon-color)' : 'var(--primary-icon-color)',
             height: 8,
             width: 8,
             hoverEffect: false
-          })
+          })]
         })]
       })
-    }), showOptions && !disabled && jsxRuntime.jsxs("div", {
+    }), (showOptions || showClicked) && !disabled && jsxRuntime.jsxs("div", {
       className: classNames('ff-projects-dropdown'),
       ref: optionsRef,
       onMouseEnter: dropDownMouseEnter,
       children: [jsxRuntime.jsx("div", {
         className: "ff-dropdown-search-container",
+        onClick: e => e.stopPropagation(),
         children: jsxRuntime.jsx(Search, {
           onSearch: handleSearch,
           value: searchValue,
@@ -31217,7 +31411,10 @@ const AllProjectsDropdown = ({
       }), jsxRuntime.jsx("div", {
         className: classNames('option-card'),
         children: optionsList.map((option, index) => index === 0 && jsxRuntime.jsxs("div", {
-          onClick: () => handleSelectOption(option),
+          onClick: e => {
+            e.stopPropagation();
+            handleSelectOption(option);
+          },
           className: classNames('ff-projects-options', {
             ['ff-selected-option']: selectedOption.label === option.label,
             ['ff-option-disabled']: disabled
@@ -31244,7 +31441,10 @@ const AllProjectsDropdown = ({
       }), jsxRuntime.jsx("div", {
         className: classNames('option-card', `${optionsList.length > 4 ? 'scroll' : ''}`),
         children: optionsList.map((option, index) => index > 0 && jsxRuntime.jsxs("div", {
-          onClick: () => handleSelectOption(option),
+          onClick: e => {
+            e.stopPropagation();
+            handleSelectOption(option);
+          },
           className: classNames('ff-projects-options', {
             ['ff-selected-option']: selectedOption.label === option.label,
             ['ff-option-disabled']: disabled
@@ -31624,7 +31824,9 @@ const AppHeader = ({
   disabled = false,
   isClient = false,
   hideNavbar = false,
-  scriptId
+  scriptId,
+  centerInfoItems = [],
+  rightButtons = []
 }) => {
   const hiddenMenuRef = React.useRef(null);
   const hiddenQuickMenuRef = React.useRef(null);
@@ -31777,7 +31979,9 @@ const AppHeader = ({
           children: leftContent
         })]
       }), jsxRuntime.jsxs("div", {
-        className: "ff-app-header-nav-bar",
+        className: classNames('ff-app-header-nav-bar', {
+          'ff-app-header-nav-bar--with-center-info': !checkEmpty(centerInfoItems) && !checkEmpty(rightButtons)
+        }),
         style: {
           width: width,
           visibility: checkEmpty(appHeaderMenuItems) && projectDetails?.id === 'All Projects' || hideNavbar ? 'hidden' : 'visible',
@@ -31785,7 +31989,36 @@ const AppHeader = ({
           zIndex: 1
         },
         ref: menuContainerRef,
-        children: [projectArrayList && !checkEmpty(projectArrayList) && jsxRuntime.jsx("div", {
+        children: [jsxRuntime.jsx("div", {
+          className: classNames('ff-app-header-center-info', {
+            'ff-app-header-center-info--no-right': checkEmpty(rightButtons)
+          }),
+          children: centerInfoItems.map((item, idx) => jsxRuntime.jsxs("div", {
+            className: "ff-app-header-center-info-item",
+            children: [jsxRuntime.jsx(Icon, {
+              name: item.iconName
+            }), jsxRuntime.jsx(Typography, {
+              children: item.label
+            })]
+          }, idx))
+        }), !checkEmpty(rightButtons) && jsxRuntime.jsx("div", {
+          className: "ff-app-header-right-buttons",
+          children: rightButtons.map((btn, index) => jsxRuntime.jsxs("button", {
+            className: "ff-app-header-right-button",
+            style: {
+              color: btn.color,
+              backgroundColor: btn.backgroundColor
+            },
+            onClick: btn.onClick,
+            children: [btn.iconName && jsxRuntime.jsx(Icon, {
+              name: btn.iconName
+            }), jsxRuntime.jsx(Typography, {
+              fontSize: 10,
+              fontWeight: "semi-bold",
+              children: btn.label
+            })]
+          }, index))
+        }), projectArrayList && !checkEmpty(projectArrayList) && jsxRuntime.jsx("div", {
           children: jsxRuntime.jsx(AllProjectsDropdown, {
             onClick: handleProjectMenuClick,
             options: projectArrayList,
@@ -34891,7 +35124,7 @@ const NlpDropdown = ({
   const updateDropdownPosition = () => {
     let dropdownContainerHeight;
     if (checkEmpty(options)) {
-      dropdownContainerHeight = optionHeight + 2 * dropDownWrapperPadding;
+      dropdownContainerHeight = 5 * optionHeight + 2 * dropDownWrapperPadding;
     } else if (options.length > 0) {
       dropdownContainerHeight = 5 * optionHeight + 2 * dropDownWrapperPadding;
     } else {
@@ -35604,7 +35837,7 @@ const NlpInput = ({
           }),
           style: {
             zIndex: optionZIndex,
-            paddingLeft: '10px'
+            paddingLeft: '32px'
           },
           onFocus: () => handleSelectAction('FOCUS_INPUT'),
           onChange: onSelectInputChange,
@@ -36293,6 +36526,7 @@ const SequentialConnectingBranch = ({
     return Object.fromEntries(Object.entries(obj).filter(([key]) => !key.includes(substring)));
   };
   const filteredDataSetValues = removeKeysContainingSubstring(dataSetValues, 'Id');
+  const showBranchPoint = readOnly && !isMachineInstances || !readOnly && isMachineInstances || !readOnly && !isMachineInstances;
   return jsxRuntime.jsx(EnvironmentVariableMapsContext.Provider, {
     value: environmentVariableMaps,
     children: jsxRuntime.jsxs("div", {
@@ -36319,16 +36553,16 @@ const SequentialConnectingBranch = ({
               'ff-select-branch-arrow': isMachineInstances,
               'ff-select-branch-arrow-down': !isMachineInstances
             }),
-            children: [jsxRuntime.jsx("div", {
+            children: [showBranchPoint && jsxRuntime.jsx("div", {
               className: "ff-select-branch-point"
             }), jsxRuntime.jsxs("div", {
               className: "ff-select-branch-arrow",
-              children: [jsxRuntime.jsx("div", {
+              children: [!readOnly && jsxRuntime.jsx("div", {
                 className: "ff-branch-arrow-wrapper",
                 children: isMachineInstances && jsxRuntime.jsx("div", {
                   className: "ff-branch-arrow"
                 })
-              }), isMachineInstances && jsxRuntime.jsx(jsxRuntime.Fragment, {
+              }), isMachineInstances && !readOnly && jsxRuntime.jsx(jsxRuntime.Fragment, {
                 children: jsxRuntime.jsx(Button$1, {
                   variant: "tertiary",
                   label: scriptType === 'Manual' ? '+ Machine' : '+ Environment',
@@ -36381,12 +36615,16 @@ const SequentialConnectingBranch = ({
                   children: "Data Set List"
                 })]
               })
-            }), !readOnly && jsxRuntime.jsx(Icon, {
-              name: "delete",
-              className: "ff-run-delete-icon",
-              color: "var(--ff-connecting-branch-delete-color)",
-              onClick: onDeleteMachineInstance,
-              hoverEffect: true
+            }), !readOnly && jsxRuntime.jsx(Tooltip, {
+              title: "Delete",
+              placement: "bottom",
+              children: jsxRuntime.jsx(Icon, {
+                name: "delete",
+                className: "ff-run-delete-icon",
+                color: "var(--ff-connecting-branch-delete-color)",
+                onClick: onDeleteMachineInstance,
+                hoverEffect: true
+              })
             })]
           })]
         })]
@@ -37145,10 +37383,12 @@ const ADD_COLUMN_RIGHT = 'ADD_COLUMN_RIGHT';
 const DELETE_ROW = 'DELETE_ROW';
 const DELETE_COLUMN = 'DELETE_COLUMN';
 const SET_ROW_HEIGHT = 'SET_ROW_HEIGHT';
+const SET_COLUMN_WIDTH = 'SET_COLUMN_WIDTH';
 const SET_COLUMN_POSITION = 'SET_COLUMN_POSITION';
 const SET_AUTO_FILL = 'SET_AUTO_FILL';
 const SET_EDITABLE = 'SET_EDITABLE';
 const ON_MOUSE_UP = 'ON_MOUSE_UP';
+const BATCH_RESIZE = 'BATCH_RESIZE';
 function onMouseUp(point) {
   return {
     type: ON_MOUSE_UP,
@@ -37182,6 +37422,15 @@ function setRowHeight(row, height) {
     }
   };
 }
+function setColumnWidth(column, width) {
+  return {
+    type: SET_COLUMN_WIDTH,
+    payload: {
+      column,
+      width
+    }
+  };
+}
 function setColumnPosition(column, width) {
   return {
     type: SET_COLUMN_POSITION,
@@ -37459,6 +37708,15 @@ function view$1() {
     type: VIEW
   };
 }
+function batchResize(rows, columns) {
+  return {
+    type: BATCH_RESIZE,
+    payload: {
+      rows,
+      columns
+    }
+  };
+}
 function blur$1() {
   return {
     type: BLUR
@@ -38353,6 +38611,48 @@ function getMatrixDimensions(matrixData) {
     columnCount
   };
 }
+const textMeasurementCache = new Map();
+const getFontString = cell => {
+  const style = cell?.style || {};
+  const fontWeight = style.fontWeight || 'normal';
+  const fontStyle = style.fontStyle || 'normal';
+  const fontSize = style.fontSize || '11px';
+  const fontFamily = style.fontFamily || 'Times New Roman';
+  return `${fontStyle} ${fontWeight} ${fontSize} ${fontFamily}`;
+};
+const measureText = (text, font) => {
+  const cacheKey = `${text}|${font}`;
+  if (textMeasurementCache.has(cacheKey)) {
+    return textMeasurementCache.get(cacheKey);
+  }
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  if (!context) {
+    // Fallback calculation
+    const fallbackWidth = text.length * 8;
+    textMeasurementCache.set(cacheKey, fallbackWidth);
+    return fallbackWidth;
+  }
+  context.font = font;
+  const lines = text.split('\n');
+  let maxWidth = 0;
+  lines.forEach(line => {
+    const metrics = context.measureText(line);
+    maxWidth = Math.max(maxWidth, metrics.width);
+  });
+  textMeasurementCache.set(cacheKey, maxWidth);
+  return maxWidth;
+};
+const resizeDebounceTimers = new Map();
+const debouncedResize = (key, callback, delay = 100) => {
+  if (resizeDebounceTimers.has(key)) {
+    clearTimeout(resizeDebounceTimers.get(key));
+  }
+  resizeDebounceTimers.set(key, setTimeout(() => {
+    callback();
+    resizeDebounceTimers.delete(key);
+  }, delay));
+};
 
 const FORMULA_VALUE_PREFIX = '=';
 /** Returns whether given value is a formula */
@@ -39902,9 +40202,59 @@ function reducer(state, action) {
         } = action.payload;
         const selectedRange = state.selected.toRange(state.model.data);
         const updatedData = applyFontSize(state.model.data, selectedRange, value, state.editable);
+        const updatedModel = new Model(state.model.createFormulaParser, updatedData);
+        // Auto-resize all rows and columns on initial load
+        let newRowDimensions = {
+          ...state.rowDimensions
+        };
+        let newColumnDimensions = {
+          ...state.columnDimensions
+        };
+        // Auto-resize all rows
+        updatedData.forEach((rowData, rowIndex) => {
+          let maxHeight = 32; // Default row height
+          rowData.forEach((cell, _colIndex) => {
+            if (cell && cell.value) {
+              const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
+              const lineHeight = Math.max(fontSize * 1.2, 18);
+              const lines = String(cell.value).split('\n').length;
+              const cellHeight = lineHeight * lines + 10;
+              maxHeight = Math.max(Number(cell?.style?.height) ?? maxHeight, cellHeight);
+            }
+          });
+          newRowDimensions[rowIndex] = {
+            ...(newRowDimensions[rowIndex] || {
+              top: 0,
+              height: 32
+            }),
+            height: maxHeight
+          };
+        });
+        // Auto-resize all columns
+        const columnCount = updatedData[0] ? updatedData[0].length : 0;
+        for (let col = 0; col < columnCount; col++) {
+          let maxWidth = 100; // Default column width
+          updatedData.forEach((rowData, _rowIndex) => {
+            const cell = rowData[col];
+            if (cell && cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
+              const font = getFontString(cell);
+              const textWidth = measureText(String(cell.value), font) + 20;
+              maxWidth = Math.max(Number(cell?.style?.width) ?? maxWidth, textWidth);
+            }
+          });
+          newColumnDimensions[col] = {
+            ...(newColumnDimensions[col] || {
+              left: 0,
+              width: 100
+            }),
+            width: maxWidth
+          };
+        }
         return {
           ...state,
-          model: new Model(state.model.createFormulaParser, updatedData)
+          model: updatedModel,
+          rowDimensions: newRowDimensions,
+          columnDimensions: newColumnDimensions
         };
       }
     case FONT_FAMILY:
@@ -39993,11 +40343,61 @@ function reducer(state, action) {
         } = action.payload;
         const nextActive = state.active && has$1(state.active, data) ? state.active : null;
         const nextSelected = state.selected.normalizeTo(data);
+        const updatedModel = new Model(state.model.createFormulaParser, data);
+        // Auto-resize all rows and columns on initial load
+        let newRowDimensions = {
+          ...state.rowDimensions
+        };
+        let newColumnDimensions = {
+          ...state.columnDimensions
+        };
+        // Auto-resize all rows
+        data.forEach((rowData, rowIndex) => {
+          let maxHeight = 32; // Default row height
+          rowData.forEach((cell, _colIndex) => {
+            if (cell && cell.value) {
+              const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
+              const lineHeight = Math.max(fontSize * 1.2, 18);
+              const lines = String(cell.value).split('\n').length;
+              const cellHeight = lineHeight * lines + 10;
+              maxHeight = Math.max(Number(cell?.style?.height) ?? maxHeight, cellHeight);
+            }
+          });
+          newRowDimensions[rowIndex] = {
+            ...(newRowDimensions[rowIndex] || {
+              top: 0,
+              height: 32
+            }),
+            height: maxHeight
+          };
+        });
+        // Auto-resize all columns
+        const columnCount = data[0] ? data[0].length : 0;
+        for (let col = 0; col < columnCount; col++) {
+          let maxWidth = 100; // Default column width
+          data.forEach((rowData, _rowIndex) => {
+            const cell = rowData[col];
+            if (cell && cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
+              const font = getFontString(cell);
+              const textWidth = measureText(String(cell.value), font) + 20;
+              maxWidth = Math.max(Number(cell?.style?.width) ?? maxWidth, textWidth);
+            }
+          });
+          newColumnDimensions[col] = {
+            ...(newColumnDimensions[col] || {
+              left: 0,
+              width: 100
+            }),
+            width: maxWidth
+          };
+        }
         return {
           ...state,
-          model: new Model(state.model.createFormulaParser, data),
+          model: updatedModel,
           active: nextActive,
-          selected: nextSelected
+          selected: nextSelected,
+          rowDimensions: newRowDimensions,
+          columnDimensions: newColumnDimensions
         };
       }
     case SET_CREATE_FORMULA_PARSER:
@@ -40114,9 +40514,64 @@ function reducer(state, action) {
         if (isActiveReadOnly(state) || !state.editable) {
           return state;
         }
+        const updatedModel = updateCellValue(state.model, active, cellData);
+        // Only auto-resize if the cell value actually changed
+        const previousCell = get$1(active, state.model.data);
+        const valueChanged = previousCell?.value !== cellData.value;
+        let newRowDimensions = {
+          ...state.rowDimensions
+        };
+        let newColumnDimensions = {
+          ...state.columnDimensions
+        };
+        if (valueChanged) {
+          debouncedResize(`resize-${active.row}-${active.column}`, () => {
+            // Auto-resize row
+            const rowData = updatedModel.data[active.row] || [];
+            let maxRowHeight = 32; // Default row height
+            // Only check this row's cells for height calculation
+            rowData.forEach((cell, _colIndex) => {
+              if (cell && cell.value) {
+                const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
+                const lineHeight = Math.max(fontSize * 1.2, 18);
+                const lines = String(cell.value).split('\n').length;
+                const cellHeight = lineHeight * lines + 10;
+                maxRowHeight = Math.max(Number(cell?.style?.height) ?? maxRowHeight, cellHeight);
+              }
+            });
+            newRowDimensions[active.row] = {
+              ...(newRowDimensions[active.row] || {
+                top: 0,
+                height: 32
+              }),
+              height: maxRowHeight
+            };
+            // Auto-resize column
+            let maxColWidth = 100; // Default column width
+            // Only check this column's cells for width calculation
+            updatedModel.data.forEach((rowData, _rowIndex) => {
+              const cell = rowData[active.column];
+              if (cell && cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
+                const font = getFontString(cell);
+                const textWidth = measureText(String(cell.value), font) + 20;
+                maxColWidth = Math.max(Number(cell?.style?.width) ?? maxColWidth, textWidth);
+              }
+            });
+            newColumnDimensions[active.column] = {
+              ...(newColumnDimensions[active.column] || {
+                left: 0,
+                width: 100
+              }),
+              width: maxColWidth
+            };
+          }, 300 // 300ms delay
+          );
+        }
         return {
           ...state,
-          model: updateCellValue(state.model, active, cellData),
+          model: updatedModel,
+          rowDimensions: newRowDimensions,
+          columnDimensions: newColumnDimensions,
           lastChanged: active
         };
       }
@@ -40126,28 +40581,61 @@ function reducer(state, action) {
           point,
           dimensions
         } = action.payload;
-        const prevRowDimensions = state.rowDimensions[point.row];
-        const prevColumnDimensions = state.columnDimensions[point.column];
-        if (prevRowDimensions && prevColumnDimensions && prevRowDimensions.top === dimensions.top && prevRowDimensions.height === dimensions.height && prevColumnDimensions.left === dimensions.left && prevColumnDimensions.width === dimensions.width) {
-          return state;
-        }
-        return {
-          ...state,
-          rowDimensions: {
-            ...state.rowDimensions,
-            [point.row]: {
-              top: dimensions.top,
-              height: dimensions.height
+        let newState = {
+          ...state
+        };
+        let updatedData = state.model.data;
+        const cell = get$1(point, updatedData) || EmptyCell;
+        const newStyle = {
+          ...cell.style
+        };
+        let styleChanged = false;
+        if (dimensions.width !== undefined) {
+          newStyle.width = dimensions.width;
+          styleChanged = true;
+        }
+        if (dimensions.height !== undefined) {
+          newStyle.height = dimensions.height;
+          styleChanged = true;
+        }
+        if (styleChanged) {
+          const newCell = {
+            ...cell,
+            style: newStyle
+          };
+          updatedData = set$1(point, newCell, updatedData);
+        }
+        const updatedModel = new Model(state.model.createFormulaParser, updatedData);
+        // Update column dimensions if width/left provided
+        if (dimensions.width !== undefined && dimensions.left !== undefined) {
+          newState = {
+            ...newState,
+            columnDimensions: {
+              ...state.columnDimensions,
+              [point.column]: {
+                left: dimensions.left,
+                width: dimensions.width
+              }
             }
-          },
-          columnDimensions: {
-            ...state.columnDimensions,
-            [point.column]: {
-              left: dimensions.left,
-              width: dimensions.width
+          };
+        }
+        // Update row dimensions if height/top provided
+        if (dimensions.top !== undefined && dimensions.height !== undefined) {
+          newState = {
+            ...newState,
+            rowDimensions: {
+              ...state.rowDimensions,
+              [point.row]: {
+                top: dimensions.top,
+                height: dimensions.height
+              }
             }
-          }
-        };
+          };
+        }
+        return {
+          ...newState,
+          model: updatedModel
+        }; // Include updated model
       }
     case COPY:
     case CUT:
@@ -40277,9 +40765,36 @@ function reducer(state, action) {
       {
         return view(state);
       }
+    // In reducer.ts, update the CLEAR action for better performance
     case CLEAR:
       {
-        return clear(state);
+        const selectedRange = state.selected.toRange(state.model.data);
+        if (!selectedRange || !state.editable) {
+          return state;
+        }
+        let updatedData = state.model.data;
+        const commit = [];
+        // Track which rows and columns were cleared
+        const clearedRows = new Set();
+        const clearedColumns = new Set();
+        for (const point of selectedRange) {
+          const cell = get$1(point, updatedData) || null;
+          commit.push({
+            prevCell: cell,
+            nextCell: null
+          });
+          updatedData = set$1(point, EmptyCell, updatedData);
+          // Track cleared rows and columns
+          clearedRows.add(point.row);
+          clearedColumns.add(point.column);
+        }
+        const updatedModel = new Model(state.model.createFormulaParser, updatedData);
+        // Use batch resize for better performance
+        return reducer({
+          ...state,
+          model: updatedModel,
+          lastCommit: commit
+        }, batchResize(Array.from(clearedRows), Array.from(clearedColumns)));
       }
     case BLUR:
       {
@@ -40325,23 +40840,56 @@ function reducer(state, action) {
         }
         return state;
       }
-    case SET_ROW_HEIGHT:
+    case SET_COLUMN_WIDTH:
       {
         const {
-          row,
-          height
+          column,
+          width
         } = action.payload;
-        const prevDimensions = state.rowDimensions[row] || {
-          top: 0};
+        const prevDimensions = state.columnDimensions[column] || {
+          left: 0};
+        // Narrow first
+        if (!state.model.data) {
+          return {
+            ...state,
+            columnDimensions: {
+              ...state.columnDimensions,
+              [column]: {
+                left: prevDimensions.left,
+                width
+              }
+            }
+          };
+        }
+        let updatedData = state.model.data ?? [];
+        for (let r = 0; r < updatedData.length; r++) {
+          if (updatedData[r] && updatedData?.[r]?.length > column) {
+            const point = {
+              row: r,
+              column
+            };
+            const cell = get$1(point, updatedData) ?? EmptyCell;
+            const newCell = {
+              ...cell,
+              style: {
+                ...(cell.style ?? {}),
+                width
+              }
+            };
+            updatedData = set$1(point, newCell, updatedData);
+          }
+        }
+        const updatedModel = new Model(state.model.createFormulaParser, updatedData);
         return {
           ...state,
-          rowDimensions: {
-            ...state.rowDimensions,
-            [row]: {
-              top: prevDimensions.top,
-              height
+          columnDimensions: {
+            ...state.columnDimensions,
+            [column]: {
+              left: prevDimensions.left,
+              width
             }
-          }
+          },
+          model: updatedModel
         };
       }
     case SET_COLUMN_POSITION:
@@ -40479,6 +41027,69 @@ function reducer(state, action) {
           ...commit(changes)
         };
       }
+    case BATCH_RESIZE:
+      {
+        const {
+          rows,
+          columns
+        } = action.payload;
+        const {
+          model,
+          rowDimensions,
+          columnDimensions
+        } = state;
+        let newRowDimensions = {
+          ...rowDimensions
+        };
+        let newColumnDimensions = {
+          ...columnDimensions
+        };
+        // Resize specified rows
+        rows.forEach(row => {
+          const rowData = model.data[row] || [];
+          let maxHeight = 32;
+          rowData.forEach((cell, _colIndex) => {
+            if (cell && cell.value) {
+              const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
+              const lineHeight = Math.max(fontSize * 1.2, 18);
+              const lines = String(cell.value).split('\n').length;
+              const cellHeight = lineHeight * lines + 10;
+              maxHeight = Math.max(Number(cell?.style?.height) ?? maxHeight, cellHeight);
+            }
+          });
+          newRowDimensions[row] = {
+            ...(newRowDimensions[row] || {
+              top: 0,
+              height: 32
+            }),
+            height: maxHeight
+          };
+        });
+        // Resize specified columns
+        columns.forEach(col => {
+          let maxWidth = 100;
+          model.data.forEach((rowData, _rowIndex) => {
+            const cell = rowData[col];
+            if (cell && cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
+              const font = getFontString(cell);
+              const textWidth = measureText(String(cell.value), font) + 20;
+              maxWidth = Math.max(Number(cell?.style?.width) ?? maxWidth, textWidth);
+            }
+          });
+          newColumnDimensions[col] = {
+            ...(newColumnDimensions[col] || {
+              left: 0,
+              width: 100
+            }),
+            width: maxWidth
+          };
+        });
+        return {
+          ...state,
+          rowDimensions: newRowDimensions,
+          columnDimensions: newColumnDimensions
+        };
+      }
     default:
       throw new Error('Unknown action');
   }
@@ -41831,8 +42442,7 @@ const ColumnIndicator = ({
   const dispatch = useDispatch();
   const excelData = useSelector(state => state.model.data);
   const activeCell = useSelector(state => state.active);
-  const minColumnWidth = minimumColumnWidth;
-  const columnWidth = useSelector(state => state.columnDimensions[column]?.width || minColumnWidth);
+  const minColumnWidth = minimumColumnWidth ?? 100;
   const matrixData = useSelector(state => state.model.data);
   const {
     columnCount
@@ -41861,6 +42471,7 @@ const ColumnIndicator = ({
       return value;
     });
   };
+  const columnWidth = useSelector(state => state.columnDimensions[column]?.width ?? minColumnWidth);
   const options = React.useMemo(() => {
     const checkVisible = cell?.contextDisable?.['Delete Column'] && isCellDataChanged();
     return [{
@@ -41901,15 +42512,17 @@ const ColumnIndicator = ({
       disable: false
     }] : [])];
   }, [selectedColumn, cell, addColumnLeft, addColumnRight, deleteColumn, minColumnWidth, columnCount, maxColLimit, disableDeleteOption, onAddColumn, onDeleteColumn, column, isCellDataChanged]);
+  const MIN_COLUMN_WIDTH = minimumColumnWidth || 100;
   const onMouseDrag = React__namespace.useCallback((event, isRight) => {
     const getTargetColumn = isRight ? column - 1 : column;
     const targetColumn = Math.max(getTargetColumn, 0);
     onSelect(targetColumn, event.shiftKey);
     const startX = event.clientX;
-    const initialWidth = columnWidth;
+    const initialWidth = Number(columnWidth);
     const onMouseMove = moveEvent => {
-      const newWidth = Math.max(minColumnWidth, initialWidth + (moveEvent.clientX - startX));
-      dispatch(setColumnPosition(targetColumn, newWidth));
+      const delta = moveEvent.clientX - startX;
+      const newWidth = Math.max(MIN_COLUMN_WIDTH, initialWidth + delta);
+      dispatch(setColumnWidth(targetColumn, newWidth));
     };
     const onMouseUp = () => {
       document.removeEventListener('mousemove', onMouseMove);
@@ -41946,9 +42559,6 @@ const ColumnIndicator = ({
     className: classNames('ff-spreadsheet-header', {
       'ff-spreadsheet-header--selected': selected
     }),
-    style: {
-      minWidth: `${columnWidth}px`
-    },
     onClick: handleClick,
     onContextMenu: contextClick,
     tabIndex: 0,
@@ -42074,6 +42684,7 @@ const RowIndicator = ({
       disable: false
     }] : [])];
   }, [selectedRow, row]);
+  const MIN_ROW_HEIGHT = 32;
   const handleMouseDrag = React__namespace.useCallback((event, isUp) => {
     const getTargetRow = isUp ? row : row - 1;
     const targetRow = Math.max(getTargetRow, 0);
@@ -42081,17 +42692,17 @@ const RowIndicator = ({
     const startY = event.clientY;
     const initialHeight = rowHeight;
     const onMouseMove = moveEvent => {
-      const newHeight = Math.max(32, initialHeight + (moveEvent.clientY - startY));
+      const delta = moveEvent.clientY - startY;
+      const newHeight = Math.max(MIN_ROW_HEIGHT, initialHeight + delta);
       dispatch(setRowHeight(targetRow, newHeight));
     };
     const onMouseUp = () => {
       document.removeEventListener('mousemove', onMouseMove);
       document.removeEventListener('mouseup', onMouseUp);
-      dispatch(dragEnd());
+      dispatch(dragEnd()); // only at end
     };
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp);
-    dispatch(dragEnd());
   }, [rowHeight, row]);
   const activate$1 = React__namespace.useCallback(point => dispatch(activate(point)), [dispatch]);
   const handleClick = React__namespace.useCallback(event => {
@@ -42132,7 +42743,7 @@ const RowIndicator = ({
     }), jsxRuntime.jsx("div", {
       className: "drag-row-selector drag-row-down",
       onMouseDown: e => handleMouseDrag(e, true),
-      onDoubleClick: () => dispatch(setRowHeight(row, 32)),
+      onDoubleClick: () => dispatch(setRowHeight(row, rowHeight)),
       onClick: () => activate$1({
         row,
         column: -1
@@ -42140,7 +42751,7 @@ const RowIndicator = ({
     }), jsxRuntime.jsx("div", {
       className: "drag-row-selector drag-row-up",
       onMouseDown: e => handleMouseDrag(e, false),
-      onDoubleClick: () => dispatch(setRowHeight(row, 32)),
+      onDoubleClick: () => dispatch(setRowHeight(row, rowHeight)),
       onClick: () => activate$1({
         row,
         column: -1
@@ -42207,13 +42818,14 @@ const Cell = ({
     const root = rootRef.current;
     if (!root) return;
     const updateDimensions = () => {
+      if (dragging) return;
       setCellDimensions(point, getOffsetRect(root));
     };
     updateDimensions();
     const observer = new ResizeObserver(updateDimensions);
     observer.observe(root);
     return () => observer.disconnect();
-  }, [setCellDimensions, point]);
+  }, [setCellDimensions, point, dragging]);
   if (data && data.DataViewer) {
     DataViewer = data.DataViewer;
   }
@@ -42354,21 +42966,64 @@ const DataEditor = ({
       }
     });
   }, [onChange, cell]);
+  const handleKeyDown = React__namespace.useCallback(event => {
+    if (event.key === 'Delete' || event.key === 'Backspace') {
+      event.stopPropagation();
+      requestAnimationFrame(() => {
+        if (inputRef.current) {
+          const textarea = inputRef.current;
+          textarea.style.height = 'auto';
+          textarea.style.height = `${textarea.scrollHeight}px`;
+        }
+      });
+    }
+    if (event.key === 'Enter' && event.altKey) {
+      event.preventDefault();
+      event.stopPropagation();
+      const textarea = event.currentTarget;
+      const {
+        selectionStart,
+        selectionEnd,
+        value
+      } = textarea;
+      const newValue = value.substring(0, selectionStart) + '\n' + value.substring(selectionEnd);
+      onChange({
+        ...cell,
+        value: newValue,
+        style: cell?.style,
+        inputType: cell?.inputType ?? {
+          type: 'text'
+        }
+      });
+      requestAnimationFrame(() => {
+        textarea.selectionStart = textarea.selectionEnd = selectionStart + 1;
+        textarea.style.height = 'auto';
+        textarea.style.height = `${textarea.scrollHeight}px`;
+      });
+    }
+  }, [onChange, cell]);
   React__namespace.useEffect(() => {
     if (inputRef.current) {
       moveCursorToEnd(inputRef.current);
     }
-  }, [inputRef]);
+  }, []);
   const value = cell?.value ?? '';
   return jsxRuntime.jsx("div", {
     className: "ff-spreadsheet-data-editor",
     children: jsxRuntime.jsx("textarea", {
       className: "ff-spreadsheet-cell-textarea",
       style: {
-        ...cell?.style
+        ...cell?.style,
+        width: '100%',
+        height: '100%',
+        borderTop: '',
+        borderBottom: '',
+        borderLeft: '',
+        borderRight: ''
       },
       ref: inputRef,
       onChange: handleChange,
+      onKeyDown: handleKeyDown,
       value: value,
       autoFocus: true,
       disabled: cell?.readOnly
@@ -42837,6 +43492,8 @@ const ActiveCell = props => {
       className: "ff-spreadsheet-cell-textarea",
       style: {
         ...cell?.style,
+        height: '100%',
+        width: '100%',
         textDecoration: cell?.style?.textDecoration === 'underline' ? 'underline' : 'none',
         backgroundColor: isDragged ? '#1e161f00' : cell?.style?.backgroundColor,
         pointerEvents: 'none',
@@ -43068,7 +43725,9 @@ function convertStyleToFrontend(backendStyle) {
     borderBottom: borderBottom,
     borderLeft: borderLeft,
     textAlign: getTextAlignment(backendStyle.alignment.horizontal),
-    alignContent: getTextAlignment(backendStyle.alignment.vertical)
+    alignContent: getTextAlignment(backendStyle.alignment.vertical),
+    height: backendStyle.height ?? 32,
+    width: backendStyle.width ?? 150
   };
 }
 const getBorderStyle = border => {
@@ -43104,7 +43763,9 @@ const convertStyleToBackend = frontendStyle => {
       horizontal: getTextAlignmentBack(frontendStyle.textAlign),
       vertical: getTextAlignmentBack(frontendStyle.alignContent),
       wrapText: false
-    }
+    },
+    width: frontendStyle.width || 150,
+    height: frontendStyle.height || 32
   };
 };
 
@@ -48278,7 +48939,7 @@ const VariableDropdown = ({
   dropdownPosition,
   position = 'relative',
   width,
-  height = '100px',
+  height = '160px',
   zIndex = 9999
 }) => {
   const VARIABLE_ICON_MAP = {
@@ -48308,12 +48969,12 @@ const VariableDropdown = ({
     return 212;
   }
   // Calculate item height based on width type
-  const itemHeight = width.endsWith('px') ? 40 : 32;
+  const itemHeight = 32;
   const renderItem = index => {
     const option = optionsList[index];
     if (!option) return null;
     return jsxRuntime.jsx("div", {
-      className: width.endsWith('px') ? 'ff-variable-option' : 'ff-variable-data',
+      className: 'ff-variable-data',
       onMouseDown: () => onSelectVariable(option),
       children: width.endsWith('px') ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [jsxRuntime.jsx(Tooltip, {
@@ -48329,8 +48990,8 @@ const VariableDropdown = ({
           })
         }), jsxRuntime.jsx(Icon, {
           name: getVariableIcon(option),
-          height: 16,
-          width: 16,
+          height: 24,
+          width: 24,
           hoverEffect: true
         })]
       }) : jsxRuntime.jsx(DynamicWidthTooltip, {
@@ -48355,8 +49016,8 @@ const VariableDropdown = ({
       totalCount: optionsList.length,
       itemContent: renderItem,
       style: {
-        height: '100%',
-        fontSize: "12px"
+        height,
+        fontSize: '12px'
       },
       overscan: 10,
       fixedItemHeight: itemHeight
@@ -48999,10 +49660,11 @@ const OptionsDropdown$1 = ({
       return jsxRuntime.jsx("div", {
         className: "ff-variable-option",
         onMouseDown: () => onSelectVariable(option),
-        children: jsxRuntime.jsx(Typography, {
-          as: "span",
-          fontSize: 14,
-          children: truncateText(option?.name, truncateTextValue)
+        children: jsxRuntime.jsx(Tooltip, {
+          title: isTextTruncated(option?.name, truncateTextValue, 'pixel') ? option?.name : '',
+          children: jsxRuntime.jsx(Typography, {
+            children: truncateText(option?.name, truncateTextValue, 'pixel')
+          })
         })
       }, option?.id);
     }) : jsxRuntime.jsx("div", {
@@ -49028,7 +49690,7 @@ const VariableSuggestionInputDropDown = /*#__PURE__*/React.forwardRef(({
   handleClearInput,
   value = '',
   dropdownWidth = '100%',
-  dropdownHeight = '150px',
+  dropdownHeight = '160px',
   isHash = false,
   isOnlyHash = false,
   dataFiles = [],
@@ -49302,7 +49964,8 @@ const CreateVariableSlider = ({
   handleSubmit,
   mode = 'create',
   disabled,
-  dataFiles = []
+  dataFiles = [],
+  truncateTextValue = 34
 }) => {
   const [error, setError] = React.useState(false);
   const [helperText, setHelperText] = React.useState('');
@@ -49438,7 +50101,7 @@ const CreateVariableSlider = ({
         isHash: true,
         isOnlyHash: true,
         zIndex: 99999,
-        truncateTextValue: 34,
+        truncateTextValue: truncateTextValue,
         dataFiles: dataFiles,
         dropdownWidth: "100%",
         setHashInputValue: setHashInputValue,
@@ -49574,8 +50237,8 @@ const TableWithAccordion = ({
       children: [jsxRuntime.jsx("div", {
         className: "ff-display-flex",
         children: jsxRuntime.jsx(Tooltip, {
-          title: row.disable ? row?.disableInfoMessage : '',
-          placement: 'bottom-start',
+          title: row.disable ? row?.disableInfoMessage : typeof row.title === 'string' && isTextTruncated(row.title, tableMeta[0]?.width, 'pixel') ? row.title : '',
+          placement: "bottom-start",
           children: jsxRuntime.jsxs("div", {
             className: `accordion-header ${row.disable && 'accordion-header--disabled'}`,
             children: [jsxRuntime.jsx("div", {
@@ -49583,7 +50246,7 @@ const TableWithAccordion = ({
               children: jsxRuntime.jsx("span", {
                 children: jsxRuntime.jsx(Typography, {
                   children: jsxRuntime.jsx(HighlightText, {
-                    text: row.title,
+                    text: truncateText(row.title, tableMeta[0]?.width, 'pixel'),
                     highlight: highlightText
                   })
                 })
@@ -50062,7 +50725,7 @@ const Prompt = /*#__PURE__*/React.forwardRef(({
   additionalIconName,
   additionIconToolTip,
   onAdditionalIconClick
-}) => {
+}, ref) => {
   const containerRef = React.useRef(null);
   useKeyboardActions([{
     key: 'Enter',
@@ -50099,6 +50762,7 @@ const Prompt = /*#__PURE__*/React.forwardRef(({
         disabled: checkEmpty(value)
       })
     }), jsxRuntime.jsx("input", {
+      ref: ref,
       className: "ff-prompt-input",
       type: "text",
       placeholder: placeholder,
@@ -63932,11 +64596,13 @@ var jsExports = requireJs();
 const Editor = /*#__PURE__*/React.forwardRef(({
   width = '100%',
   height = '100%',
+  VariableDropdownHeight = '160px',
   readOnly = false,
   value = '',
   handleChange,
   setValue,
   variableOptionsList = [],
+  addForloopPrefix = false,
   language = 'json',
   theme = 'light',
   isRequisiteType = false,
@@ -63986,7 +64652,10 @@ const Editor = /*#__PURE__*/React.forwardRef(({
           varRef.current = columnIndex;
         }
         filterVarRef.current = currentLineContent.slice(varRef.current + 1, columnIndex);
-        const filteredVariable = variableOptionsList.filter(e => e?.name.toLowerCase().includes(filterVarRef.current?.toLowerCase()));
+        const filteredVariable = variableOptionsList.filter(e => {
+          const variableName = e.type === '_startforloop' && addForloopPrefix ? `FLV_for:${e.name}` : e.name;
+          return variableName.toLowerCase().includes(filterVarRef.current?.toLowerCase());
+        });
         if (filteredVariable.length) {
           setFilteredVariableOptions(filteredVariable);
         } else {
@@ -64010,7 +64679,7 @@ const Editor = /*#__PURE__*/React.forwardRef(({
         let dropdownTop = top;
         let dropdownLeft = left;
         if (dropdownTop + dropdownHeight > editorHeight - dropdownHeight + 100) {
-          dropdownTop -= Math.floor(dropdownHeight / 2) + dropdownHeight + 25;
+          dropdownTop -= Math.floor(dropdownHeight / 2) + dropdownHeight - 25;
         } else {
           dropdownTop -= 5;
         }
@@ -64269,7 +64938,7 @@ const Editor = /*#__PURE__*/React.forwardRef(({
     }), showDropdown && dropdownPosition && showVariableDropdown && jsxRuntime.jsx(VariableDropdown, {
       position: "absolute",
       width: "300px",
-      height: "210px",
+      height: VariableDropdownHeight,
       optionsList: filteredVariableOptions,
       onSelectVariable: handleSelectVariable,
       dropdownPosition: dropdownPosition
@@ -66960,7 +67629,10 @@ const OptionsDropdown = ({
   filteredOptions = [],
   position = 'relative',
   width = '300px',
-  zIndex = 1000
+  zIndex = 1000,
+  height = '160px',
+  truncateTextValue = 34,
+  isTruncateText = false
 }) => {
   return jsxRuntime.jsxs("div", {
     className: classNames('ff-variable-dropdown', position),
@@ -66972,16 +67644,21 @@ const OptionsDropdown = ({
     } : {
       width,
       zIndex,
-      height: '350px'
+      height: height
     },
     children: [filteredOptions?.map(option => {
+      const displayText = isTruncateText ? truncateText(option?.name, truncateTextValue, 'pixel') : option?.name;
+      const shouldShowTooltip = isTruncateText ? isTextTruncated(option?.name, truncateTextValue, 'pixel') : false;
       return jsxRuntime.jsx("div", {
         className: "ff-variable-option",
         onClick: () => onSelectVariable(option),
-        children: jsxRuntime.jsx(Typography, {
-          as: "span",
-          fontSize: 14,
-          children: option?.name
+        children: isTruncateText ? jsxRuntime.jsx(Tooltip, {
+          title: shouldShowTooltip ? option?.name : '',
+          children: jsxRuntime.jsx(Typography, {
+            children: displayText
+          })
+        }) : jsxRuntime.jsx(Typography, {
+          children: displayText
         })
       }, option?.id);
     }), filteredOptions?.length === 0 && jsxRuntime.jsx("div", {
@@ -67000,6 +67677,7 @@ const ConditionalDropdown = /*#__PURE__*/React.forwardRef(({
   hashInputValue = '',
   setHashInputValue,
   variableList = [],
+  addForloopPrefix = false,
   placeholder = 'Enter text',
   onChange,
   onCreateVariableClick,
@@ -67019,7 +67697,9 @@ const ConditionalDropdown = /*#__PURE__*/React.forwardRef(({
   onFocus,
   onBlur,
   readOnly = false,
-  height = '165px',
+  height = '160px',
+  truncateTextValue = 34,
+  isTruncateText = false,
   ...props
 }, ref) => {
   const [showDropdown, setShowDropdown] = React.useState(false);
@@ -67147,7 +67827,10 @@ const ConditionalDropdown = /*#__PURE__*/React.forwardRef(({
         searchString = '';
       }
       if (searchString) {
-        const isInVariableList = variableList.some(file => file.name.toLowerCase().includes(searchString.toLowerCase()));
+        const isInVariableList = variableList.some(file => {
+          const searchableName = file.type === '_startforloop' && addForloopPrefix ? `FLV_for:${file.name}` : file.name;
+          return searchableName.toLowerCase().includes(searchString.toLowerCase());
+        });
         if (!isInVariableList) {
           showDropdown = false;
           searchString = '';
@@ -67216,7 +67899,7 @@ const ConditionalDropdown = /*#__PURE__*/React.forwardRef(({
           className: "ff-password-icon",
           children: jsxRuntime.jsx(Icon, {
             onClick: togglePasswordVisibility,
-            name: showPassword ? 'view_icon' : 'hide_icon',
+            name: !showPassword ? 'view_access_icon' : 'hide_access_icon',
             width: 16,
             height: 16,
             hoverEffect: true
@@ -67235,7 +67918,10 @@ const ConditionalDropdown = /*#__PURE__*/React.forwardRef(({
     }), result?.showDropdown && isFocused && jsxRuntime.jsx(VariableDropdown, {
       position: "absolute",
       width: dropdownWidth,
-      optionsList: variableList.filter(file => file.name.toLowerCase().includes(result?.searchString.toLowerCase())),
+      optionsList: variableList.filter(file => {
+        const searchableName = file.type === '_startforloop' && addForloopPrefix ? `FLV_for:${file.name}` : file.name;
+        return searchableName.toLowerCase().includes(result?.searchString.toLowerCase());
+      }),
       onSelectVariable: handleDropdownClick,
       height: height
     }), showDropdown && (isHash || onlyDropdown) && jsxRuntime.jsx(OptionsDropdown, {
@@ -67243,7 +67929,10 @@ const ConditionalDropdown = /*#__PURE__*/React.forwardRef(({
       width: dropdownWidth,
       filteredOptions: filteredOptions,
       zIndex: 2000,
-      onSelectVariable: handleDropdownClick
+      onSelectVariable: handleDropdownClick,
+      height: height,
+      isTruncateText: isTruncateText,
+      truncateTextValue: truncateTextValue
     })]
   });
 });
@@ -80904,84 +81593,107 @@ const StepGroupAccordions = /*#__PURE__*/React.memo(({
   handleStepGroupExpand,
   isStepGroupExpanded,
   isViewPrivilegeMode,
-  columns = []
+  columns = [],
+  parentIndex,
+  updateRowHeight
 }) => {
+  const rowRefs = React.useRef([]);
   const typeSet = new Set(['Group', 'PRE', 'POST', 'Script']);
   const getPadding = type => typeSet.has(type) ? '6px 8px' : '7px 8px';
   const indent = level + 8;
+  // Measure and report height when expanded
+  React.useEffect(() => {
+    if (!updateRowHeight) return;
+    let totalHeight = 0;
+    rowRefs.current.forEach(ref => {
+      if (ref) {
+        totalHeight += ref.getBoundingClientRect().height;
+      }
+    });
+    if (totalHeight > 0) {
+      updateRowHeight(parentIndex ?? 0, totalHeight);
+    }
+  }, [data, updateRowHeight, parentIndex, isStepGroupExpanded]);
   return jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: data?.map(item => jsxRuntime.jsxs(React.Fragment, {
-      children: [viewModeId === item?.stepId ? jsxRuntime.jsx("tr", {
-        className: "steps-edit-row",
-        id: "getInFocus",
-        children: jsxRuntime.jsx("td", {
-          colSpan: columnCount,
-          children: jsxRuntime.jsx("div", {
-            style: {
-              marginLeft: `${indent}px`
-            },
-            children: ViewComponent && jsxRuntime.jsx(ViewComponent, {})
-          })
-        })
-      }) : jsxRuntime.jsx("tr", {
-        children: columns.map((col, idx) => jsxRuntime.jsx("td", {
-          style: {
-            maxWidth: col.width,
-            padding: getPadding(item.type)
-          },
-          children: jsxRuntime.jsxs(Typography, {
-            as: "div",
-            className: "ff-data-checkbox-container",
-            children: [jsxRuntime.jsxs("div", {
-              className: "ff-data-checkbox-container-content",
+    children: data?.map((item, itemIndex) => {
+      const absoluteIndex = parentIndex ?? 0 + itemIndex + 1;
+      return jsxRuntime.jsxs(React.Fragment, {
+        children: [viewModeId === item?.stepId ? jsxRuntime.jsx("tr", {
+          ref: el => rowRefs.current[itemIndex] = el,
+          className: "steps-edit-row",
+          id: "getInFocus",
+          children: jsxRuntime.jsx("td", {
+            colSpan: columnCount,
+            children: jsxRuntime.jsx("div", {
               style: {
-                marginLeft: idx === 0 ? `${indent}px` : 0
-              },
-              onClick: () => {
-                const isClickable = idx === 0 && !item?.displayName?.includes('End') && !item?.isDisabled;
-                if (isClickable) handleClick?.({
-                  ...item,
-                  tableType
-                });
+                marginLeft: `${indent}px`
               },
-              children: [!isViewPrivilegeMode && idx === 0 && jsxRuntime.jsx("div", {
+              children: ViewComponent && jsxRuntime.jsx(ViewComponent, {})
+            })
+          })
+        }) : jsxRuntime.jsx("tr", {
+          ref: el => rowRefs.current[itemIndex] = el,
+          children: columns.map((col, idx) => jsxRuntime.jsx("td", {
+            style: {
+              maxWidth: col.width,
+              padding: getPadding(item.type)
+            },
+            children: jsxRuntime.jsxs(Typography, {
+              as: "div",
+              className: "ff-data-checkbox-container",
+              children: [jsxRuntime.jsxs("div", {
+                className: "ff-data-checkbox-container-content",
                 style: {
-                  padding: '4px 18px'
-                }
-              }), prepareData({
-                ...item,
-                marginLeft: indent
-              }, col)]
-            }), idx === 0 && ['Group', 'PRE', 'POST', 'Script'].includes(item.type) && jsxRuntime.jsx("div", {
-              className: `ff-accordion-arrow ${isStepGroupExpanded?.(item.stepId) ? 'expanded' : ''}`,
-              children: jsxRuntime.jsx(Icon, {
-                name: "arrow_right",
-                color: isStepGroupExpanded?.(item.stepId) ? 'var(--brand-color)' : 'var(--default-color)',
-                className: "steps-arrow-svg",
-                width: 12,
-                height: 12,
-                onClick: () => handleStepGroupExpand?.({
+                  marginLeft: idx === 0 ? `${indent}px` : 0
+                },
+                onClick: () => {
+                  const isClickable = idx === 0 && !item?.displayName?.includes('End') && !item?.isDisabled;
+                  if (isClickable) handleClick?.({
+                    ...item,
+                    tableType
+                  });
+                },
+                children: [!isViewPrivilegeMode && idx === 0 && jsxRuntime.jsx("div", {
+                  style: {
+                    padding: '4px 18px'
+                  }
+                }), prepareData({
                   ...item,
-                  tableType
+                  marginLeft: indent
+                }, col)]
+              }), idx === 0 && ['Group', 'PRE', 'POST', 'Script'].includes(item.type) && jsxRuntime.jsx("div", {
+                className: `ff-accordion-arrow ${isStepGroupExpanded?.(item.stepId) ? 'expanded' : ''}`,
+                children: jsxRuntime.jsx(Icon, {
+                  name: "arrow_right",
+                  color: isStepGroupExpanded?.(item.stepId) ? 'var(--brand-color)' : 'var(--default-color)',
+                  className: "steps-arrow-svg",
+                  width: 12,
+                  height: 12,
+                  onClick: () => handleStepGroupExpand?.({
+                    ...item,
+                    tableType
+                  })
                 })
-              })
-            })]
-          })
-        }, `${item.stepId}-${idx}`))
-      }), isStepGroupExpanded?.(item.stepId) && jsxRuntime.jsx(StepGroupAccordions, {
-        data: item.data,
-        level: indent,
-        columnCount: columnCount,
-        viewModeId: viewModeId,
-        ViewComponent: ViewComponent,
-        handleClick: handleClick,
-        tableType: tableType,
-        handleStepGroupExpand: handleStepGroupExpand,
-        isStepGroupExpanded: isStepGroupExpanded,
-        isViewPrivilegeMode: isViewPrivilegeMode,
-        columns: columns
-      })]
-    }, item.stepId))
+              })]
+            })
+          }, `${item.stepId}-${idx}`))
+        }), isStepGroupExpanded?.(item.stepId) && jsxRuntime.jsx(StepGroupAccordions, {
+          data: item.data,
+          level: indent,
+          columnCount: columnCount,
+          viewModeId: viewModeId,
+          ViewComponent: ViewComponent,
+          handleClick: handleClick,
+          tableType: tableType,
+          handleStepGroupExpand: handleStepGroupExpand,
+          isStepGroupExpanded: isStepGroupExpanded,
+          isViewPrivilegeMode: isViewPrivilegeMode,
+          columns: columns,
+          parentIndex: absoluteIndex,
+          updateRowHeight: updateRowHeight
+        })]
+      }, item.stepId);
+    })
   });
 });
 StepGroupAccordions.displayName = 'StepGroupAccordions';
@@ -81006,8 +81718,11 @@ const StepTableMainRow = ({
   dataLength,
   stepPartialSelect,
   isViewPrivilegeMode,
-  isClientSide
+  isClientSide,
+  updateRowHeight,
+  rowId
 }) => {
+  const rowRef = React.useRef(null);
   const isDisabled = React.useMemo(() => row?.isDisabled || (dataLength ?? 0) <= 1 || row.isSpecialNlp, [row, dataLength]);
   let serialNumber = (indexNumber + 1).toString();
   const {
@@ -81025,6 +81740,13 @@ const StepTableMainRow = ({
     transition
   }), [transform, transition]);
   const key = row?._id || row?.stepId;
+  // Measure row height and report to parent
+  React.useEffect(() => {
+    if (rowRef.current && updateRowHeight) {
+      const height = rowRef.current.getBoundingClientRect().height;
+      updateRowHeight(indexNumber, height);
+    }
+  }, [row, updateRowHeight, indexNumber, isStepGroupExpanded?.(row?.stepId)]);
   const getPadding = index => {
     if (isViewPrivilegeMode || isClientSide) {
       if (['Group', 'PRE', 'POST', 'Script'].includes(row.type) && index === 0) {
@@ -81075,7 +81797,11 @@ const StepTableMainRow = ({
   });
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("tr", {
-      ref: setNodeRef,
+      "data-rowid": rowId,
+      ref: el => {
+        rowRef.current = el;
+        setNodeRef(el);
+      },
       style: style,
       className: classNames(tableBodyRowClass, {
         'disabled-inner-row': isDisabled
@@ -81119,7 +81845,9 @@ const StepTableMainRow = ({
       isStepGroupExpanded: isStepGroupExpanded,
       level: row?.marginLeft,
       isViewPrivilegeMode: isViewPrivilegeMode,
-      columns: columns
+      columns: columns,
+      parentIndex: indexNumber,
+      updateRowHeight: updateRowHeight
     })]
   });
 };
@@ -81156,14 +81884,156 @@ const StepInnerTable = ({
   isStepGroupExpanded,
   stepPartialSelect,
   isViewPrivilegeMode,
-  isClientSide
+  isClientSide,
+  highlightKey,
+  onHighlightComplete
 }) => {
   const observerRef = React.useRef(null);
+  const containerRef = React.useRef(null);
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const [containerHeight, setContainerHeight] = React.useState(0);
+  const [rowHeights, setRowHeights] = React.useState([]);
+  const [focusRowId, setFocusRowId] = React.useState(null);
+  const buffer = 5;
+  const estimatedRowHeight = 50;
+  const scrollTopBeforeReset = React.useRef(0); // Add this ref
   React.useEffect(() => {
-    const scrollContainer = document.getElementById('ff-table-scroll-container');
+    if (containerRef.current) {
+      setContainerHeight(containerRef.current.clientHeight);
+    }
+    const fullData = appendNewRow(data, AddNlp ?? {});
+    setRowHeights(prev => {
+      const next = [...prev];
+      while (next.length < fullData.length) next.push(estimatedRowHeight);
+      if (next.length > fullData.length) next.length = fullData.length;
+      return next;
+    });
+  }, [data, AddNlp]);
+  React.useEffect(() => {
+    if (scrollTopBeforeReset.current > 0 && containerRef.current) {
+      containerRef.current.scrollTop = scrollTopBeforeReset.current;
+      scrollTopBeforeReset.current = 0;
+    }
+  }, [rowHeights]);
+  // Track focus row for edit/new rows
+  React.useEffect(() => {
+    // Prioritize highlightKey over other states
+    if (!checkEmpty(highlightKey)) {
+      setFocusRowId(highlightKey);
+    } else if (editMode) {
+      setFocusRowId(editMode);
+    } else if (AddNlp && Object.keys(AddNlp).length > 0) {
+      const newRow = appendNewRow(data, AddNlp).find(row => row.isNew);
+      if (newRow) {
+        setFocusRowId(newRow.stepId || 'new-row');
+      }
+    } else {
+      setFocusRowId(null);
+    }
+  }, [editMode, AddNlp, data, highlightKey]);
+  // Update scroll effect
+  React.useEffect(() => {
+    if (focusRowId && containerRef.current) {
+      const timer = setTimeout(() => {
+        const focusElement = containerRef.current?.querySelector(`[data-rowid="${focusRowId}"]`);
+        if (focusElement) {
+          focusElement.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest'
+          });
+          // ADD THIS: Reset highlight after scroll completes
+          setTimeout(() => {
+            if (!checkEmpty(highlightKey)) {
+              onHighlightComplete?.();
+            }
+          }, 300); // Match scroll duration
+        }
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [focusRowId, rowHeights, highlightKey, onHighlightComplete]);
+  // Handle scroll
+  const handleScroll = e => {
+    setScrollTop(e.currentTarget.scrollTop);
+  };
+  // Update row height callback
+  const updateRowHeight = React.useCallback((index, height) => {
+    setRowHeights(prev => {
+      const newHeights = [...prev];
+      if (index < newHeights.length && newHeights[index] !== height) {
+        newHeights[index] = height;
+        return newHeights;
+      }
+      return prev;
+    });
+  }, []);
+  // Calculate visible rows
+  const fullData = appendNewRow(data, AddNlp ?? {});
+  const totalRows = fullData.length;
+  let startIndex = 0;
+  let endIndex = totalRows - 1;
+  let paddingTop = 0;
+  let paddingBottom = 0;
+  if (rowHeights.length === totalRows && containerHeight > 0) {
+    let cumulativeHeight = 0;
+    // Find start index
+    for (let i = 0; i < totalRows; i++) {
+      if (cumulativeHeight <= scrollTop) {
+        startIndex = i;
+      }
+      cumulativeHeight += rowHeights[i] ?? 0;
+    }
+    // Find end index
+    cumulativeHeight = 0;
+    for (let i = 0; i < totalRows; i++) {
+      cumulativeHeight += rowHeights[i] ?? 0;
+      if (cumulativeHeight >= scrollTop + containerHeight && endIndex === totalRows - 1) {
+        endIndex = i;
+        break;
+      }
+    }
+    // Apply buffer
+    startIndex = Math.max(0, startIndex - buffer);
+    endIndex = Math.min(totalRows - 1, endIndex + buffer);
+    // Expand range to include focus row if needed
+    if (focusRowId) {
+      const focusIndex = fullData.findIndex(row => row.stepId === focusRowId || row.isNew && focusRowId === 'new-row');
+      if (focusIndex >= 0) {
+        if (focusIndex < startIndex) {
+          startIndex = focusIndex;
+        } else if (focusIndex > endIndex) {
+          endIndex = focusIndex;
+        }
+      }
+    }
+    // Calculate padding
+    paddingTop = rowHeights.slice(0, startIndex).reduce((sum, height) => sum + height, 0);
+    paddingBottom = rowHeights.slice(endIndex + 1).reduce((sum, height) => sum + height, 0);
+  } else {
+    // Fallback to estimated virtualization
+    startIndex = Math.max(0, Math.floor(scrollTop / estimatedRowHeight) - buffer);
+    endIndex = Math.min(totalRows - 1, startIndex + Math.ceil(containerHeight / estimatedRowHeight) + buffer);
+    // Expand range to include focus row if needed
+    if (focusRowId) {
+      const focusIndex = fullData.findIndex(row => row.stepId === focusRowId || row.isNew && focusRowId === 'new-row');
+      if (focusIndex >= 0) {
+        if (focusIndex < startIndex) {
+          startIndex = focusIndex;
+        } else if (focusIndex > endIndex) {
+          endIndex = focusIndex;
+        }
+      }
+    }
+    paddingTop = startIndex * estimatedRowHeight;
+    paddingBottom = (totalRows - endIndex - 1) * estimatedRowHeight;
+  }
+  const visibleRows = fullData.slice(startIndex, endIndex + 1);
+  // Infinite scroll observer
+  React.useEffect(() => {
+    const scrollContainer = containerRef.current;
     const firstNode = document.getElementById('ff-table-first-node');
     const lastNode = document.getElementById('ff-table-last-node');
-    // Exit early if data is empty or elements are missing
     if (!scrollContainer || !firstNode || !lastNode || !data?.length) {
       return;
     }
@@ -81182,7 +82052,6 @@ const StepInnerTable = ({
     observerRef.current.observe(firstNode);
     observerRef.current.observe(lastNode);
     return () => {
-      // Cleanup observer
       observerRef.current?.disconnect();
     };
   }, [data, loadMore]);
@@ -81221,15 +82090,18 @@ const StepInnerTable = ({
       items: data?.map(row => row._id || row.stepId),
       strategy: verticalListSortingStrategy,
       children: jsxRuntime.jsxs("div", {
+        ref: containerRef,
         style: {
           height: height,
-          position: 'relative'
+          position: 'relative',
+          overflow: 'auto'
         },
         id: "ff-table-scroll-container",
         className: classNames(className, {
           'ff-fixed-header-steps-table': withFixedHeader,
           'steps-border-borderRadius': borderWithRadius
         }),
+        onScroll: handleScroll,
         children: [jsxRuntime.jsxs("table", {
           className: classNames(`ff-table-steps`),
           cellSpacing: 0,
@@ -81246,30 +82118,45 @@ const StepInnerTable = ({
           }), jsxRuntime.jsxs("tbody", {
             className: "ff-steps-tbody",
             children: [jsxRuntime.jsx("tr", {
-              id: "ff-table-first-node"
-            }), appendNewRow(data, AddNlp ?? {})?.map((row, index) => {
+              id: "ff-table-first-node",
+              style: {
+                display: 'none'
+              }
+            }), paddingTop > 0 && jsxRuntime.jsx("tr", {
+              children: jsxRuntime.jsx("td", {
+                style: {
+                  height: paddingTop,
+                  padding: 0
+                },
+                colSpan: columns.length
+              })
+            }), visibleRows.map((row, index) => {
+              const absoluteIndex = startIndex + index;
               const isEdit = editMode === row.stepId;
               const isEditOrNew = isEdit || row.isNew;
+              const isFocusRow = isEdit && row.stepId === focusRowId || row.isNew && focusRowId === 'new-row';
               const renderEditableRow = () => jsxRuntime.jsxs("tr", {
                 className: "steps-edit-row",
-                id: "getInFocus",
+                id: isFocusRow ? 'getInFocus' : undefined,
+                "data-rowid": row.stepId || 'new-row',
                 children: [isEdit && /*#__PURE__*/React.isValidElement(editComponent) && jsxRuntime.jsx("td", {
                   colSpan: columns.length,
                   children: /*#__PURE__*/React.cloneElement(editComponent, {
                     rowData: row,
-                    rowIndex: index + 1
+                    rowIndex: absoluteIndex + 1
                   })
                 }), row.isNew && !isEdit && /*#__PURE__*/React.isValidElement(NlpComponent) && jsxRuntime.jsx("td", {
                   colSpan: columns.length,
                   children: /*#__PURE__*/React.cloneElement(NlpComponent, {
-                    rowIndex: index,
+                    rowIndex: absoluteIndex,
                     rowData: row
                   })
                 })]
-              }, row.stepId || index);
+              }, row.stepId || absoluteIndex);
               const renderSortableRow = () => jsxRuntime.jsx(StepTableMainRow$1, {
+                rowId: row.stepId,
                 row: row,
-                indexNumber: index,
+                indexNumber: absoluteIndex,
                 columns: columns,
                 tableBodyRowClass: tableBodyRowClass,
                 handleOnclick: handleOnclick,
@@ -81287,11 +82174,23 @@ const StepInnerTable = ({
                 dataLength: data?.length,
                 stepPartialSelect: stepPartialSelect,
                 isViewPrivilegeMode: isViewPrivilegeMode,
-                isClientSide: isClientSide
+                isClientSide: isClientSide,
+                updateRowHeight: updateRowHeight
               });
               return isEditOrNew ? renderEditableRow() : renderSortableRow();
+            }), paddingBottom > 0 && jsxRuntime.jsx("tr", {
+              children: jsxRuntime.jsx("td", {
+                style: {
+                  height: paddingBottom,
+                  padding: 0
+                },
+                colSpan: columns.length
+              })
             }), jsxRuntime.jsx("tr", {
-              id: "ff-table-last-node"
+              id: "ff-table-last-node",
+              style: {
+                display: 'none'
+              }
             })]
           })]
         }), data?.length <= 0 && jsxRuntime.jsx("div", {
@@ -81878,7 +82777,9 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
   isViewPrivilegeMode = false,
   defaultExpanded = 'Steps',
   isHeaderRequired = true,
-  isClientSide = false
+  isClientSide = false,
+  highlightKey,
+  onHighlightComplete
 }, ref) => {
   const [ViewComponent, setViewComponent] = React.useState(null);
   const [viewModeId, setViewModeId] = React.useState(null);
@@ -81986,6 +82887,8 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
   const getAccordionTableContent = rows => {
     if (rows.title === 'Steps' && !isViewPrivilegeMode) {
       return jsxRuntime.jsx(StepInnerTable, {
+        onHighlightComplete: onHighlightComplete,
+        highlightKey: highlightKey,
         draggable: true,
         columns: tableMeta,
         onDragEnd: onDragEnd,
@@ -82015,6 +82918,8 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
       });
     } else {
       return jsxRuntime.jsx(StepInnerTable, {
+        onHighlightComplete: onHighlightComplete,
+        highlightKey: highlightKey,
         editMode: editMode,
         withCheckbox: !isViewPrivilegeMode,
         editComponent: editComponent,
@@ -82058,7 +82963,6 @@ const StepLandingTable = /*#__PURE__*/React.forwardRef(({
     }
   }));
   React.useEffect(() => {
-    scrollToView('getInFocus');
     if (!checkEmpty(AddNlp)) {
       setViewComponent(() => null);
       setViewModeId(null);