pixel-react 1.5.4 → 1.5.5

package/lib/index.esm.js

@@ -527,7 +527,7 @@ const SvgEyeOpenIcon = (props) => /* @__PURE__ */ React.createElement("svg", { w
 
 const SvgReplaceIcon = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M10.2278 16C10.027 16 9.84105 15.8884 9.74435 15.7172C9.64765 15.5386 9.64765 15.3302 9.75179 15.1516L10.5328 13.8492C10.689 13.5812 11.0386 13.4994 11.299 13.6557C11.5667 13.8119 11.6486 14.1543 11.4924 14.4222L11.2915 14.7571C13.3445 14.2734 14.8842 12.4277 14.8842 10.2247C14.8842 9.91955 15.1371 9.6665 15.4421 9.6665C15.7471 9.6665 16 9.91955 16 10.2247C15.9925 13.4101 13.404 16 10.2278 16Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M0.557875 6.32608C0.252903 6.32608 0 6.07304 0 5.7679C0 2.58997 2.58854 0 5.76471 0C5.96554 0 6.1515 0.111637 6.2482 0.282813C6.3449 0.461432 6.3449 0.669821 6.24076 0.848439L5.45973 2.15087C5.30353 2.41135 4.96137 2.50066 4.69359 2.33693C4.43325 2.18064 4.34399 1.83829 4.50763 1.57036L4.70846 1.23545C2.64805 1.71921 1.11575 3.56493 1.11575 5.7679C1.11575 6.07304 0.862846 6.32608 0.557875 6.32608Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M10.079 8.46888V10.657C10.079 12.4804 9.35004 13.2097 7.52765 13.2097H5.34078C3.51839 13.2097 2.78943 12.4804 2.78943 10.657V8.46888C2.78943 6.64548 3.51839 5.91614 5.34078 5.91614H7.52765C9.35004 5.91614 10.079 6.64548 10.079 8.46888Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M10.6524 2.79102H8.46551C6.67287 2.79102 5.94395 3.50549 5.92163 5.26191H7.52828C9.71515 5.26191 10.7268 6.28152 10.7268 8.46216V10.0697C12.4896 10.0474 13.1963 9.31804 13.1963 7.52441V5.34378C13.2037 3.52038 12.4748 2.79102 10.6524 2.79102Z", fill: "currentColor" }));
 
-const SvgHeaderPreset = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 120 120", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M97.5 22.4999H82.5C79.7422 22.4917 77.5083 20.2579 77.5001 17.5V2.5L97.5 22.4999Z", fill: "#4A1353" }), /* @__PURE__ */ React.createElement("path", { d: "M97.5 22.4999V112.5C97.4918 115.258 95.258 117.492 92.5001 117.5H12.4999C9.74203 117.492 7.5082 115.258 7.5 112.5V7.49992C7.5082 4.74203 9.74203 2.5082 12.4999 2.5H77.4998V17.5C77.5083 20.2579 79.7421 22.4917 82.5 22.4999H97.5Z", fill: "white" }), /* @__PURE__ */ React.createElement("path", { d: "M82.5 100C99.0685 100 112.5 86.5685 112.5 70C112.5 53.4315 99.0685 40 82.5 40C65.9315 40 52.5 53.4315 52.5 70C52.5 86.5685 65.9315 100 82.5 100Z", fill: "#FDFAFF" }), /* @__PURE__ */ React.createElement("path", { d: "M95.0717 58.5713H74.5002C72.6067 58.5713 71.0717 60.1063 71.0717 61.9999V82.5713C71.0717 84.4648 72.6067 85.9999 74.5002 85.9999H95.0717C96.9652 85.9999 98.5002 84.4648 98.5002 82.5713V61.9999C98.5002 60.1063 96.9652 58.5713 95.0717 58.5713Z", fill: "#9D34AE" }), /* @__PURE__ */ React.createElement("path", { d: "M90.5001 54H69.9287C68.0351 54 66.5001 55.535 66.5001 57.4286V78C66.5001 79.8935 68.0351 81.4286 69.9287 81.4286H90.5001C92.3937 81.4286 93.9287 79.8935 93.9287 78V57.4286C93.9287 55.535 92.3937 54 90.5001 54Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M87.0717 66.5715H81.3575V60.8572C81.3575 60.5541 81.237 60.2634 81.0227 60.0491C80.8084 59.8348 80.5177 59.7144 80.2146 59.7144C79.9115 59.7144 79.6208 59.8348 79.4065 60.0491C79.1922 60.2634 79.0717 60.5541 79.0717 60.8572V66.5715H73.3575C73.0544 66.5715 72.7637 66.6919 72.5493 66.9062C72.335 67.1206 72.2146 67.4113 72.2146 67.7144C72.2146 68.0175 72.335 68.3082 72.5493 68.5225C72.7637 68.7368 73.0544 68.8572 73.3575 68.8572H79.0717V74.5715C79.0717 74.8746 79.1922 75.1653 79.4065 75.3796C79.6208 75.5939 79.9115 75.7144 80.2146 75.7144C80.5177 75.7144 80.8084 75.5939 81.0227 75.3796C81.237 75.1653 81.3575 74.8746 81.3575 74.5715V68.8572H87.0717C87.3748 68.8572 87.6655 68.7368 87.8799 68.5225C88.0942 68.3082 88.2146 68.0175 88.2146 67.7144C88.2146 67.4113 88.0942 67.1206 87.8799 66.9062C87.6655 66.6919 87.3748 66.5715 87.0717 66.5715Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M19.9999 15H45V19.9999H19.9999V15Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M19.9999 25H24.9998V29.9999H19.9999V25Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M30 25H34.9999V29.9999H30V25Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M94.9999 112.5C94.9999 113.881 93.8805 115 92.4998 115H12.4999C11.1192 115 9.9998 113.881 9.9998 112.5V7.5C9.9998 6.1193 11.1192 4.99992 12.4999 4.99992H75V17.4998C75 21.642 78.3578 24.9998 82.5 24.9998H87.4999V19.9999H82.5C81.1192 19.9999 79.9999 18.8805 79.9999 17.4998V8.535L94.9999 23.535V32.5001H99.9998V22.5C99.9996 21.837 99.7361 21.2013 99.2674 20.7326L79.2675 0.732422C78.7987 0.263438 78.1628 0 77.5 0H12.4999C8.35777 0 4.99988 3.35789 4.99988 7.5V112.5C4.99988 116.642 8.35777 120 12.4999 120H92.4998C96.6419 120 99.9998 116.642 99.9998 112.5V107.5H94.9999V112.5Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M82.5 37.5C64.5508 37.5 49.9999 52.0507 49.9999 70.0001C49.9999 87.9495 64.5508 102.5 82.5 102.5C100.449 102.5 115 87.9492 115 69.9998C114.979 52.0594 100.441 37.5206 82.5 37.5ZM82.5 97.5C67.3122 97.5 55 85.1878 55 70.0001C55 54.8123 67.3122 42.4999 82.5 42.4999C97.6877 42.4999 110 54.8121 110 69.9998C109.982 85.1803 97.6804 97.4822 82.5 97.5Z", fill: "#71347B" }));
+const SvgHeaderPreset = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 110 120", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("g", { clipPath: "url(#clip0_7010_20218)" }, /* @__PURE__ */ React.createElement("path", { d: "M92.4999 22.5H77.4999C74.742 22.4918 72.5082 20.258 72.5 17.5001V2.50006L92.4999 22.5Z", fill: "#4A1353" }), /* @__PURE__ */ React.createElement("path", { d: "M90.0715 58.5714H69.5001C67.6066 58.5714 66.0715 60.1064 66.0715 62V82.5714C66.0715 84.465 67.6066 86 69.5001 86H90.0715C91.9651 86 93.5001 84.465 93.5001 82.5714V62C93.5001 60.1064 91.9651 58.5714 90.0715 58.5714Z", fill: "#9D34AE" }), /* @__PURE__ */ React.createElement("path", { d: "M85.5 54H64.9286C63.035 54 61.5 55.535 61.5 57.4285V78C61.5 79.8935 63.035 81.4285 64.9286 81.4285H85.5C87.3935 81.4285 88.9286 79.8935 88.9286 78V57.4285C88.9286 55.535 87.3935 54 85.5 54Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M82.0715 66.5714H76.3572V60.8571C76.3572 60.554 76.2368 60.2633 76.0225 60.049C75.8082 59.8347 75.5175 59.7143 75.2144 59.7143C74.9113 59.7143 74.6206 59.8347 74.4062 60.049C74.1919 60.2633 74.0715 60.554 74.0715 60.8571V66.5714H68.3572C68.0541 66.5714 67.7634 66.6918 67.5491 66.9061C67.3348 67.1205 67.2144 67.4112 67.2144 67.7143C67.2144 68.0174 67.3348 68.3081 67.5491 68.5224C67.7634 68.7367 68.0541 68.8571 68.3572 68.8571H74.0715V74.5714C74.0715 74.8745 74.1919 75.1652 74.4062 75.3795C74.6206 75.5939 74.9113 75.7143 75.2144 75.7143C75.5175 75.7143 75.8082 75.5939 76.0225 75.3795C76.2368 75.1652 76.3572 74.8745 76.3572 74.5714V68.8571H82.0715C82.3746 68.8571 82.6653 68.7367 82.8796 68.5224C83.0939 68.3081 83.2144 68.0174 83.2144 67.7143C83.2144 67.4112 83.0939 67.1205 82.8796 66.9061C82.6653 66.6918 82.3746 66.5714 82.0715 66.5714Z", fill: "#F5F5F5" }), /* @__PURE__ */ React.createElement("path", { d: "M15 15H40.0001V19.9999H15V15Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M15 25.0001H19.9999V30H15V25.0001Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M25 25.0001H29.9999V30H25V25.0001Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M90 112.5C90 113.881 88.8806 115 87.4999 115H7.5C6.1193 115 4.99992 113.881 4.99992 112.5V7.5C4.99992 6.1193 6.1193 4.99992 7.5 4.99992H70.0001V17.4998C70.0001 21.642 73.358 24.9998 77.5001 24.9998H82.5V19.9999H77.5001C76.1194 19.9999 75 18.8805 75 17.4998V8.535L90 23.535V32.5001H94.9999V22.5C94.9997 21.837 94.7362 21.2013 94.2675 20.7326L74.2676 0.732422C73.7988 0.263438 73.163 0 72.5002 0H7.5C3.35789 0 0 3.35789 0 7.5V112.5C0 116.642 3.35789 120 7.5 120H87.4999C91.642 120 94.9999 116.642 94.9999 112.5V107.5H90V112.5Z", fill: "#71347B" }), /* @__PURE__ */ React.createElement("path", { d: "M77.5001 37.5C59.5509 37.5 45 52.0507 45 70.0001C45 87.9495 59.5509 102.5 77.5001 102.5C95.4492 102.5 110 87.9492 110 69.9998C109.979 52.0594 95.4408 37.5206 77.5001 37.5ZM77.5001 97.5C62.3123 97.5 50.0002 85.1878 50.0002 70.0001C50.0002 54.8123 62.3123 42.4999 77.5001 42.4999C92.6878 42.4999 105 54.8121 105 69.9998C104.982 85.1803 92.6805 97.4822 77.5001 97.5Z", fill: "#71347B" })), /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("clipPath", { id: "clip0_7010_20218" }, /* @__PURE__ */ React.createElement("rect", { width: 110, height: 120, fill: "white" }))));
 
 const SvgProjectElement = (props) => /* @__PURE__ */ React.createElement("svg", { width: "1em", height: "1em", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.25996 0C4.96541 0 4.72663 0.238781 4.72663 0.533333V1.86667H4.13996C3.67249 1.86667 4.23484 1.88136 3.83358 1.93801C2.78514 2.05486 1.97454 2.37818 1.47172 3.14174C0.999156 3.85935 0.873291 4.8662 0.873291 6.13333V9.86667C0.873291 11.1338 0.999156 12.1407 1.47172 12.8583C1.97454 13.6218 2.78513 13.9451 3.83355 14.062C4.23482 14.1186 3.67248 14.1333 4.13996 14.1333H4.72663V15.4667C4.72663 15.7612 4.96541 16 5.25996 16C5.55451 16 5.7933 15.7612 5.7933 15.4667V0.533333C5.7933 0.238781 5.55451 0 5.25996 0ZM4.72663 13.0667H4.13996C3.68488 13.0667 4.30404 13.0517 3.97589 13.0048L3.95892 13.0027C3.04771 12.9022 2.61439 12.654 2.36257 12.2716C2.07915 11.8412 1.93996 11.1233 1.93996 9.86667V6.13333C1.93996 4.87673 2.07915 4.15879 2.36257 3.72839C2.61439 3.346 3.04771 3.09779 3.95892 2.99732L3.97589 2.99517C4.30404 2.94829 3.68488 2.93333 4.13996 2.93333H4.72663V13.0667ZM11.86 2.93333C12.315 2.93333 12.6958 2.94829 13.024 2.99517L13.041 2.99732C13.9522 3.09779 14.3855 3.346 14.6373 3.7284C14.9208 4.15879 15.06 4.87674 15.06 6.13333V9.86667C15.06 11.1233 14.9208 11.8412 14.6373 12.2716C14.3855 12.654 13.9522 12.9022 13.041 13.0027L13.024 13.0048C12.6958 13.0517 12.315 13.0667 11.86 13.0667H8.23168C7.93713 13.0667 7.69835 13.3054 7.69835 13.6C7.69835 13.8946 7.93713 14.1333 8.23168 14.1333H11.86C12.3275 14.1333 12.7651 14.1186 13.1663 14.062C14.2148 13.9451 15.0254 13.6218 15.5282 12.8583C16.0008 12.1407 16.1266 11.1338 16.1266 9.86667V6.13333C16.1266 4.86619 16.0008 3.85934 15.5282 3.14173C15.0253 2.37818 14.2147 2.05486 13.1663 1.93801C12.765 1.88136 12.3274 1.86667 11.86 1.86667H8.27648C7.98193 1.86667 7.74315 2.10545 7.74315 2.4C7.74315 2.69455 7.98193 2.93333 8.27648 2.93333H11.86Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.2976 7.95194C10.4283 7.71394 10.4936 7.4526 10.4936 7.16794C10.4936 6.85994 10.4259 6.58694 10.2906 6.34894C10.1553 6.11094 9.95225 5.92427 9.68159 5.78894C9.41092 5.6536 9.07959 5.58594 8.68759 5.58594H6.74859V10.4999H7.94559V8.73594H8.68759C9.08892 8.73594 9.42492 8.6636 9.69559 8.51894C9.96625 8.37427 10.1669 8.18527 10.2976 7.95194ZM9.10759 7.62294C8.99559 7.73027 8.82525 7.78394 8.59659 7.78394H7.94559V6.55194H8.59659C8.82525 6.55194 8.99559 6.6056 9.10759 6.71294C9.21959 6.82027 9.27559 6.97194 9.27559 7.16794C9.27559 7.36394 9.21959 7.5156 9.10759 7.62294ZM12.3138 7.53894V6.54494H14.1268V5.58594H11.1168V10.4999H14.1268V9.54094H12.3138V8.46294H13.9168V7.53894H12.3138Z", fill: "currentColor" }));
 
@@ -1134,7 +1134,7 @@ const Drawer = ({
   }), document.body);
 };
 
-var css_248z$13 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-accordion {\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  min-width: fit-content;\n}\n.ff-accordion .accordion-header {\n  display: flex;\n  justify-content: space-between;\n  min-height: 32px;\n}\n.ff-accordion .accordion-header .header-title {\n  padding: 8px;\n}\n.ff-accordion .accordion-header .accordion-arrow {\n  display: flex;\n  padding: 8px;\n  align-items: center;\n  transition: transform 0.3s ease;\n}\n.ff-accordion .accordion-header .accordion-arrow.expanded {\n  transform: rotate(180deg);\n}\n.ff-accordion .accordion-header .accordion-arrow:hover {\n  color: var(--tooltip-bg-color);\n}\n.ff-accordion .accordion-header.expanded {\n  background-color: var(--hover-color);\n  border-bottom: 1px solid var(--hover-color);\n}\n.ff-accordion .accordion-header:hover {\n  background-color: var(--hover-color);\n}\n.ff-accordion .accordion-content {\n  padding: 4px;\n}";
+var css_248z$13 = ".fontXs {\n  font-family: \"Poppins\";\n  font-size: 10px;\n}\n\n.fontSm {\n  font-family: \"Poppins\";\n  font-size: 12px;\n}\n\n.fontMd {\n  font-family: \"Poppins\";\n  font-size: 14px;\n}\n\n.fontLg {\n  font-family: \"Poppins\";\n  font-size: 16px;\n}\n\n.fontXL {\n  font-family: \"Poppins\";\n  font-size: 18px;\n}\n\n.font2Xl {\n  font-family: \"Poppins\";\n  font-size: 24px;\n}\n\n.font-size-8 {\n  font-family: \"Poppins\";\n  font-size: 8px;\n}\n\n.font-size-32 {\n  font-family: \"Poppins\";\n  font-size: 32px;\n}\n\n.font-size-80 {\n  font-family: \"Poppins\";\n  font-size: 80px;\n}\n\n.ff-accordion {\n  border: 1px solid var(--border-color);\n  border-radius: 4px;\n  min-width: fit-content;\n}\n.ff-accordion .accordion-header {\n  display: flex;\n  justify-content: space-between;\n  min-height: 32px;\n  align-items: center;\n  cursor: pointer;\n}\n.ff-accordion .accordion-header .header-title {\n  padding: 8px;\n}\n.ff-accordion .accordion-header .accordion-arrow {\n  display: flex;\n  padding: 8px;\n  align-items: center;\n  transition: transform 0.3s ease;\n}\n.ff-accordion .accordion-header .accordion-arrow.expanded {\n  transform: rotate(180deg);\n}\n.ff-accordion .accordion-header .accordion-arrow:hover {\n  color: var(--tooltip-bg-color);\n}\n.ff-accordion .accordion-header.expanded {\n  background-color: var(--hover-color);\n  border-bottom: 1px solid var(--hover-color);\n}\n.ff-accordion .accordion-header:hover {\n  background-color: var(--hover-color);\n}\n.ff-accordion .accordion-content {\n  padding: 8px;\n}";
 styleInject(css_248z$13);
 
 var css_248z$12 = "";
@@ -1332,28 +1332,28 @@ const Accordion = ({
   };
   return jsxs("div", {
     className: "ff-accordion",
-    children: [jsx(Tooltip, {
-      title: disableInfoMessage,
-      children: jsxs("div", {
-        className: `accordion-header ${disable && 'ff-disabled'} ${isAccordionExpanded && 'expanded'}`,
-        style: {
-          color: color || '--tooltip-bg-color'
-        },
-        children: [jsx(Typography, {
+    children: [jsxs("div", {
+      className: `accordion-header ${disable && 'ff-disabled'} ${isAccordionExpanded && 'expanded'}`,
+      style: {
+        color: color || '--tooltip-bg-color'
+      },
+      onClick: () => {
+        !disable && onAccordionClick();
+      },
+      children: [jsx(Tooltip, {
+        title: disableInfoMessage,
+        children: jsx(Typography, {
           as: "div",
           className: "header-title",
           fontWeight: "semi-bold",
           lineHeight: "18px",
           children: headerTitle
-        }), jsx(Icon, {
-          name: 'arrow_up',
-          hoverEffect: false,
-          className: `accordion-arrow  ${isAccordionExpanded && 'expanded'}`,
-          onClick: () => {
-            !disable && onAccordionClick();
-          }
-        })]
-      })
+        })
+      }), jsx(Icon, {
+        name: 'arrow_down',
+        hoverEffect: false,
+        className: `accordion-arrow  ${isAccordionExpanded && 'expanded'}`
+      })]
     }), !disable && isAccordionExpanded && jsx("div", {
       style: {
         minHeight
@@ -3119,6 +3119,47 @@ const isValid12HourTime = timeString => {
   const regex = /^(0[1-9]|1[0-2]):([0-5][0-9])(?:\s?(AM|PM))?$/i;
   return regex.test(timeString);
 };
+// Utility to normalize memory values to bytes
+const UNIT_MULTIPLIERS = {
+  B: 1,
+  KB: 1024,
+  MB: 1024 * 1024,
+  GB: 1024 * 1024 * 1024
+};
+// Parses a storage value string and converts it into a normalized value in bytes along with its unit.
+function normalizeStorageValue(value) {
+  const match = value.match(/^(\d+(?:\.\d+)?)\s*(B|KB|MB|GB)$/i);
+  if (!match) {
+    throw new Error(`Invalid storage value format: ${value}`);
+  }
+  const [, numericPart, unit] = match;
+  // Ensure numericPart and unit are defined
+  if (!numericPart || !unit) {
+    throw new Error(`Invalid storage value format: ${value}`);
+  }
+  const normalizedValue = parseFloat(numericPart) * (UNIT_MULTIPLIERS[unit.toUpperCase()] || 1);
+  return {
+    normalizedValue,
+    unit: unit.toUpperCase(),
+    value: parseFloat(numericPart)
+  };
+}
+// Converts a byte value into a readable string with the largest appropriate unit (GB, MB, KB, B).
+function formatMemoryValue(valueInBytes) {
+  const units = ['GB', 'MB', 'KB', 'B'];
+  for (const unit of units) {
+    const factor = UNIT_MULTIPLIERS[unit];
+    if (factor === undefined) {
+      throw new Error(`Missing factor for unit: ${unit}`);
+    }
+    if (valueInBytes >= factor || unit === 'B') {
+      const normalizedValue = valueInBytes / factor;
+      const formattedValue = normalizedValue % 1 === 0 ? `${normalizedValue.toFixed(0)}` : `${normalizedValue.toFixed(2)}`;
+      return `${formattedValue} ${unit}`;
+    }
+  }
+  return `${valueInBytes} B`;
+}
 
 const prepareData = (dataObj, columnObj) => {
   let cellData = dataObj[columnObj.accessor];
@@ -7465,7 +7506,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);
@@ -7477,7 +7518,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) {
@@ -7493,7 +7534,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);
@@ -7557,7 +7598,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);
@@ -7693,7 +7734,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, {
@@ -8009,7 +8050,7 @@ function createFormControl(props = {}) {
     };
     const register = (name, options = {}) => {
         let field = get$1(_fields, name);
-        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(_options.disabled);
+        const disabledIsDefined = isBoolean(options.disabled) || isBoolean(props.disabled);
         set$1(_fields, name, {
             ...(field || {}),
             _f: {
@@ -8025,7 +8066,7 @@ function createFormControl(props = {}) {
                 field,
                 disabled: isBoolean(options.disabled)
                     ? options.disabled
-                    : _options.disabled,
+                    : props.disabled,
                 name,
                 value: options.value,
             });
@@ -8035,7 +8076,7 @@ function createFormControl(props = {}) {
         }
         return {
             ...(disabledIsDefined
-                ? { disabled: options.disabled || _options.disabled }
+                ? { disabled: options.disabled || props.disabled }
                 : {}),
             ...(_options.progressive
                 ? {
@@ -8119,12 +8160,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,
@@ -8303,9 +8338,7 @@ function createFormControl(props = {}) {
                 : fieldReference.ref;
             if (fieldRef.focus) {
                 fieldRef.focus();
-                options.shouldSelect &&
-                    isFunction$1(fieldRef.select) &&
-                    fieldRef.select();
+                options.shouldSelect && fieldRef.select();
             }
         }
     };
@@ -8506,6 +8539,11 @@ function useForm(props = {}) {
                 values: control._getWatch(),
             });
     }, [props.shouldUnregister, control]);
+    React__default.useEffect(() => {
+        if (_formControl.current) {
+            _formControl.current.watch = _formControl.current.watch.bind({});
+        }
+    }, [formState]);
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
 }
@@ -23249,7 +23287,7 @@ const calculateArc$2 = (x, y, radius, startAngle, endAngle) => {
   const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0;
   return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${endX} ${endY}`;
 };
-const colorMapping = ['var(--status-success-text-color)', 'var(--status-rejected-text-color)', 'var(--status-warning-text-color)', 'var(--status-skipped-text-color)', 'var(--brand-color)'];
+const colorMapping = ['var(--status-success-text-color)', 'var(--status-rejected-text-color)', 'var(--status-warning-text-color)', 'var(--status-button-text-skipped)', 'var(--brand-color)'];
 const DashboardDonutChart = ({
   radius = 60,
   lineWidth = 15,
@@ -23260,7 +23298,9 @@ const DashboardDonutChart = ({
   legendType = 'numberLegend',
   showOnlyLabel = false,
   unit,
-  showUnit = true
+  showUnit = true,
+  labelFontSize = 24,
+  subLabelFontSize = 14
 }) => {
   const [hoveredItemIndex, setHoveredItemIndex] = useState(null);
   const [tooltipPosition, setTooltipPosition] = useState({
@@ -23268,12 +23308,59 @@ const DashboardDonutChart = ({
     y: 0
   });
   const [showTooltip, setShowTooltip] = useState(false);
-  const total = statusValues?.reduce((acc, {
+  // Normalize data if legendType is 'memoryLegend'
+  const normalizedStatusValues = legendType === 'memoryLegend' ? statusValues.map(item => {
+    if (typeof item.value === 'string') {
+      const {
+        normalizedValue,
+        unit,
+        value
+      } = normalizeStorageValue(item.value);
+      return {
+        ...item,
+        normalizedValue,
+        unit,
+        labelValue: value
+      };
+    }
+    return {
+      ...item,
+      normalizedValue: item.value,
+      labelValue: item.value,
+      unit: 'B'
+    }; // Default to bytes
+  }) : statusValues.map(item => {
+    if (typeof item.value === 'string') {
+      console.warn(`String value "${item.value}" is not supported for legendType "${legendType}". Defaulting to 0.`);
+      return {
+        ...item,
+        normalizedValue: 0,
+        unit: '',
+        labelValue: 0
+      };
+    }
+    return {
+      ...item,
+      normalizedValue: item.value,
+      unit: '',
+      labelValue: item.value
+    };
+  });
+  // Use normalized values for chart calculations
+  const chartValues = normalizedStatusValues.map(item => ({
+    key: item.key,
+    value: item.normalizedValue ?? item.value,
+    color: item.color,
+    unit: item.unit,
+    labelValue: item.labelValue
+  }));
+  const total = chartValues?.reduce((acc, {
     value
   }) => acc + value, 0);
-  const nonZeroValues = statusValues?.filter(({
+  const nonZeroValues = chartValues?.filter(({
     value
   }) => value > 0);
+  const totalMemory = formatMemoryValue(total);
   // Calculate angles and gaps
   const TOTAL_GAP_ANGLE = gapAngle * nonZeroValues.length;
   let remainingAngle = 2 * Math.PI - TOTAL_GAP_ANGLE;
@@ -23306,8 +23393,9 @@ const DashboardDonutChart = ({
       y: event.clientY + 10
     });
   };
-  const SVG_PADDING = 4;
-  const DONUT_SVG_SIZE = (radius + lineWidth) * 2 + SVG_PADDING * 2;
+  const SVG_PADDING = 3;
+  const DONUT_SVG_SIZE = radius * 2 + lineWidth + SVG_PADDING * 2;
+  const LABEL_MAX_WIDTH = radius * 2 - lineWidth - SVG_PADDING;
   const renderArc = (chartItem, endAngle, i) => {
     const isFullCircle = nonZeroValues.length === 1;
     // Full circle handling
@@ -23338,7 +23426,7 @@ const DashboardDonutChart = ({
         children: hoveredItemIndex !== null && `${nonZeroValues[hoveredItemIndex]?.key} : `
       }), jsx(Typography, {
         fontSize: 12,
-        children: hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex]?.value
+        children: hoveredItemIndex !== null && (legendType === 'memoryLegend' ? `${nonZeroValues[hoveredItemIndex]?.labelValue} ${nonZeroValues[hoveredItemIndex]?.unit}` : nonZeroValues[hoveredItemIndex]?.value)
       })]
     });
   };
@@ -23393,7 +23481,7 @@ const DashboardDonutChart = ({
                 fontWeight: "medium",
                 className: "ff-legend-value",
                 color: item.color ? item.color : colorMapping[index % colorMapping.length],
-                children: [item.value, " ", showUnit && unit?.toUpperCase()]
+                children: [item.labelValue, " ", item.unit]
               }), jsx(Typography, {
                 className: "ff-legend-key",
                 children: item.key
@@ -23441,7 +23529,7 @@ const DashboardDonutChart = ({
                   })]
                 }), jsx("td", {
                   className: "ff-legend-percentage",
-                  children: (item.value / total * 100).toFixed(1)
+                  children: typeof item.value === 'string' ? (parseFloat(item.value) / total * 100).toFixed(1) : (item.value / total * 100).toFixed(1)
                 }), jsx("td", {
                   className: "ff-legend-count",
                   children: item.value
@@ -23454,6 +23542,35 @@ const DashboardDonutChart = ({
         return null;
     }
   };
+  function wrapText(text, maxWidth, fontSize) {
+    const words = text.split(' ');
+    const lines = [];
+    let currentLine = '';
+    words.forEach(word => {
+      const testLine = currentLine ? `${currentLine} ${word}` : word;
+      if (measureTextWidth(testLine, fontSize) <= maxWidth) {
+        currentLine = testLine;
+      } else {
+        if (currentLine) {
+          lines.push(currentLine);
+        }
+        currentLine = word;
+      }
+    });
+    if (currentLine) {
+      lines.push(currentLine);
+    }
+    return lines;
+  }
+  function measureTextWidth(text, fontSize) {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (!context) {
+      throw new Error('Unable to get canvas context');
+    }
+    context.font = `${fontSize}px Poppins`; // Font size and family of SVG font
+    return context.measureText(text).width;
+  }
   return jsxs("div", {
     className: classNames('ff-dashboard-donut-chart-section', {
       'ff-dashboard-donut-chart-section-table-legend': legendType === 'tableLegend'
@@ -23465,7 +23582,7 @@ const DashboardDonutChart = ({
         height: DONUT_SVG_SIZE,
         viewBox: `0 0 ${DONUT_SVG_SIZE} ${DONUT_SVG_SIZE}`,
         children: jsxs("g", {
-          transform: `translate(${radius + lineWidth + SVG_PADDING}, ${radius + lineWidth + SVG_PADDING})`,
+          transform: `translate(${radius + lineWidth / 2 + SVG_PADDING}, ${radius + lineWidth / 2 + SVG_PADDING})`,
           children: [nonZeroValues?.map((status, i) => {
             const valuePercentage = status.value / total;
             let angle = Math.max(valuePercentage * (2 * Math.PI), MIN_ANGLE);
@@ -23478,20 +23595,41 @@ const DashboardDonutChart = ({
             className: "ff-svg-label-text",
             textAnchor: "middle",
             fill: colorMapping[3],
-            children: legendDetailsType
+            style: {
+              fontSize: `${labelFontSize}px`
+            },
+            children: wrapText(legendDetailsType, LABEL_MAX_WIDTH, labelFontSize).map((line, index, lines) => jsx("tspan", {
+              x: "0",
+              dy: index === 0 ? lines.length > 1 ? -8 : 0 : 24,
+              children: line
+            }, index))
           }) : (legendType !== 'tableLegend' || hoveredItemIndex !== null) && jsxs(Fragment, {
             children: [jsx("text", {
               x: "0",
               y: "5",
               textAnchor: "middle",
               fill: colorMapping[3],
-              children: legendType === 'tableLegend' && hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex] ? `${(nonZeroValues[hoveredItemIndex].value / total * 100).toFixed(1)}%` : `${total} ${showUnit && unit ? `${unit.toUpperCase()}` : ''}`
+              style: {
+                fontSize: `${labelFontSize}px`
+              },
+              children: wrapText(legendType === 'tableLegend' && hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex] ? `${(nonZeroValues[hoveredItemIndex].value / total * 100).toFixed(1)}%` : legendType === 'memoryLegend' ? `${totalMemory}` : `${total} ${showUnit && unit ? `${unit.toUpperCase()}` : ''}`, LABEL_MAX_WIDTH, labelFontSize).map((line, index) => jsx("tspan", {
+                x: "0",
+                dy: index === 0 ? 0 : 16,
+                children: line
+              }, index))
             }), jsx("text", {
               x: "0",
               y: "26",
               textAnchor: "middle",
               fill: "var(--text-color)",
-              children: legendType === 'tableLegend' && hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex] ? nonZeroValues[hoveredItemIndex].key : legendDetailsType
+              style: {
+                fontSize: `${subLabelFontSize}px`
+              },
+              children: wrapText(legendType === 'tableLegend' && hoveredItemIndex !== null && nonZeroValues[hoveredItemIndex] ? nonZeroValues[hoveredItemIndex].key : legendDetailsType, LABEL_MAX_WIDTH, subLabelFontSize).map((line, index) => jsx("tspan", {
+                x: "0",
+                dy: index === 0 ? 0 : 16,
+                children: line
+              }, index))
             })]
           })]
         })