@mamrp/components 1.2.3 → 1.3.1

package/dist/index.js

@@ -43,6 +43,7 @@ __export(src_exports, {
   DateTimePicker: () => date_time_picker_default,
   DateTimeRangePicker: () => date_time_range_picker_default,
   DraggablePaper: () => DraggablePaper,
+  EnhancedUploadImage: () => enhanced_upload_image_default,
   FormInputNumber: () => number_type_default,
   FormInputText: () => text_type_default,
   HorizontalStepper: () => HorizontalStepper,
@@ -4030,14 +4031,562 @@ var UploadImage = ({
 };
 var upload_image_default = UploadImage;
 
+// src/enhanced-upload-image/index.tsx
+var import_icons = require("@mamrp/icons");
+var import_material24 = require("@mui/material");
+var import_image5 = __toESM(require("next/image"));
+var import_react27 = __toESM(require("react"));
+var import_react_hook_form16 = require("react-hook-form");
+var import_gr2 = require("react-icons/gr");
+var import_md7 = require("react-icons/md");
+
+// src/enhanced-upload-image/ImageViewer.tsx
+var import_material23 = require("@mui/material");
+var import_image4 = __toESM(require("next/image"));
+var import_react26 = require("react");
+var import_md6 = require("react-icons/md");
+function ImageViewer({
+  open,
+  handleClose,
+  src,
+  isLoading,
+  title = "",
+  noResetBtn = false,
+  noRotate = false,
+  noZoom = false
+}) {
+  const [zoom, setZoom] = (0, import_react26.useState)(1);
+  const [rotate, setRotate] = (0, import_react26.useState)(0);
+  const [loading, setLoading] = (0, import_react26.useState)(true);
+  const [viewerOpen, setViewerOpen] = (0, import_react26.useState)(false);
+  const [viewerSrc, setViewerSrc] = (0, import_react26.useState)("");
+  const [position, setPosition] = (0, import_react26.useState)({ x: 0, y: 0 });
+  const [dragging, setDragging] = (0, import_react26.useState)(false);
+  const [startMouse, setStartMouse] = (0, import_react26.useState)({ x: 0, y: 0 });
+  const [startOffset, setStartOffset] = (0, import_react26.useState)({ x: 0, y: 0 });
+  const reset = () => {
+    setZoom(1);
+    setRotate(0);
+    setPosition({ x: 0, y: 0 });
+  };
+  const handleWheel = (0, import_react26.useCallback)((e) => {
+    e.preventDefault();
+    const delta = -e.deltaY * 1e-3;
+    setZoom((z) => Math.min(5, Math.max(0.2, z + delta)));
+  }, []);
+  const handleMouseDown = (e) => {
+    setDragging(true);
+    setStartMouse({ x: e.clientX, y: e.clientY });
+    setStartOffset({ ...position });
+  };
+  const handleMouseMove = (e) => {
+    if (!dragging) return;
+    const dx = e.clientX - startMouse.x;
+    const dy = e.clientY - startMouse.y;
+    setPosition({
+      x: startOffset.x - dx,
+      y: startOffset.y + dy
+    });
+  };
+  const handleMouseUp = () => setDragging(false);
+  (0, import_react26.useEffect)(() => {
+    if (dragging) {
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
+    } else {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    }
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [dragging, startMouse, startOffset]);
+  (0, import_react26.useEffect)(() => {
+    if (open) reset();
+  }, [open]);
+  return /* @__PURE__ */ React.createElement(
+    import_material23.Dialog,
+    {
+      open,
+      onClose: handleClose,
+      maxWidth: "xl",
+      fullWidth: true,
+      sx: {
+        "& .MuiPaper-root": {
+          borderRadius: 3,
+          backgroundColor: "transparent"
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      import_material23.Box,
+      {
+        sx: {
+          position: "relative",
+          width: "100%",
+          height: "90vh",
+          bgcolor: "rgba(17,17,17,0.9)",
+          overflow: "hidden",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        },
+        onWheel: handleWheel
+      },
+      /* @__PURE__ */ React.createElement(
+        import_material23.Box,
+        {
+          sx: {
+            position: "absolute",
+            top: 10,
+            left: 10,
+            zIndex: 20,
+            display: "flex",
+            gap: 1,
+            alignItems: "center"
+          }
+        },
+        /* @__PURE__ */ React.createElement(import_material23.IconButton, { onClick: handleClose }, /* @__PURE__ */ React.createElement(import_md6.MdClose, { color: "white" })),
+        !noResetBtn && /* @__PURE__ */ React.createElement(import_material23.IconButton, { onClick: reset }, /* @__PURE__ */ React.createElement("span", { style: { color: "white", fontSize: "0.9rem" } }, "\u0628\u0627\u0632\u0646\u0634\u0627\u0646\u06CC")),
+        !noRotate && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_material23.IconButton, { onClick: () => setRotate((r) => r - 90) }, /* @__PURE__ */ React.createElement(import_md6.MdRotateLeft, { color: "white" })), /* @__PURE__ */ React.createElement(import_material23.IconButton, { onClick: () => setRotate((r) => r + 90) }, /* @__PURE__ */ React.createElement(import_md6.MdRotateRight, { color: "white" }))),
+        !noZoom && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_material23.IconButton, { onClick: () => setZoom((z) => z + 0.2) }, /* @__PURE__ */ React.createElement(import_md6.MdZoomIn, { color: "white" })), /* @__PURE__ */ React.createElement(
+          import_material23.IconButton,
+          {
+            onClick: () => setZoom((z) => Math.max(0.2, z - 0.2))
+          },
+          /* @__PURE__ */ React.createElement(import_md6.MdZoomOut, { color: "white" })
+        )),
+        /* @__PURE__ */ React.createElement(import_material23.Typography, { color: "white" }, title)
+      ),
+      (isLoading || loading) && /* @__PURE__ */ React.createElement(
+        import_material23.Box,
+        {
+          sx: {
+            position: "absolute",
+            zIndex: 10,
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            color: "white"
+          }
+        },
+        /* @__PURE__ */ React.createElement(import_material23.CircularProgress, { color: "inherit" })
+      ),
+      /* @__PURE__ */ React.createElement(
+        import_material23.Box,
+        {
+          onMouseDown: handleMouseDown,
+          sx: {
+            position: "relative",
+            width: "100%",
+            height: "78vh",
+            cursor: dragging ? "grabbing" : "grab",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            overflow: "hidden"
+          }
+        },
+        src && !isLoading && /* @__PURE__ */ React.createElement(
+          import_image4.default,
+          {
+            src,
+            alt: title,
+            fill: true,
+            style: {
+              objectFit: "contain",
+              transform: `translate(${position.x}px, ${position.y}px) scale(${zoom}) rotate(${rotate}deg)`,
+              transition: dragging ? "none" : "transform 0.3s ease"
+            },
+            onLoadingComplete: () => setLoading(false)
+          }
+        )
+      )
+    ),
+    /* @__PURE__ */ React.createElement(
+      ImageViewer,
+      {
+        open: viewerOpen,
+        handleClose: () => setViewerOpen(false),
+        src: src || "",
+        isLoading: false
+      }
+    )
+  );
+}
+
+// src/enhanced-upload-image/index.tsx
+var UploadImage2 = ({
+  placeholder,
+  name,
+  selectedImage,
+  setSelectedImage,
+  control,
+  errors,
+  setValue,
+  height = "280px",
+  allowGallery = false,
+  imageFit = "cover"
+}) => {
+  const theme2 = (0, import_material24.useTheme)();
+  const [viewerOpen, setViewerOpen] = (0, import_react27.useState)(false);
+  const [viewerSrc, setViewerSrc] = (0, import_react27.useState)("");
+  const compressImage = (file, quality = 0.9, maxWidth = 1600, maxHeight = 1600) => {
+    return new Promise((resolve) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = (event) => {
+        const img = new window.Image();
+        img.src = event.target?.result;
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          let width = img.width;
+          let height2 = img.height;
+          if (width > maxWidth) {
+            height2 *= maxWidth / width;
+            width = maxWidth;
+          }
+          if (height2 > maxHeight) {
+            width *= maxHeight / height2;
+            height2 = maxHeight;
+          }
+          canvas.width = width;
+          canvas.height = height2;
+          const ctx = canvas.getContext("2d");
+          if (ctx) {
+            ctx.drawImage(img, 0, 0, width, height2);
+            canvas.toBlob(
+              (blob) => {
+                if (blob) {
+                  const compressedFile = new File([blob], file.name, {
+                    type: "image/jpeg",
+                    lastModified: Date.now()
+                  });
+                  resolve(compressedFile);
+                } else {
+                  resolve(null);
+                }
+              },
+              "image/jpeg",
+              quality
+            );
+          } else {
+            resolve(null);
+          }
+        };
+      };
+    });
+  };
+  const handleImageChange = async (event) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      console.log("Original file size (KB):", (file.size / 1024).toFixed(2));
+      const compressedFile = await compressImage(file);
+      if (compressedFile) {
+        console.log(
+          "Compressed file size (KB):",
+          (compressedFile.size / 1024).toFixed(2)
+        );
+        const objectURL = URL.createObjectURL(compressedFile);
+        setSelectedImage(objectURL);
+        setValue(name, compressedFile);
+      }
+    }
+  };
+  const handleRemoveImage = () => {
+    setSelectedImage(null);
+    setValue(name, null);
+    const galleryInput = document.getElementById(
+      "gallery-upload"
+    );
+    const cameraInput = document.getElementById(
+      "camera-upload"
+    );
+    const fileInput = document.getElementById(
+      "file-upload"
+    );
+    if (galleryInput) galleryInput.value = "";
+    if (cameraInput) cameraInput.value = "";
+    if (fileInput) fileInput.value = "";
+  };
+  return /* @__PURE__ */ import_react27.default.createElement(
+    import_react_hook_form16.Controller,
+    {
+      name,
+      control,
+      render: ({ field }) => /* @__PURE__ */ import_react27.default.createElement(import_material24.Box, { sx: { width: "100%" } }, /* @__PURE__ */ import_react27.default.createElement(
+        import_material24.Box,
+        {
+          sx: {
+            position: "relative",
+            width: "100%",
+            height,
+            borderRadius: 3,
+            overflow: "hidden",
+            backgroundColor: selectedImage ? "transparent" : (0, import_material24.alpha)(theme2.palette.primary.main, 0.02),
+            border: selectedImage ? `2px solid ${(0, import_material24.alpha)(theme2.palette.primary.main, 0.1)}` : `2px dashed ${(0, import_material24.alpha)(theme2.palette.primary.main, 0.2)}`,
+            transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+            cursor: allowGallery ? "default" : "pointer",
+            "&:hover": {
+              borderColor: selectedImage ? (0, import_material24.alpha)(theme2.palette.primary.main, 0.3) : (0, import_material24.alpha)(theme2.palette.primary.main, 0.4),
+              backgroundColor: selectedImage ? "transparent" : (0, import_material24.alpha)(theme2.palette.primary.main, 0.04)
+            }
+          }
+        },
+        selectedImage ? /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement(
+          import_image5.default,
+          {
+            src: selectedImage,
+            alt: "Preview",
+            width: 900,
+            height: 600,
+            style: {
+              maxWidth: "100%",
+              maxHeight: "250px",
+              borderRadius: "8px",
+              border: "1px solid #ccc",
+              objectFit: "contain",
+              cursor: "pointer"
+            },
+            onClick: () => {
+              setViewerSrc(selectedImage);
+              setViewerOpen(true);
+            }
+          }
+        ), /* @__PURE__ */ import_react27.default.createElement(import_material24.Fade, { in: true }, /* @__PURE__ */ import_react27.default.createElement(import_material24.Tooltip, { title: "\u062D\u0630\u0641" }, /* @__PURE__ */ import_react27.default.createElement(
+          import_material24.IconButton,
+          {
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleRemoveImage();
+            },
+            sx: {
+              position: "absolute",
+              top: 12,
+              right: 12,
+              backgroundColor: (0, import_material24.alpha)(theme2.palette.error.main, 0.9),
+              color: "white",
+              width: 40,
+              height: 40,
+              "&:hover": {
+                backgroundColor: theme2.palette.error.main,
+                transform: "scale(1.1)"
+              },
+              transition: "all 0.2s ease",
+              boxShadow: `0 4px 12px ${(0, import_material24.alpha)(
+                theme2.palette.error.main,
+                0.3
+              )}`
+            }
+          },
+          /* @__PURE__ */ import_react27.default.createElement(import_icons.Delete, { size: 18 })
+        )))) : /* @__PURE__ */ import_react27.default.createElement(
+          import_material24.Stack,
+          {
+            spacing: 3,
+            sx: {
+              height: "100%",
+              justifyContent: "center",
+              alignItems: "center",
+              p: 3
+            }
+          },
+          /* @__PURE__ */ import_react27.default.createElement(import_material24.Stack, { spacing: 2, alignItems: "center" }, /* @__PURE__ */ import_react27.default.createElement(
+            import_material24.Box,
+            {
+              sx: {
+                width: 64,
+                height: 64,
+                borderRadius: "50%",
+                backgroundColor: (0, import_material24.alpha)(
+                  theme2.palette.successLight.main,
+                  0.1
+                ),
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: "all 0.3s ease"
+              }
+            },
+            /* @__PURE__ */ import_react27.default.createElement(
+              import_md7.MdAddPhotoAlternate,
+              {
+                size: 32,
+                color: theme2.palette.successLight.main,
+                style: { opacity: 0.8 }
+              }
+            )
+          ), /* @__PURE__ */ import_react27.default.createElement(
+            import_material24.Typography,
+            {
+              variant: "h6",
+              sx: {
+                color: theme2.palette.text.primary,
+                fontWeight: 500,
+                textAlign: "center",
+                mb: 1
+              }
+            },
+            placeholder
+          ), /* @__PURE__ */ import_react27.default.createElement(
+            import_material24.Typography,
+            {
+              variant: "body2",
+              sx: {
+                color: theme2.palette.text.secondary,
+                textAlign: "center",
+                fontSize: "0.875rem"
+              }
+            },
+            "PNG, JPG \u06CC\u0627 WEBP \u067E\u0634\u062A\u06CC\u0628\u0627\u0646\u06CC \u0645\u06CC\u200C\u0634\u0648\u062F"
+          )),
+          allowGallery && /* @__PURE__ */ import_react27.default.createElement(import_material24.Stack, { direction: "row", spacing: 2 }, /* @__PURE__ */ import_react27.default.createElement(
+            import_material24.Button,
+            {
+              variant: "contained",
+              startIcon: /* @__PURE__ */ import_react27.default.createElement(import_md7.MdOutlineCameraAlt, { size: 16 }),
+              onClick: (e) => {
+                e.preventDefault();
+                document.getElementById("camera-upload")?.click();
+              },
+              sx: {
+                borderRadius: 2,
+                px: 2.5,
+                textTransform: "none",
+                fontWeight: 600,
+                boxShadow: `0 4px 12px ${(0, import_material24.alpha)(
+                  theme2.palette.successLight.main,
+                  0.3
+                )}`,
+                zIndex: 1,
+                transition: "all 0.2s ease",
+                "&:hover": {
+                  boxShadow: `0 6px 20px ${(0, import_material24.alpha)(
+                    theme2.palette.successLight.main,
+                    0.4
+                  )}`,
+                  transform: "translateY(-1px)"
+                }
+              },
+              color: "successLight"
+            },
+            "\u062F\u0648\u0631\u0628\u06CC\u0646"
+          ), /* @__PURE__ */ import_react27.default.createElement(
+            import_material24.Button,
+            {
+              variant: "outlined",
+              startIcon: /* @__PURE__ */ import_react27.default.createElement(import_gr2.GrGallery, { size: 16 }),
+              onClick: (e) => {
+                e.preventDefault();
+                document.getElementById("gallery-upload")?.click();
+              },
+              sx: {
+                borderRadius: 2,
+                px: 2.5,
+                textTransform: "none",
+                fontWeight: 600,
+                borderWidth: 2,
+                transition: "all 0.2s ease",
+                "&:hover": {
+                  boxShadow: `0 6px 20px ${(0, import_material24.alpha)(
+                    theme2.palette.successLight.main,
+                    0.4
+                  )}`,
+                  transform: "translateY(-1px)"
+                }
+              },
+              color: "successLight"
+            },
+            "\u06AF\u0627\u0644\u0631\u06CC"
+          ))
+        )
+      ), !allowGallery && /* @__PURE__ */ import_react27.default.createElement(
+        "input",
+        {
+          id: "file-upload",
+          type: "file",
+          accept: "image/*",
+          capture: "environment",
+          onChange: (event) => {
+            handleImageChange(event);
+            field.onChange(event.target.files?.[0] || null);
+          },
+          style: { display: "none" }
+        }
+      ), /* @__PURE__ */ import_react27.default.createElement(
+        "input",
+        {
+          id: "gallery-upload",
+          type: "file",
+          accept: "image/*",
+          onChange: (event) => {
+            handleImageChange(event);
+            field.onChange(event.target.files?.[0] || null);
+          },
+          style: { display: "none" }
+        }
+      ), /* @__PURE__ */ import_react27.default.createElement(
+        "input",
+        {
+          id: "camera-upload",
+          type: "file",
+          accept: "image/*",
+          capture: "environment",
+          onChange: (event) => {
+            handleImageChange(event);
+            field.onChange(event.target.files?.[0] || null);
+          },
+          style: { display: "none" }
+        }
+      ), errors[name] && /* @__PURE__ */ import_react27.default.createElement(import_material24.Fade, { in: true }, /* @__PURE__ */ import_react27.default.createElement(
+        import_material24.Box,
+        {
+          sx: {
+            mt: 1.5,
+            p: 1.5,
+            borderRadius: 1,
+            backgroundColor: (0, import_material24.alpha)(theme2.palette.error.main, 0.05),
+            border: `1px solid ${(0, import_material24.alpha)(theme2.palette.error.main, 0.2)}`
+          }
+        },
+        /* @__PURE__ */ import_react27.default.createElement(
+          import_material24.Typography,
+          {
+            color: "error",
+            variant: "body2",
+            sx: {
+              fontWeight: 500,
+              display: "flex",
+              alignItems: "center",
+              gap: 1
+            }
+          },
+          String(errors[name]?.message || "")
+        )
+      )), /* @__PURE__ */ import_react27.default.createElement(
+        ImageViewer,
+        {
+          open: viewerOpen,
+          handleClose: () => setViewerOpen(false),
+          src: viewerSrc,
+          isLoading: false
+        }
+      ))
+    }
+  );
+};
+var enhanced_upload_image_default = UploadImage2;
+
 // src/accordion/index.tsx
 var import_styles2 = require("@mui/material/styles");
 var import_io2 = require("react-icons/io");
 var import_Accordion = __toESM(require("@mui/material/Accordion"));
 var import_AccordionSummary = __toESM(require("@mui/material/AccordionSummary"));
 var import_AccordionDetails = __toESM(require("@mui/material/AccordionDetails"));
