npm - pixel-react - Versions diffs - 1.9.9 → 1.10.1 - Mend

pixel-react 1.9.9 → 1.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (203) hide show

package/lib/index.js CHANGED Viewed

@@ -711,6 +711,18 @@ const SvgDeleteFilled = (props) => /* @__PURE__ */ React__namespace.createElemen
 const SvgPrimaryCalendarIcon = (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: "M9.33333 12H8C7.26467 12 6.66667 12.598 6.66667 13.3333V14.6667C6.66667 15.402 7.26467 16 8 16H9.33333C10.0687 16 10.6667 15.402 10.6667 14.6667V13.3333C10.6667 12.598 10.0687 12 9.33333 12ZM8 14.6667V13.3333H9.33333V14.6667H8ZM16.6667 5.33333H16V4.66667C16 4.29867 15.702 4 15.3333 4C14.9647 4 14.6667 4.29867 14.6667 4.66667V5.33333H9.33333V4.66667C9.33333 4.29867 9.03533 4 8.66667 4C8.298 4 8 4.29867 8 4.66667V5.33333H7.33333C5.49533 5.33333 4 6.82867 4 8.66667V16.6667C4 18.5047 5.49533 20 7.33333 20H16.6667C18.5047 20 20 18.5047 20 16.6667V8.66667C20 6.82867 18.5047 5.33333 16.6667 5.33333ZM7.33333 6.66667H16.6667C17.7693 6.66667 18.6667 7.564 18.6667 8.66667V9.33333H5.33333V8.66667C5.33333 7.564 6.23067 6.66667 7.33333 6.66667ZM16.6667 18.6667H7.33333C6.23067 18.6667 5.33333 17.7693 5.33333 16.6667V10.6667H18.6667V16.6667C18.6667 17.7693 17.7693 18.6667 16.6667 18.6667Z", fill: "currentColor" }));
+const SvgSauseLabIcon = (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: "M1.95052 10.3182C1.66316 9.57636 1.51722 8.78726 1.52023 7.9917C1.52436 7.13661 1.69693 6.29071 2.02808 5.50233C2.35922 4.71395 2.84245 3.99854 3.45016 3.39697C4.05787 2.7954 4.77816 2.31945 5.56986 1.99633C6.36156 1.67321 7.20917 1.50924 8.06426 1.51379C8.37072 1.51497 8.67678 1.5363 8.98044 1.57766L8.24709 2.31927H8.04798C6.26244 2.31827 4.58035 3.15531 3.50337 4.57993C2.4264 6.00455 2.07976 7.85144 2.56665 9.5691H7.55457L5.43517 13.4653L10.4549 8.38192H3.60231L11.3227 0.717079C10.2852 0.242691 9.15731 -0.001912 8.01642 1.1254e-05C6.26845 0.00182586 4.56887 0.574325 3.17606 1.63048C1.78324 2.68663 0.773361 4.16868 0.299937 5.85131C-0.173487 7.53395 -0.0845626 9.32515 0.553193 10.9526C1.19095 12.5801 2.34265 13.9548 3.83323 14.8678L6.22362 10.35L1.95052 10.3182ZM12.1994 1.14712L9.80921 5.66542H14.0878C14.4651 6.64903 14.5975 7.70966 14.4735 8.75583C14.3495 9.802 13.9729 10.8023 13.3761 11.6705C12.7793 12.5386 11.9803 13.2485 11.0479 13.739C10.1156 14.2295 9.07793 14.4858 8.02443 14.4859C7.70732 14.4847 7.3906 14.4634 7.07619 14.422L7.80127 13.6889H8.02669C9.53771 13.6889 10.9866 13.0888 12.0551 12.0204C13.1236 10.9519 13.7237 9.50323 13.7237 7.99195C13.7169 7.46969 13.6446 6.95035 13.5085 6.44611H8.51834L10.5979 2.51789L5.48276 7.60899H12.3511L4.71811 15.3056C6.57721 16.1338 8.68151 16.2246 10.605 15.5597C12.5286 14.8948 14.1276 13.5239 15.0785 11.7244C16.0293 9.925 16.2609 7.83151 15.7264 5.86775C15.1919 3.90399 13.9313 2.21667 12.1996 1.14737L12.1994 1.14712Z", fill: "#E1251B" }));
+const SvgTotalDefectsStatusIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_1919_99688)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M16.6256 16.6281C20.2862 12.9675 20.2862 7.03249 16.6256 3.37187C12.965 -0.288739 7.02995 -0.288739 3.36934 3.37187C-0.291277 7.03249 -0.291277 12.9675 3.36934 16.6281C7.02995 20.2887 12.965 20.2887 16.6256 16.6281Z", fill: "#C459D5" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.2394 11.5903C18.5723 15.4934 15.4928 18.5728 11.5898 19.2399L6.54285 14.193C5.33516 13.1963 4.56543 11.688 4.56543 9.99986C4.56543 6.99873 6.99824 4.56592 9.99938 4.56592C11.6875 4.56592 13.1958 5.33568 14.1925 6.54334L19.2394 11.5903Z", fill: "#71347B" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.0004 4.56592C6.99876 4.56592 4.56543 6.99925 4.56543 10.0009C4.56543 13.0026 6.99876 15.4359 10.0004 15.4359C13.0021 15.4359 15.4354 13.0026 15.4354 10.0009C15.4354 6.99925 13.0021 4.56592 10.0004 4.56592ZM7.11706 12.0256L8.26556 10.8774C8.35265 10.7904 8.43875 10.723 8.54478 10.659L8.97598 10.3992C8.74138 10.0444 8.61535 9.62877 8.61535 9.19368C8.61535 8.60807 8.84346 8.05746 9.25763 7.64329C9.67165 7.22909 10.2222 7.00098 10.8079 7.00098C11.3936 7.00098 11.9442 7.22909 12.3582 7.64329C12.7724 8.05746 13.0005 8.60811 13.0005 9.19368C13.0005 9.77925 12.7724 10.3298 12.3582 10.7438C11.9442 11.158 11.3936 11.3861 10.8079 11.3861C10.3728 11.3861 9.95706 11.2601 9.6023 11.0255L9.34247 11.457C9.2788 11.5627 9.21144 11.6489 9.12403 11.7363L7.97587 12.8844C7.90068 12.9596 7.80045 13.001 7.69362 13.001C7.58679 13.001 7.48656 12.9596 7.41136 12.8844L7.11707 12.5901C6.96165 12.4347 6.9616 12.1815 7.11707 12.0256L7.11706 12.0256ZM12.2185 10.6041C12.5954 10.2274 12.803 9.72651 12.803 9.19367C12.803 8.66083 12.5954 8.15981 12.2185 7.78293C11.8418 7.40605 11.3409 7.1985 10.8079 7.1985C10.275 7.1985 9.77406 7.40605 9.39734 7.78293C9.02047 8.15981 8.8129 8.66081 8.8129 9.19367C8.8129 9.72652 9.02045 10.2274 9.39736 10.6041C9.77406 10.981 10.275 11.1886 10.8079 11.1886C11.3409 11.1886 11.8418 10.981 12.2185 10.6041ZM9.44204 10.9087C9.37805 10.8575 9.31644 10.8026 9.25766 10.7438C9.19886 10.685 9.14395 10.6234 9.09277 10.5594L8.6577 10.8216L8.65772 10.8216L9.09262 10.5596C9.14381 10.6236 9.19872 10.6852 9.25751 10.744H9.25752C9.31629 10.8027 9.37791 10.8577 9.44189 10.9088L9.17995 11.3438L9.18 11.3439L9.44205 10.9087H9.44204ZM7.25673 12.4504L7.55101 12.7447C7.58889 12.7826 7.63953 12.8035 7.69361 12.8035C7.74768 12.8035 7.7983 12.7826 7.83617 12.7448L8.98434 11.5966C9.01391 11.567 9.04044 11.5381 9.06513 11.5084L8.49325 10.9365C8.46357 10.9612 8.43468 10.9877 8.40523 11.0171L7.25683 12.1652C7.17827 12.244 7.17822 12.3719 7.25673 12.4504ZM9.56602 9.22099C9.5817 9.16874 9.63672 9.13909 9.689 9.15474L9.81521 9.19258L9.99721 9.05622C10.0143 9.04342 10.0351 9.03649 10.0564 9.03649H10.2016V8.98067H10.1464C10.0918 8.98067 10.0476 8.93644 10.0476 8.8819V8.65395L9.93062 8.56773C9.88671 8.53536 9.87736 8.47353 9.90973 8.42961C9.94209 8.38571 10.0039 8.37635 10.0478 8.40873L10.205 8.52455C10.2302 8.54317 10.2451 8.57268 10.2451 8.60405V8.78313H10.4238C10.4204 8.76244 10.4185 8.74144 10.4185 8.72023C10.4185 8.60785 10.4664 8.5065 10.5428 8.43533C10.4464 8.29297 10.329 8.18129 10.1857 8.09569C10.1388 8.06772 10.1235 8.00708 10.1515 7.96025C10.1795 7.91343 10.2401 7.89814 10.2869 7.92609C10.4588 8.02876 10.6034 8.16827 10.7175 8.3414C10.7466 8.33445 10.7769 8.33066 10.8081 8.33066C10.8393 8.33066 10.8694 8.33443 10.8984 8.34135C11.0126 8.16825 11.1571 8.02876 11.3289 7.92611C11.3758 7.89815 11.4364 7.91344 11.4644 7.96027C11.4923 8.00709 11.477 8.06774 11.4302 8.0957C11.2869 8.18129 11.1695 8.29296 11.0731 8.43528C11.1495 8.50645 11.1973 8.60784 11.1973 8.72025C11.1973 8.7415 11.1955 8.76251 11.1922 8.78315H11.3708V8.60406C11.3708 8.57269 11.3857 8.54318 11.4109 8.52457L11.568 8.40874C11.6119 8.37637 11.6738 8.38573 11.7061 8.42963C11.7385 8.47353 11.7292 8.53536 11.6853 8.56774L11.5683 8.65396V8.88193C11.5683 8.93647 11.5241 8.98069 11.4695 8.98069H11.4143V9.03652H11.5595C11.5808 9.03652 11.6016 9.04344 11.6187 9.05625L11.8007 9.19261L11.9269 9.15477C11.9791 9.13911 12.0342 9.16877 12.0499 9.22101C12.0655 9.27326 12.0359 9.32831 11.9836 9.34398L11.8097 9.39613C11.8004 9.39892 11.7908 9.40029 11.7813 9.40029C11.7602 9.40029 11.7394 9.39352 11.7221 9.38056L11.5266 9.23405H11.4143V9.31108L11.6142 9.41725C11.6464 9.43439 11.6666 9.46793 11.6666 9.50447V9.84172L11.8246 9.98807C11.8647 10.0251 11.8671 10.0876 11.83 10.1276C11.8105 10.1486 11.784 10.1593 11.7575 10.1593C11.7335 10.1593 11.7094 10.1506 11.6904 10.133L11.5008 9.95731C11.4806 9.93862 11.4691 9.91236 11.4691 9.88486V9.56384L11.4143 9.53474V9.6343C11.4143 9.96875 11.1424 10.2408 10.8081 10.2408C10.4739 10.2408 10.2016 9.96875 10.2016 9.6343V9.53474L10.1468 9.56384V9.88486C10.1468 9.91236 10.1353 9.93862 10.1152 9.95731L9.9255 10.133C9.90648 10.1506 9.88242 10.1593 9.8584 10.1593C9.83185 10.1593 9.80537 10.1486 9.78591 10.1276C9.74884 10.0876 9.75124 10.0251 9.79127 9.98807L9.94929 9.84172V9.50447C9.94929 9.46794 9.96946 9.43439 10.0017 9.41725L10.2016 9.31108V9.23404H10.0893L9.89379 9.38055C9.8765 9.39351 9.85567 9.40027 9.83456 9.40027C9.82506 9.40027 9.81552 9.3989 9.8062 9.39611L9.63227 9.34397C9.58004 9.3283 9.55037 9.27324 9.56604 9.221L9.56602 9.22099ZM10.9998 8.72023C10.9998 8.61434 10.9138 8.52819 10.8081 8.52819C10.7024 8.52819 10.6161 8.61434 10.6161 8.72023C10.6161 8.74184 10.6198 8.76301 10.6268 8.78313H10.9892C10.9961 8.76316 10.9998 8.74199 10.9998 8.72023ZM10.7093 10.0312V9.36098C10.7093 9.30643 10.7536 9.26221 10.8081 9.26221C10.8626 9.26221 10.9069 9.30643 10.9069 9.36098V10.0311C11.0846 9.98681 11.2168 9.82573 11.2168 9.63429V8.98068H10.3991V9.63429C10.3991 9.82576 10.5314 9.98686 10.7093 10.0312ZM9.5376 7.92323C9.87682 7.58383 10.328 7.39693 10.808 7.39693C11.288 7.39693 11.7392 7.58383 12.0786 7.92322C12.7788 8.62378 12.7788 9.76363 12.0786 10.4642C11.7392 10.8036 11.288 10.9905 10.808 10.9905C10.328 10.9905 9.8768 10.8036 9.53762 10.4642C9.19824 10.1248 9.01133 9.67361 9.01133 9.19371C9.01133 8.7138 9.19824 8.26259 9.5376 7.92323ZM9.67731 10.3245C9.97921 10.6266 10.3808 10.7929 10.808 10.7929C11.2352 10.7929 11.6369 10.6266 11.9389 10.3245C12.5621 9.70099 12.5621 8.68641 11.9389 8.06287C11.6368 7.76085 11.2352 7.59446 10.808 7.59446C10.3808 7.59446 9.97921 7.76081 9.6773 8.06288C9.37521 8.36496 9.20886 8.76655 9.20886 9.19371C9.20886 9.62086 9.37522 10.0225 9.67731 10.3245Z", fill: "white" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_1919_99688" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 20, height: 20, fill: "white", transform: "translate(-0.000488281)" }))));
+const SvgOpenDefectsIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_2699_12939)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M16.8937 16.6281C20.4813 12.9675 20.4813 7.03249 16.8937 3.37187C13.3062 -0.28874 7.48963 -0.28874 3.90208 3.37187C0.314532 7.03249 0.314532 12.9675 3.90208 16.6281C7.48963 20.2887 13.3062 20.2887 16.8937 16.6281Z", fill: "#F64C6E" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.4558 11.5903C18.802 15.4934 15.7839 18.5728 11.9588 19.2399L7.01266 14.193C5.82907 13.1963 5.07471 11.688 5.07471 9.99986C5.07471 6.99873 7.45896 4.56592 10.4002 4.56592C12.0546 4.56592 13.5328 5.33568 14.5096 6.54334L19.4558 11.5903Z", fill: "#9C1732" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.7257 9.99986C15.7257 6.99873 13.3414 4.56592 10.4002 4.56592C7.45896 4.56592 5.07471 6.99873 5.07471 9.99986C5.07471 13.001 7.45896 15.4338 10.4002 15.4338C13.3414 15.4338 15.7257 13.001 15.7257 9.99986ZM12.9249 9.64978C12.9249 9.55787 12.9648 9.46879 13.0318 9.41147L13.4001 9.09613L13.3734 8.9905C13.3412 8.86285 13.2994 8.73668 13.2493 8.61531C13.199 8.49419 13.1393 8.37544 13.0718 8.26239L13.016 8.16883L12.534 8.20618C12.446 8.21298 12.3546 8.17811 12.2893 8.11256C12.2243 8.04761 12.1896 7.95637 12.1964 7.8685L12.2338 7.38509L12.1403 7.32926C12.0272 7.2618 11.9085 7.20211 11.7872 7.15177C11.666 7.10163 11.5398 7.05987 11.4121 7.02765L11.3065 7.00098L10.9921 7.36816C10.9348 7.4351 10.8452 7.47502 10.7524 7.47502L10.5758 7.47471V9.23258H10.7515C10.9808 9.23258 11.1674 9.41912 11.1674 9.64842C11.1674 9.87772 10.9808 10.0643 10.7515 10.0643H10.576L10.5742 11.8219L10.7502 11.8218C10.8422 11.8218 10.9312 11.8618 10.9885 11.9287L11.3038 12.297L11.4095 12.2703C11.5371 12.2381 11.6632 12.1963 11.7846 12.1461C11.9058 12.0959 12.0245 12.0362 12.1376 11.9687L12.2311 11.9129L12.1938 11.4309C12.187 11.3429 12.2219 11.2515 12.2874 11.1862C12.3524 11.1212 12.4435 11.0864 12.5315 11.0932L13.0149 11.1307L13.0707 11.0371C13.1382 10.9241 13.1979 10.8054 13.2482 10.684C13.2983 10.5628 13.3401 10.4367 13.3723 10.309L13.399 10.2034L13.0318 9.889C12.9647 9.83159 12.9248 9.74231 12.9249 9.64978ZM11.5188 9.64842C11.5188 9.28581 11.2659 8.98113 10.9272 8.90146V8.54357C11.4609 8.62813 11.8702 9.09135 11.8702 9.64842C11.8702 10.2057 11.4606 10.669 10.9267 10.7534L10.9271 10.3954C11.2658 10.3158 11.5188 10.0111 11.5188 9.64842ZM12.9235 10.5496C12.8934 10.6221 12.8594 10.6937 12.822 10.7633L12.5586 10.7429C12.3668 10.728 12.1774 10.7991 12.0391 10.9376C11.8998 11.0763 11.8285 11.266 11.8434 11.4581L11.8637 11.7201C11.7941 11.7575 11.7225 11.7914 11.6501 11.8215C11.5776 11.8515 11.5029 11.8781 11.4273 11.9008L11.2554 11.7001C11.1687 11.5989 11.0537 11.5276 10.9259 11.4934L10.9263 11.1081C11.6548 11.0214 12.2216 10.3999 12.2216 9.64842C12.2216 8.89727 11.6553 8.27598 10.9272 8.18886V7.80386C11.0561 7.76983 11.172 7.69838 11.2591 7.59671L11.4299 7.39711C11.5056 7.4199 11.5802 7.44645 11.6527 7.47641C11.7252 7.5065 11.7967 7.54049 11.8664 7.57789L11.846 7.84134C11.8311 8.03306 11.9022 8.22252 12.0406 8.36087C12.1794 8.50012 12.3691 8.57147 12.5612 8.55654L12.8232 8.53624C12.8606 8.60589 12.8945 8.67741 12.9246 8.7498C12.9546 8.82235 12.9811 8.89698 13.0039 8.97269L12.8032 9.14454C12.6571 9.26959 12.5734 9.45381 12.5735 9.64955C12.5731 9.8461 12.6569 10.0307 12.8032 10.156L13.0028 10.3269C12.98 10.4025 12.9535 10.4771 12.9235 10.5496ZM9.63312 10.351C9.63312 10.1217 9.81966 9.93512 10.049 9.93512H10.2247V8.1775L10.0489 8.17756C9.95646 8.17756 9.87016 8.13861 9.81201 8.0707L9.49667 7.70239L9.39104 7.72907C9.26342 7.76128 9.13725 7.80304 9.01585 7.85324C8.8947 7.90351 8.77596 7.9632 8.66292 8.03066L8.56936 8.0865L8.6067 8.56846C8.61352 8.65649 8.57864 8.74787 8.51309 8.81318C8.44813 8.87819 8.35696 8.91292 8.26901 8.90614L7.7856 8.86868L7.72976 8.96224C7.6623 9.07528 7.60262 9.19402 7.55229 9.31536C7.50216 9.43655 7.46041 9.56272 7.42818 9.69035L7.4015 9.79599L7.76871 10.1104C7.83577 10.1678 7.87572 10.2571 7.87556 10.3496C7.87559 10.4415 7.83565 10.5306 7.7687 10.5879L7.40039 10.9033L7.42706 11.0089C7.4593 11.1365 7.50106 11.2627 7.55125 11.3841C7.60151 11.5052 7.66119 11.6239 7.72866 11.737L7.78449 11.8306L8.26646 11.7932C8.35447 11.7864 8.44587 11.8213 8.51118 11.8868C8.57619 11.9518 8.61094 12.043 8.60413 12.1309L8.56667 12.6143L8.66023 12.6701C8.77326 12.7376 8.89201 12.7973 9.01334 12.8476C9.13455 12.8977 9.26072 12.9395 9.38835 12.9717L9.49399 12.9984L9.80837 12.6312C9.86568 12.5643 9.95473 12.5244 10.0467 12.5244L10.2231 12.5247L10.2249 10.7668H10.049C9.81967 10.7668 9.63312 10.5803 9.63312 10.351ZM9.2817 10.351C9.2817 10.7135 9.53451 11.0182 9.87309 11.0979L9.87272 11.4557C9.33932 11.3709 8.93028 10.9078 8.93028 10.351C8.93028 9.79389 9.33959 9.33068 9.87325 9.24611V9.604C9.5346 9.68365 9.2817 9.98833 9.2817 10.351ZM9.54142 12.4027L9.37052 12.6023C9.29484 12.5795 9.22026 12.5529 9.14782 12.523C9.07529 12.4929 9.00373 12.4589 8.93407 12.4215L8.95449 12.158C8.96936 11.9663 8.89831 11.7769 8.75984 11.6385C8.62111 11.4993 8.43138 11.428 8.23931 11.4428L7.97731 11.4631C7.93991 11.3935 7.90595 11.322 7.87592 11.2496C7.84591 11.177 7.81934 11.1024 7.79653 11.0267L7.99725 10.8548C8.14332 10.7298 8.22706 10.5456 8.22697 10.3498C8.22732 10.1533 8.14359 9.9687 7.99726 9.84342L7.79766 9.67251C7.82045 9.59684 7.84701 9.52225 7.87697 9.44981C7.90707 9.37728 7.94105 9.30572 7.97845 9.23606L8.2419 9.25648C8.43362 9.27135 8.62308 9.20028 8.76143 9.06182C8.90067 8.92309 8.97198 8.73336 8.9571 8.54129L8.9368 8.27929C9.00643 8.2419 9.07796 8.20793 9.15035 8.1779C9.22293 8.14789 9.29756 8.12132 9.37324 8.09852L9.5451 8.29924C9.63163 8.40031 9.7462 8.47153 9.87327 8.50579V8.89138C9.14519 8.9785 8.57888 9.59978 8.57888 10.3509C8.57888 11.1018 9.14474 11.7229 9.87238 11.8104L9.872 12.1957C9.7438 12.2298 9.62835 12.3011 9.54142 12.4027ZM10.225 7.29932H9.87354V7.65073H10.225V7.29932ZM9.17041 7.00098H9.52183V7.3524H9.17041V7.00098ZM10.9276 12.3489H10.5762V12.7003H10.9276V12.3489ZM11.2788 12.647H11.6302V12.9984H11.2788V12.647Z", fill: "white" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_2699_12939" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 19.6008, height: 20, fill: "white", transform: "translate(0.599609)" }))));
+const SvgCloseDefectsIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_2699_12924)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M16.4538 16.6281C20.0413 12.9675 20.0413 7.03249 16.4538 3.37187C12.8662 -0.28874 7.04968 -0.28874 3.46214 3.37187C-0.12541 7.03249 -0.12541 12.9675 3.46214 16.6281C7.04968 20.2887 12.8662 20.2887 16.4538 16.6281Z", fill: "#46CC6B" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.0159 11.5903C18.3621 15.4934 15.344 18.5728 11.5189 19.2399L6.57272 14.193C5.38913 13.1963 4.63477 11.688 4.63477 9.99986C4.63477 6.99873 7.01902 4.56592 9.96025 4.56592C11.6147 4.56592 13.0929 5.33568 14.0697 6.54334L19.0159 11.5903Z", fill: "#179C5F" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.2857 9.99986C15.2857 6.99873 12.9015 4.56592 9.96025 4.56592C7.01902 4.56592 4.63477 6.99873 4.63477 9.99986C4.63477 13.001 7.01902 15.4338 9.96025 15.4338C12.9015 15.4338 15.2857 13.001 15.2857 9.99986ZM9.07719 6.65167H9.42861V7.00309H9.07719V6.65167ZM10.1317 6.95001H9.78032V7.30143H10.1317V6.95001ZM12.1381 9.99945C12.1381 9.90754 12.1781 9.81846 12.245 9.76114L12.6133 9.4458L12.5867 9.34016C12.5544 9.21252 12.5127 9.08635 12.4625 8.96498C12.4122 8.84386 12.3525 8.72511 12.2851 8.61206L12.2292 8.5185L11.7473 8.55584C11.6592 8.56265 11.5678 8.52778 11.5025 8.46223C11.4375 8.39727 11.4028 8.30603 11.4096 8.21817L11.447 7.73476L11.3535 7.67893C11.2405 7.61147 11.1217 7.55177 11.0004 7.50144C10.8792 7.4513 10.753 7.40954 10.6254 7.37732L10.5197 7.35064L10.2053 7.71783C10.148 7.78476 10.0584 7.82468 9.96562 7.82468L9.90689 7.82458C9.83332 7.81342 9.76656 7.77718 9.71879 7.7214L9.40345 7.35309L9.29782 7.37976C9.17021 7.41197 9.04404 7.45373 8.92263 7.50394C8.80149 7.5542 8.68274 7.6139 8.5697 7.68136L8.47614 7.7372L8.51349 8.21916C8.52031 8.30719 8.48542 8.39857 8.41987 8.46387C8.35492 8.52888 8.26375 8.56362 8.1758 8.55683L7.69239 8.51937L7.63655 8.61293C7.56909 8.72597 7.5094 8.84472 7.45907 8.96605C7.40894 9.08724 7.3672 9.21341 7.33496 9.34105L7.30829 9.44668L7.6755 9.76107C7.74256 9.8185 7.7825 9.90778 7.78234 10.0003C7.78237 10.0922 7.74243 10.1813 7.67548 10.2386L7.30717 10.5539L7.33385 10.6596C7.36608 10.7872 7.40784 10.9134 7.45804 11.0348C7.50829 11.1559 7.56797 11.2746 7.63545 11.3877L7.69127 11.4812L8.17324 11.4439C8.26125 11.4371 8.35265 11.472 8.41796 11.5375C8.48297 11.6025 8.51773 11.6937 8.51091 11.7816L8.47345 12.265L8.56701 12.3208C8.68005 12.3883 8.79879 12.448 8.92013 12.4983C9.04133 12.5484 9.1675 12.5902 9.29514 12.6224L9.40077 12.6491L9.71515 12.2819C9.77247 12.215 9.86152 12.175 9.95345 12.175L10.0116 12.1751C10.0858 12.1864 10.1545 12.2232 10.2017 12.2783L10.517 12.6467L10.6227 12.62C10.7503 12.5878 10.8765 12.546 10.9979 12.4958C11.119 12.4455 11.2377 12.3858 11.3508 12.3184L11.4443 12.2625L11.407 11.7806C11.4002 11.6926 11.4351 11.6012 11.5006 11.5359C11.5656 11.4709 11.6567 11.4361 11.7447 11.4429L12.2281 11.4804L12.2839 11.3868C12.3514 11.2738 12.4111 11.155 12.4614 11.0337C12.5115 10.9125 12.5533 10.7863 12.5855 10.6587L12.6122 10.5531L12.245 10.2387C12.1779 10.1813 12.138 10.092 12.1381 9.99945ZM10.3806 9.99809C10.3806 9.78728 10.2229 9.61262 10.0193 9.58581H9.95574C9.72644 9.58581 9.5399 9.77235 9.5399 10.0017C9.5399 10.2125 9.69761 10.3872 9.90125 10.4139H9.96473C10.194 10.4139 10.3806 10.2274 10.3806 9.99809ZM10.732 9.99809C10.732 9.63547 10.4791 9.33079 10.1404 9.25113V8.89324C10.6741 8.97779 11.0834 9.44102 11.0834 9.99809C11.0834 10.5553 10.6738 11.0187 10.1399 11.103L10.1403 10.7451C10.4791 10.6655 10.732 10.3608 10.732 9.99809ZM12.1367 10.8992C12.1066 10.9718 12.0727 11.0433 12.0353 11.113L11.7718 11.0926C11.58 11.0777 11.3906 11.1487 11.2523 11.2872C11.113 11.4259 11.0417 11.6157 11.0566 11.8078L11.0769 12.0697C11.0073 12.1071 10.9357 12.1411 10.8634 12.1711C10.7908 12.2012 10.7161 12.2277 10.6405 12.2505L10.4686 12.0498C10.3819 11.9486 10.2669 11.8773 10.1392 11.8431L10.1395 11.4578C10.868 11.371 11.4348 10.7496 11.4348 9.99809C11.4348 9.24693 10.8685 8.62565 10.1404 8.53853V8.15353C10.2693 8.1195 10.3852 8.04805 10.4723 7.94638L10.6432 7.74677C10.7188 7.76957 10.7934 7.79611 10.8659 7.82608C10.9384 7.85617 11.01 7.89015 11.0796 7.92756L11.0592 8.191C11.0443 8.38272 11.1154 8.57219 11.2538 8.71054C11.3926 8.84978 11.5823 8.92113 11.7744 8.90621L12.0364 8.88591C12.0738 8.95556 12.1077 9.02707 12.1378 9.09947C12.1678 9.17202 12.1943 9.24665 12.2171 9.32236L12.0164 9.4942C11.8704 9.61926 11.7866 9.80347 11.7867 9.99921C11.7864 10.1958 11.8701 10.3804 12.0164 10.5056L12.216 10.6765C12.1933 10.7522 12.1667 10.8268 12.1367 10.8992ZM9.18848 10.0017C9.18848 10.3642 9.44129 10.6689 9.77987 10.7486L9.77951 11.1064C9.2461 11.0216 8.83706 10.5585 8.83706 10.0017C8.83706 9.44459 9.24637 8.98137 9.78003 8.89681V9.25469C9.44138 9.33435 9.18848 9.63903 9.18848 10.0017ZM9.4482 12.0534L9.27731 12.253C9.20162 12.2302 9.12704 12.2036 9.0546 12.1737C8.98207 12.1436 8.91051 12.1096 8.84086 12.0722L8.86127 11.8087C8.87614 11.617 8.80509 11.4276 8.66662 11.2892C8.5279 11.15 8.33816 11.0787 8.14609 11.0935L7.8841 11.1138C7.84669 11.0442 7.81274 10.9727 7.7827 10.9003C7.75269 10.8277 7.72612 10.7531 7.70332 10.6774L7.90403 10.5055C8.05011 10.3805 8.13384 10.1963 8.13376 10.0005C8.13411 9.80398 8.05038 9.61939 7.90405 9.49411L7.70444 9.32321C7.72724 9.24753 7.75379 9.17294 7.78376 9.1005C7.81385 9.02797 7.84783 8.95641 7.88523 8.88676L8.14868 8.90717C8.3404 8.92204 8.52986 8.85097 8.66822 8.71251C8.80745 8.57378 8.87876 8.38405 8.86389 8.19198L8.84359 7.92999C8.91321 7.89259 8.98474 7.85862 9.05713 7.82859C9.12971 7.79858 9.20434 7.77201 9.28002 7.74922L9.45188 7.94993C9.53841 8.051 9.65298 8.12222 9.78006 8.15649V8.54207C9.05198 8.62919 8.48567 9.25047 8.48567 10.0016C8.48567 10.7525 9.05152 11.3736 9.77917 11.4611L9.77878 11.8463C9.65058 11.8805 9.53513 11.9518 9.4482 12.0534ZM10.1408 12.6985H9.78938V13.05H10.1408V12.6985ZM10.492 12.9966H10.8434V13.3481H10.492V12.9966Z", fill: "white" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_2699_12924" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 19.6008, height: 20, fill: "white", transform: "translate(0.159668)" }))));
+const SvgQualityScoreIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 21 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_2699_12934)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M16.8537 16.6281C20.4412 12.9675 20.4412 7.03249 16.8537 3.37187C13.2661 -0.28874 7.44959 -0.28874 3.86204 3.37187C0.274492 7.03249 0.274492 12.9675 3.86204 16.6281C7.44959 20.2887 13.2661 20.2887 16.8537 16.6281Z", fill: "#FFC38B" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.4158 11.4833C18.762 15.3864 15.7439 18.4659 11.9188 19.133L6.97262 14.0861C5.78903 13.0894 5.03467 11.5811 5.03467 9.89293C5.03467 6.8918 7.41892 4.45898 10.3602 4.45898C12.0146 4.45898 13.4928 5.22875 14.4696 6.43641L19.4158 11.4833Z", fill: "#E2750F" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.3602 4.45898C13.3014 4.45898 15.6856 6.8918 15.6856 9.89293C15.6856 12.8941 13.3014 15.3269 10.3602 15.3269C7.41892 15.3269 5.03467 12.8941 5.03467 9.89293C5.03467 6.8918 7.41892 4.45898 10.3602 4.45898ZM8.49928 7.73264H8.96833L9.05285 7.48502H8.36952L7.45166 8.8243H7.75166L8.49928 7.73264ZM9.72904 12.3981L7.45166 9.07192H8.5969L9.72904 12.3981ZM11.8624 8.8243L11.4064 7.48502H9.31357L8.85761 8.8243H11.8624ZM10.36 13.485L8.85761 9.07192H11.8624L10.36 13.485ZM12.2207 7.73264L12.9683 8.8243H13.2683L12.3505 7.48502H11.6671L11.7517 7.73264H12.2207ZM10.9909 12.3981L12.1231 9.07192H13.2683L10.9909 12.3981Z", fill: "white" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_2699_12934" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 19.6008, height: 20, fill: "white", transform: "translate(0.55957)" }))));
+const SvgDefectDensityIcon = (props) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React__namespace.createElement("g", { clipPath: "url(#clip0_2699_12904)" }, /* @__PURE__ */ React__namespace.createElement("path", { d: "M16.6535 16.6281C20.241 12.9675 20.241 7.03249 16.6535 3.37187C13.066 -0.28874 7.24939 -0.28874 3.66184 3.37187C0.0742969 7.03249 0.0742969 12.9675 3.66184 16.6281C7.24939 20.2887 13.066 20.2887 16.6535 16.6281Z", fill: "#ADE780" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.2156 11.5903C18.5618 15.4934 15.5437 18.5728 11.7186 19.2399L6.77243 14.193C5.58884 13.1963 4.83447 11.688 4.83447 9.99986C4.83447 6.99873 7.21873 4.56592 10.16 4.56592C11.8144 4.56592 13.2926 5.33568 14.2694 6.54334L19.2156 11.5903Z", fill: "#5DC70C" }), /* @__PURE__ */ React__namespace.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.4854 9.99986C15.4854 6.99873 13.1012 4.56592 10.16 4.56592C7.21873 4.56592 4.83447 6.99873 4.83447 9.99986C4.83447 13.001 7.21873 15.4338 10.16 15.4338C13.1012 15.4338 15.4854 13.001 15.4854 9.99986ZM12.7113 11.158L13.5239 11.6271C13.6545 11.7025 13.6992 11.8694 13.6238 12C13.5733 12.0876 13.4815 12.1365 13.3872 12.1365C13.3409 12.1365 13.2939 12.1248 13.2509 12.0999L12.4382 11.6307L12.4307 12.4485C12.4293 12.5984 12.3073 12.7189 12.1577 12.7189L12.1552 12.7189C12.0044 12.7175 11.8833 12.5942 11.8847 12.4434L11.8951 11.3171L10.4327 10.4728V12.1614L11.4132 12.7156C11.5444 12.7897 11.5907 12.9563 11.5165 13.0876C11.4663 13.1764 11.3738 13.2263 11.2786 13.2263C11.2331 13.2263 11.187 13.2149 11.1445 13.1909L10.4327 12.7886V13.727C10.4327 13.8778 10.3105 14 10.1597 14C10.0089 14 9.88669 13.8778 9.88669 13.727V12.7886L9.17485 13.1909C9.13241 13.2149 9.08625 13.2263 9.04075 13.2263C8.94553 13.2263 8.85304 13.1764 8.80284 13.0876C8.72866 12.9563 8.77493 12.7897 8.90618 12.7156L9.88665 12.1614V10.4728L8.42418 11.3171L8.43433 12.4434C8.43572 12.5942 8.31458 12.7175 8.16381 12.7189L8.1613 12.7189C8.01169 12.7189 7.88972 12.5983 7.88837 12.4483L7.88098 11.6307L7.06843 12.0999C7.02544 12.1247 6.97848 12.1365 6.93218 12.1365C6.83783 12.1365 6.74607 12.0876 6.69551 12C6.62013 11.8694 6.66486 11.7024 6.79543 11.6271L7.60798 11.1579L6.90372 10.7427C6.77384 10.6661 6.73064 10.4988 6.80722 10.3689C6.88381 10.239 7.05125 10.1958 7.18105 10.2724L8.15118 10.8445L9.61372 10.0001L8.15143 9.1558L7.18105 9.72767C7.13751 9.7533 7.08979 9.76549 7.04269 9.76549C6.94918 9.76549 6.85815 9.71745 6.80722 9.63107C6.73067 9.50116 6.77392 9.33379 6.90379 9.25724L7.60816 8.8421L6.79546 8.37287C6.6649 8.29749 6.62016 8.13052 6.69555 7.99995C6.77093 7.86939 6.9379 7.82462 7.06846 7.90004L7.88102 8.36919L7.88841 7.55165C7.88975 7.40169 8.01173 7.28109 8.16133 7.28109H8.16384C8.31461 7.28244 8.43575 7.40576 8.43437 7.55653L8.42421 8.68278L9.88665 9.52715V7.83859L8.90618 7.28444C8.77493 7.21026 8.72866 7.04369 8.80284 6.91244C8.87706 6.78114 9.04352 6.73488 9.17485 6.8091L9.88669 7.21139V6.273C9.88669 6.12223 10.0089 6 10.1597 6C10.3105 6 10.4327 6.12223 10.4327 6.273V7.21139L11.1445 6.80906C11.2758 6.73484 11.4423 6.78114 11.5165 6.9124C11.5907 7.04369 11.5444 7.21022 11.4132 7.28441L10.4327 7.83856V9.52715L11.8951 8.68278L11.885 7.55653C11.8836 7.40576 12.0047 7.28244 12.1555 7.28109C12.3059 7.27902 12.4296 7.40085 12.4309 7.55162L12.4383 8.36919L13.2509 7.90004C13.3814 7.82462 13.5484 7.86935 13.6238 7.99995C13.6992 8.13052 13.6544 8.29749 13.5239 8.37287L12.7111 8.8421L13.4154 9.25717C13.5453 9.33376 13.5885 9.50112 13.512 9.631C13.461 9.71737 13.37 9.76542 13.2765 9.76542C13.2294 9.76542 13.1817 9.75326 13.1382 9.7276L12.1679 9.15572L10.7056 9.99998L12.1682 10.8444L13.1381 10.2724C13.2681 10.1959 13.4354 10.2391 13.512 10.3689C13.5886 10.4988 13.5453 10.6662 13.4155 10.7428L12.7113 11.158Z", fill: "white" })), /* @__PURE__ */ React__namespace.createElement("defs", null, /* @__PURE__ */ React__namespace.createElement("clipPath", { id: "clip0_2699_12904" }, /* @__PURE__ */ React__namespace.createElement("rect", { width: 19.6008, height: 20, fill: "white", transform: "translate(0.359375)" }))));
 let Components = {};
 Components['success'] = SvgSuccess;
 Components['alert'] = SvgAlert;
@@ -992,6 +1004,12 @@ Components['jira_colored'] = SvgJiraColored;
 Components['screenshot'] = SvgScreenshot;
 Components['delete_filled'] = SvgDeleteFilled;
 Components['primary_calendar_icon'] = SvgPrimaryCalendarIcon;
+Components['sause_lab_icon'] = SvgSauseLabIcon;
+Components['total_defects_status_icon'] = SvgTotalDefectsStatusIcon;
+Components['open_defects_status_icon'] = SvgOpenDefectsIcon;
+Components['closed_defects_status_icon'] = SvgCloseDefectsIcon;
+Components['quality_score_status_icon'] = SvgQualityScoreIcon;
+Components['defect_density_status_icon'] = SvgDefectDensityIcon;
 var css_248z$1i = ".ff-icon-container {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 4px;\n  box-sizing: content-box;\n}\n.ff-icon-container.ff-icon-danger:hover {\n  background-color: var(--ff-icon-color-danger-variant);\n}\n.ff-icon-container.ff-icon-dark {\n  background-color: var(--brand-color);\n  border-radius: 4px;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover {\n  background-color: white;\n}\n.ff-icon-container.ff-icon-dark.ff-icon-click:hover svg path {\n  fill: var(--brand-color);\n}\n\n.ff-icon-click {\n  cursor: pointer;\n  box-sizing: content-box;\n}\n.ff-icon-click:hover {\n  border-radius: 4px;\n  background-color: var(--ff-icon-hover-fill-color);\n}\n.ff-icon-click:hover > svg {\n  color: var(--brand-color);\n}\n\n.ff-icon-disabled {\n  cursor: no-drop;\n}\n.ff-icon-disabled > svg {\n  color: var(--toggle-strip-color);\n}\n.ff-icon-disabled:hover {\n  box-shadow: none;\n}\n.ff-icon-disabled:hover > svg {\n  color: var(--toggle-strip-color);\n}";
 styleInject(css_248z$1i);
@@ -1188,7 +1206,7 @@ function useEscapeKey(key) {
   };
 }
-var css_248z$1f = ":root {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #71347b;\n  --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n  --text-color: #1e161f;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #71347b;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #71347b;\n  --border-color: #f0e7f4;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-comment-input-border-color: #71347b;\n  --ff-comment-avatar-text-color: #ffffff;\n  --ff-comment-border-color: #d9d9d9;\n  --ff-comment-text-color: #727272;\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n  --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --nlp-border-color: #efefef;\n  --nlp-input-placeholder-color: #9a90a1;\n  --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n  --nlp-color: #592f7c;\n  --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n  --nlp-pe-color: #2e9ee8;\n  --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n  --nlp-step-group-color: #ee670d;\n  --nlp-hover-color: #f7ebff;\n  --nlp-button-color: #efe1f9;\n  --nlp-option-color: #3c3838;\n  --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expires_soon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-machine-input-field-border-color: #a3a3a3;\n  --ff-machine-input-field-label-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-avatar-background-color: #71347b;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-running-status-color: #2055de;\n  --ff-machine-active-status-color: #4caf50;\n  --ff-progress-bar-bg-color: #f0f0f0;\n  --ff-machine-partial-public-status-color: #ea850e;\n  --excel-sheet-button-color: #e9b5ff;\n  --excel-sheet-border: rgba(10, 13, 39, 0.1647058824);\n  --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n  --excel-header-bg: #f4ecf8;\n  --excel-header-border: #d8d4da;\n  --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n  --excel-sheet-header-background-color: #f3f0f5;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n  --dynamic-card-border-color: #eeeaf2;\n  --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n  --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n  --table-with-accordion-icon-color: #1e161f;\n  --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n  --follow-user-icon-red: #922B3E;\n  --follow-user-icon-orange: #ED760E;\n  --follow-user-icon-black: #0A0A0A;\n  --follow-user-icon-pink: #E63244;\n  --follow-user-icon-blue: #3B83BD;\n  --follow-user-icon-navy: #20214F;\n  --follow-user-icon-lightGreen: #BDECB6;\n  --follow-user-icon-gray: #D9D9D9;\n  --follow-user-icon-yellow: #CDA434;\n  --follow-user-icon-salmon: #D36E70;\n  --dataset-tooltip-title: #808080;\n  --dataset-tooltip-value: #ffffff;\n}\n\n:root {\n  --base-bg-color: #1e1a22;\n  --brand-color: #71347b;\n  --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n  --text-color: #e8e0e9;\n  --description-text: #d9d9d9;\n  --click-able-text-color: #e8e0e9;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #e8e0e9;\n  --border-color: #333234;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n  --slider-table-color: #272428;\n  --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n  --drawer-footer-border: #333234;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #2a2a2a;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active-color: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(18, 18, 18, 0.6);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n  --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n  --secondary-button-text-color: #71347b;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n  --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --default-icon-color: #a3a3a3;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n  --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n  --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n  --file-details-bg: #0d0d0d;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n  --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --ff-progress-bar-bg-color: #f0f0f0;\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --nlp-border-color: #efefef;\n  --nlp-input-placeholder-color: #9a90a1;\n  --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n  --nlp-color: #592f7c;\n  --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n  --nlp-pe-color: #2e9ee8;\n  --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n  --nlp-step-group-color: #ee670d;\n  --nlp-hover-color: #f7ebff;\n  --nlp-button-color: #efe1f9;\n  --nlp-option-color: #3c3838;\n  --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --license_expires_soon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --pie-chart-border-color: #b6b6b6;\n  --button-bg-color: #f6ebff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-icon-color-dark-variant: #ffffff;\n  --avatar-background-color: #71347b;\n  --avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #333234;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --excel-sheet-button-color: #e9b5ff;\n  --excel-sheet-border: rgba(207, 209, 226, 0.4431372549);\n  --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n  --excel-header-bg: #f4ecf8;\n  --excel-header-border: #d8d4da;\n  --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n  --excel-sheet-header-background-color: #f3f0f5;\n  --icon-hover-color: #f7ecf8;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-comment-input-border-color: #71347b;\n  --ff-comment-avatar-text-color: #ffffff;\n  --ff-comment-border-color: #d9d9d9;\n  --ff-comment-text-color: #727272;\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-search-field-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-active-status-color: #4caf50;\n  --ff-machine-running-status-color: #2055de;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n  --dynamic-card-border-color: #eeeaf2;\n  --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n  --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n  --table-with-accordion-icon-color: #1e161f;\n  --ff-machine-input-field-border-color: #a3a3a3;\n  --ff-machine-input-field-label-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n  --follow-user-icon-red: #922B3E;\n  --follow-user-icon-orange: #ED760E;\n  --follow-user-icon-black: #0A0A0A;\n  --follow-user-icon-pink: #E63244;\n  --follow-user-icon-blue: #3B83BD;\n  --follow-user-icon-navy: #20214F;\n  --follow-user-icon-lightGreen: #BDECB6;\n  --follow-user-icon-gray: #D9D9D9;\n  --follow-user-icon-yellow: #CDA434;\n  --follow-user-icon-salmon: #D36E70;\n  --dataset-tooltip-title: #808080;\n  --dataset-tooltip-value: #ffffff;\n}\n\n:root {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #434db8;\n  --text-color: #3c3838;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #434db8;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #434db8;\n  --border-color: #c2d2fb;\n  --disable-color: rgba(67, 77, 184, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: #e9ebfb;\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #434db8;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #434db8;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #434db8;\n  --primary-button-color: linear-gradient(188.79deg, #434db8 2.94%, #434db8 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #434db8 3.49%, #434db8 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #434db8 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #434db8 3.04%, #434db8 100%);\n  --secondary-button-color-text: #6f7070;\n  --secondary-button-border: #6f7070;\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #1e161f;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(67, 77, 184, 0.1019607843);\n  --file-dropzone-selected-color: rgba(67, 77, 184, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-comment-input-border-color: #434db8;\n  --ff-comment-avatar-text-color: #ffffff;\n  --ff-comment-border-color: #d9d9d9;\n  --ff-comment-text-color: #727272;\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #434db8;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #ffffff;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #434db8;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #434db8;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #434db8;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #fcce46;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #808080;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #434db8;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #434db8;\n  --ff-search-field-hover-color: #edecf8;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #434db8;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expires_soon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #434db8;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #1e161f;\n  --ff-machine-input-field-border-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #434db8;\n  --ff-connecting-branch-modal-header: #434db8;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #434db8 0%, #434db8 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #434db8;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #edecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-avatar-background-color: #434db8;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-running-status-color: #2055de;\n  --ff-machine-active-status-color: #4caf50;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #434db8 0%, #9c1ebb 100%);\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n  --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n  --table-with-accordion-icon-color: #1e161f;\n  --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n  --follow-user-icon-red: #922B3E;\n  --follow-user-icon-orange: #ED760E;\n  --follow-user-icon-black: #0A0A0A;\n  --follow-user-icon-pink: #E63244;\n  --follow-user-icon-blue: #3B83BD;\n  --follow-user-icon-navy: #20214F;\n  --follow-user-icon-lightGreen: #BDECB6;\n  --follow-user-icon-gray: #D9D9D9;\n  --follow-user-icon-yellow: #CDA434;\n  --follow-user-icon-salmon: #D36E70;\n}\n\n.ff-light-theme {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #71347b;\n  --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n  --text-color: #1e161f;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #71347b;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #71347b;\n  --border-color: #f0e7f4;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-comment-input-border-color: #71347b;\n  --ff-comment-avatar-text-color: #ffffff;\n  --ff-comment-border-color: #d9d9d9;\n  --ff-comment-text-color: #727272;\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n  --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --nlp-border-color: #efefef;\n  --nlp-input-placeholder-color: #9a90a1;\n  --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n  --nlp-color: #592f7c;\n  --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n  --nlp-pe-color: #2e9ee8;\n  --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n  --nlp-step-group-color: #ee670d;\n  --nlp-hover-color: #f7ebff;\n  --nlp-button-color: #efe1f9;\n  --nlp-option-color: #3c3838;\n  --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expires_soon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-machine-input-field-border-color: #a3a3a3;\n  --ff-machine-input-field-label-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-avatar-background-color: #71347b;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-running-status-color: #2055de;\n  --ff-machine-active-status-color: #4caf50;\n  --ff-progress-bar-bg-color: #f0f0f0;\n  --ff-machine-partial-public-status-color: #ea850e;\n  --excel-sheet-button-color: #e9b5ff;\n  --excel-sheet-border: rgba(10, 13, 39, 0.1647058824);\n  --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n  --excel-header-bg: #f4ecf8;\n  --excel-header-border: #d8d4da;\n  --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n  --excel-sheet-header-background-color: #f3f0f5;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n  --dynamic-card-border-color: #eeeaf2;\n  --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n  --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n  --table-with-accordion-icon-color: #1e161f;\n  --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n  --follow-user-icon-red: #922B3E;\n  --follow-user-icon-orange: #ED760E;\n  --follow-user-icon-black: #0A0A0A;\n  --follow-user-icon-pink: #E63244;\n  --follow-user-icon-blue: #3B83BD;\n  --follow-user-icon-navy: #20214F;\n  --follow-user-icon-lightGreen: #BDECB6;\n  --follow-user-icon-gray: #D9D9D9;\n  --follow-user-icon-yellow: #CDA434;\n  --follow-user-icon-salmon: #D36E70;\n  --dataset-tooltip-title: #808080;\n  --dataset-tooltip-value: #ffffff;\n}\n\n.ff-dark-theme {\n  --base-bg-color: #1e1a22;\n  --brand-color: #71347b;\n  --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n  --text-color: #e8e0e9;\n  --description-text: #d9d9d9;\n  --click-able-text-color: #e8e0e9;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #e8e0e9;\n  --border-color: #333234;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n  --slider-table-color: #272428;\n  --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n  --drawer-footer-border: #333234;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #2a2a2a;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active-color: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(18, 18, 18, 0.6);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n  --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n  --secondary-button-text-color: #71347b;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n  --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --default-icon-color: #a3a3a3;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n  --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n  --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n  --file-details-bg: #0d0d0d;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n  --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --ff-progress-bar-bg-color: #f0f0f0;\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --nlp-border-color: #efefef;\n  --nlp-input-placeholder-color: #9a90a1;\n  --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n  --nlp-color: #592f7c;\n  --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n  --nlp-pe-color: #2e9ee8;\n  --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n  --nlp-step-group-color: #ee670d;\n  --nlp-hover-color: #f7ebff;\n  --nlp-button-color: #efe1f9;\n  --nlp-option-color: #3c3838;\n  --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --license_expires_soon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --pie-chart-border-color: #b6b6b6;\n  --button-bg-color: #f6ebff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-icon-color-dark-variant: #ffffff;\n  --avatar-background-color: #71347b;\n  --avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #333234;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --excel-sheet-button-color: #e9b5ff;\n  --excel-sheet-border: rgba(207, 209, 226, 0.4431372549);\n  --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n  --excel-header-bg: #f4ecf8;\n  --excel-header-border: #d8d4da;\n  --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n  --excel-sheet-header-background-color: #f3f0f5;\n  --icon-hover-color: #f7ecf8;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-comment-input-border-color: #71347b;\n  --ff-comment-avatar-text-color: #ffffff;\n  --ff-comment-border-color: #d9d9d9;\n  --ff-comment-text-color: #727272;\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-search-field-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-active-status-color: #4caf50;\n  --ff-machine-running-status-color: #2055de;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n  --dynamic-card-border-color: #eeeaf2;\n  --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n  --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n  --table-with-accordion-icon-color: #1e161f;\n  --ff-machine-input-field-border-color: #a3a3a3;\n  --ff-machine-input-field-label-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n  --follow-user-icon-red: #922B3E;\n  --follow-user-icon-orange: #ED760E;\n  --follow-user-icon-black: #0A0A0A;\n  --follow-user-icon-pink: #E63244;\n  --follow-user-icon-blue: #3B83BD;\n  --follow-user-icon-navy: #20214F;\n  --follow-user-icon-lightGreen: #BDECB6;\n  --follow-user-icon-gray: #D9D9D9;\n  --follow-user-icon-yellow: #CDA434;\n  --follow-user-icon-salmon: #D36E70;\n  --dataset-tooltip-title: #808080;\n  --dataset-tooltip-value: #ffffff;\n}\n\n.ff-blue-theme {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #434db8;\n  --text-color: #3c3838;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #434db8;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #434db8;\n  --border-color: #c2d2fb;\n  --disable-color: rgba(67, 77, 184, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: #e9ebfb;\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #434db8;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #434db8;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #434db8;\n  --primary-button-color: linear-gradient(188.79deg, #434db8 2.94%, #434db8 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #434db8 3.49%, #434db8 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #434db8 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #434db8 3.04%, #434db8 100%);\n  --secondary-button-color-text: #6f7070;\n  --secondary-button-border: #6f7070;\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #1e161f;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(67, 77, 184, 0.1019607843);\n  --file-dropzone-selected-color: rgba(67, 77, 184, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-comment-input-border-color: #434db8;\n  --ff-comment-avatar-text-color: #ffffff;\n  --ff-comment-border-color: #d9d9d9;\n  --ff-comment-text-color: #727272;\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #434db8;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #ffffff;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #434db8;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #434db8;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #434db8;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #fcce46;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #808080;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #434db8;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #434db8;\n  --ff-search-field-hover-color: #edecf8;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #434db8;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expires_soon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #434db8;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #1e161f;\n  --ff-machine-input-field-border-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #434db8;\n  --ff-connecting-branch-modal-header: #434db8;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #434db8 0%, #434db8 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #434db8;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #edecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-avatar-background-color: #434db8;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-running-status-color: #2055de;\n  --ff-machine-active-status-color: #4caf50;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #434db8 0%, #9c1ebb 100%);\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n  --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n  --table-with-accordion-icon-color: #1e161f;\n  --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n  --follow-user-icon-red: #922B3E;\n  --follow-user-icon-orange: #ED760E;\n  --follow-user-icon-black: #0A0A0A;\n  --follow-user-icon-pink: #E63244;\n  --follow-user-icon-blue: #3B83BD;\n  --follow-user-icon-navy: #20214F;\n  --follow-user-icon-lightGreen: #BDECB6;\n  --follow-user-icon-gray: #D9D9D9;\n  --follow-user-icon-yellow: #CDA434;\n  --follow-user-icon-salmon: #D36E70;\n}";
+var css_248z$1f = ":root {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #71347b;\n  --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n  --text-color: #1e161f;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #71347b;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #71347b;\n  --border-color: #f0e7f4;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --available-memory-bg: #9f2ea1;\n  --assigned-memory-bg: linear-gradient(88.75deg, #bdb7ff 1.07%, #a8a1ff 40.23%, #7e72ff 79.4%);\n  --used-memory-bg: linear-gradient(90deg, #e0c6fd 0.13%, #c893fd 40.13%, #b264ff 80.13%);\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-comment-input-border-color: #71347b;\n  --ff-comment-avatar-text-color: #ffffff;\n  --ff-comment-border-color: #d9d9d9;\n  --ff-comment-text-color: #727272;\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n  --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --nlp-border-color: #efefef;\n  --nlp-input-placeholder-color: #9a90a1;\n  --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n  --nlp-color: #592f7c;\n  --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n  --nlp-pe-color: #2e9ee8;\n  --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n  --nlp-step-group-color: #ee670d;\n  --nlp-hover-color: #f7ebff;\n  --nlp-button-color: #efe1f9;\n  --nlp-option-color: #3c3838;\n  --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expires_soon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-machine-input-field-border-color: #a3a3a3;\n  --ff-machine-input-field-label-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-avatar-background-color: #71347b;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-running-status-color: #2055de;\n  --ff-machine-active-status-color: #4caf50;\n  --ff-progress-bar-bg-color: #f0f0f0;\n  --ff-machine-partial-public-status-color: #ea850e;\n  --excel-sheet-button-color: #e9b5ff;\n  --excel-sheet-border: rgba(10, 13, 39, 0.1647058824);\n  --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n  --excel-header-bg: #f4ecf8;\n  --excel-header-border: #d8d4da;\n  --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n  --excel-sheet-header-background-color: #f3f0f5;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n  --dynamic-card-border-color: #eeeaf2;\n  --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n  --card-total-defect-color: #71347b;\n  --card-defect-density: #5dc70c;\n  --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n  --table-with-accordion-icon-color: #1e161f;\n  --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n  --follow-user-icon-red: #922b3e;\n  --follow-user-icon-orange: #ed760e;\n  --follow-user-icon-black: #0a0a0a;\n  --follow-user-icon-pink: #e63244;\n  --follow-user-icon-blue: #3b83bd;\n  --follow-user-icon-navy: #20214f;\n  --follow-user-icon-lightGreen: #bdecb6;\n  --follow-user-icon-gray: #d9d9d9;\n  --follow-user-icon-yellow: #cda434;\n  --follow-user-icon-salmon: #d36e70;\n  --dataset-tooltip-title: #808080;\n  --dataset-tooltip-value: #ffffff;\n  --defect-trivial: #8bc34a;\n  --defect-text: #9e9e9e;\n  --defect-tweak: #ffc107;\n  --defect-minor: #ffeb3b;\n  --defect-majour: #ff9800;\n  --defect-crash: #f44336;\n  --defect-block: #d32f2f;\n  --defect-blocker: #b71c1c;\n  --defect-critical: #c2185b;\n  --defect-catastrophic: #6a1b9a;\n  --defect-serious: #7b1fa2;\n  --defect-normal: #03a9f4;\n  --defect-small-or-trivial: #4dd0e1;\n}\n\n:root {\n  --base-bg-color: #1e1a22;\n  --brand-color: #71347b;\n  --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n  --text-color: #e8e0e9;\n  --description-text: #d9d9d9;\n  --click-able-text-color: #e8e0e9;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #e8e0e9;\n  --border-color: #333234;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n  --slider-table-color: #272428;\n  --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n  --drawer-footer-border: #333234;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #2a2a2a;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active-color: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(18, 18, 18, 0.6);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --tree-connecting-lines-color: #d7b5e3;\n  --available-memory-bg: #9f2ea1;\n  --assigned-memory-bg: linear-gradient(88.75deg, #bdb7ff 1.07%, #a8a1ff 40.23%, #7e72ff 79.4%);\n  --used-memory-bg: linear-gradient(90deg, #e0c6fd 0.13%, #c893fd 40.13%, #b264ff 80.13%);\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n  --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n  --secondary-button-text-color: #71347b;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n  --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --default-icon-color: #a3a3a3;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n  --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n  --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n  --file-details-bg: #0d0d0d;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n  --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --ff-progress-bar-bg-color: #f0f0f0;\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --nlp-border-color: #efefef;\n  --nlp-input-placeholder-color: #9a90a1;\n  --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n  --nlp-color: #592f7c;\n  --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n  --nlp-pe-color: #2e9ee8;\n  --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n  --nlp-step-group-color: #ee670d;\n  --nlp-hover-color: #f7ebff;\n  --nlp-button-color: #efe1f9;\n  --nlp-option-color: #3c3838;\n  --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --license_expires_soon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --pie-chart-border-color: #b6b6b6;\n  --button-bg-color: #f6ebff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-icon-color-dark-variant: #ffffff;\n  --avatar-background-color: #71347b;\n  --avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #333234;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --excel-sheet-button-color: #e9b5ff;\n  --excel-sheet-border: rgba(207, 209, 226, 0.4431372549);\n  --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n  --excel-header-bg: #f4ecf8;\n  --excel-header-border: #d8d4da;\n  --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n  --excel-sheet-header-background-color: #f3f0f5;\n  --icon-hover-color: #f7ecf8;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-comment-input-border-color: #71347b;\n  --ff-comment-avatar-text-color: #ffffff;\n  --ff-comment-border-color: #d9d9d9;\n  --ff-comment-text-color: #727272;\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-search-field-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-active-status-color: #4caf50;\n  --ff-machine-running-status-color: #2055de;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n  --dynamic-card-border-color: #eeeaf2;\n  --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n  --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n  --table-with-accordion-icon-color: #1e161f;\n  --ff-machine-input-field-border-color: #a3a3a3;\n  --ff-machine-input-field-label-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --card-total-defect-color: #71347b;\n  --card-defect-density: #5dc70c;\n  --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n  --follow-user-icon-red: #922b3e;\n  --follow-user-icon-orange: #ed760e;\n  --follow-user-icon-black: #0a0a0a;\n  --follow-user-icon-pink: #e63244;\n  --follow-user-icon-blue: #3b83bd;\n  --follow-user-icon-navy: #20214f;\n  --follow-user-icon-lightGreen: #bdecb6;\n  --follow-user-icon-gray: #d9d9d9;\n  --follow-user-icon-yellow: #cda434;\n  --follow-user-icon-salmon: #d36e70;\n  --dataset-tooltip-title: #808080;\n  --dataset-tooltip-value: #ffffff;\n  --defect-trivial: #8bc34a;\n  --defect-text: #9e9e9e;\n  --defect-tweak: #ffc107;\n  --defect-minor: #ffeb3b;\n  --defect-majour: #ff9800;\n  --defect-crash: #f44336;\n  --defect-block: #d32f2f;\n  --defect-blocker: #b71c1c;\n  --defect-critical: #c2185b;\n  --defect-catastrophic: #6a1b9a;\n  --defect-serious: #7b1fa2;\n  --defect-normal: #03a9f4;\n  --defect-small-or-trivial: #4dd0e1;\n}\n\n:root {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #434db8;\n  --text-color: #3c3838;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #434db8;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #434db8;\n  --border-color: #c2d2fb;\n  --disable-color: rgba(67, 77, 184, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: #e9ebfb;\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #434db8;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #434db8;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #434db8;\n  --primary-button-color: linear-gradient(188.79deg, #434db8 2.94%, #434db8 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #434db8 3.49%, #434db8 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #434db8 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #434db8 3.04%, #434db8 100%);\n  --secondary-button-color-text: #6f7070;\n  --secondary-button-border: #6f7070;\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #1e161f;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(67, 77, 184, 0.1019607843);\n  --file-dropzone-selected-color: rgba(67, 77, 184, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-comment-input-border-color: #434db8;\n  --ff-comment-avatar-text-color: #ffffff;\n  --ff-comment-border-color: #d9d9d9;\n  --ff-comment-text-color: #727272;\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #434db8;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #ffffff;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #434db8;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #434db8;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #434db8;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #fcce46;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #808080;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #434db8;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #434db8;\n  --ff-search-field-hover-color: #edecf8;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #434db8;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expires_soon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #434db8;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #1e161f;\n  --ff-machine-input-field-border-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #434db8;\n  --ff-connecting-branch-modal-header: #434db8;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #434db8 0%, #434db8 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #434db8;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #edecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-avatar-background-color: #434db8;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-running-status-color: #2055de;\n  --ff-machine-active-status-color: #4caf50;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #434db8 0%, #9c1ebb 100%);\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n  --card-total-defect-color: #71347b;\n  --card-defect-density: #5dc70c;\n  --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n  --table-with-accordion-icon-color: #1e161f;\n  --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n  --follow-user-icon-red: #922B3E;\n  --follow-user-icon-orange: #ED760E;\n  --follow-user-icon-black: #0A0A0A;\n  --follow-user-icon-pink: #E63244;\n  --follow-user-icon-blue: #3B83BD;\n  --follow-user-icon-navy: #20214F;\n  --follow-user-icon-lightGreen: #BDECB6;\n  --follow-user-icon-gray: #D9D9D9;\n  --follow-user-icon-yellow: #CDA434;\n  --follow-user-icon-salmon: #D36E70;\n}\n\n.ff-light-theme {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #71347b;\n  --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n  --text-color: #1e161f;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #71347b;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #71347b;\n  --border-color: #f0e7f4;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: rgba(212, 176, 228, 0.1490196078);\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --available-memory-bg: #9f2ea1;\n  --assigned-memory-bg: linear-gradient(88.75deg, #bdb7ff 1.07%, #a8a1ff 40.23%, #7e72ff 79.4%);\n  --used-memory-bg: linear-gradient(90deg, #e0c6fd 0.13%, #c893fd 40.13%, #b264ff 80.13%);\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #d7b5e3;\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #8d3b9a 3.49%, #781f86 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #71347b 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(113, 52, 123, 0.1019607843);\n  --file-dropzone-selected-color: rgba(113, 52, 123, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-comment-input-border-color: #71347b;\n  --ff-comment-avatar-text-color: #ffffff;\n  --ff-comment-border-color: #d9d9d9;\n  --ff-comment-text-color: #727272;\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n  --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --nlp-border-color: #efefef;\n  --nlp-input-placeholder-color: #9a90a1;\n  --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n  --nlp-color: #592f7c;\n  --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n  --nlp-pe-color: #2e9ee8;\n  --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n  --nlp-step-group-color: #ee670d;\n  --nlp-hover-color: #f7ebff;\n  --nlp-button-color: #efe1f9;\n  --nlp-option-color: #3c3838;\n  --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expires_soon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-machine-input-field-border-color: #a3a3a3;\n  --ff-machine-input-field-label-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-avatar-background-color: #71347b;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-running-status-color: #2055de;\n  --ff-machine-active-status-color: #4caf50;\n  --ff-progress-bar-bg-color: #f0f0f0;\n  --ff-machine-partial-public-status-color: #ea850e;\n  --excel-sheet-button-color: #e9b5ff;\n  --excel-sheet-border: rgba(10, 13, 39, 0.1647058824);\n  --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n  --excel-header-bg: #f4ecf8;\n  --excel-header-border: #d8d4da;\n  --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n  --excel-sheet-header-background-color: #f3f0f5;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #71347b 0%, #9c1ebb 100%);\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n  --dynamic-card-border-color: #eeeaf2;\n  --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n  --card-total-defect-color: #71347b;\n  --card-defect-density: #5dc70c;\n  --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n  --table-with-accordion-icon-color: #1e161f;\n  --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n  --follow-user-icon-red: #922b3e;\n  --follow-user-icon-orange: #ed760e;\n  --follow-user-icon-black: #0a0a0a;\n  --follow-user-icon-pink: #e63244;\n  --follow-user-icon-blue: #3b83bd;\n  --follow-user-icon-navy: #20214f;\n  --follow-user-icon-lightGreen: #bdecb6;\n  --follow-user-icon-gray: #d9d9d9;\n  --follow-user-icon-yellow: #cda434;\n  --follow-user-icon-salmon: #d36e70;\n  --dataset-tooltip-title: #808080;\n  --dataset-tooltip-value: #ffffff;\n  --defect-trivial: #8bc34a;\n  --defect-text: #9e9e9e;\n  --defect-tweak: #ffc107;\n  --defect-minor: #ffeb3b;\n  --defect-majour: #ff9800;\n  --defect-crash: #f44336;\n  --defect-block: #d32f2f;\n  --defect-blocker: #b71c1c;\n  --defect-critical: #c2185b;\n  --defect-catastrophic: #6a1b9a;\n  --defect-serious: #7b1fa2;\n  --defect-normal: #03a9f4;\n  --defect-small-or-trivial: #4dd0e1;\n}\n\n.ff-dark-theme {\n  --base-bg-color: #1e1a22;\n  --brand-color: #71347b;\n  --dropdown-bg-color: rgba(113, 52, 123, 0.1529411765);\n  --text-color: #e8e0e9;\n  --description-text: #d9d9d9;\n  --click-able-text-color: #e8e0e9;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #e8e0e9;\n  --border-color: #333234;\n  --disable-color: rgba(113, 52, 123, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(18, 18, 18, 0.6);\n  --slider-table-color: #272428;\n  --drawer-footer-bg: rgba(27, 24, 28, 0.6);\n  --drawer-footer-border: #333234;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #2a2a2a;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active-color: #71347b;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(18, 18, 18, 0.6);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #71347b;\n  --tree-connecting-lines-color: #d7b5e3;\n  --available-memory-bg: #9f2ea1;\n  --assigned-memory-bg: linear-gradient(88.75deg, #bdb7ff 1.07%, #a8a1ff 40.23%, #7e72ff 79.4%);\n  --used-memory-bg: linear-gradient(90deg, #e0c6fd 0.13%, #c893fd 40.13%, #b264ff 80.13%);\n  --primary-button-color: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-hover: linear-gradient(188.79deg, #7c4685 2.94%, #582d5f 93.09%);\n  --primary-button-disable: linear-gradient(188.79deg, #71347b 2.94%, #46164d 93.09%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #46164d 3.04%, #71347b 100%);\n  --secondary-button-color-text: linear-gradient(179.06deg, #71347b 3.49%, #46164d 99.22%);\n  --secondary-button-border: linear-gradient(360deg, #46164d 0%, #71347b 100%);\n  --secondary-button-text-color: #71347b;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(113, 52, 123, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(180deg, rgba(70, 22, 77, 0.05) 0%, rgba(113, 52, 123, 0.05) 100%);\n  --tertiary-button-hover: linear-gradient(180deg, rgba(70, 22, 77, 0.1) 0%, rgba(113, 52, 123, 0.1) 100%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --drawer-title-color: #252c37;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --default-icon-color: #a3a3a3;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(130, 60, 141, 0.1019607843);\n  --file-dropzone-selected-color: rgba(130, 60, 141, 0.2);\n  --file-details-container-shadow: rgba(255, 252, 255, 0.6);\n  --file-details-bg: #0d0d0d;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #f9d5ff;\n  --ff-chips-blur-color: rgba(87, 87, 87, 0.1019607843);\n  --ff-chip-bg: rgba(255, 255, 255, 0.8980392157);\n  --ff-chip-text-color: #1e161f;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #71347b;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #71347b;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #71347b;\n  --delete-text-color: #c50303;\n  --ff-progress-bar-bg-color: #f0f0f0;\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #ffb803;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #14041c;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #71347b;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #71347b;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --nlp-border-color: #efefef;\n  --nlp-input-placeholder-color: #9a90a1;\n  --nlp-background-color: rgba(89, 47, 124, 0.0588235294);\n  --nlp-color: #592f7c;\n  --nlp-pe-background: rgba(46, 158, 232, 0.0588235294);\n  --nlp-pe-color: #2e9ee8;\n  --nlp-step-group-background: rgba(238, 103, 13, 0.0588235294);\n  --nlp-step-group-color: #ee670d;\n  --nlp-hover-color: #f7ebff;\n  --nlp-button-color: #efe1f9;\n  --nlp-option-color: #3c3838;\n  --panel-shadow: rgba(0, 0, 0, 0.1019607843);\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #71347b;\n  --disabled-primary-color: #f9f9f9;\n  --license_expires_soon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --pie-chart-border-color: #b6b6b6;\n  --button-bg-color: #f6ebff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #9c1ebb;\n  --details-page-value-color: #808080;\n  --label-edit-text-label-color: #71347b;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #592f7c 0%, #741ebb 100%);\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #200624;\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --ff-icon-hover-fill-color: #f7ecf8;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-icon-color-dark-variant: #ffffff;\n  --avatar-background-color: #71347b;\n  --avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #333234;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --excel-sheet-button-color: #e9b5ff;\n  --excel-sheet-border: rgba(207, 209, 226, 0.4431372549);\n  --excel-toolbar-bg: rgba(212, 176, 228, 0.1490196078);\n  --excel-header-bg: #f4ecf8;\n  --excel-header-border: #d8d4da;\n  --excel-toolbar-divider: rgba(87, 87, 87, 0.2);\n  --excel-sheet-header-background-color: #f3f0f5;\n  --icon-hover-color: #f7ecf8;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-comment-input-border-color: #71347b;\n  --ff-comment-avatar-text-color: #ffffff;\n  --ff-comment-border-color: #d9d9d9;\n  --ff-comment-text-color: #727272;\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-search-field-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-active-status-color: #4caf50;\n  --ff-machine-running-status-color: #2055de;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n  --dynamic-card-border-color: #eeeaf2;\n  --card-header-bg-color: rgba(89, 47, 124, 0.1019607843);\n  --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n  --table-with-accordion-icon-color: #1e161f;\n  --ff-machine-input-field-border-color: #a3a3a3;\n  --ff-machine-input-field-label-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #71347b;\n  --ff-connecting-branch-modal-header: #71347b;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --card-total-defect-color: #71347b;\n  --card-defect-density: #5dc70c;\n  --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n  --follow-user-icon-red: #922b3e;\n  --follow-user-icon-orange: #ed760e;\n  --follow-user-icon-black: #0a0a0a;\n  --follow-user-icon-pink: #e63244;\n  --follow-user-icon-blue: #3b83bd;\n  --follow-user-icon-navy: #20214f;\n  --follow-user-icon-lightGreen: #bdecb6;\n  --follow-user-icon-gray: #d9d9d9;\n  --follow-user-icon-yellow: #cda434;\n  --follow-user-icon-salmon: #d36e70;\n  --dataset-tooltip-title: #808080;\n  --dataset-tooltip-value: #ffffff;\n  --defect-trivial: #8bc34a;\n  --defect-text: #9e9e9e;\n  --defect-tweak: #ffc107;\n  --defect-minor: #ffeb3b;\n  --defect-majour: #ff9800;\n  --defect-crash: #f44336;\n  --defect-block: #d32f2f;\n  --defect-blocker: #b71c1c;\n  --defect-critical: #c2185b;\n  --defect-catastrophic: #6a1b9a;\n  --defect-serious: #7b1fa2;\n  --defect-normal: #03a9f4;\n  --defect-small-or-trivial: #4dd0e1;\n}\n\n.ff-blue-theme {\n  --base-bg-color: #ffffff;\n  --button-bg-color: #f6ebff;\n  --brand-color: #434db8;\n  --text-color: #3c3838;\n  --description-text: #7a7a7a;\n  --click-able-text-color: #434db8;\n  --custom-table-header-bg-color: #efe1f9;\n  --icons-default-color: #434db8;\n  --border-color: #c2d2fb;\n  --disable-color: rgba(67, 77, 184, 0.5019607843);\n  --hover-color: #f7ebff;\n  --pop-up-background-blur: rgba(20, 4, 28, 0.1019607843);\n  --slider-table-color: #e9ebfb;\n  --drawer-footer-bg: #ffffff;\n  --drawer-footer-border: #f0e7f4;\n  --text-bg-highlight: #f5fb00;\n  --tooltip-bg-color: #1e161f;\n  --tooltip-text-color: #ffffff;\n  --toggle-strip-color: #cfd1e2;\n  --toggle-strip-active: #434db8;\n  --toggle-strip-shadow: rgba(0, 0, 0, 0.2509803922);\n  --toggle-button-bg-color: #ffffff;\n  --toggle-disable-icon-color: #767994;\n  --text-area-default-color: #747474;\n  --add-icon-hover-color: #431b4a;\n  --arrow-button-bg-color: #ffffff;\n  --arrows-button-border-color: #ded1e5;\n  --overlay-bg: rgba(30, 22, 31, 0.1019607843);\n  --chip-fill-color: #f9d5ff;\n  --chip-text-color: #1e161f;\n  --icon-color: #434db8;\n  --default-icon-color: #a3a3a3;\n  --tree-connecting-lines-color: #434db8;\n  --primary-button-color: linear-gradient(188.79deg, #434db8 2.94%, #434db8 93.09%);\n  --primary-button-hover: linear-gradient(179.06deg, #434db8 3.49%, #434db8 99.22%);\n  --primary-button-disable: linear-gradient(180deg, #46164d 0%, #434db8 100%);\n  --primary-button-text-color: #ffffff;\n  --primary-button-border: linear-gradient(180deg, #434db8 3.04%, #434db8 100%);\n  --secondary-button-color-text: #6f7070;\n  --secondary-button-border: #6f7070;\n  --secondary-button-text-color: #46164d;\n  --secondary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-color: linear-gradient(179.06deg, rgba(67, 77, 184, 0.0509803922) 3.49%, rgba(70, 22, 77, 0.0509803922) 99.22%);\n  --tertiary-button-hover: linear-gradient(179.06deg, rgba(67, 77, 184, 0.1019607843) 3.49%, rgba(70, 22, 77, 0.1019607843) 99.22%);\n  --delete-button-color: linear-gradient(179.06deg, #e42525 3.49%, #c90000 99.22%);\n  --delete-button-border: linear-gradient(180deg, #a90707 3.04%, #e42525 100%);\n  --delete-button-hover: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --delete-button-disable: linear-gradient(179.06deg, #e95151 3.49%, #d43434 99.22%);\n  --warning-button-color: linear-gradient(179.06deg, #ffc600 3.49%, #ffc600 99.22%);\n  --warning-button-border: linear-gradient(180deg, #eeba08 3.04%, #f1bc04 100%);\n  --error: #e42525;\n  --drawer-title-color: #1e161f;\n  --toast-msg-icon-bg: linear-gradient(180deg, #079455 0%, #00693a 100%);\n  --error_light: #e42525;\n  --ff-success: #079455;\n  --ff-warning: #f79009;\n  --ff-header-text-color: #fdfaff;\n  --ff-header-submenu-text-color: #666468;\n  --ff-header-submenu-highlight-text-color: #170328;\n  --expandable-menu-default-bg: #fdfaff;\n  --expandable-menu-option-bg: rgba(97, 11, 134, 0.1019607843);\n  --file-dropzone-default-color: rgba(67, 77, 184, 0.1019607843);\n  --file-dropzone-selected-color: rgba(67, 77, 184, 0.2);\n  --file-details-container-shadow: rgba(30, 22, 31, 0.1607843137);\n  --file-details-bg: #ffffff;\n  --ff-mini-modal-border: #ffffff;\n  --ff-mini-modal-box-shadow: rgba(55, 19, 85, 0.2392156863);\n  --ff-mini-modal-arrow-shadow: rgba(0, 0, 0, 0.2509803922);\n  --ff-comment-input-border-color: #434db8;\n  --ff-comment-avatar-text-color: #ffffff;\n  --ff-comment-border-color: #d9d9d9;\n  --ff-comment-text-color: #727272;\n  --ff-error-light: #e42525;\n  --ff-chips-fill-color: #434db8;\n  --ff-chips-blur-color: #575757;\n  --ff-chip-bg: #ffffff;\n  --ff-chip-text-color: #ffffff;\n  --ff-mini-modal-footer-background: #aeb0c0;\n  --input-default-border-color: #a3a3a3;\n  --input-hover-border-color: #1e161f;\n  --input-default-label-color: #747474;\n  --input-label-bg-color: #ffffff;\n  --input-active-text-color: #434db8;\n  --input-error-text-color: #e42525;\n  --tabs-label-default-color: #7a7a7a;\n  --tabs-label-active-color: #434db8;\n  --tabs-border-color: #f1ebf2;\n  --tabs-bg-color: #ede6f2;\n  --tab-bg-color: #ffffff;\n  --toast-close-icon-wrapper-bg: #fafafa;\n  --toaster-boxshadow: rgba(30, 22, 31, 0.2392156863);\n  --toaster-success-border: linear-gradient(rgba(7, 148, 85, 0.4), rgba(0, 105, 58, 0.4));\n  --toaster-warning-border: linear-gradient(rgba(247, 144, 9, 0.4), rgba(214, 122, 0, 0.4));\n  --toaster-info-border: linear-gradient(rgba(37, 145, 228, 0.4), rgba(23, 105, 176, 0.4));\n  --toaster-danger_confirm-border: linear-gradient(rgba(228, 37, 37, 0.4), rgba(201, 0, 0, 0.4));\n  --option-card-border-color: #ded1e5;\n  --option-card-bg-color: #ffffff;\n  --checkbox-bg-color: #fbfdff;\n  --checkbox-border-color: #b5b5b5;\n  --checkbox-partial-color: #ffffff;\n  --checkbox-hover-color: #f7edff;\n  --multi-select-border: rgba(163, 163, 163, 0.5019607843);\n  --multi-select-label-bg: #ffffff;\n  --text-color-light: rgba(30, 22, 31, 0.5019607843);\n  --radio-button-border: #b5b5b5;\n  --radio-button-hover: #d3d3d3;\n  --menu-variant-dark-icon-color: #ffffff;\n  --menu-option-icon-color: #ffffff;\n  --menu-option-icon-clicked: #434db8;\n  --delete-text-color: #c50303;\n  --confirm-tick-icon-color: #5ca700;\n  --warning-modal-border-color: rgba(231, 155, 8, 0.4);\n  --brand-color-border: linear-gradient(94.23deg, rgba(113, 52, 123, 0.4) 16.33%, rgba(70, 22, 77, 0.4) 80.07%);\n  --alert-modal-background-color: linear-gradient(94.23deg, rgba(228, 37, 37, 0.4) 16.33%, rgba(201, 0, 0, 0.4) 80.07%);\n  --status-success-bg-color: #c6efcd;\n  --status-success-text-color: #016102;\n  --status-warning-bg-color: #ffe380;\n  --status-warning-text-color: #ff8b00;\n  --status-rejected-bg-color: #f7d9d9;\n  --status-rejected-text-color: #c60202;\n  --status-skipped-bg-color: #c4c3c3;\n  --status-warning-hover-bg-color: #fcd8ac;\n  --status-percentage-growth-bg-color: #ecedf8;\n  --status-button-bg-passed: #c6efcd;\n  --status-button-bg-failed: #f7d9d9;\n  --status-button-bg-running: #ecedf8;\n  --status-button-bg-skipped: #c4c3c3;\n  --status-button-bg-warning: #fcce46;\n  --status-button-bg-terminated: #f7d9d9;\n  --status-button-bg-partiallyExecuted: #dee7f1;\n  --status-button-bg-aborted: #f7d9d9;\n  --status-button-bg-notExecuted: #f7d9d9;\n  --status-button-text-passed: #016102;\n  --status-button-text-failed: #c50303;\n  --status-button-text-running: #434db8;\n  --status-button-text-skipped: #3c3838;\n  --status-button-text-warning: #ffffff;\n  --status-button-text-terminated: #c50303;\n  --status-button-text-partiallyExecuted: #0d69d4;\n  --status-button-text-aborted: #c50303;\n  --status-button-text-notExecuted: #c50303;\n  --ff-select-option-border-color: #ded1e5;\n  --ff-select-option-wrapper-box-shadow: rgba(89, 47, 124, 0.2);\n  --ff-select-background-color: #ffffff;\n  --ff-select-scroll-thumb-color: #d9d9d9;\n  --ff-select-scroll-track-bg: #f1f1f1;\n  --ff-select-scroll-thumb-hover: #b8b8b8;\n  --ff-select-text-color: #808080;\n  --ff-select-option-hover-color: #f7ebff;\n  --ff-select-default-color: #747474;\n  --ff-select-border-color: #a3a3a3;\n  --ff-select-brand-color: #434db8;\n  --ff-select-text-hover-color: #1e161f;\n  --ff-search-filed-clear-text: #434db8;\n  --ff-search-field-hover-color: #edecf8;\n  --ff-search-filed-placeholder-text: #a3a3a3;\n  --ff-search-filed-close-Icon: #14041c;\n  --ff-paper-background-color: #f5f5f5;\n  --ff-paper-dark-background-color: #d1c4e9;\n  --sub-header-primary: #301349;\n  --primary-icon-color: #ffffff;\n  --secondary-icon-color: #434db8;\n  --disabled-primary-color: #f9f9f9;\n  --background-modal-color: rgba(17, 17, 17, 0.0666666667);\n  --license_expires_soon_color: #ba7422;\n  --license_active_color: #268735;\n  --license_expired_color: #e34242;\n  --license_header_text_color: #592f7c;\n  --license_active_status_color: #518e18;\n  --license_expired_status_color: #ab3425;\n  --pie-chart-border-color: #b6b6b6;\n  --variable-dropdown-bg: #ffffff;\n  --modal-header-text-color: #ffc600;\n  --switch-license-text-color: #61296a;\n  --switch-license-header-text-color: #610b86;\n  --dotted-border-color: #000000;\n  --select-license-header-text-color: #5f2868;\n  --in-active-button-color: #808080;\n  --button-background-gradient-color: #434db8;\n  --details-page-value-color: #808080;\n  --table-header-text-color: #252c37;\n  --table-column-text-color: #1e161f;\n  --ff-machine-input-field-border-color: #f1ebf2;\n  --ff-machine-input-field-text-color: #1e161f;\n  --ff-connecting-branch-color: #434db8;\n  --ff-connecting-branch-modal-header: #434db8;\n  --ff-connecting-branch-modal-border: #e0e0e0;\n  --ff-connecting-branch-scope-color: #079455;\n  --ff-connecting-branch-delete-color: #e42525;\n  --ff-app-header-menu-border-bottom-color: #ffffff;\n  --ff-app-header-submenu-border-bottom-color: linear-gradient(90deg, #434db8 0%, #434db8 100%);\n  --ff-delete-button-attachment: #a91224;\n  --email-table-border-color: #959595;\n  --label-edit-text-label-color: #434db8;\n  --label-edit-text-background-color: #ffffff;\n  --label-edit-error-text: #e42525;\n  --label-edit-confirm-icon: #0dad66;\n  --label-edit-cancel-icon: #e42525;\n  --delete-icon-color: #e42525;\n  --ff-icon-hover-fill-color: #edecf8;\n  --ff-icon-color-dark-variant: #ffffff;\n  --ff-icon-color-danger-variant: rgba(169, 18, 36, 0.1019607843);\n  --ff-avatar-background-color: #434db8;\n  --ff-avatar-icon-color: #ffffff;\n  --ff-editor-line-bg: #f0e7f4;\n  --ff-editor-gutter-color: #ded5e5;\n  --ff-line-number-bg: #592f7c;\n  --ff-line-number-color: #ffffff;\n  --ff-editor-border-color: #f0e7f4;\n  --ff-icon-hover-bg-color: #f7ecf8;\n  --modal-background-color: rgba(18, 18, 18, 0.2);\n  --modal-alert-header-color: #db1919;\n  --ff-status-card-text-color: #ffffff;\n  --ff-card-status-text-color: #8a8a8a;\n  --ff-card-passed-status-bg-color: #179c5f;\n  --ff-card-failed-status-bg-color: #9c1732;\n  --ff-card-warning-status-bg-color: #e2750f;\n  --ff-card-skipped-status-bg-color: #a83fc4;\n  --ff-card-flaky-status-bg-color: #3f5ac4;\n  --ff-toggle-switch-off-color: #4b494c;\n  --ff-toggle-switch-shadow-color: rgba(87, 87, 87, 0.5019607843);\n  --ff-all-projects-default-color: rgba(255, 255, 255, 0.2);\n  --ff-machine-inactive-status-color: #c50303;\n  --ff-machine-running-status-color: #2055de;\n  --ff-machine-active-status-color: #4caf50;\n  --excel-sheet-button-color: #e9b5ff;\n  --icon-hover-color: #f7ecf8;\n  --ff-search-icon-hover-color: #f7ecf8;\n  --ff-search-filed-bg-color: #ffffff;\n  --ff-filter-toggle-button-bg-primary: linear-gradient(90deg, #434db8 0%, #9c1ebb 100%);\n  --download-client-border-color: #f0e7f4;\n  --download-client-header-bg-color: #ede6f2;\n  --download-client-content-text-color: #592f7c;\n  --download-client-choose-os-text-color: #000000;\n  --download-client-icon-container-border-color: #f0e7f4;\n  --download-client-icon-container-bg-color: #ffffff;\n  --download-client-icon-container-box-shadow-color: rgba(89, 47, 124, 0.3019607843);\n  --public-chip-bg-color: #f9d5ff;\n  --partial-public-chip-bg-color: #fcc27d;\n  --private-chip-bg-color: #dbc3ef;\n  --disabled-chip-bg-color: #c4c3c3;\n  --impact-list-text-color: #14041c;\n  --impact-list-chip-text-color: #3d3c3e;\n  --impact-list-chip-bg-color: #e3ccf5;\n  --card-total-defect-color: #71347b;\n  --card-defect-density: #5dc70c;\n  --table-with-accordion-header-primary-bg: rgba(212, 176, 228, 0.1490196078);\n  --table-with-accordion-icon-color: #1e161f;\n  --plugins-header-bg-color: rgba(89, 47, 124, 0.1);\n  --follow-user-icon-red: #922B3E;\n  --follow-user-icon-orange: #ED760E;\n  --follow-user-icon-black: #0A0A0A;\n  --follow-user-icon-pink: #E63244;\n  --follow-user-icon-blue: #3B83BD;\n  --follow-user-icon-navy: #20214F;\n  --follow-user-icon-lightGreen: #BDECB6;\n  --follow-user-icon-gray: #D9D9D9;\n  --follow-user-icon-yellow: #CDA434;\n  --follow-user-icon-salmon: #D36E70;\n}";
 styleInject(css_248z$1f);
 const ThemeContext = /*#__PURE__*/React.createContext(undefined);
@@ -1589,22 +1607,27 @@ const Accordion = ({
   accordionStateIconName = 'arrow_down',
   AccordionStateIconWidth = 12,
   AccordionStateIconHeight = 8,
-  isExpand
+  isExpand,
+  onClick,
+  className = ''
 }) => {
   const [isAccordionExpanded, setIsAccordionExpanded] = React.useState(isExpand ?? true);
   const onAccordionClick = () => {
-    setIsAccordionExpanded(!isAccordionExpanded);
+    if (onClick) {
+      onClick();
+    }
+    if (!disable) {
+      setIsAccordionExpanded(!isAccordionExpanded);
+    }
   };
   return jsxRuntime.jsxs("div", {
-    className: "ff-accordion",
+    className: `ff-accordion ${className}`,
     children: [jsxRuntime.jsxs("div", {
-      className: `accordion-header ${disable && 'ff-disabled'} ${isAccordionExpanded && 'expanded'}`,
+      className: `accordion-header ${disable && 'ff-disabled'} ${isAccordionExpanded && 'expanded'} `,
       style: {
         color: color || '--tooltip-bg-color'
       },
-      onClick: () => {
-        !disable && onAccordionClick();
-      },
+      onClick: onAccordionClick,
       children: [jsxRuntime.jsx(Tooltip, {
         title: disableInfoMessage,
         children: jsxRuntime.jsx(Typography, {
@@ -1617,10 +1640,12 @@ const Accordion = ({
       }), jsxRuntime.jsx(Icon, {
         name: accordionStateIconName,
         hoverEffect: false,
-        className: `accordion-arrow  ${isAccordionExpanded && 'expanded'}`,
+        className: classNames('accordion-arrow', {
+          expanded: isAccordionExpanded
+        }),
         width: AccordionStateIconWidth,
         height: AccordionStateIconHeight,
-        color: 'var(--table-with-accordion-icon-color)'
+        color: "var(--table-with-accordion-icon-color)"
       })]
     }), !disable && isAccordionExpanded && jsxRuntime.jsx("div", {
       style: {
@@ -1644,7 +1669,7 @@ const dropdownDefaultCSSData$1 = {
 var css_248z$1a = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd, .ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-multiselect-dropdown-container {\n  position: absolute;\n  background: var(--drawer-footer-bg);\n  z-index: 1000;\n  box-shadow: 0px 1px 4px 0px var(--ff-select-option-wrapper-box-shadow);\n  border: 0.5px solid var(--ff-select-option-border-color);\n  border-radius: 4px;\n  box-sizing: border-box;\n  margin-block: 4px;\n  max-height: 160px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper {\n  max-height: 128px;\n  overflow-y: auto;\n  border-radius: 2px;\n  overflow-x: hidden;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar {\n  width: 4px;\n  height: 40px;\n  border-radius: 12px 0px 0px 0px;\n  background: var(--description-text);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-track {\n  background: var(--ff-select-scroll-track-bg);\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb {\n  background: var(--ff-select-scroll-thumb-color);\n  border-radius: 10px;\n}\n.ff-multiselect-dropdown-container .ff-multiselect-options-wrapper::-webkit-scrollbar-thumb:hover {\n  background: var(--ff-select-scroll-thumb-hover);\n}\n.ff-multiselect-dropdown-container .no-options {\n  color: var(--ff-select-text-color);\n  text-align: center;\n  margin: 0;\n  padding: 7px;\n  line-height: 12px;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container {\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  height: 32px;\n  padding: 4px 8px;\n  gap: 4px;\n  border-radius: 4px 0px 0px 0px;\n  background-color: white;\n}\n.ff-multiselect-dropdown-container .dropdown-option-container .dropdown-option-label {\n  color: var(--ff-select-text-color);\n}\n.ff-multiselect-dropdown-container .dropdown-option-container:hover {\n  background-color: var(--hover-color);\n}\n.ff-multiselect-dropdown-container:focus {\n  outline: none;\n}\n.ff-multiselect-dropdown-container .select-button-container {\n  box-sizing: border-box;\n  width: 100%;\n  border-top: 1px solid var(--slider-table-color);\n  height: 30px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}";
 styleInject(css_248z$1a);
-var css_248z$19 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-checkbox--overlay {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  cursor: pointer;\n  position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n  display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--checkbox-border-color);\n  box-sizing: border-box;\n  border-radius: 2px;\n  margin-right: 4px;\n  background-color: var(--checkbox-bg-color);\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom .ff-tick-icon {\n  padding: 2px !important;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::before {\n  content: \"\";\n  width: 9px;\n  height: 2px;\n  background-color: var(--checkbox-partial-color);\n  border-radius: 2px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(180deg);\n  opacity: 0;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::after {\n  content: \"\";\n  width: 16px;\n  height: 16px;\n  border: 4px solid var(--checkbox-hover-color);\n  border-radius: 4px;\n  position: absolute;\n  opacity: 0;\n  background-color: var(--checkbox-hover-color);\n  z-index: -1;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover {\n  border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom {\n  background: var(--brand-color);\n  border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--passed {\n  background-color: var(--ff-card-passed-status-bg-color);\n  border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--failed {\n  background-color: var(--ff-card-failed-status-bg-color);\n  border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--warning {\n  background-color: var(--ff-card-warning-status-bg-color);\n  border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--skipped {\n  background-color: var(--ff-card-skipped-status-bg-color);\n  border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--flaky {\n  background-color: var(-- ff-card-flaky-status-bg-color);\n  border-color: var(-- ff-card-flaky-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom {\n  background: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--passed {\n  background: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--failed {\n  background: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--warning {\n  background: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--skipped {\n  background: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--flaky {\n  background: var(-- ff-card-flaky-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom {\n  opacity: 0.5;\n  cursor: not-allowed;\n  border: 1px solid var(--checkbox-border-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom::after {\n  opacity: 0;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial {\n  background-color: var(--brand-color);\n  border: none;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial::before {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover {\n  background-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox--passed {\n  border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--failed {\n  border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--warning {\n  border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--skipped {\n  border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--flaky {\n  border-color: var(-- ff-card-flaky-status-bg-color);\n}";
+var css_248z$19 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-checkbox--overlay {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  cursor: pointer;\n  position: relative;\n}\n.ff-checkbox--overlay .ff-checkbox-input {\n  display: none;\n}\n.ff-checkbox--overlay .ff-checkbox-custom {\n  width: 16px;\n  height: 16px;\n  border: 1px solid var(--checkbox-border-color);\n  box-sizing: border-box;\n  border-radius: 2px;\n  margin-right: 4px;\n  background-color: var(--checkbox-bg-color);\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom .ff-tick-icon {\n  padding: 2px !important;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::before {\n  content: \"\";\n  width: 9px;\n  height: 2px;\n  background-color: var(--checkbox-partial-color);\n  border-radius: 2px;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(180deg);\n  opacity: 0;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom::after {\n  content: \"\";\n  width: 16px;\n  height: 16px;\n  border: 4px solid var(--checkbox-hover-color);\n  border-radius: 4px;\n  position: absolute;\n  opacity: 0;\n  background-color: var(--checkbox-hover-color);\n  z-index: -1;\n  transition: border-color background-color;\n}\n.ff-checkbox--overlay .ff-checkbox-custom:hover::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom {\n  background: var(--brand-color);\n  border-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--passed {\n  background-color: var(--ff-card-passed-status-bg-color);\n  border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--failed {\n  background-color: var(--ff-card-failed-status-bg-color);\n  border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--warning {\n  background-color: var(--ff-card-warning-status-bg-color);\n  border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--skipped {\n  background-color: var(--ff-card-skipped-status-bg-color);\n  border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked + .ff-checkbox-custom.ff-checkbox-checked--flaky {\n  background-color: var(--ff-card-flaky-status-bg-color);\n  border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom {\n  background: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--passed {\n  background: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--failed {\n  background: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--warning {\n  background: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--skipped {\n  background: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom.ff-checkbox-checked--flaky {\n  background: var(--ff-card-flaky-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:checked:hover + .ff-checkbox-custom::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom {\n  opacity: 0.5;\n  cursor: not-allowed;\n  border: 1px solid var(--checkbox-border-color);\n}\n.ff-checkbox--overlay .ff-checkbox-input:disabled + .ff-checkbox-custom::after {\n  opacity: 0;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial {\n  background-color: var(--brand-color);\n  border: none;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial::before {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover {\n  background-color: var(--brand-color);\n}\n.ff-checkbox--overlay .ff-storybook-checkbox--partial:hover::after {\n  opacity: 1;\n}\n.ff-checkbox--overlay .ff-checkbox--passed {\n  border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--failed {\n  border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--warning {\n  border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--skipped {\n  border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-checkbox--overlay .ff-checkbox--flaky {\n  border-color: var(--ff-card-flaky-status-bg-color);\n}";
 styleInject(css_248z$19);
 const Checkbox = ({
@@ -3208,7 +3233,7 @@ const Select$1 = ({
   });
 };
-var css_248z$$ = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-textarea-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n  display: flex;\n  color: var(--text-area-default-color);\n  justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n  padding: 8px;\n  gap: 0px;\n  border: 1px solid var(--default-icon-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n  font-weight: 400;\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n.ff-textarea-container .ff-textarea--resize {\n  resize: none;\n}\n.ff-textarea-container .ff-textarea ::-webkit-scrollbar, .ff-textarea-container .ff-textarea-label-container ::-webkit-scrollbar {\n  display: none;\n}\n.ff-textarea-container .ff-textarea:disabled, .ff-textarea-container .ff-textarea-label-container:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ff-textarea-container .ff-textarea:disabled:hover, .ff-textarea-container .ff-textarea-label-container:disabled:hover {\n  border-color: var(--default-icon-color);\n  color: inherit;\n}\n.ff-textarea-container .ff-textarea::placeholder, .ff-textarea-container .ff-textarea-label-container::placeholder {\n  opacity: 0;\n}\n.ff-textarea-container .ff-textarea--danger {\n  border-color: var(--ff-error-light);\n}\n.ff-textarea-container .ff-textarea--transparentBackground {\n  background: transparent;\n}\n.ff-textarea-container .ff-textarea-label-container {\n  display: flex;\n  position: absolute;\n  border: none;\n  outline: none;\n  margin-top: 1px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label {\n  padding: 1px;\n  height: 10px;\n  width: auto;\n  background-color: var(--drawer-footer-bg);\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label--danger {\n  color: var(--ff-error-light);\n}\n.ff-textarea-container .ff-textarea-label-container .required-asterisk {\n  color: var(--ff-error-light);\n}\n.ff-textarea-container:hover .ff-textarea-label {\n  color: var(--text-color);\n}\n.ff-textarea-container:hover .ff-textarea, .ff-textarea-container:hover .ff-textarea-label-container {\n  border-color: var(--text-color);\n}\n.ff-textarea-container:focus-within .ff-textarea-label-container {\n  font-weight: 400;\n  line-height: 12px;\n  letter-spacing: 0.5px;\n  text-align: left;\n  top: -6px;\n  background-color: transparent;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container:focus-within .ff-textarea-label--primary {\n  color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea--primary {\n  border-color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-textarea-container .ff-textarea-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-textarea-container .ff-textarea-message--danger {\n  color: var(--ff-error-light);\n}\n.ff-textarea-container--float .ff-textarea-label-container {\n  letter-spacing: 0.5px;\n  top: -6px;\n  background-color: transparent;\n  line-height: 12px;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container--disabled {\n  cursor: not-allowed;\n}\n.ff-textarea-container--disabled:hover .ff-textarea-label {\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container--disabled:hover .ff-textarea, .ff-textarea-container--disabled:hover .ff-textarea-container .ff-textarea-label-container, .ff-textarea-container .ff-textarea-container--disabled:hover .ff-textarea-label-container {\n  border-color: var(--default-icon-color);\n}\n.ff-textarea-container--disabled .ff-textarea-label-container {\n  cursor: not-allowed;\n}";
+var css_248z$$ = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-textarea-container {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8, .ff-textarea-container .msg-character-count, .ff-textarea-container:focus-within .ff-textarea-label-container, .ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder, .ff-textarea-container .ff-textarea-message, .ff-textarea-container--float .ff-textarea-label-container {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-textarea-container {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  gap: 5px;\n}\n.ff-textarea-container .msg-character-count {\n  display: flex;\n  color: var(--text-area-default-color);\n  justify-content: flex-end;\n}\n.ff-textarea-container .ff-textarea, .ff-textarea-container .ff-textarea-label-container {\n  padding: 8px;\n  gap: 0px;\n  border: 1px solid var(--default-icon-color);\n  border-radius: 4px;\n  outline: none;\n  line-height: 18px;\n  font-weight: 400;\n  overflow: auto;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n}\n.ff-textarea-container .ff-textarea ::-webkit-scrollbar, .ff-textarea-container .ff-textarea-label-container ::-webkit-scrollbar {\n  display: none;\n}\n.ff-textarea-container .ff-textarea--resize {\n  resize: none;\n}\n.ff-textarea-container .ff-textarea:disabled, .ff-textarea-container .ff-textarea-label-container:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ff-textarea-container .ff-textarea:disabled:hover, .ff-textarea-container .ff-textarea-label-container:disabled:hover {\n  border-color: var(--default-icon-color);\n  color: inherit;\n}\n.ff-textarea-container .ff-textarea::placeholder, .ff-textarea-container .ff-textarea-label-container::placeholder {\n  opacity: 0;\n}\n.ff-textarea-container .ff-textarea--danger {\n  border-color: var(--ff-error-light);\n}\n.ff-textarea-container .ff-textarea--transparentBackground {\n  background: transparent;\n}\n.ff-textarea-container .ff-textarea-label-container {\n  display: flex;\n  position: absolute;\n  border: none;\n  outline: none;\n  margin-top: 1px;\n  transition: all 0.3s ease-in-out;\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label {\n  padding: 1px;\n  height: 10px;\n  width: auto;\n  background-color: var(--drawer-footer-bg);\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container .ff-textarea-label-container .ff-textarea-label--danger {\n  color: var(--ff-error-light);\n}\n.ff-textarea-container .ff-textarea-label-container .required-asterisk {\n  color: var(--ff-error-light);\n}\n.ff-textarea-container:hover .ff-textarea-label {\n  color: var(--text-color);\n}\n.ff-textarea-container:hover .ff-textarea, .ff-textarea-container:hover .ff-textarea-label-container {\n  border-color: var(--text-color);\n}\n.ff-textarea-container:focus-within .ff-textarea-label-container {\n  font-weight: 400;\n  line-height: 12px;\n  letter-spacing: 0.5px;\n  text-align: left;\n  top: -6px;\n  background-color: transparent;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container:focus-within .ff-textarea-label--primary {\n  color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea--primary {\n  border-color: var(--brand-color);\n}\n.ff-textarea-container:focus-within .ff-textarea::placeholder, .ff-textarea-container:focus-within .ff-textarea-label-container::placeholder {\n  opacity: 1;\n  margin-bottom: 1px;\n}\n.ff-textarea-container .ff-textarea-message {\n  padding: 0px 4px;\n  margin-left: 8px;\n  line-height: 12px;\n}\n.ff-textarea-container .ff-textarea-message--danger {\n  color: var(--ff-error-light);\n}\n.ff-textarea-container--float .ff-textarea-label-container {\n  letter-spacing: 0.5px;\n  top: -6px;\n  background-color: transparent;\n  line-height: 12px;\n  padding: 0px 2px;\n  margin-left: 7px;\n}\n.ff-textarea-container--disabled {\n  cursor: not-allowed;\n}\n.ff-textarea-container--disabled:hover .ff-textarea-label {\n  color: var(--text-area-default-color);\n}\n.ff-textarea-container--disabled:hover .ff-textarea, .ff-textarea-container--disabled:hover .ff-textarea-container .ff-textarea-label-container, .ff-textarea-container .ff-textarea-container--disabled:hover .ff-textarea-label-container {\n  border-color: var(--default-icon-color);\n}\n.ff-textarea-container--disabled .ff-textarea-label-container {\n  cursor: not-allowed;\n}";
 styleInject(css_248z$$);
 const Textarea = ({
@@ -3925,8 +3950,6 @@ function LiveRegion(_ref) {
   // Hide element visually but keep it readable by screen readers
   const visuallyHidden = {
     position: 'fixed',
-    top: 0,
-    left: 0,
     width: 1,
     height: 1,
     margin: -1,
@@ -4916,12 +4939,11 @@ var KeyboardCode;
   KeyboardCode["Up"] = "ArrowUp";
   KeyboardCode["Esc"] = "Escape";
   KeyboardCode["Enter"] = "Enter";
-  KeyboardCode["Tab"] = "Tab";
 })(KeyboardCode || (KeyboardCode = {}));
 const defaultKeyboardCodes = {
   start: [KeyboardCode.Space, KeyboardCode.Enter],
   cancel: [KeyboardCode.Esc],
-  end: [KeyboardCode.Space, KeyboardCode.Enter, KeyboardCode.Tab]
+  end: [KeyboardCode.Space, KeyboardCode.Enter]
 };
 const defaultKeyboardCoordinateGetter = (event, _ref) => {
   let {
@@ -5220,9 +5242,6 @@ class AbstractPointerSensor {
       passive: false
     });
     this.listeners.add(events.end.name, this.handleEnd);
-    if (events.cancel) {
-      this.listeners.add(events.cancel.name, this.handleCancel);
-    }
     this.windowListeners.add(EventName.Resize, this.handleCancel);
     this.windowListeners.add(EventName.DragStart, preventDefault);
     this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
@@ -5238,11 +5257,9 @@ class AbstractPointerSensor {
       }
       if (isDelayConstraint(activationConstraint)) {
         this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);
-        this.handlePending(activationConstraint);
         return;
       }
       if (isDistanceConstraint(activationConstraint)) {
-        this.handlePending(activationConstraint);
         return;
       }
     }
@@ -5259,13 +5276,6 @@ class AbstractPointerSensor {
       this.timeoutId = null;
     }
   }
-  handlePending(constraint, offset) {
-    const {
-      active,
-      onPending
-    } = this.props;
-    onPending(active, constraint, this.initialCoordinates, offset);
-  }
   handleStart() {
     const {
       initialCoordinates
@@ -5319,7 +5329,6 @@ class AbstractPointerSensor {
           return this.handleCancel();
         }
       }
-      this.handlePending(activationConstraint, delta);
       return;
     }
     if (event.cancelable) {
@@ -5329,24 +5338,16 @@ class AbstractPointerSensor {
   }
   handleEnd() {
     const {
-      onAbort,
       onEnd
     } = this.props;
     this.detach();
-    if (!this.activated) {
-      onAbort(this.props.active);
-    }
     onEnd();
   }
   handleCancel() {
     const {
-      onAbort,
       onCancel
     } = this.props;
     this.detach();
-    if (!this.activated) {
-      onAbort(this.props.active);
-    }
     onCancel();
   }
   handleKeydown(event) {
@@ -5360,9 +5361,6 @@ class AbstractPointerSensor {
   }
 }
 const events = {
-  cancel: {
-    name: 'pointercancel'
-  },
   move: {
     name: 'pointermove'
   },
@@ -5435,9 +5433,6 @@ MouseSensor.activators = [{
   }
 }];
 const events$2 = {
-  cancel: {
-    name: 'touchcancel'
-  },
   move: {
     name: 'touchmove'
   },
@@ -5639,11 +5634,11 @@ function useScrollIntent(_ref2) {
   }, [disabled, delta, previousDelta]);
 }
 function useCachedNode(draggableNodes, id) {
-  const draggableNode = id != null ? draggableNodes.get(id) : undefined;
+  const draggableNode = id !== null ? draggableNodes.get(id) : undefined;
   const node = draggableNode ? draggableNode.node.current : null;
   return useLazyMemo(cachedNode => {
     var _ref;
-    if (id == null) {
+    if (id === null) {
       return null;
     } // In some cases, the draggable node can unmount while dragging
     // This is the case for virtualized lists. In those situations,
@@ -5851,26 +5846,7 @@ function useRect(element, measure, fallbackRect) {
   if (measure === void 0) {
     measure = defaultMeasure;
   }
-  const [rect, setRect] = React.useState(null);
-  function measureRect() {
-    setRect(currentRect => {
-      if (!element) {
-        return null;
-      }
-      if (element.isConnected === false) {
-        var _ref;
-        // Fall back to last rect we measured if the element is
-        // no longer connected to the DOM.
-        return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
-      }
-      const newRect = measure(element);
-      if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
-        return currentRect;
-      }
-      return newRect;
-    });
-  }
+  const [rect, measureRect] = React.useReducer(reducer, null);
   const mutationObserver = useMutationObserver({
     callback(records) {
       if (!element) {
@@ -5905,6 +5881,23 @@ function useRect(element, measure, fallbackRect) {
     }
   }, [element]);
   return rect;
+  function reducer(currentRect) {
+    if (!element) {
+      return null;
+    }
+    if (element.isConnected === false) {
+      var _ref;
+      // Fall back to last rect we measured if the element is
+      // no longer connected to the DOM.
+      return (_ref = currentRect != null ? currentRect : fallbackRect) != null ? _ref : null;
+    }
+    const newRect = measure(element);
+    if (JSON.stringify(currentRect) === JSON.stringify(newRect)) {
+      return currentRect;
+    }
+    return newRect;
+  }
 }
 function useRectDelta(rect) {
   const initialRect = useInitialValue(rect);
@@ -6050,24 +6043,28 @@ function useRects(elements, measure) {
   }
   const [firstElement] = elements;
   const windowRect = useWindowRect(firstElement ? getWindow(firstElement) : null);
-  const [rects, setRects] = React.useState(defaultValue$2);
-  function measureRects() {
-    setRects(() => {
-      if (!elements.length) {
-        return defaultValue$2;
-      }
-      return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
-    });
-  }
+  const [rects, measureRects] = React.useReducer(reducer, defaultValue$2);
   const resizeObserver = useResizeObserver({
     callback: measureRects
   });
-  useIsomorphicLayoutEffect$1(() => {
-    resizeObserver == null ? void 0 : resizeObserver.disconnect();
+  if (elements.length > 0 && rects === defaultValue$2) {
     measureRects();
-    elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
+  }
+  useIsomorphicLayoutEffect$1(() => {
+    if (elements.length) {
+      elements.forEach(element => resizeObserver == null ? void 0 : resizeObserver.observe(element));
+    } else {
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      measureRects();
+    }
   }, [elements]);
   return rects;
+  function reducer() {
+    if (!elements.length) {
+      return defaultValue$2;
+    }
+    return elements.map(element => isDocumentScrollingElement(element) ? windowRect : new Rect(measure(element), element));
+  }
 }
 function getMeasurableNode(node) {
   if (!node) {
@@ -6234,7 +6231,7 @@ function reducer$1(state, action) {
         }
       };
     case Action.DragMove:
-      if (state.draggable.active == null) {
+      if (!state.draggable.active) {
         return state;
       }
       return {
@@ -6506,7 +6503,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
       containers: droppableContainers
     }
   } = state;
-  const node = activeId != null ? draggableNodes.get(activeId) : null;
+  const node = activeId ? draggableNodes.get(activeId) : null;
   const activeRects = React.useRef({
     initial: null,
     translated: null
@@ -6541,7 +6538,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
   const autoScrollOptions = getAutoScrollerOptions();
   const initialActiveNodeRect = useInitialRect(activeNode, measuringConfiguration.draggable.measure);
   useLayoutShiftScrollCompensation({
-    activeNode: activeId != null ? draggableNodes.get(activeId) : null,
+    activeNode: activeId ? draggableNodes.get(activeId) : null,
     config: autoScrollOptions.layoutShiftCompensation,
     initialRect: initialActiveNodeRect,
     measure: measuringConfiguration.draggable.measure
@@ -6619,7 +6616,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
   const appliedTranslate = usesDragOverlay ? modifiedTranslate : add(modifiedTranslate, activeNodeScrollDelta);
   const transform = adjustScale(appliedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
-  const activeSensorRef = React.useRef(null);
   const instantiateSensor = React.useCallback((event, _ref2) => {
     let {
       sensor: Sensor,
@@ -6641,43 +6637,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
       // Sensors need to be instantiated with refs for arguments that change over time
       // otherwise they are frozen in time with the stale arguments
       context: sensorContext,
-      onAbort(id) {
-        const draggableNode = draggableNodes.get(id);
-        if (!draggableNode) {
-          return;
-        }
-        const {
-          onDragAbort
-        } = latestProps.current;
-        const event = {
-          id
-        };
-        onDragAbort == null ? void 0 : onDragAbort(event);
-        dispatchMonitorEvent({
-          type: 'onDragAbort',
-          event
-        });
-      },
-      onPending(id, constraint, initialCoordinates, offset) {
-        const draggableNode = draggableNodes.get(id);
-        if (!draggableNode) {
-          return;
-        }
-        const {
-          onDragPending
-        } = latestProps.current;
-        const event = {
-          id,
-          constraint,
-          initialCoordinates,
-          offset
-        };
-        onDragPending == null ? void 0 : onDragPending(event);
-        dispatchMonitorEvent({
-          type: 'onDragPending',
-          event
-        });
-      },
       onStart(initialCoordinates) {
         const id = activeRef.current;
         if (id == null) {
@@ -6691,7 +6650,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
           onDragStart
         } = latestProps.current;
         const event = {
-          activatorEvent,
           active: {
             id,
             data: draggableNode.data,
@@ -6710,8 +6668,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
             type: 'onDragStart',
             event
           });
-          setActiveSensor(activeSensorRef.current);
-          setActivatorEvent(activatorEvent);
         });
       },
       onMove(coordinates) {
@@ -6723,7 +6679,10 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
       onEnd: createHandler(Action.DragEnd),
       onCancel: createHandler(Action.DragCancel)
     });
-    activeSensorRef.current = sensorInstance;
+    ReactDOM.unstable_batchedUpdates(() => {
+      setActiveSensor(sensorInstance);
+      setActivatorEvent(event.nativeEvent);
+    });
     function createHandler(type) {
       return async function handler() {
         const {
@@ -6760,7 +6719,6 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
           setOver(null);
           setActiveSensor(null);
           setActivatorEvent(null);
-          activeSensorRef.current = null;
           const eventName = type === Action.DragEnd ? 'onDragEnd' : 'onDragCancel';
           if (event) {
             const handler = latestProps.current[eventName];
@@ -6982,7 +6940,7 @@ const DndContext = /*#__PURE__*/React.memo(function DndContext(_ref) {
 });
 const NullContext = /*#__PURE__*/React.createContext(null);
 const defaultRole = 'button';
-const ID_PREFIX$1 = 'Draggable';
+const ID_PREFIX$1 = 'Droppable';
 function useDraggable(_ref) {
   let {
     id,
@@ -7129,7 +7087,7 @@ function useDroppable(_ref) {
     resizeObserverConnected.current = false;
     resizeObserver.observe(nodeRef.current);
   }, [nodeRef, resizeObserver]);
-  React.useEffect(() => {
+  useIsomorphicLayoutEffect$1(() => {
     dispatch({
       type: Action.RegisterDroppable,
       element: {
@@ -7544,7 +7502,6 @@ var DNDCore = /*#__PURE__*/Object.freeze({
   defaultCoordinates: defaultCoordinates,
   defaultDropAnimation: defaultDropAnimationConfiguration,
   defaultDropAnimationSideEffects: defaultDropAnimationSideEffects,
-  defaultKeyboardCoordinateGetter: defaultKeyboardCoordinateGetter,
   defaultScreenReaderInstructions: defaultScreenReaderInstructions,
   getClientRect: getClientRect,
   getFirstCollision: getFirstCollision,
@@ -8282,7 +8239,7 @@ const SortableRow = ({
     transform,
     transition
   } = useSortable({
-    id: row.id,
+    id: row?._id || row?.id,
     disabled: row.disabled
   });
   const style = {
@@ -11325,14 +11282,13 @@ var isWeb = typeof window !== 'undefined' &&
 function cloneObject(data) {
     let copy;
     const isArray = Array.isArray(data);
-    const isFileListInstance = typeof FileList !== 'undefined' ? data instanceof FileList : false;
     if (data instanceof Date) {
         copy = new Date(data);
     }
     else if (data instanceof Set) {
         copy = new Set(data);
     }
-    else if (!(isWeb && (data instanceof Blob || isFileListInstance)) &&
+    else if (!(isWeb && (data instanceof Blob || data instanceof FileList)) &&
         (isArray || isObject$2(data))) {
         copy = isArray ? [] : {};
         if (!isArray && !isPlainObject(data)) {
@@ -11391,7 +11347,7 @@ var set$1 = (object, path, value) => {
                         ? []
                         : {};
         }
-        if (key === '__proto__' || key === 'constructor' || key === 'prototype') {
+        if (key === '__proto__') {
             return;
         }
         object[key] = newValue;
@@ -11610,7 +11566,7 @@ function useFormState(props) {
             _mounted.current = false;
         };
     }, [control]);
-    return React.useMemo(() => getProxyFormState(formState, control, _localProxyFormState.current, false), [formState, control]);
+    return getProxyFormState(formState, control, _localProxyFormState.current, false);
 }
 var isString = (value) => typeof value === 'string';
@@ -11706,67 +11662,6 @@ function useController(props) {
         value,
         ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
     }));
-    const fieldState = React.useMemo(() => Object.defineProperties({}, {
-        invalid: {
-            enumerable: true,
-            get: () => !!get$1(formState.errors, name),
-        },
-        isDirty: {
-            enumerable: true,
-            get: () => !!get$1(formState.dirtyFields, name),
-        },
-        isTouched: {
-            enumerable: true,
-            get: () => !!get$1(formState.touchedFields, name),
-        },
-        isValidating: {
-            enumerable: true,
-            get: () => !!get$1(formState.validatingFields, name),
-        },
-        error: {
-            enumerable: true,
-            get: () => get$1(formState.errors, name),
-        },
-    }), [formState, name]);
-    const field = React.useMemo(() => ({
-        name,
-        value,
-        ...(isBoolean(disabled) || formState.disabled
-            ? { disabled: formState.disabled || disabled }
-            : {}),
-        onChange: (event) => _registerProps.current.onChange({
-            target: {
-                value: getEventValue(event),
-                name: name,
-            },
-            type: EVENTS.CHANGE,
-        }),
-        onBlur: () => _registerProps.current.onBlur({
-            target: {
-                value: get$1(control._formValues, name),
-                name: name,
-            },
-            type: EVENTS.BLUR,
-        }),
-        ref: (elm) => {
-            const field = get$1(control._fields, name);
-            if (field && elm) {
-                field._f.ref = {
-                    focus: () => elm.focus(),
-                    select: () => elm.select(),
-                    setCustomValidity: (message) => elm.setCustomValidity(message),
-                    reportValidity: () => elm.reportValidity(),
-                };
-            }
-        },
-    }), [
-        name,
-        control._formValues,
-        disabled,
-        formState.disabled,
-        value,
-        control._fields,
-    ]);
     React.useEffect(() => {
         const _shouldUnregisterField = control._options.shouldUnregister || shouldUnregister;
         const updateMounted = (name, value) => {
@@ -11792,7 +11687,7 @@ function useController(props) {
         };
     }, [name, control, isArrayField, shouldUnregister]);
     React.useEffect(() => {
-        if (isBoolean(disabled) && get$1(control._fields, name)) {
+        if (get$1(control._fields, name)) {
             control._updateDisabledField({
                 disabled,
                 fields: control._fields,
@@ -11801,11 +11696,63 @@ function useController(props) {
             });
         }
     }, [disabled, name, control]);
-    return React.useMemo(() => ({
-        field,
+    return {
+        field: {
+            name,
+            value,
+            ...(isBoolean(disabled) || formState.disabled
+                ? { disabled: formState.disabled || disabled }
+                : {}),
+            onChange: React.useCallback((event) => _registerProps.current.onChange({
+                target: {
+                    value: getEventValue(event),
+                    name: name,
+                },
+                type: EVENTS.CHANGE,
+            }), [name]),
+            onBlur: React.useCallback(() => _registerProps.current.onBlur({
+                target: {
+                    value: get$1(control._formValues, name),
+                    name: name,
+                },
+                type: EVENTS.BLUR,
+            }), [name, control]),
+            ref: React.useCallback((elm) => {
+                const field = get$1(control._fields, name);
+                if (field && elm) {
+                    field._f.ref = {
+                        focus: () => elm.focus(),
+                        select: () => elm.select(),
+                        setCustomValidity: (message) => elm.setCustomValidity(message),
+                        reportValidity: () => elm.reportValidity(),
+                    };
+                }
+            }, [control._fields, name]),
+        },
         formState,
-        fieldState,
-    }), [field, formState, fieldState]);
+        fieldState: Object.defineProperties({}, {
+            invalid: {
+                enumerable: true,
+                get: () => !!get$1(formState.errors, name),
+            },
+            isDirty: {
+                enumerable: true,
+                get: () => !!get$1(formState.dirtyFields, name),
+            },
+            isTouched: {
+                enumerable: true,
+                get: () => !!get$1(formState.touchedFields, name),
+            },
+            isValidating: {
+                enumerable: true,
+                get: () => !!get$1(formState.validatingFields, name),
+            },
+            error: {
+                enumerable: true,
+                get: () => get$1(formState.errors, name),
+            },
+        }),
+    };
 }
 /**
@@ -11855,7 +11802,7 @@ const Controller = (props) => props.render(useController(props));
 const flatten = (obj) => {
     const output = {};
     for (const key of Object.keys(obj)) {
-        if (isObjectType(obj[key]) && obj[key] !== null) {
+        if (isObjectType(obj[key])) {
             const nested = flatten(obj[key]);
             for (const nestedKey of Object.keys(nested)) {
                 output[`${key}.${nestedKey}`] = nested[nestedKey];
@@ -11924,7 +11871,7 @@ function Form(props) {
                         headers && headers['Content-Type'],
                         encType,
                     ].some((value) => value && value.includes('json'));
-                    const response = await fetch(String(action), {
+                    const response = await fetch(action, {
                         method,
                         headers: {
                             ...headers,
@@ -12422,7 +12369,7 @@ var updateAt = (fieldValues, index, value) => {
  */
 function useFieldArray(props) {
     const methods = useFormContext();
-    const { control = methods.control, name, keyName = 'id', shouldUnregister, rules, } = props;
+    const { control = methods.control, name, keyName = 'id', shouldUnregister, } = props;
     const [fields, setFields] = React.useState(control._getFieldArray(name));
     const ids = React.useRef(control._getFieldArray(name).map(generateId));
     const _fieldIds = React.useRef(fields);
@@ -12431,8 +12378,8 @@ function useFieldArray(props) {
     _name.current = name;
     _fieldIds.current = fields;
     control._names.array.add(name);
-    rules &&
-        control.register(name, rules);
+    props.rules &&
+        control.register(name, props.rules);
     useSubscribe({
         next: ({ values, name: fieldArrayName, }) => {
             if (fieldArrayName === _name.current || !fieldArrayName) {
@@ -12476,8 +12423,6 @@ function useFieldArray(props) {
         ids.current = removeArrayAt(ids.current, index);
         updateValues(updatedFieldArrayValues);
         setFields(updatedFieldArrayValues);
-        !Array.isArray(get$1(control._fields, name)) &&
-            set$1(control._fields, name, undefined);
         control._updateFieldArray(name, updatedFieldArrayValues, removeArrayAt, {
             argA: index,
         });
@@ -12792,8 +12737,7 @@ var getRuleValue = (rule) => isUndefined(rule)
             : rule;
 const ASYNC_FUNCTION = 'AsyncFunction';
-var hasPromiseValidation = (fieldReference) => !!fieldReference &&
-    !!fieldReference.validate &&
+var hasPromiseValidation = (fieldReference) => (!fieldReference || !fieldReference.validate) &&
     !!((isFunction$1(fieldReference.validate) &&
         fieldReference.validate.constructor.name === ASYNC_FUNCTION) ||
         (isObject$2(fieldReference.validate) &&
@@ -12922,7 +12866,7 @@ function createFormControl(props = {}) {
         timer = setTimeout(callback, wait);
     };
     const _updateValid = async (shouldUpdateValid) => {
-        if (!_options.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
+        if (!props.disabled && (_proxyFormState.isValid || shouldUpdateValid)) {
             const isValid = _options.resolver
                 ? isEmptyObject((await _executeSchema()).errors)
                 : await executeBuiltInValidation(_fields, true);
@@ -12934,7 +12878,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateIsValidating = (names, isValidating) => {
-        if (!_options.disabled &&
+        if (!props.disabled &&
             (_proxyFormState.isValidating || _proxyFormState.validatingFields)) {
             (names || Array.from(_names.mount)).forEach((name) => {
                 if (name) {
@@ -12950,7 +12894,7 @@ function createFormControl(props = {}) {
         }
     };
     const _updateFieldArray = (name, values = [], method, args, shouldSetValues = true, shouldUpdateFieldsAndState = true) => {
-        if (args && method && !_options.disabled) {
+        if (args && method && !props.disabled) {
             _state.action = true;
             if (shouldUpdateFieldsAndState && Array.isArray(get$1(_fields, name))) {
                 const fieldValues = method(get$1(_fields, name), args.argA, args.argB);
@@ -13014,7 +12958,7 @@ function createFormControl(props = {}) {
         const output = {
             name,
         };
-        if (!_options.disabled) {
+        if (!props.disabled) {
             const disabledField = !!(get$1(_fields, name) &&
                 get$1(_fields, name)._f &&
                 get$1(_fields, name)._f.disabled);
@@ -13055,9 +12999,9 @@ function createFormControl(props = {}) {
         const shouldUpdateValid = _proxyFormState.isValid &&
             isBoolean(isValid) &&
             _formState.isValid !== isValid;
-        if (_options.delayError && error) {
+        if (props.delayError && error) {
             delayErrorCallback = debounce(() => updateErrors(name, error));
-            delayErrorCallback(_options.delayError);
+            delayErrorCallback(props.delayError);
         }
         else {
             clearTimeout(timer);
@@ -13150,7 +13094,7 @@ function createFormControl(props = {}) {
         }
         _names.unMount = new Set();
     };
-    const _getDirty = (name, data) => !_options.disabled &&
+    const _getDirty = (name, data) => !props.disabled &&
         (name && data && set$1(_formValues, name, data),
             !deepEqual(getValues(), _defaultValues));
     const _getWatch = (names, defaultValue, isGlobal) => generateWatchOutput(names, _names, {
@@ -13162,7 +13106,7 @@ function createFormControl(props = {}) {
                     ? { [names]: defaultValue }
                     : defaultValue),
     }, isGlobal, defaultValue);
-    const _getFieldArray = (name) => compact(get$1(_state.mount ? _formValues : _defaultValues, name, _options.shouldUnregister ? get$1(_defaultValues, name, []) : []));
+    const _getFieldArray = (name) => compact(get$1(_state.mount ? _formValues : _defaultValues, name, props.shouldUnregister ? get$1(_defaultValues, name, []) : []));
     const setFieldValue = (name, value, options = {}) => {
         const field = get$1(_fields, name);
         let fieldValue = value;
@@ -13295,7 +13239,7 @@ function createFormControl(props = {}) {
                 });
             if (shouldSkipValidation) {
                 if (_proxyFormState.isValid) {
-                    if (_options.mode === 'onBlur') {
+                    if (props.mode === 'onBlur') {
                         if (isBlurEvent) {
                             _updateValid();
                         }
@@ -13460,15 +13404,13 @@ function createFormControl(props = {}) {
                 : isUndefined(value)
                     ? getFieldValue(field ? field._f : get$1(fields, name)._f)
                     : value;
-            if (disabled || (!disabled && !isUndefined(inputValue))) {
-                set$1(_formValues, name, inputValue);
-            }
+            set$1(_formValues, name, inputValue);
             updateTouchAndDirty(name, inputValue, false, false, true);
         }
     };
     const register = (name, options = {}) => {
         let field = get$1(_fields, name);
-        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
+        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
         set$1(_fields, name, {
             ...(field || {}),
             _f: {
@@ -13484,7 +13426,7 @@ function createFormControl(props = {}) {
                 field,
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
-                    : _options.disabled,
+                    : props.disabled,
                 name,
                 value: options.value,
             });
@@ -13494,7 +13436,7 @@ function createFormControl(props = {}) {
         }
         return {
             ...(disabledIsDefined
-                ? { disabled: options.disabled || _options.disabled }
+                ? { disabled: options.disabled || props.disabled }
                 : {}),
             ...(_options.progressive
                 ? {
@@ -13578,12 +13520,6 @@ function createFormControl(props = {}) {
             e.preventDefault && e.preventDefault();
             e.persist && e.persist();
         }
-        if (_options.disabled) {
-            if (onInvalid) {
-                await onInvalid({ ..._formState.errors }, e);
-            }
-            return;
-        }
         let fieldValues = cloneObject(_formValues);
         _subjects.state.next({
             isSubmitting: true,
@@ -13691,7 +13627,7 @@ function createFormControl(props = {}) {
                 }
                 _fields = {};
             }
-            _formValues = _options.shouldUnregister
+            _formValues = props.shouldUnregister
                 ? keepStateOptions.keepDefaultValues
                     ? cloneObject(_defaultValues)
                     : {}
@@ -13715,7 +13651,7 @@ function createFormControl(props = {}) {
             !_proxyFormState.isValid ||
                 !!keepStateOptions.keepIsValid ||
                 !!keepStateOptions.keepDirtyValues;
-        _state.watch = !!_options.shouldUnregister;
+        _state.watch = !!props.shouldUnregister;
         _subjects.state.next({
             submitCount: keepStateOptions.keepSubmitCount
                 ? _formState.submitCount
@@ -13762,9 +13698,7 @@ function createFormControl(props = {}) {
                 : fieldReference.ref;
             if (fieldRef.focus) {
                 fieldRef.focus();
-                options.shouldSelect &&
-                    isFunction$1(fieldRef.select) &&
-                    fieldRef.select();
+                options.shouldSelect && fieldRef.select();
             }
         }
     };
@@ -13886,8 +13820,8 @@ function createFormControl(props = {}) {
  * ```
  */
 function useForm(props = {}) {
-    const _formControl = React.useRef(undefined);
-    const _values = React.useRef(undefined);
+    const _formControl = React.useRef();
+    const _values = React.useRef();
     const [formState, updateFormState] = React.useState({
         isDirty: false,
         isValidating: false,
@@ -13965,6 +13899,11 @@ function useForm(props = {}) {
                 values: control._getWatch(),
             });
     }, [props.shouldUnregister, control]);
+    React.useEffect(() => {
+        if (_formControl.current) {
+            _formControl.current.watch = _formControl.current.watch.bind({});
+        }
+    }, [formState]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }
@@ -18398,53 +18337,6 @@ function setYear(date, year, options) {
   return date_;
 }
-const FIVE_WEEKS = 5;
-const FOUR_WEEKS = 4;
-/**
- * Return the number of weeks to display in the broadcast calendar.
- *
- * @since 9.4.0
- */
-function getBroadcastWeeksInMonth(month, dateLib) {
-  // Get the first day of the month
-  const firstDayOfMonth = dateLib.startOfMonth(month);
-  // Get the day of the week for the first day of the month (1-7, where 1 is Monday)
-  const firstDayOfWeek = firstDayOfMonth.getDay() > 0 ? firstDayOfMonth.getDay() : 7;
-  const broadcastStartDate = dateLib.addDays(month, -firstDayOfWeek + 1);
-  const lastDateOfLastWeek = dateLib.addDays(broadcastStartDate, FIVE_WEEKS * 7 - 1);
-  const numberOfWeeks = month.getMonth() === lastDateOfLastWeek.getMonth() ? FIVE_WEEKS : FOUR_WEEKS;
-  return numberOfWeeks;
-}
-/**
- * Return the start date of the week in the broadcast calendar.
- *
- * @since 9.4.0
- */
-function startOfBroadcastWeek(date, dateLib) {
-  const firstOfMonth = dateLib.startOfMonth(date);
-  const dayOfWeek = firstOfMonth.getDay();
-  if (dayOfWeek === 1) {
-    return firstOfMonth;
-  } else if (dayOfWeek === 0) {
-    return dateLib.addDays(firstOfMonth, -1 * 6);
-  } else {
-    return dateLib.addDays(firstOfMonth, -1 * (dayOfWeek - 1));
-  }
-}
-/**
- * Return the end date of the week in the broadcast calendar.
- *
- * @since 9.4.0
- */
-function endOfBroadcastWeek(date, dateLib) {
-  const startDate = startOfBroadcastWeek(date, dateLib);
-  const numberOfWeeks = getBroadcastWeeksInMonth(date, dateLib);
-  const endDate = dateLib.addDays(startDate, numberOfWeeks * 7 - 1);
-  return endDate;
-}
 /**
  * A wrapper class around [date-fns](http://date-fns.org) sharing the same
  * options. Methods of this class can be overridden using the
@@ -18525,15 +18417,6 @@ class DateLib {
     this.differenceInCalendarMonths = (dateLeft, dateRight) => {
       return this.overrides?.differenceInCalendarMonths ? this.overrides.differenceInCalendarMonths(dateLeft, dateRight) : differenceInCalendarMonths(dateLeft, dateRight);
     };
-    /**
-     * Returns the end of the broadcast week for the given date.
-     *
-     * @param date The original date.
-     * @returns The end of the broadcast week.
-     */
-    this.endOfBroadcastWeek = date => {
-      return this.overrides?.endOfBroadcastWeek ? this.overrides.endOfBroadcastWeek(date, this) : endOfBroadcastWeek(date, this);
-    };
     /**
      * Returns the end of the ISO week for the given date.
      *
@@ -18695,15 +18578,6 @@ class DateLib {
     this.setYear = (date, year) => {
       return this.overrides?.setYear ? this.overrides.setYear(date, year) : setYear(date, year);
     };
-    /**
-     * Returns the start of the broadcast week for the given date.
-     *
-     * @param date The original date.
-     * @returns The start of the broadcast week.
-     */
-    this.startOfBroadcastWeek = date => {
-      return this.overrides?.startOfBroadcastWeek ? this.overrides.startOfBroadcastWeek(date, this) : startOfBroadcastWeek(date, this);
-    };
     /**
      * Returns the start of the day for the given date.
      *
@@ -19186,9 +19060,7 @@ function Weekday(props) {
  * @see https://daypicker.dev/guides/custom-components
  */
 function Weekdays(props) {
-  return /*#__PURE__*/React.createElement("thead", {
-    "aria-hidden": true
-  }, /*#__PURE__*/React.createElement("tr", {
+  return /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", {
     ...props
   }));
 }
@@ -19291,8 +19163,7 @@ function getDataAttributes(props) {
     "data-mode": props.mode ?? undefined,
     "data-required": "required" in props ? props.required : undefined,
     "data-multiple-months": props.numberOfMonths && props.numberOfMonths > 1 || undefined,
-    "data-week-numbers": props.showWeekNumber || undefined,
-    "data-broadcast-calendar": props.broadcastCalendar || undefined
+    "data-week-numbers": props.showWeekNumber || undefined
   };
   Object.entries(props).forEach(([key, val]) => {
     if (key.startsWith("data-")) {
@@ -19358,7 +19229,7 @@ function formatDay(date, options, dateLib) {
  */
 function formatMonthDropdown(/** The month number to format. */
 monthNumber, /** The locale to use for formatting. */
-locale) {
+locale = enUS$1) {
   return locale.localize?.month(monthNumber);
 }
@@ -19448,12 +19319,13 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
   if (!navEnd) return undefined;
   const {
     addMonths,
-    startOfMonth
+    startOfMonth,
+    isBefore
   } = dateLib;
   const year = displayMonth.getFullYear();
   const months = [];
   let month = navStart;
-  while (months.length < 12) {
+  while (months.length < 12 && isBefore(month, addMonths(navEnd, 1))) {
     months.push(month.getMonth());
     month = addMonths(month, 1);
   }
@@ -19461,7 +19333,7 @@ function getMonthOptions(displayMonth, navStart, navEnd, formatters, dateLib) {
     return a - b;
   });
   const options = sortedMonths.map(value => {
-    const label = formatters.formatMonthDropdown(value, dateLib.options.locale ?? enUS$1);
+    const label = formatters.formatMonthDropdown(value, dateLib.options.locale);
     const month = dateLib.Date ? new dateLib.Date(year, value) : new Date(year, value);
     const disabled = navStart && month < startOfMonth(navStart) || navEnd && month > startOfMonth(navEnd) || false;
     return {
@@ -19836,8 +19708,7 @@ function tzName(tz, date) {
  */
 function getWeekdays(/** The date library. */
 dateLib, /** Use ISOWeek instead of locale/ */
-ISOWeek, timeZone, /** @since 9.4.0 */
-broadcastCalendar) {
+ISOWeek, timeZone) {
   const date = timeZone ? TZDate.tz(timeZone) : dateLib.Date ? new dateLib.Date() : new Date();
   const start = ISOWeek ? dateLib.startOfISOWeek(date) : dateLib.startOfWeek(date);
   const days = [];
@@ -19849,18 +19720,20 @@ broadcastCalendar) {
 }
 /** Return the years to show in the dropdown. */
-function getYearOptions(navStart, navEnd, formatters, dateLib) {
-  if (!navStart) return undefined;
-  if (!navEnd) return undefined;
+function getYearOptions(displayMonth, calendarStart, calendarEnd, formatters, dateLib) {
+  if (!calendarStart) return undefined;
+  if (!calendarEnd) return undefined;
   const {
+    startOfMonth,
     startOfYear,
     endOfYear,
     addYears,
     isBefore,
     isSameYear
   } = dateLib;
-  const firstNavYear = startOfYear(navStart);
-  const lastNavYear = endOfYear(navEnd);
+  const month = displayMonth.getMonth();
+  const firstNavYear = startOfYear(calendarStart);
+  const lastNavYear = endOfYear(calendarEnd);
   const years = [];
   let year = firstNavYear;
   while (isBefore(year, lastNavYear) || isSameYear(year, lastNavYear)) {
@@ -19868,11 +19741,13 @@ function getYearOptions(navStart, navEnd, formatters, dateLib) {
     year = addYears(year, 1);
   }
   return years.map(value => {
+    const year = dateLib.Date ? new dateLib.Date(value, month) : new Date(value, month);
+    const disabled = calendarStart && year < startOfMonth(calendarStart) || month && calendarEnd && year > startOfMonth(calendarEnd) || false;
     const label = formatters.formatYearDropdown(value);
     return {
       value,
       label,
-      disabled: false
+      disabled
     };
   });
 }
@@ -20036,30 +19911,29 @@ var defaultLabels = /*#__PURE__*/Object.freeze({
   labelYearDropdown: labelYearDropdown
 });
+/** The number of days in a month when having 6 weeks. */
+const NrOfDaysWithFixedWeeks = 42;
 /** Return all the dates to display in the calendar. */
 function getDates(displayMonths, maxDate, props, dateLib) {
   const firstMonth = displayMonths[0];
   const lastMonth = displayMonths[displayMonths.length - 1];
   const {
     ISOWeek,
-    fixedWeeks,
-    broadcastCalendar
+    fixedWeeks
   } = props ?? {};
   const {
+    startOfWeek,
+    endOfWeek,
+    startOfISOWeek,
+    endOfISOWeek,
     addDays,
     differenceInCalendarDays,
     differenceInCalendarMonths,
-    endOfBroadcastWeek,
-    endOfISOWeek,
-    endOfMonth,
-    endOfWeek,
     isAfter,
-    startOfBroadcastWeek,
-    startOfISOWeek,
-    startOfWeek
+    endOfMonth
   } = dateLib;
-  const startWeekFirstDate = broadcastCalendar ? startOfBroadcastWeek(firstMonth, dateLib) : ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
-  const endWeekLastDate = broadcastCalendar ? endOfBroadcastWeek(lastMonth, dateLib) : ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
+  const startWeekFirstDate = ISOWeek ? startOfISOWeek(firstMonth) : startOfWeek(firstMonth);
+  const endWeekLastDate = ISOWeek ? endOfISOWeek(endOfMonth(lastMonth)) : endOfWeek(endOfMonth(lastMonth));
   const nOfDays = differenceInCalendarDays(endWeekLastDate, startWeekFirstDate);
   const nOfMonths = differenceInCalendarMonths(lastMonth, firstMonth) + 1;
   const dates = [];
@@ -20071,11 +19945,9 @@ function getDates(displayMonths, maxDate, props, dateLib) {
     dates.push(date);
   }
   // If fixed weeks is enabled, add the extra dates to the array
-  const nrOfDaysWithFixedWeeks = broadcastCalendar ? 35 : 42;
-  const extraDates = nrOfDaysWithFixedWeeks * nOfMonths;
+  const extraDates = NrOfDaysWithFixedWeeks * nOfMonths;
   if (fixedWeeks && dates.length < extraDates) {
-    const daysToAdd = extraDates - dates.length;
-    for (let i = 0; i < daysToAdd; i++) {
+    for (let i = 0; i < 7; i++) {
       const date = addDays(dates[dates.length - 1], 1);
       dates.push(date);
     }
@@ -20186,29 +20058,25 @@ displayMonths, /** The dates to display in the calendar. */
 dates, /** Options from the props context. */
 props, dateLib) {
   const {
-    addDays,
-    endOfBroadcastWeek,
+    startOfWeek,
+    endOfWeek,
+    startOfISOWeek,
     endOfISOWeek,
     endOfMonth,
-    endOfWeek,
-    getISOWeek,
+    addDays,
     getWeek,
-    startOfBroadcastWeek,
-    startOfISOWeek,
-    startOfWeek
+    getISOWeek
   } = dateLib;
   const dayPickerMonths = displayMonths.reduce((months, month) => {
-    const firstDateOfFirstWeek = props.broadcastCalendar ? startOfBroadcastWeek(month, dateLib) : props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
-    const lastDateOfLastWeek = props.broadcastCalendar ? endOfBroadcastWeek(month, dateLib) : props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
+    const firstDateOfFirstWeek = props.ISOWeek ? startOfISOWeek(month) : startOfWeek(month);
+    const lastDateOfLastWeek = props.ISOWeek ? endOfISOWeek(endOfMonth(month)) : endOfWeek(endOfMonth(month));
     /** The dates to display in the month. */
     const monthDates = dates.filter(date => {
       return date >= firstDateOfFirstWeek && date <= lastDateOfLastWeek;
     });
-    const nrOfDaysWithFixedWeeks = props.broadcastCalendar ? 35 : 42;
-    if (props.fixedWeeks && monthDates.length < nrOfDaysWithFixedWeeks) {
+    if (props.fixedWeeks && monthDates.length < 42) {
       const extraDates = dates.filter(date => {
-        const daysToAdd = nrOfDaysWithFixedWeeks - monthDates.length;
-        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, daysToAdd);
+        return date > lastDateOfLastWeek && date <= addDays(lastDateOfLastWeek, 7);
       });
       monthDates.push(...extraDates);
     }
@@ -20646,30 +20514,27 @@ function dateMatchModifiers(date, matchers, dateLib = defaultDateLib) {
 /** Return the next date that should be focused. */
 function getFocusableDate(moveBy, moveDir, refDate, navStart, navEnd, props, dateLib) {
   const {
-    ISOWeek,
-    broadcastCalendar
+    ISOWeek
   } = props;
   const {
     addDays,
     addMonths,
-    addWeeks,
     addYears,
-    endOfBroadcastWeek,
+    addWeeks,
+    startOfISOWeek,
     endOfISOWeek,
+    startOfWeek,
     endOfWeek,
     max,
-    min,
-    startOfBroadcastWeek,
-    startOfISOWeek,
-    startOfWeek
+    min
   } = dateLib;
   const moveFns = {
     day: addDays,
     week: addWeeks,
     month: addMonths,
     year: addYears,
-    startOfWeek: date => broadcastCalendar ? startOfBroadcastWeek(date, dateLib) : ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
-    endOfWeek: date => broadcastCalendar ? endOfBroadcastWeek(date, dateLib) : ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
+    startOfWeek: date => ISOWeek ? startOfISOWeek(date) : startOfWeek(date),
+    endOfWeek: date => ISOWeek ? endOfISOWeek(date) : endOfWeek(date)
   };
   let focusableDate = moveFns[moveBy](refDate, moveDir === "after" ? 1 : -1);
   if (moveDir === "before" && navStart) {
@@ -20735,8 +20600,6 @@ function useFocus(props, calendar, getModifiers, isSelected, dateLib) {
 /**
  * Return a function to get the modifiers for a given day.
  *
- * NOTE: this is not an hook, but a factory for `getModifiers`.
- *
  * @private
  */
 function useGetModifiers(days, props, dateLib) {
@@ -20745,19 +20608,12 @@ function useGetModifiers(days, props, dateLib) {
     hidden,
     modifiers,
     showOutsideDays,
-    broadcastCalendar,
     today
   } = props;
   const {
     isSameDay,
-    isSameMonth,
-    startOfMonth,
-    isBefore,
-    endOfMonth,
-    isAfter
+    isSameMonth
   } = dateLib;
-  const startMonth = props.startMonth && startOfMonth(props.startMonth);
-  const endMonth = props.endMonth && endOfMonth(props.endMonth);
   const internalModifiersMap = {
     [DayFlag.focused]: [],
     [DayFlag.outside]: [],
@@ -20766,18 +20622,20 @@ function useGetModifiers(days, props, dateLib) {
     [DayFlag.today]: []
   };
   const customModifiersMap = {};
+  const selectionModifiersMap = {
+    [SelectionState.range_end]: [],
+    [SelectionState.range_middle]: [],
+    [SelectionState.range_start]: [],
+    [SelectionState.selected]: []
+  };
   for (const day of days) {
     const {
       date,
       displayMonth
     } = day;
     const isOutside = Boolean(displayMonth && !isSameMonth(date, displayMonth));
-    const isBeforeStartMonth = Boolean(startMonth && isBefore(date, startMonth));
-    const isAfterEndMonth = Boolean(endMonth && isAfter(date, endMonth));
     const isDisabled = Boolean(disabled && dateMatchModifiers(date, disabled, dateLib));
-    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || isBeforeStartMonth || isAfterEndMonth ||
-    // Broadcast calendar will show outside days as default
-    !broadcastCalendar && !showOutsideDays && isOutside || broadcastCalendar && showOutsideDays === false && isOutside;
+    const isHidden = Boolean(hidden && dateMatchModifiers(date, hidden, dateLib)) || !showOutsideDays && isOutside;
     const isToday = isSameDay(date, today ?? (props.timeZone ? TZDate.tz(props.timeZone) : dateLib.Date ? new dateLib.Date() : new Date()));
     if (isOutside) internalModifiersMap.outside.push(day);
     if (isDisabled) internalModifiersMap.disabled.push(day);
@@ -20806,16 +20664,27 @@ function useGetModifiers(days, props, dateLib) {
       [DayFlag.outside]: false,
       [DayFlag.today]: false
     };
+    const selectionStates = {
+      [SelectionState.range_end]: false,
+      [SelectionState.range_middle]: false,
+      [SelectionState.range_start]: false,
+      [SelectionState.selected]: false
+    };
     const customModifiers = {};
     // Find the modifiers for the given day
     for (const name in internalModifiersMap) {
       const days = internalModifiersMap[name];
       dayFlags[name] = days.some(d => d === day);
     }
+    for (const name in selectionModifiersMap) {
+      const days = selectionModifiersMap[name];
+      selectionStates[name] = days.some(d => d === day);
+    }
     for (const name in customModifiersMap) {
       customModifiers[name] = customModifiersMap[name].some(d => d === day);
     }
     return {
+      ...selectionStates,
       ...dayFlags,
       // custom modifiers should override all the previous ones
       ...customModifiers
@@ -21220,7 +21089,7 @@ function DayPicker(props) {
     };
     const dateLib = new DateLib({
       locale,
-      weekStartsOn: props.broadcastCalendar ? 1 : props.weekStartsOn,
+      weekStartsOn: props.weekStartsOn,
       firstWeekContainsDate: props.firstWeekContainsDate,
       useAdditionalWeekYearTokens: props.useAdditionalWeekYearTokens,
       useAdditionalDayOfYearTokens: props.useAdditionalDayOfYearTokens
@@ -21239,7 +21108,7 @@ function DayPicker(props) {
         ...props.classNames
       }
     };
-  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn, props.broadcastCalendar]);
+  }, [props.classNames, props.components, props.dateLib, props.firstWeekContainsDate, props.formatters, props.labels, props.locale, props.useAdditionalDayOfYearTokens, props.useAdditionalWeekYearTokens, props.weekStartsOn]);
   const {
     captionLayout,
     mode,
@@ -21349,16 +21218,6 @@ function DayPicker(props) {
   const handleDayMouseLeave = React.useCallback((day, modifiers) => e => {
     onDayMouseLeave?.(day.date, modifiers, e);
   }, [onDayMouseLeave]);
-  const handleMonthChange = React.useCallback(date => e => {
-    const selectedMonth = Number(e.target.value);
-    const month = dateLib.setMonth(dateLib.startOfMonth(date), selectedMonth);
-    goToMonth(month);
-  }, [dateLib, goToMonth]);
-  const handleYearChange = React.useCallback(date => e => {
-    const selectedYear = Number(e.target.value);
-    const month = dateLib.setYear(dateLib.startOfMonth(date), selectedYear);
-    goToMonth(month);
-  }, [dateLib, goToMonth]);
   const {
     className,
     style
@@ -21396,8 +21255,6 @@ function DayPicker(props) {
     lang: props.lang,
     nonce: props.nonce,
     title: props.title,
-    role: props.role,
-    "aria-label": props["aria-label"],
     ...dataAttributes
   }, /*#__PURE__*/React.createElement(components.Months, {
     className: classNames[UI.Months],
@@ -21411,8 +21268,17 @@ function DayPicker(props) {
     previousMonth: previousMonth,
     nextMonth: nextMonth
   })), months.map((calendarMonth, displayIndex) => {
+    const handleMonthChange = e => {
+      const selectedMonth = Number(e.target.value);
+      const month = dateLib.setMonth(dateLib.startOfMonth(calendarMonth.date), selectedMonth);
+      goToMonth(month);
+    };
+    const handleYearChange = e => {
+      const month = dateLib.setYear(dateLib.startOfMonth(calendarMonth.date), Number(e.target.value));
+      goToMonth(month);
+    };
     const dropdownMonths = getMonthOptions(calendarMonth.date, navStart, navEnd, formatters, dateLib);
-    const dropdownYears = getYearOptions(navStart, navEnd, formatters, dateLib);
+    const dropdownYears = getYearOptions(months[0].date, navStart, navEnd, formatters, dateLib);
     return /*#__PURE__*/React.createElement(components.Month, {
       className: classNames[UI.Month],
       style: styles?.[UI.Month],
@@ -21433,7 +21299,7 @@ function DayPicker(props) {
       classNames: classNames,
       components: components,
       disabled: Boolean(props.disableNavigation),
-      onChange: handleMonthChange(calendarMonth.date),
+      onChange: handleMonthChange,
       options: dropdownMonths,
       style: styles?.[UI.Dropdown],
       value: calendarMonth.date.getMonth()
@@ -21446,7 +21312,7 @@ function DayPicker(props) {
       classNames: classNames,
       components: components,
       disabled: Boolean(props.disableNavigation),
-      onChange: handleYearChange(calendarMonth.date),
+      onChange: handleYearChange,
       options: dropdownYears,
       style: styles?.[UI.Dropdown],
       value: calendarMonth.date.getFullYear()
@@ -21493,8 +21359,7 @@ function DayPicker(props) {
           locale
         }),
         className: classNames[UI.WeekNumber],
-        scope: "row",
-        role: "rowheader"
+        scope: "row"
       }, formatWeekNumber(week.weekNumber))), week.days.map(day => {
         const {
           date
@@ -21514,14 +21379,14 @@ function DayPicker(props) {
         }
         const style = getStyleForModifiers(modifiers, styles, props.modifiersStyles);
         const className = getClassNamesForModifiers(modifiers, classNames, props.modifiersClassNames);
-        const ariaLabel = !isInteractive && !modifiers.hidden ? labelGridcell(date, modifiers, dateLib.options, dateLib) : undefined;
+        const ariaLabel = !isInteractive ? labelGridcell(date, modifiers, dateLib.options, dateLib) : undefined;
         return /*#__PURE__*/React.createElement(components.Day, {
           key: `${dateLib.format(date, "yyyy-MM-dd")}_${dateLib.format(day.displayMonth, "yyyy-MM")}`,
           day: day,
           modifiers: modifiers,
           className: className.join(" "),
           style: style,
-          role: "gridcell",
+          "aria-hidden": modifiers.hidden || undefined,
           "aria-selected": modifiers.selected || undefined,
           "aria-label": ariaLabel,
           "data-day": dateLib.format(date, "yyyy-MM-dd"),
@@ -21532,7 +21397,7 @@ function DayPicker(props) {
           "data-outside": day.outside || undefined,
           "data-focused": modifiers.focused || undefined,
           "data-today": modifiers.today || undefined
-        }, !modifiers.hidden && isInteractive ? (/*#__PURE__*/React.createElement(components.DayButton, {
+        }, isInteractive ? (/*#__PURE__*/React.createElement(components.DayButton, {
           className: classNames[UI.DayButton],
           style: styles?.[UI.DayButton],
           type: "button",
@@ -21547,7 +21412,7 @@ function DayPicker(props) {
           onKeyDown: handleDayKeyDown(day, modifiers),
           onMouseEnter: handleDayMouseEnter(day, modifiers),
           onMouseLeave: handleDayMouseLeave(day, modifiers)
-        }, formatDay(date, dateLib.options, dateLib))) : !modifiers.hidden && formatDay(day.date, dateLib.options, dateLib));
+        }, formatDay(date, dateLib.options, dateLib))) : formatDay(day.date, dateLib.options, dateLib));
       }));
     }))));
   })), props.footer && (/*#__PURE__*/React.createElement(components.Footer, {
@@ -27146,7 +27011,7 @@ const AppHeader = ({
                           children: jsxRuntime.jsx("div", {
                             onClick: () => onQuickMenuClick(quickMenuItem),
                             className: classNames('ff-app-header-nav-bar-quickmenu-item', {
-                              ['ff-app-header-nav-bar-quickmenu-item--selected']: quickMenuItem.iconName === selectedQuickMenu
+                              ['ff-app-header-nav-bar-quickmenu-item--selected']: quickMenuItem.path === selectedQuickMenu
                             }),
                             children: jsxRuntime.jsx(Tooltip, {
                               title: quickMenuItem?.label,
@@ -27506,7 +27371,7 @@ const DashboardDonutChart = ({
                   className: "ff-legend-percentage",
                   children: jsxRuntime.jsx("td", {
                     className: "ff-legend-percentage",
-                    children: item.percentage ? item.percentage : typeof item.value === 'string' ? (parseFloat(item.value) / total * 100).toFixed(1) : (item.value / total * 100).toFixed(1)
+                    children: item.percentage ? item.percentage : typeof item.value === 'string' ? (parseFloat(item.value) / total * 100).toFixed(1) : total === 0 ? 0 : (item.value / total * 100).toFixed(1)
                   })
                 }), jsxRuntime.jsx("td", {
                   className: "ff-legend-count",
@@ -27623,9 +27488,9 @@ const DashboardDonutChart = ({
 var propTypes = {exports: {}};
-var reactIs = {exports: {}};
+var reactIs$1 = {exports: {}};
-var reactIs_production_min = {};
+var reactIs_production_min$1 = {};
 /** @license React v16.13.1
  * react-is.production.min.js
@@ -27635,10 +27500,10 @@ var reactIs_production_min = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var hasRequiredReactIs_production_min;
-function requireReactIs_production_min() {
-  if (hasRequiredReactIs_production_min) return reactIs_production_min;
-  hasRequiredReactIs_production_min = 1;
+var hasRequiredReactIs_production_min$1;
+function requireReactIs_production_min$1() {
+  if (hasRequiredReactIs_production_min$1) return reactIs_production_min$1;
+  hasRequiredReactIs_production_min$1 = 1;
   var b = "function" === typeof Symbol && Symbol.for,
     c = b ? Symbol.for("react.element") : 60103,
     d = b ? Symbol.for("react.portal") : 60106,
@@ -27691,64 +27556,64 @@ function requireReactIs_production_min() {
   function A(a) {
     return z(a) === m;
   }
-  reactIs_production_min.AsyncMode = l;
-  reactIs_production_min.ConcurrentMode = m;
-  reactIs_production_min.ContextConsumer = k;
-  reactIs_production_min.ContextProvider = h;
-  reactIs_production_min.Element = c;
-  reactIs_production_min.ForwardRef = n;
-  reactIs_production_min.Fragment = e;
-  reactIs_production_min.Lazy = t;
-  reactIs_production_min.Memo = r;
-  reactIs_production_min.Portal = d;
-  reactIs_production_min.Profiler = g;
-  reactIs_production_min.StrictMode = f;
-  reactIs_production_min.Suspense = p;
-  reactIs_production_min.isAsyncMode = function (a) {
+  reactIs_production_min$1.AsyncMode = l;
+  reactIs_production_min$1.ConcurrentMode = m;
+  reactIs_production_min$1.ContextConsumer = k;
+  reactIs_production_min$1.ContextProvider = h;
+  reactIs_production_min$1.Element = c;
+  reactIs_production_min$1.ForwardRef = n;
+  reactIs_production_min$1.Fragment = e;
+  reactIs_production_min$1.Lazy = t;
+  reactIs_production_min$1.Memo = r;
+  reactIs_production_min$1.Portal = d;
+  reactIs_production_min$1.Profiler = g;
+  reactIs_production_min$1.StrictMode = f;
+  reactIs_production_min$1.Suspense = p;
+  reactIs_production_min$1.isAsyncMode = function (a) {
     return A(a) || z(a) === l;
   };
-  reactIs_production_min.isConcurrentMode = A;
-  reactIs_production_min.isContextConsumer = function (a) {
+  reactIs_production_min$1.isConcurrentMode = A;
+  reactIs_production_min$1.isContextConsumer = function (a) {
     return z(a) === k;
   };
-  reactIs_production_min.isContextProvider = function (a) {
+  reactIs_production_min$1.isContextProvider = function (a) {
     return z(a) === h;
   };
-  reactIs_production_min.isElement = function (a) {
+  reactIs_production_min$1.isElement = function (a) {
     return "object" === typeof a && null !== a && a.$$typeof === c;
   };
-  reactIs_production_min.isForwardRef = function (a) {
+  reactIs_production_min$1.isForwardRef = function (a) {
     return z(a) === n;
   };
-  reactIs_production_min.isFragment = function (a) {
+  reactIs_production_min$1.isFragment = function (a) {
     return z(a) === e;
   };
-  reactIs_production_min.isLazy = function (a) {
+  reactIs_production_min$1.isLazy = function (a) {
     return z(a) === t;
   };
-  reactIs_production_min.isMemo = function (a) {
+  reactIs_production_min$1.isMemo = function (a) {
     return z(a) === r;
   };
-  reactIs_production_min.isPortal = function (a) {
+  reactIs_production_min$1.isPortal = function (a) {
     return z(a) === d;
   };
-  reactIs_production_min.isProfiler = function (a) {
+  reactIs_production_min$1.isProfiler = function (a) {
     return z(a) === g;
   };
-  reactIs_production_min.isStrictMode = function (a) {
+  reactIs_production_min$1.isStrictMode = function (a) {
     return z(a) === f;
   };
-  reactIs_production_min.isSuspense = function (a) {
+  reactIs_production_min$1.isSuspense = function (a) {
     return z(a) === p;
   };
-  reactIs_production_min.isValidElementType = function (a) {
+  reactIs_production_min$1.isValidElementType = function (a) {
     return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
   };
-  reactIs_production_min.typeOf = z;
-  return reactIs_production_min;
+  reactIs_production_min$1.typeOf = z;
+  return reactIs_production_min$1;
 }
-var reactIs_development = {};
+var reactIs_development$1 = {};
 /** @license React v16.13.1
  * react-is.development.js
@@ -27758,10 +27623,10 @@ var reactIs_development = {};
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var hasRequiredReactIs_development;
-function requireReactIs_development() {
-  if (hasRequiredReactIs_development) return reactIs_development;
-  hasRequiredReactIs_development = 1;
+var hasRequiredReactIs_development$1;
+function requireReactIs_development$1() {
+  if (hasRequiredReactIs_development$1) return reactIs_development$1;
+  hasRequiredReactIs_development$1 = 1;
   if (process.env.NODE_ENV !== "production") {
     (function () {
@@ -27888,49 +27753,49 @@ function requireReactIs_development() {
       function isSuspense(object) {
         return typeOf(object) === REACT_SUSPENSE_TYPE;
       }
-      reactIs_development.AsyncMode = AsyncMode;
-      reactIs_development.ConcurrentMode = ConcurrentMode;
-      reactIs_development.ContextConsumer = ContextConsumer;
-      reactIs_development.ContextProvider = ContextProvider;
-      reactIs_development.Element = Element;
-      reactIs_development.ForwardRef = ForwardRef;
-      reactIs_development.Fragment = Fragment;
-      reactIs_development.Lazy = Lazy;
-      reactIs_development.Memo = Memo;
-      reactIs_development.Portal = Portal;
-      reactIs_development.Profiler = Profiler;
-      reactIs_development.StrictMode = StrictMode;
-      reactIs_development.Suspense = Suspense;
-      reactIs_development.isAsyncMode = isAsyncMode;
-      reactIs_development.isConcurrentMode = isConcurrentMode;
-      reactIs_development.isContextConsumer = isContextConsumer;
-      reactIs_development.isContextProvider = isContextProvider;
-      reactIs_development.isElement = isElement;
-      reactIs_development.isForwardRef = isForwardRef;
-      reactIs_development.isFragment = isFragment;
-      reactIs_development.isLazy = isLazy;
-      reactIs_development.isMemo = isMemo;
-      reactIs_development.isPortal = isPortal;
-      reactIs_development.isProfiler = isProfiler;
-      reactIs_development.isStrictMode = isStrictMode;
-      reactIs_development.isSuspense = isSuspense;
-      reactIs_development.isValidElementType = isValidElementType;
-      reactIs_development.typeOf = typeOf;
+      reactIs_development$1.AsyncMode = AsyncMode;
+      reactIs_development$1.ConcurrentMode = ConcurrentMode;
+      reactIs_development$1.ContextConsumer = ContextConsumer;
+      reactIs_development$1.ContextProvider = ContextProvider;
+      reactIs_development$1.Element = Element;
+      reactIs_development$1.ForwardRef = ForwardRef;
+      reactIs_development$1.Fragment = Fragment;
+      reactIs_development$1.Lazy = Lazy;
+      reactIs_development$1.Memo = Memo;
+      reactIs_development$1.Portal = Portal;
+      reactIs_development$1.Profiler = Profiler;
+      reactIs_development$1.StrictMode = StrictMode;
+      reactIs_development$1.Suspense = Suspense;
+      reactIs_development$1.isAsyncMode = isAsyncMode;
+      reactIs_development$1.isConcurrentMode = isConcurrentMode;
+      reactIs_development$1.isContextConsumer = isContextConsumer;
+      reactIs_development$1.isContextProvider = isContextProvider;
+      reactIs_development$1.isElement = isElement;
+      reactIs_development$1.isForwardRef = isForwardRef;
+      reactIs_development$1.isFragment = isFragment;
+      reactIs_development$1.isLazy = isLazy;
+      reactIs_development$1.isMemo = isMemo;
+      reactIs_development$1.isPortal = isPortal;
+      reactIs_development$1.isProfiler = isProfiler;
+      reactIs_development$1.isStrictMode = isStrictMode;
+      reactIs_development$1.isSuspense = isSuspense;
+      reactIs_development$1.isValidElementType = isValidElementType;
+      reactIs_development$1.typeOf = typeOf;
     })();
   }
-  return reactIs_development;
+  return reactIs_development$1;
 }
-var hasRequiredReactIs;
-function requireReactIs() {
-  if (hasRequiredReactIs) return reactIs.exports;
-  hasRequiredReactIs = 1;
+var hasRequiredReactIs$1;
+function requireReactIs$1() {
+  if (hasRequiredReactIs$1) return reactIs$1.exports;
+  hasRequiredReactIs$1 = 1;
   if (process.env.NODE_ENV === 'production') {
-    reactIs.exports = requireReactIs_production_min();
+    reactIs$1.exports = requireReactIs_production_min$1();
   } else {
-    reactIs.exports = requireReactIs_development();
+    reactIs$1.exports = requireReactIs_development$1();
   }
-  return reactIs.exports;
+  return reactIs$1.exports;
 }
 /*
@@ -28145,7 +28010,7 @@ var hasRequiredFactoryWithTypeCheckers;
 function requireFactoryWithTypeCheckers() {
   if (hasRequiredFactoryWithTypeCheckers) return factoryWithTypeCheckers;
   hasRequiredFactoryWithTypeCheckers = 1;
-  var ReactIs = requireReactIs();
+  var ReactIs = requireReactIs$1();
   var assign = requireObjectAssign();
   var ReactPropTypesSecret = /*@__PURE__*/requireReactPropTypesSecret();
   var has = /*@__PURE__*/requireHas();
@@ -28758,7 +28623,7 @@ function requirePropTypes() {
   if (hasRequiredPropTypes) return propTypes.exports;
   hasRequiredPropTypes = 1;
   if (process.env.NODE_ENV !== 'production') {
-    var ReactIs = requireReactIs();
+    var ReactIs = requireReactIs$1();
     // By explicitly using `prop-types` you are opting into new development behavior.
     // http://fb.me/prop-types-in-prod
@@ -28993,6 +28858,316 @@ ReCAPTCHA.defaultProps = {
   badge: "bottomright"
 };
+var reactIs = {exports: {}};
+var reactIs_production_min = {};
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredReactIs_production_min;
+function requireReactIs_production_min() {
+  if (hasRequiredReactIs_production_min) return reactIs_production_min;
+  hasRequiredReactIs_production_min = 1;
+  var b = "function" === typeof Symbol && Symbol.for,
+    c = b ? Symbol.for("react.element") : 60103,
+    d = b ? Symbol.for("react.portal") : 60106,
+    e = b ? Symbol.for("react.fragment") : 60107,
+    f = b ? Symbol.for("react.strict_mode") : 60108,
+    g = b ? Symbol.for("react.profiler") : 60114,
+    h = b ? Symbol.for("react.provider") : 60109,
+    k = b ? Symbol.for("react.context") : 60110,
+    l = b ? Symbol.for("react.async_mode") : 60111,
+    m = b ? Symbol.for("react.concurrent_mode") : 60111,
+    n = b ? Symbol.for("react.forward_ref") : 60112,
+    p = b ? Symbol.for("react.suspense") : 60113,
+    q = b ? Symbol.for("react.suspense_list") : 60120,
+    r = b ? Symbol.for("react.memo") : 60115,
+    t = b ? Symbol.for("react.lazy") : 60116,
+    v = b ? Symbol.for("react.block") : 60121,
+    w = b ? Symbol.for("react.fundamental") : 60117,
+    x = b ? Symbol.for("react.responder") : 60118,
+    y = b ? Symbol.for("react.scope") : 60119;
+  function z(a) {
+    if ("object" === typeof a && null !== a) {
+      var u = a.$$typeof;
+      switch (u) {
+        case c:
+          switch (a = a.type, a) {
+            case l:
+            case m:
+            case e:
+            case g:
+            case f:
+            case p:
+              return a;
+            default:
+              switch (a = a && a.$$typeof, a) {
+                case k:
+                case n:
+                case t:
+                case r:
+                case h:
+                  return a;
+                default:
+                  return u;
+              }
+          }
+        case d:
+          return u;
+      }
+    }
+  }
+  function A(a) {
+    return z(a) === m;
+  }
+  reactIs_production_min.AsyncMode = l;
+  reactIs_production_min.ConcurrentMode = m;
+  reactIs_production_min.ContextConsumer = k;
+  reactIs_production_min.ContextProvider = h;
+  reactIs_production_min.Element = c;
+  reactIs_production_min.ForwardRef = n;
+  reactIs_production_min.Fragment = e;
+  reactIs_production_min.Lazy = t;
+  reactIs_production_min.Memo = r;
+  reactIs_production_min.Portal = d;
+  reactIs_production_min.Profiler = g;
+  reactIs_production_min.StrictMode = f;
+  reactIs_production_min.Suspense = p;
+  reactIs_production_min.isAsyncMode = function (a) {
+    return A(a) || z(a) === l;
+  };
+  reactIs_production_min.isConcurrentMode = A;
+  reactIs_production_min.isContextConsumer = function (a) {
+    return z(a) === k;
+  };
+  reactIs_production_min.isContextProvider = function (a) {
+    return z(a) === h;
+  };
+  reactIs_production_min.isElement = function (a) {
+    return "object" === typeof a && null !== a && a.$$typeof === c;
+  };
+  reactIs_production_min.isForwardRef = function (a) {
+    return z(a) === n;
+  };
+  reactIs_production_min.isFragment = function (a) {
+    return z(a) === e;
+  };
+  reactIs_production_min.isLazy = function (a) {
+    return z(a) === t;
+  };
+  reactIs_production_min.isMemo = function (a) {
+    return z(a) === r;
+  };
+  reactIs_production_min.isPortal = function (a) {
+    return z(a) === d;
+  };
+  reactIs_production_min.isProfiler = function (a) {
+    return z(a) === g;
+  };
+  reactIs_production_min.isStrictMode = function (a) {
+    return z(a) === f;
+  };
+  reactIs_production_min.isSuspense = function (a) {
+    return z(a) === p;
+  };
+  reactIs_production_min.isValidElementType = function (a) {
+    return "string" === typeof a || "function" === typeof a || a === e || a === m || a === g || a === f || a === p || a === q || "object" === typeof a && null !== a && (a.$$typeof === t || a.$$typeof === r || a.$$typeof === h || a.$$typeof === k || a.$$typeof === n || a.$$typeof === w || a.$$typeof === x || a.$$typeof === y || a.$$typeof === v);
+  };
+  reactIs_production_min.typeOf = z;
+  return reactIs_production_min;
+}
+var reactIs_development = {};
+/** @license React v16.13.1
+ * react-is.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredReactIs_development;
+function requireReactIs_development() {
+  if (hasRequiredReactIs_development) return reactIs_development;
+  hasRequiredReactIs_development = 1;
+  if (process.env.NODE_ENV !== "production") {
+    (function () {
+      // The Symbol used to tag the ReactElement-like types. If there is no native Symbol
+      // nor polyfill, then a plain number is used for performance.
+      var hasSymbol = typeof Symbol === 'function' && Symbol.for;
+      var REACT_ELEMENT_TYPE = hasSymbol ? Symbol.for('react.element') : 0xeac7;
+      var REACT_PORTAL_TYPE = hasSymbol ? Symbol.for('react.portal') : 0xeaca;
+      var REACT_FRAGMENT_TYPE = hasSymbol ? Symbol.for('react.fragment') : 0xeacb;
+      var REACT_STRICT_MODE_TYPE = hasSymbol ? Symbol.for('react.strict_mode') : 0xeacc;
+      var REACT_PROFILER_TYPE = hasSymbol ? Symbol.for('react.profiler') : 0xead2;
+      var REACT_PROVIDER_TYPE = hasSymbol ? Symbol.for('react.provider') : 0xeacd;
+      var REACT_CONTEXT_TYPE = hasSymbol ? Symbol.for('react.context') : 0xeace; // TODO: We don't use AsyncMode or ConcurrentMode anymore. They were temporary
+      // (unstable) APIs that have been removed. Can we remove the symbols?
+      var REACT_ASYNC_MODE_TYPE = hasSymbol ? Symbol.for('react.async_mode') : 0xeacf;
+      var REACT_CONCURRENT_MODE_TYPE = hasSymbol ? Symbol.for('react.concurrent_mode') : 0xeacf;
+      var REACT_FORWARD_REF_TYPE = hasSymbol ? Symbol.for('react.forward_ref') : 0xead0;
+      var REACT_SUSPENSE_TYPE = hasSymbol ? Symbol.for('react.suspense') : 0xead1;
+      var REACT_SUSPENSE_LIST_TYPE = hasSymbol ? Symbol.for('react.suspense_list') : 0xead8;
+      var REACT_MEMO_TYPE = hasSymbol ? Symbol.for('react.memo') : 0xead3;
+      var REACT_LAZY_TYPE = hasSymbol ? Symbol.for('react.lazy') : 0xead4;
+      var REACT_BLOCK_TYPE = hasSymbol ? Symbol.for('react.block') : 0xead9;
+      var REACT_FUNDAMENTAL_TYPE = hasSymbol ? Symbol.for('react.fundamental') : 0xead5;
+      var REACT_RESPONDER_TYPE = hasSymbol ? Symbol.for('react.responder') : 0xead6;
+      var REACT_SCOPE_TYPE = hasSymbol ? Symbol.for('react.scope') : 0xead7;
+      function isValidElementType(type) {
+        return typeof type === 'string' || typeof type === 'function' ||
+        // Note: its typeof might be other than 'symbol' or 'number' if it's a polyfill.
+        type === REACT_FRAGMENT_TYPE || type === REACT_CONCURRENT_MODE_TYPE || type === REACT_PROFILER_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || typeof type === 'object' && type !== null && (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_RESPONDER_TYPE || type.$$typeof === REACT_SCOPE_TYPE || type.$$typeof === REACT_BLOCK_TYPE);
+      }
+      function typeOf(object) {
+        if (typeof object === 'object' && object !== null) {
+          var $$typeof = object.$$typeof;
+          switch ($$typeof) {
+            case REACT_ELEMENT_TYPE:
+              var type = object.type;
+              switch (type) {
+                case REACT_ASYNC_MODE_TYPE:
+                case REACT_CONCURRENT_MODE_TYPE:
+                case REACT_FRAGMENT_TYPE:
+                case REACT_PROFILER_TYPE:
+                case REACT_STRICT_MODE_TYPE:
+                case REACT_SUSPENSE_TYPE:
+                  return type;
+                default:
+                  var $$typeofType = type && type.$$typeof;
+                  switch ($$typeofType) {
+                    case REACT_CONTEXT_TYPE:
+                    case REACT_FORWARD_REF_TYPE:
+                    case REACT_LAZY_TYPE:
+                    case REACT_MEMO_TYPE:
+                    case REACT_PROVIDER_TYPE:
+                      return $$typeofType;
+                    default:
+                      return $$typeof;
+                  }
+              }
+            case REACT_PORTAL_TYPE:
+              return $$typeof;
+          }
+        }
+        return undefined;
+      } // AsyncMode is deprecated along with isAsyncMode
+      var AsyncMode = REACT_ASYNC_MODE_TYPE;
+      var ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
+      var ContextConsumer = REACT_CONTEXT_TYPE;
+      var ContextProvider = REACT_PROVIDER_TYPE;
+      var Element = REACT_ELEMENT_TYPE;
+      var ForwardRef = REACT_FORWARD_REF_TYPE;
+      var Fragment = REACT_FRAGMENT_TYPE;
+      var Lazy = REACT_LAZY_TYPE;
+      var Memo = REACT_MEMO_TYPE;
+      var Portal = REACT_PORTAL_TYPE;
+      var Profiler = REACT_PROFILER_TYPE;
+      var StrictMode = REACT_STRICT_MODE_TYPE;
+      var Suspense = REACT_SUSPENSE_TYPE;
+      var hasWarnedAboutDeprecatedIsAsyncMode = false; // AsyncMode should be deprecated
+      function isAsyncMode(object) {
+        {
+          if (!hasWarnedAboutDeprecatedIsAsyncMode) {
+            hasWarnedAboutDeprecatedIsAsyncMode = true; // Using console['warn'] to evade Babel and ESLint
+            console['warn']('The ReactIs.isAsyncMode() alias has been deprecated, ' + 'and will be removed in React 17+. Update your code to use ' + 'ReactIs.isConcurrentMode() instead. It has the exact same API.');
+          }
+        }
+        return isConcurrentMode(object) || typeOf(object) === REACT_ASYNC_MODE_TYPE;
+      }
+      function isConcurrentMode(object) {
+        return typeOf(object) === REACT_CONCURRENT_MODE_TYPE;
+      }
+      function isContextConsumer(object) {
+        return typeOf(object) === REACT_CONTEXT_TYPE;
+      }
+      function isContextProvider(object) {
+        return typeOf(object) === REACT_PROVIDER_TYPE;
+      }
+      function isElement(object) {
+        return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
+      }
+      function isForwardRef(object) {
+        return typeOf(object) === REACT_FORWARD_REF_TYPE;
+      }
+      function isFragment(object) {
+        return typeOf(object) === REACT_FRAGMENT_TYPE;
+      }
+      function isLazy(object) {
+        return typeOf(object) === REACT_LAZY_TYPE;
+      }
+      function isMemo(object) {
+        return typeOf(object) === REACT_MEMO_TYPE;
+      }
+      function isPortal(object) {
+        return typeOf(object) === REACT_PORTAL_TYPE;
+      }
+      function isProfiler(object) {
+        return typeOf(object) === REACT_PROFILER_TYPE;
+      }
+      function isStrictMode(object) {
+        return typeOf(object) === REACT_STRICT_MODE_TYPE;
+      }
+      function isSuspense(object) {
+        return typeOf(object) === REACT_SUSPENSE_TYPE;
+      }
+      reactIs_development.AsyncMode = AsyncMode;
+      reactIs_development.ConcurrentMode = ConcurrentMode;
+      reactIs_development.ContextConsumer = ContextConsumer;
+      reactIs_development.ContextProvider = ContextProvider;
+      reactIs_development.Element = Element;
+      reactIs_development.ForwardRef = ForwardRef;
+      reactIs_development.Fragment = Fragment;
+      reactIs_development.Lazy = Lazy;
+      reactIs_development.Memo = Memo;
+      reactIs_development.Portal = Portal;
+      reactIs_development.Profiler = Profiler;
+      reactIs_development.StrictMode = StrictMode;
+      reactIs_development.Suspense = Suspense;
+      reactIs_development.isAsyncMode = isAsyncMode;
+      reactIs_development.isConcurrentMode = isConcurrentMode;
+      reactIs_development.isContextConsumer = isContextConsumer;
+      reactIs_development.isContextProvider = isContextProvider;
+      reactIs_development.isElement = isElement;
+      reactIs_development.isForwardRef = isForwardRef;
+      reactIs_development.isFragment = isFragment;
+      reactIs_development.isLazy = isLazy;
+      reactIs_development.isMemo = isMemo;
+      reactIs_development.isPortal = isPortal;
+      reactIs_development.isProfiler = isProfiler;
+      reactIs_development.isStrictMode = isStrictMode;
+      reactIs_development.isSuspense = isSuspense;
+      reactIs_development.isValidElementType = isValidElementType;
+      reactIs_development.typeOf = typeOf;
+    })();
+  }
+  return reactIs_development;
+}
+var hasRequiredReactIs;
+function requireReactIs() {
+  if (hasRequiredReactIs) return reactIs.exports;
+  hasRequiredReactIs = 1;
+  if (process.env.NODE_ENV === 'production') {
+    reactIs.exports = requireReactIs_production_min();
+  } else {
+    reactIs.exports = requireReactIs_development();
+  }
+  return reactIs.exports;
+}
 var hoistNonReactStatics_cjs;
 var hasRequiredHoistNonReactStatics_cjs;
 function requireHoistNonReactStatics_cjs() {
@@ -37017,6 +37192,7 @@ const IconRadialChart = ({
   percentageValue,
   icon,
   fontSize = 10,
+  labelColor = '',
   arcColor = 'var(--brand-color)',
   backgroundArcColor = 'var(--ff-select-scroll-thumb-color)'
 }) => {
@@ -37103,7 +37279,7 @@ const IconRadialChart = ({
         }) : jsxRuntime.jsx("text", {
           x: "0",
           y: "0",
-          fill: arcColor,
+          fill: labelColor || arcColor,
           textAnchor: "middle",
           dominantBaseline: "central",
           children: `${Math.round(percentageValue)}%`
@@ -37188,7 +37364,7 @@ const AttachImage = ({
   });
 };
-var css_248z$h = ".ff-card-container {\n  height: 78px;\n  display: flex;\n  align-items: center;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  overflow: hidden;\n  cursor: pointer;\n}\n.ff-card-container:hover.passed {\n  border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n  border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n  border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n  border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n  border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n  width: 12%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: start;\n  align-items: center;\n  border-right: 1px solid var(--border-color);\n  gap: 17px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n  transform: rotate(-90deg);\n  transform-origin: center;\n  display: inline-block;\n}\n.ff-card-container.passed .ff-status-bar {\n  background-color: var(--ff-card-passed-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n  background-color: var(--ff-card-failed-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n  background-color: var(--ff-card-warning-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n  background-color: var(--ff-card-skipped-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n  background-color: var(--ff-card-flaky-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container .ff-content {\n  height: 100%;\n  flex: 1;\n  padding: 0px 8px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n  margin-bottom: 4px;\n  color: inherit;\n}\n.ff-card-container.passed .ff-number {\n  color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-number {\n  color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-number {\n  color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-number {\n  color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-number {\n  color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.toggled.passed .ff-status-bar {\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.toggled.failed .ff-status-bar {\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.toggled.warning .ff-status-bar {\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.toggled.skipped .ff-status-bar {\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.toggled.flaky .ff-status-bar {\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.toggled.passed .ff-content {\n  background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.toggled.failed .ff-content {\n  background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.toggled.warning .ff-content {\n  background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.toggled.skipped .ff-content {\n  background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.toggled.flaky .ff-content {\n  background-color: var(--ff-card-flaky-status-bg-color);\n}";
+var css_248z$h = ".ff-card-container {\n  height: 78px;\n  display: flex;\n  align-items: center;\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  overflow: hidden;\n  cursor: pointer;\n}\n.ff-card-container:hover.passed {\n  border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.passed .ff-status-bar {\n  border-right: 1px solid var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.failed {\n  border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.failed .ff-status-bar {\n  border-right: 1px solid var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.warning {\n  border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.warning .ff-status-bar {\n  border-right: 1px solid var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.skipped {\n  border-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.skipped .ff-status-bar {\n  border-right: 1px solid var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container:hover.flaky {\n  border-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container:hover.flaky .ff-status-bar {\n  border-right: 1px solid var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container:hover.total {\n  border-color: var(--card-total-defect-color);\n}\n.ff-card-container:hover.total .ff-status-bar {\n  border-right: 1px solid var(--card-total-defect-color);\n}\n.ff-card-container:hover.defect {\n  border-color: var(--card-defect-density);\n}\n.ff-card-container:hover.defect .ff-status-bar {\n  border-right: 1px solid var(--card-defect-density);\n}\n.ff-card-container:hover.open {\n  border-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.open .ff-status-bar {\n  border-right: 1px solid var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container:hover.closed {\n  border-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.closed .ff-status-bar {\n  border-right: 1px solid var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container:hover.quality {\n  border-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container:hover.quality .ff-status-bar {\n  border-right: 1px solid var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container .ff-status-bar {\n  width: 12%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n  border-right: 1px solid var(--border-color);\n  border-radius: 3px;\n}\n.ff-card-container .ff-status-bar .ff-status-text {\n  transform: rotate(-90deg);\n  transform-origin: center;\n  display: flex;\n  align-items: start;\n  height: 16px;\n  width: 6px;\n}\n.ff-card-container.passed .ff-status-bar {\n  background-color: var(--ff-card-passed-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.passed .ff-content .ff-number {\n  color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.passed.toggled {\n  background-color: var(--ff-card-passed-status-bg-color);\n  border: 1px solid var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.passed.toggled .ff-status-bar {\n  border-right: 1px solid var(--ff-card-passed-status-bg-color);\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.passed.toggled .ff-content {\n  background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.failed .ff-status-bar {\n  background-color: var(--ff-card-failed-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.failed .ff-content .ff-number {\n  color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.failed.toggled {\n  background-color: var(--ff-card-failed-status-bg-color);\n  border: 1px solid var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.failed.toggled .ff-status-bar {\n  border-right: 1px solid var(--ff-card-failed-status-bg-color);\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.failed.toggled .ff-content {\n  background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.warning .ff-status-bar {\n  background-color: var(--ff-card-warning-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.warning .ff-content .ff-number {\n  color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.warning.toggled {\n  background-color: var(--ff-card-warning-status-bg-color);\n  border: 1px solid var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.warning.toggled .ff-status-bar {\n  border-right: 1px solid var(--ff-card-warning-status-bg-color);\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.warning.toggled .ff-content {\n  background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.skipped .ff-status-bar {\n  background-color: var(--ff-card-skipped-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.skipped .ff-content .ff-number {\n  color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.skipped.toggled {\n  background-color: var(--ff-card-skipped-status-bg-color);\n  border: 1px solid var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.skipped.toggled .ff-status-bar {\n  border-right: 1px solid var(--ff-card-skipped-status-bg-color);\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.skipped.toggled .ff-content {\n  background-color: var(--ff-card-skipped-status-bg-color);\n}\n.ff-card-container.flaky .ff-status-bar {\n  background-color: var(--ff-card-flaky-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.flaky .ff-content .ff-number {\n  color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.flaky.toggled {\n  background-color: var(--ff-card-flaky-status-bg-color);\n  border: 1px solid var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.flaky.toggled .ff-status-bar {\n  border-right: 1px solid var(--ff-card-flaky-status-bg-color);\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.flaky.toggled .ff-content {\n  background-color: var(--ff-card-flaky-status-bg-color);\n}\n.ff-card-container.total .ff-status-bar {\n  background-color: var(--card-total-defect-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.total .ff-content .ff-number {\n  color: var(--card-total-defect-color);\n}\n.ff-card-container.total.toggled {\n  background-color: var(--card-total-defect-color);\n  border: 1px solid var(--card-total-defect-color);\n}\n.ff-card-container.total.toggled .ff-status-bar {\n  border-right: 1px solid var(--card-total-defect-color);\n  background-color: var(--base-bg-color);\n  color: var(--card-total-defect-color);\n}\n.ff-card-container.total.toggled .ff-content {\n  background-color: var(--card-total-defect-color);\n}\n.ff-card-container.defect .ff-status-bar {\n  background-color: var(--card-defect-density);\n  color: var(--base-bg-color);\n}\n.ff-card-container.defect .ff-content .ff-number {\n  color: var(--card-defect-density);\n}\n.ff-card-container.defect.toggled {\n  background-color: var(--card-defect-density);\n  border: 1px solid var(--card-defect-density);\n}\n.ff-card-container.defect.toggled .ff-status-bar {\n  border-right: 1px solid var(--card-defect-density);\n  background-color: var(--base-bg-color);\n  color: var(--card-defect-density);\n}\n.ff-card-container.defect.toggled .ff-content {\n  background-color: var(--card-defect-density);\n}\n.ff-card-container.open .ff-status-bar {\n  background-color: var(--ff-card-failed-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.open .ff-content .ff-number {\n  color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.open.toggled {\n  background-color: var(--ff-card-failed-status-bg-color);\n  border: 1px solid var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.open.toggled .ff-status-bar {\n  border-right: 1px solid var(--ff-card-failed-status-bg-color);\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.open.toggled .ff-content {\n  background-color: var(--ff-card-failed-status-bg-color);\n}\n.ff-card-container.closed .ff-status-bar {\n  background-color: var(--ff-card-passed-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.closed .ff-content .ff-number {\n  color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.closed.toggled {\n  background-color: var(--ff-card-passed-status-bg-color);\n  border: 1px solid var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.closed.toggled .ff-status-bar {\n  border-right: 1px solid var(--ff-card-passed-status-bg-color);\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.closed.toggled .ff-content {\n  background-color: var(--ff-card-passed-status-bg-color);\n}\n.ff-card-container.quality .ff-status-bar {\n  background-color: var(--ff-card-warning-status-bg-color);\n  color: var(--base-bg-color);\n}\n.ff-card-container.quality .ff-content .ff-number {\n  color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.quality.toggled {\n  background-color: var(--ff-card-warning-status-bg-color);\n  border: 1px solid var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.quality.toggled .ff-status-bar {\n  border-right: 1px solid var(--ff-card-warning-status-bg-color);\n  background-color: var(--base-bg-color);\n  color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container.quality.toggled .ff-content {\n  background-color: var(--ff-card-warning-status-bg-color);\n}\n.ff-card-container .ff-content {\n  height: 100%;\n  flex: 1;\n  padding: 0px 8px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.ff-card-container .ff-content .ff-number {\n  margin-bottom: 4px;\n  color: inherit;\n}\n.ff-card-container .ff-content.red-background {\n  gap: 8px;\n}";
 styleInject(css_248z$h);
 const StatusCard = ({
@@ -37203,7 +37379,13 @@ const StatusCard = ({
   onSelectedStatus = _status => {}
 }) => {
   const [isToggled, setIsToggled] = React.useState(false);
+  const hideStatusText = ['total defects', 'defect density', 'open defects', 'closed defects', 'quality score'];
+  const swapCountAndText = hideStatusText.includes(status.toLowerCase());
+  const redBackground = hideStatusText.includes(status.toLowerCase());
   const handleSelectStatus = status => {
+    if (hideStatusText.includes(status.toLowerCase())) {
+      return;
+    }
     setIsToggled(true);
     onSelectedStatus(status);
   };
@@ -37212,8 +37394,23 @@ const StatusCard = ({
       setIsToggled(false);
     }
   }, [resetToggle]);
+  const handleStaticCard = () => {
+    if (status.toLowerCase() === 'defect density') {
+      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [count.toString().padStart(2, '0'), jsxRuntime.jsx(Typography, {
+          fontSize: "15px",
+          fontWeight: "semi-bold",
+          children: "/ Modules"
+        })]
+      });
+    } else if (status.toLowerCase() === 'quality score') {
+      return `${parseFloat(count.toString()).toFixed(2)}%`;
+    } else {
+      return count.toString().padStart(2, '0');
+    }
+  };
   return jsxRuntime.jsxs("div", {
-    className: `ff-card-container ${status.toLowerCase()} ${isToggled ? `toggled` : ''}`,
+    className: `ff-card-container ${status.toLowerCase()} ${isToggled ? 'toggled' : ''}`,
     style: style,
     onClick: () => handleSelectStatus(status),
     children: [jsxRuntime.jsxs("div", {
@@ -37225,32 +37422,47 @@ const StatusCard = ({
           width: 20,
           hoverEffect: false
         })
-      }), jsxRuntime.jsx(Typography, {
+      }), !hideStatusText.includes(status.toLowerCase()) && jsxRuntime.jsx(Typography, {
         fontWeight: "semi-bold",
         fontSize: "10px",
         textAlign: "center",
         lineHeight: "15px",
         className: "ff-status-text",
         as: "div",
-        children: status
-      })]
-    }), jsxRuntime.jsxs("div", {
-      className: "ff-content",
-      children: [jsxRuntime.jsx(Typography, {
-        fontWeight: "semi-bold",
-        fontSize: "24px",
-        className: "ff-number",
-        lineHeight: "36px",
-        color: isToggled ? 'var(--base-bg-color)' : '',
-        children: count
-      }), jsxRuntime.jsx(Typography, {
-        fontWeight: "regular",
-        fontSize: "10px",
-        className: "ff-text",
-        lineHeight: "15px",
-        color: isToggled ? 'var(--base-bg-color)' : 'var(--ff-card-status-text-color)',
-        children: text
+        children: status.charAt(0).toUpperCase() + status.slice(1).toLowerCase()
       })]
+    }), jsxRuntime.jsx("div", {
+      className: `ff-content ${redBackground ? 'red-background' : ''}`,
+      children: swapCountAndText ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(Typography, {
+          fontWeight: "semi-bold",
+          fontSize: "10px",
+          className: "ff-text",
+          lineHeight: "15px",
+          color: 'var(--ff-chip-text-color)',
+          children: text
+        }), jsxRuntime.jsx(Typography, {
+          fontWeight: "semi-bold",
+          fontSize: "24px",
+          className: "ff-number",
+          lineHeight: "36px",
+          children: handleStaticCard()
+        })]
+      }) : jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [jsxRuntime.jsx(Typography, {
+          fontWeight: "semi-bold",
+          fontSize: "24px",
+          className: "ff-number",
+          lineHeight: "24px",
+          color: isToggled ? 'var(--base-bg-color)' : '',
+          children: count.toString().padStart(2, '0')
+        }), jsxRuntime.jsx(Typography, {
+          className: "ff-text",
+          lineHeight: "18px",
+          color: isToggled ? 'var(--base-bg-color)' : 'var(--ff-chip-text-color)',
+          children: text
+        })]
+      })
     })]
   });
 };
@@ -37419,7 +37631,8 @@ const LineChart = ({
   fontWeight,
   numberSize,
   proportionalSpacing,
-  chartName
+  chartName,
+  xAxisLabelGap = 16
 }) => {
   const margin = 40;
   const xMax = width - margin * 2;
@@ -37570,7 +37783,8 @@ const LineChart = ({
   return jsxRuntime.jsxs("div", {
     className: "ff-line-chart-text",
     style: {
-      width: width + 20
+      width: width + 20 + xAxisLabelGap,
+      gap: xAxisLabelGap
     },
     children: [jsxRuntime.jsxs("div", {
       className: "ff-line-chart-yAxisLabel-warpper",
@@ -37652,10 +37866,10 @@ const LineChart = ({
                 strokeDasharray: "4"
               })]
             })]
-          }, index) : null), data[0].data.filter((_, index) => index % xTickInterval === 0).map(point => jsxRuntime.jsx("text", {
+          }, index) : null), data[0].data.filter((_, index) => index % xTickInterval === 0).map((point, index) => jsxRuntime.jsx("text", {
             x: xScale(point[xKey]),
             y: yMax + 15,
-            textAnchor: "middle",
+            textAnchor: index === 0 ? 'start' : 'middle',
             fill: yAxisColor,
             className: "ff--line-chart-x-line-data",
             style: {
@@ -43593,7 +43807,7 @@ const throttle = (func, limit) => {
   return throttled;
 };
-var css_248z$7 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-bar-chart-container .ff-bar-chart-labels, .ff-bar-chart-container .ff-bar-chart-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-bar-chart-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-bar-chart-container svg {\n  display: block;\n}\n.ff-bar-chart-container .ff-legend-container {\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n  padding-right: 10px;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend {\n  width: 290px;\n  margin-top: 10px;\n  display: flex;\n  justify-content: flex-end;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item {\n  display: flex;\n  align-items: center;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item .ff-bar-chart-legend-item-circle {\n  display: inline-block;\n  width: 12px;\n  height: 12px;\n  margin-right: 5px;\n  border-radius: 50%;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-legend-label {\n  margin-left: 5px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon {\n  position: absolute;\n  pointer-events: none;\n  width: 24px;\n  height: 24px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon-wrapper {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-bar-chart-container .ff-bar-chart-labels {\n  font-weight: 400;\n  color: var(--text-color);\n}\n.ff-bar-chart-container .ff-bar-chart-tooltip {\n  position: absolute;\n  padding: 5px 10px;\n  background-color: var(--tooltip-bg-color);\n  color: var(--primary-icon-color);\n  border-radius: 4px;\n  pointer-events: none;\n  font-weight: 600;\n}";
+var css_248z$7 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-bar-chart-container .ff-bar-chart-labels, .ff-bar-chart-container .ff-bar-chart-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20 {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-bar-chart-container {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-bar-chart-container svg {\n  display: block;\n}\n.ff-bar-chart-container .ff-legend-container {\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n  padding-right: 10px;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend {\n  width: 290px;\n  margin-top: 10px;\n  display: flex;\n  justify-content: flex-end;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item {\n  display: flex;\n  align-items: center;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-bar-chart-legend-item .ff-bar-chart-legend-item-circle {\n  display: inline-block;\n  width: 12px;\n  height: 12px;\n  margin-right: 5px;\n  border-radius: 50%;\n}\n.ff-bar-chart-container .ff-legend-container .ff-bar-chart-legend .ff-legend-label {\n  margin-left: 5px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon {\n  position: absolute;\n  pointer-events: none;\n  width: 24px;\n  height: 24px;\n}\n.ff-bar-chart-container .ff-bar-chart-icon-wrapper {\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-bar-chart-container .ff-bar-chart-labels {\n  font-weight: 400;\n  color: var(--text-color);\n}\n.ff-bar-chart-container .ff-bar-chart-tooltip {\n  display: none;\n  position: absolute;\n  padding: 5px 10px;\n  background-color: var(--tooltip-bg-color);\n  color: var(--primary-icon-color);\n  border-radius: 4px;\n  pointer-events: none;\n  font-weight: 600;\n}";
 styleInject(css_248z$7);
 const BarChart = ({
@@ -43614,65 +43828,65 @@ const BarChart = ({
   iconSize,
   legendPosition = 'bottom',
   legendGap = 5,
+  extendBarChartRightWidth = 0,
+  isYAxisValuePercentage = false,
   onSelectedBar = _label => {}
 }) => {
-  const [tooltip, setTooltip] = React.useState({
-    visible: false,
-    content: '',
-    x: 0,
-    y: 0,
-    borderColor: 'transparent'
-  });
+  const tooltipRef = React.useRef(null);
+  const [selectedBar, setSelectedBar] = React.useState(null);
   const maxValue = Math.max(...data.map(item => item.value));
   const topPadding = 40;
   const leftPadding = 40;
   const totalBarWidth = data.length * barWidth + (data.length - 1) * barGap;
-  const chartWidth = totalBarWidth + leftPadding * 2 + 10;
+  const chartWidth = totalBarWidth + leftPadding * 2 + 10 + extendBarChartRightWidth;
   const renderGradients = gradients => {
-    return gradients.map((gradient, index) => jsxRuntime.jsx("defs", {
-      children: jsxRuntime.jsx("linearGradient", {
-        id: `gradient-${index}`,
-        x1: "0%",
-        y1: "0%",
-        x2: "0%",
-        y2: "100%",
-        children: gradient.map((color, i) => jsxRuntime.jsx("stop", {
-          offset: `${i / (gradient.length - 1) * 100}%`,
-          stopColor: color
-        }, i))
-      })
-    }, index));
+    const generateKey = Date.now();
+    return gradients.map((gradient, index) => {
+      return jsxRuntime.jsx("defs", {
+        children: jsxRuntime.jsx("linearGradient", {
+          id: `gradient-${index}`,
+          x1: "0%",
+          y1: "0%",
+          x2: "0%",
+          y2: "100%",
+          children: gradient.map((color, i) => {
+            return jsxRuntime.jsx("stop", {
+              offset: `${i / (gradient.length - 1) * 100}%`,
+              stopColor: color
+            }, `${generateKey}-${index}-${i}`);
+          })
+        })
+      }, `${generateKey}-${index}`);
+    });
   };
   const getFillColor = index => colors?.[index % colors.length]?.[0] ? `url(#gradient-${index % colors.length})` : 'grey';
-  const getBorderColor = index => {
-    return colors?.[index % colors.length]?.[0] || 'grey';
-  };
-  const handleMouseEnter = (e, label, value, color) => {
-    setTooltip({
-      visible: true,
-      content: `${label}: ${value}`,
-      x: e.clientX,
-      y: e.clientY,
-      borderColor: color
-    });
+  const handleMouseEnter = (label, value) => {
+    const tooltip = tooltipRef.current;
+    if (tooltip) {
+      tooltip.style.display = 'block';
+      tooltip.innerHTML = `<strong>${label}</strong>: ${value} ${isYAxisValuePercentage ? '%' : ''}`;
+    }
   };
   const handleMouseMove = e => {
-    setTooltip(prevTooltip => ({
-      ...prevTooltip,
-      x: e.clientX,
-      y: e.clientY
-    }));
+    const tooltip = tooltipRef.current;
+    if (tooltip) {
+      const rect = tooltip.parentElement?.getBoundingClientRect();
+      const xOffset = window.scrollX;
+      const yOffset = window.scrollY;
+      const tooltipX = e.clientX - (rect?.left || 0) + xOffset + 10;
+      const tooltipY = e.clientY - (rect?.top || 0) + yOffset + 10;
+      tooltip.style.left = `${tooltipX}px`;
+      tooltip.style.top = `${tooltipY}px`;
+    }
   };
   const handleMouseLeave = () => {
-    setTooltip({
-      visible: false,
-      content: '',
-      x: 0,
-      y: 0,
-      borderColor: 'transparent'
-    });
+    const tooltip = tooltipRef.current;
+    if (tooltip) {
+      tooltip.style.display = 'none';
+    }
   };
   const handleSelectLabel = label => {
+    setSelectedBar(label);
     onSelectedBar(label);
   };
   return jsxRuntime.jsxs("div", {
@@ -43680,7 +43894,10 @@ const BarChart = ({
     style: {
       width: chartWidth
     },
-    children: [legend && legendPosition === 'top' && jsxRuntime.jsx("div", {
+    children: [jsxRuntime.jsx("div", {
+      ref: tooltipRef,
+      className: "ff-bar-chart-tooltip"
+    }), legend && legendPosition === 'top' && jsxRuntime.jsx("div", {
       className: "ff-legend-container",
       children: jsxRuntime.jsx("div", {
         className: "ff-bar-chart-legend",
@@ -43721,7 +43938,7 @@ const BarChart = ({
             fill: "black",
             textAnchor: "middle",
             className: "ff-bar-chart-labels",
-            children: (i * maxValue / yAxisDivisions).toFixed(1)
+            children: `${isYAxisValuePercentage ? `${(i * maxValue / yAxisDivisions).toFixed(0).toString().padStart(2, '0')}%` : (i * maxValue / yAxisDivisions).toFixed(0).toString().padStart(2, '0')}`
           }, i);
         }), data.map((item, index) => {
           const barHeight = item.value / maxValue * height;
@@ -43731,6 +43948,7 @@ const BarChart = ({
           const iconWidth = iconSize || 20;
           const iconX = barX + barWidth / 2 - iconWidth / 2;
           const iconY = barY - iconWidth;
+          const isSelected = selectedBar === item.label;
           return jsxRuntime.jsxs("g", {
             children: [icons[index] && typeof icons[index] === 'string' && jsxRuntime.jsx(Icon, {
               name: String(icons[index]),
@@ -43747,15 +43965,20 @@ const BarChart = ({
               fill: getFillColor(index),
               rx: barBorderRadius,
               ry: barBorderRadius,
-              onMouseEnter: e => handleMouseEnter(e, item.label, item.value, getBorderColor(index)),
+              style: {
+                fill: isSelected ? 'blue' : getFillColor(index),
+                strokeWidth: isSelected ? 3 : 0,
+                opacity: isSelected ? 0.9 : 1
+              },
+              onMouseEnter: () => handleMouseEnter(item.label, item.value),
               onMouseMove: handleMouseMove,
               onMouseLeave: handleMouseLeave,
               onClick: () => handleSelectLabel(item.label)
             }), showXAxisLabels && jsxRuntime.jsx("text", {
-              x: barX + barWidth / 2,
+              x: index == 0 ? barX : index === data.length - 1 ? barX + barWidth : barX + barWidth / 2,
               y: height + topPadding + 15,
               fill: "black",
-              textAnchor: "middle",
+              textAnchor: index == 0 ? 'start' : 'middle',
               className: "ff-bar-chart-labels",
               children: isTruncateText ? truncateText(item.label, 10) : item.label
             })]
@@ -43813,18 +44036,11 @@ const BarChart = ({
           })]
         }, item.label))
       })
-    }), tooltip.visible && jsxRuntime.jsx("div", {
-      className: "ff-bar-chart-tooltip",
-      style: {
-        top: tooltip.y - 20,
-        left: tooltip.x + 10
-      },
-      children: tooltip.content
     })]
   });
 };
-var css_248z$6 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-multi-radial-chart-container .ff-center-text-tooltip, .ff-multi-radial-chart-container .ff-multi-radial-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20, .ff-multi-radial-chart-container .ff-center-first-text {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-multi-radial-chart-container {\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-number {\n  flex-direction: column;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-pill {\n  flex-direction: row;\n}\n.ff-multi-radial-chart-container .ff-center-first-text {\n  color: var(--text-color);\n  font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-center-text {\n  color: var(--text-color);\n  font-weight: 400;\n}\n.ff-multi-radial-chart-container .ff-center-text-tooltip {\n  font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-multi-radial-tooltip {\n  position: absolute;\n  font-weight: 400;\n  background-color: var(--tooltip-bg-color);\n  color: var(--primary-icon-color);\n  padding: 5px 10px;\n  border-radius: 4px;\n  pointer-events: none;\n  z-index: 1000;\n}\n.ff-multi-radial-chart-container .ff-legend-container {\n  display: grid;\n  gap: 10px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend {\n  grid-template-columns: repeat(3, 1fr);\n  margin-top: 21px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend .ff-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend {\n  grid-template-columns: auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: 8px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--text-color);\n  border-radius: 15px;\n  min-width: 21px;\n  height: 15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n  margin-left: 8px;\n  color: var(--text-color);\n}";
+var css_248z$6 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm, .ff-multi-radial-chart-container .ff-center-text-tooltip, .ff-multi-radial-chart-container .ff-multi-radial-tooltip {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-20, .ff-multi-radial-chart-container .ff-center-first-text {\n  font-family: \"Poppins\";\n  font-size: 20px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-multi-radial-chart-container {\n  position: relative;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-number {\n  flex-direction: column;\n}\n.ff-multi-radial-chart-container.ff-multi-radial-chart-pill {\n  flex-direction: row;\n}\n.ff-multi-radial-chart-container .ff-center-first-text {\n  color: var(--text-color);\n  font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-center-text {\n  color: var(--text-color);\n  font-weight: 400;\n}\n.ff-multi-radial-chart-container .ff-center-text-tooltip {\n  font-weight: 600;\n}\n.ff-multi-radial-chart-container .ff-multi-radial-tooltip {\n  position: absolute;\n  font-weight: 400;\n  background-color: var(--tooltip-bg-color);\n  color: var(--primary-icon-color);\n  padding: 5px 10px;\n  border-radius: 4px;\n  pointer-events: none;\n  z-index: 1000;\n}\n.ff-multi-radial-chart-container .ff-legend-container {\n  display: grid;\n  gap: 10px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend {\n  grid-template-columns: repeat(3, 1fr);\n  margin-top: 21px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-number-legend .ff-legend-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend {\n  grid-template-columns: auto;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-left: 8px;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-capsule {\n  background-color: var(--status-success-text-color);\n  color: var(--text-color);\n  border-radius: 15px;\n  min-width: 21px;\n  height: 15px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ff-multi-radial-chart-container .ff-legend-container.ff-pill-legend .ff-legend-item .ff-legend-key {\n  margin-left: 8px;\n  color: var(--text-color);\n}";
 styleInject(css_248z$6);
 const calculateArc = (centerX, centerY, radius, startAngle, endAngle) => {
@@ -43843,10 +44059,11 @@ const MultiRadialChart = ({
   labelHeading,
   legendType = 'numberLegend',
   isLegendDetails = true,
-  chartToPillGap,
-  pillLegendGap,
+  chartToLegendGap = '16px',
+  legendGap = '8px',
   labelFontSize = 12,
-  subLabelFontSize = 8
+  subLabelFontSize = 8,
+  gapBetweenArch = 10
 }) => {
   const [tooltip, setTooltip] = React.useState({
     visible: false,
@@ -43856,7 +44073,7 @@ const MultiRadialChart = ({
   });
   const totalBarValue = barValues.reduce((acc, status) => acc + status.value, 0);
   const baseRadius = radius;
-  const radiusIncrement = lineWidth + 10;
+  const radiusIncrement = lineWidth + gapBetweenArch;
   const maxRadius = baseRadius + radiusIncrement * (barValues.length - 1);
   const svgSize = 2 * (maxRadius + lineWidth);
   const reversedBarValues = [...barValues].reverse();
@@ -43867,7 +44084,7 @@ const MultiRadialChart = ({
         return jsxRuntime.jsx("div", {
           className: "ff-legend-container ff-number-legend",
           style: {
-            gap: pillLegendGap
+            gap: legendGap
           },
           children: legendData.map((item, index) => jsxRuntime.jsxs("div", {
             className: "ff-legend-item",
@@ -43889,7 +44106,7 @@ const MultiRadialChart = ({
         return jsxRuntime.jsx("div", {
           className: "ff-legend-container ff-pill-legend",
           style: {
-            gap: pillLegendGap
+            gap: legendGap
           },
           children: legendData.reverse().map((item, index) => jsxRuntime.jsxs("div", {
             className: "ff-legend-item",
@@ -43918,10 +44135,11 @@ const MultiRadialChart = ({
       clientX,
       clientY
     } = e;
+    const container = e.currentTarget.getBoundingClientRect();
     setTooltip({
       visible: true,
-      x: clientX,
-      y: clientY,
+      x: clientX - container.left,
+      y: clientY - container.top,
       content: content
     });
   };
@@ -43930,10 +44148,11 @@ const MultiRadialChart = ({
       clientX,
       clientY
     } = e;
+    const container = e.currentTarget.getBoundingClientRect();
     setTooltip(prev => ({
       ...prev,
-      x: clientX,
-      y: clientY
+      x: clientX - container.left,
+      y: clientY - container.top
     }));
   };
   const handleMouseLeave = () => {
@@ -43949,16 +44168,15 @@ const MultiRadialChart = ({
   };
   const getArcColorFromTooltip = () => {
     if (!tooltip.visible) return '';
-    const valueString = tooltip.content.split(':')[1]?.trim();
-    const value = valueString ? Number(valueString) : undefined;
-    if (value === undefined) return '';
-    const matchingBar = barValues.find(val => val.value === value);
+    const valueString = tooltip.content.split(':')[0]?.trim();
+    if (valueString === undefined) return '';
+    const matchingBar = barValues.find(val => val.barLabel === valueString);
     return matchingBar?.arcColor || '';
   };
   return jsxRuntime.jsxs("div", {
     className: `ff-multi-radial-chart-container ${legendType === 'numberLegend' ? 'ff-multi-radial-chart-number' : 'ff-multi-radial-chart-pill'}`,
     style: {
-      gap: chartToPillGap
+      gap: chartToLegendGap
     },
     children: [jsxRuntime.jsxs("div", {
       className: "relative",
@@ -43972,7 +44190,7 @@ const MultiRadialChart = ({
         viewBox: `0 0 ${svgSize} ${svgSize}`,
         className: "absolute top-0 left-0",
         children: jsxRuntime.jsxs("g", {
-          transform: `translate(${svgSize / 2}, ${svgSize / 2})`,
+          transform: `translate(${svgSize / 2 + 1}, ${svgSize / 2 + 1})`,
           children: [reversedBarValues.map((values, i) => {
             const originalIndex = barValues.length - 1 - i;
             const percentage = values.value / totalBarValue;
@@ -43999,7 +44217,7 @@ const MultiRadialChart = ({
                 }), jsxRuntime.jsx("circle", {
                   cx: dotX,
                   cy: dotY,
-                  r: 5,
+                  r: lineWidth + 1,
                   fill: values.arcColor,
                   onMouseEnter: e => handleMouseEnter(e, `${values.barLabel || 'Data'}: ${values.value}`),
                   onMouseMove: handleMouseMove,
@@ -44031,19 +44249,19 @@ const MultiRadialChart = ({
             }, originalIndex);
           }), jsxRuntime.jsx("text", {
             x: "0",
-            y: "-20",
+            y: `-${lineWidth + gapBetweenArch + 2}`,
             fill: getArcColorFromTooltip(),
             textAnchor: "middle",
             dominantBaseline: "central",
             children: tooltip.visible ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
               children: [jsxRuntime.jsx("tspan", {
                 x: "0",
-                dy: 10,
+                dy: `${lineWidth + gapBetweenArch - 5}`,
                 className: "ff-center-text-tooltip",
                 children: textData(tooltip.content.split(':')[1]?.trim() || '', 5)
               }), jsxRuntime.jsx("tspan", {
                 x: "0",
-                dy: 18,
+                dy: `${lineWidth + gapBetweenArch + 5}`,
                 className: "ff-center-text-tooltip",
                 children: textData(tooltip.content.split(':')[0] ?? '', 8)
               })]
@@ -44088,7 +44306,7 @@ const MultiRadialChart = ({
         className: "ff-multi-radial-tooltip",
         style: {
           top: tooltip.y + 10,
-          left: tooltip.x + 10,
+          left: tooltip.x + 100,
           zIndex: 1000
         },
         children: tooltip.content