-var import_material23 = require("@mui/material");
-var import_react26 = require("react");
+var import_material25 = require("@mui/material");
+var import_react28 = require("react");
 function Page({
   data
 }) {
@@ -4067,7 +4616,7 @@ function Page({
     padding: theme2.spacing(2),
     borderTop: "1px solid rgba(0, 0, 0, .125)"
   }));
-  const [expanded, setExpanded] = (0, import_react26.useState)("");
+  const [expanded, setExpanded] = (0, import_react28.useState)("");
   const handleChange = (panel) => (event, newExpanded) => {
     setExpanded(newExpanded ? panel : false);
   };
@@ -4091,7 +4640,7 @@ function Page({
             }
           }
         },
-        /* @__PURE__ */ React.createElement(import_material23.Typography, { component: "span" }, item.title)
+        /* @__PURE__ */ React.createElement(import_material25.Typography, { component: "span" }, item.title)
       ),
       /* @__PURE__ */ React.createElement(AccordionDetails, null, item.body)
     );
@@ -4099,20 +4648,20 @@ function Page({
 }
 
 // src/switch-button/index.tsx
-var import_material24 = require("@mui/material");
+var import_material26 = require("@mui/material");
 var import_system8 = require("@mui/system");
-var import_react27 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var import_pi = require("react-icons/pi");
-var import_material25 = require("@mui/material");
+var import_material27 = require("@mui/material");
 var SwitchButton = ({
   checked,
   handleChange,
   iconChecked,
   iconUnchecked
 }) => {
-  const theme2 = (0, import_material25.useTheme)();
+  const theme2 = (0, import_material27.useTheme)();
   const isDarkMode = theme2.palette.mode === "dark";
-  const CustomSwitch = (0, import_system8.styled)(import_material24.Switch)(({ theme: theme3 }) => ({
+  const CustomSwitch = (0, import_system8.styled)(import_material26.Switch)(({ theme: theme3 }) => ({
     "& .MuiSwitch-switchBase.Mui-checked": {
       color: theme3.palette.primary.main
     },
@@ -4125,7 +4674,7 @@ var SwitchButton = ({
       border: isDarkMode ? "2px solid white" : "2px solid rgba(80,80,80, 1)"
     }
   }));
-  const BoxContainer = (0, import_system8.styled)(import_material24.Box)(({ theme: theme3 }) => ({
+  const BoxContainer = (0, import_system8.styled)(import_material26.Box)(({ theme: theme3 }) => ({
     display: "flex",
     alignItems: "center",
     backgroundColor: "rgba(188,188,188, 0.1)",
@@ -4140,10 +4689,10 @@ var SwitchButton = ({
     transition: "all 0.2s ease",
     color: isDarkMode ? "rgba(220,220,220, 1)" : "rgba(160,160,160, 1)"
   });
-  return /* @__PURE__ */ import_react27.default.createElement(BoxContainer, null, /* @__PURE__ */ import_react27.default.createElement(
-    import_material24.FormControlLabel,
+  return /* @__PURE__ */ import_react29.default.createElement(BoxContainer, null, /* @__PURE__ */ import_react29.default.createElement(
+    import_material26.FormControlLabel,
     {
-      control: /* @__PURE__ */ import_react27.default.createElement(
+      control: /* @__PURE__ */ import_react29.default.createElement(
         CustomSwitch,
         {
           checked,
@@ -4151,15 +4700,15 @@ var SwitchButton = ({
           name: "switch"
         }
       ),
-      label: /* @__PURE__ */ import_react27.default.createElement(LabelContainer, null, checked ? iconChecked ? iconChecked : /* @__PURE__ */ import_react27.default.createElement(import_pi.PiTableDuotone, { size: 30 }) : iconUnchecked ? iconUnchecked : /* @__PURE__ */ import_react27.default.createElement(import_pi.PiCardsDuotone, { size: 30 }))
+      label: /* @__PURE__ */ import_react29.default.createElement(LabelContainer, null, checked ? iconChecked ? iconChecked : /* @__PURE__ */ import_react29.default.createElement(import_pi.PiTableDuotone, { size: 30 }) : iconUnchecked ? iconUnchecked : /* @__PURE__ */ import_react29.default.createElement(import_pi.PiCardsDuotone, { size: 30 }))
     }
   ));
 };
 var switch_button_default = SwitchButton;
 
 // src/bascule-connection-button/index.tsx
-var import_material26 = require("@mui/material");
-var import_react28 = __toESM(require("react"));
+var import_material28 = require("@mui/material");
+var import_react30 = __toESM(require("react"));
 var import_react_hot_toast = __toESM(require("react-hot-toast"));
 var import_pi2 = require("react-icons/pi");
 var ConnectToBasculeButton = ({
@@ -4169,8 +4718,8 @@ var ConnectToBasculeButton = ({
   parity = "none",
   flowControl = "none"
 }) => {
-  const [connected, setConnected] = (0, import_react28.useState)(false);
-  const portRef = (0, import_react28.useRef)(null);
+  const [connected, setConnected] = (0, import_react30.useState)(false);
+  const portRef = (0, import_react30.useRef)(null);
   const connectToBascule = async () => {
     if (!("serial" in navigator)) {
       import_react_hot_toast.default.error("Web Serial API \u062A\u0648\u0633\u0637 \u0627\u06CC\u0646 \u0645\u0631\u0648\u0631\u06AF\u0631 \u067E\u0634\u062A\u06CC\u0628\u0627\u0646\u06CC \u0646\u0645\u06CC\u200C\u0634\u0648\u062F.");
@@ -4188,7 +4737,7 @@ var ConnectToBasculeButton = ({
       import_react_hot_toast.default.error("\u062E\u0637\u0627 \u062F\u0631 \u0627\u062A\u0635\u0627\u0644 \u0628\u0647 \u0628\u0627\u0633\u06A9\u0648\u0644. \u0644\u0637\u0641\u0627\u064B \u062F\u0648\u0628\u0627\u0631\u0647 \u062A\u0644\u0627\u0634 \u06A9\u0646\u06CC\u062F.");
     }
   };
-  return /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, /* @__PURE__ */ import_react28.default.createElement("style", null, `
+  return /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, /* @__PURE__ */ import_react30.default.createElement("style", null, `
         @keyframes jumpAnimation {
           0% { transform: translateY(1px); }
           12.5% { transform: translateY(-2px); }
@@ -4197,16 +4746,16 @@ var ConnectToBasculeButton = ({
           50% { transform: translateY(0); }
           100% { transform: translateY(0); }
         }
-      `), /* @__PURE__ */ import_react28.default.createElement(
-    import_material26.Button,
+      `), /* @__PURE__ */ import_react30.default.createElement(
+    import_material28.Button,
     {
       variant: "contained",
       onClick: connectToBascule,
       disabled: connected,
       sx: { minWidth: "11rem" }
     },
-    /* @__PURE__ */ import_react28.default.createElement(
-      import_material26.Box,
+    /* @__PURE__ */ import_react30.default.createElement(
+      import_material28.Box,
       {
         sx: {
           display: "flex",
@@ -4215,7 +4764,7 @@ var ConnectToBasculeButton = ({
           fontSize: 16
         }
       },
-      connected ? /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, "\u0645\u062A\u0635\u0644 \u0628\u0647 \u0628\u0627\u0633\u06A9\u0648\u0644", /* @__PURE__ */ import_react28.default.createElement(import_pi2.PiPlugsConnected, { size: 20 })) : /* @__PURE__ */ import_react28.default.createElement(import_react28.default.Fragment, null, "\u0627\u062A\u0635\u0627\u0644 \u0628\u0647 \u0628\u0627\u0633\u06A9\u0648\u0644", /* @__PURE__ */ import_react28.default.createElement(
+      connected ? /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, "\u0645\u062A\u0635\u0644 \u0628\u0647 \u0628\u0627\u0633\u06A9\u0648\u0644", /* @__PURE__ */ import_react30.default.createElement(import_pi2.PiPlugsConnected, { size: 20 })) : /* @__PURE__ */ import_react30.default.createElement(import_react30.default.Fragment, null, "\u0627\u062A\u0635\u0627\u0644 \u0628\u0647 \u0628\u0627\u0633\u06A9\u0648\u0644", /* @__PURE__ */ import_react30.default.createElement(
         import_pi2.PiPlugs,
         {
           size: 20,
@@ -4230,15 +4779,15 @@ var ConnectToBasculeButton = ({
 var bascule_connection_button_default = ConnectToBasculeButton;
 
 // src/draggable-paper/index.tsx
-var import_material27 = require("@mui/material");
-var import_react29 = require("react");
+var import_material29 = require("@mui/material");
+var import_react31 = require("react");
 var import_react_draggable = __toESM(require("react-draggable"));
 function DraggablePaper({
   handle = "#draggable-dialog",
   cancel = '[class*="MuiDialogContent-root"]',
   ...props
 }) {
-  const nodeRef = (0, import_react29.useRef)(null);
+  const nodeRef = (0, import_react31.useRef)(null);
   return /* @__PURE__ */ React.createElement(
     import_react_draggable.default,
     {
@@ -4248,7 +4797,7 @@ function DraggablePaper({
       bounds: "parent",
       defaultPosition: { x: 0, y: 0 }
     },
-    /* @__PURE__ */ React.createElement(import_material27.Paper, { ref: nodeRef, ...props })
+    /* @__PURE__ */ React.createElement(import_material29.Paper, { ref: nodeRef, ...props })
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -4266,6 +4815,7 @@ function DraggablePaper({
   DateTimePicker,
   DateTimeRangePicker,
   DraggablePaper,
+  EnhancedUploadImage,
   FormInputNumber,
   FormInputText,
   HorizontalStepper,