@mamrp/components 1.2.3 → 1.3.1

package/dist/index.mjs

@@ -4009,6 +4009,578 @@ var UploadImage = ({
 };
 var upload_image_default = UploadImage;
 
+// src/enhanced-upload-image/index.tsx
+import { Delete as Delete2 } from "@mamrp/icons";
+import {
+  alpha,
+  Box as Box20,
+  Button as Button12,
+  Fade,
+  IconButton as IconButton8,
+  Stack as Stack6,
+  Tooltip as Tooltip2,
+  Typography as Typography16,
+  useTheme as useTheme6
+} from "@mui/material";
+import Image5 from "next/image";
+import React27, { useState as useState13 } from "react";
+import {
+  Controller as Controller13
+} from "react-hook-form";
+import { GrGallery as GrGallery2 } from "react-icons/gr";
+import { MdAddPhotoAlternate, MdOutlineCameraAlt as MdOutlineCameraAlt2 } from "react-icons/md";
+
+// src/enhanced-upload-image/ImageViewer.tsx
+import {
+  Box as Box19,
+  CircularProgress as CircularProgress8,
+  Dialog as Dialog6,
+  IconButton as IconButton7,
+  Typography as Typography15
+} from "@mui/material";
+import Image4 from "next/image";
+import { useCallback, useEffect as useEffect9, useState as useState12 } from "react";
+import {
+  MdClose as MdClose4,
+  MdRotateLeft,
+  MdRotateRight,
+  MdZoomIn,
+  MdZoomOut
+} from "react-icons/md";
+function ImageViewer({
+  open,
+  handleClose,
+  src,
+  isLoading,
+  title = "",
+  noResetBtn = false,
+  noRotate = false,
+  noZoom = false
+}) {
+  const [zoom, setZoom] = useState12(1);
+  const [rotate, setRotate] = useState12(0);
+  const [loading, setLoading] = useState12(true);
+  const [viewerOpen, setViewerOpen] = useState12(false);
+  const [viewerSrc, setViewerSrc] = useState12("");
+  const [position, setPosition] = useState12({ x: 0, y: 0 });
+  const [dragging, setDragging] = useState12(false);
+  const [startMouse, setStartMouse] = useState12({ x: 0, y: 0 });
+  const [startOffset, setStartOffset] = useState12({ x: 0, y: 0 });
+  const reset = () => {
+    setZoom(1);
+    setRotate(0);
+    setPosition({ x: 0, y: 0 });
+  };
+  const handleWheel = 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);
+  useEffect9(() => {
+    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]);
+  useEffect9(() => {
+    if (open) reset();
+  }, [open]);
+  return /* @__PURE__ */ React.createElement(
+    Dialog6,
+    {
+      open,
+      onClose: handleClose,
+      maxWidth: "xl",
+      fullWidth: true,
+      sx: {
+        "& .MuiPaper-root": {
+          borderRadius: 3,
+          backgroundColor: "transparent"
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      Box19,
+      {
+        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(
+        Box19,
+        {
+          sx: {
+            position: "absolute",
+            top: 10,
+            left: 10,
+            zIndex: 20,
+            display: "flex",
+            gap: 1,
+            alignItems: "center"
+          }
+        },
+        /* @__PURE__ */ React.createElement(IconButton7, { onClick: handleClose }, /* @__PURE__ */ React.createElement(MdClose4, { color: "white" })),
+        !noResetBtn && /* @__PURE__ */ React.createElement(IconButton7, { 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(IconButton7, { onClick: () => setRotate((r) => r - 90) }, /* @__PURE__ */ React.createElement(MdRotateLeft, { color: "white" })), /* @__PURE__ */ React.createElement(IconButton7, { onClick: () => setRotate((r) => r + 90) }, /* @__PURE__ */ React.createElement(MdRotateRight, { color: "white" }))),
+        !noZoom && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(IconButton7, { onClick: () => setZoom((z) => z + 0.2) }, /* @__PURE__ */ React.createElement(MdZoomIn, { color: "white" })), /* @__PURE__ */ React.createElement(
+          IconButton7,
+          {
+            onClick: () => setZoom((z) => Math.max(0.2, z - 0.2))
+          },
+          /* @__PURE__ */ React.createElement(MdZoomOut, { color: "white" })
+        )),
+        /* @__PURE__ */ React.createElement(Typography15, { color: "white" }, title)
+      ),
+      (isLoading || loading) && /* @__PURE__ */ React.createElement(
+        Box19,
+        {
+          sx: {
+            position: "absolute",
+            zIndex: 10,
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            color: "white"
+          }
+        },
+        /* @__PURE__ */ React.createElement(CircularProgress8, { color: "inherit" })
+      ),
+      /* @__PURE__ */ React.createElement(
+        Box19,
+        {
+          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(
+          Image4,
+          {
+            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 = useTheme6();
+  const [viewerOpen, setViewerOpen] = useState13(false);
+  const [viewerSrc, setViewerSrc] = useState13("");
+  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__ */ React27.createElement(
+    Controller13,
+    {
+      name,
+      control,
+      render: ({ field }) => /* @__PURE__ */ React27.createElement(Box20, { sx: { width: "100%" } }, /* @__PURE__ */ React27.createElement(
+        Box20,
+        {
+          sx: {
+            position: "relative",
+            width: "100%",
+            height,
+            borderRadius: 3,
+            overflow: "hidden",
+            backgroundColor: selectedImage ? "transparent" : alpha(theme2.palette.primary.main, 0.02),
+            border: selectedImage ? `2px solid ${alpha(theme2.palette.primary.main, 0.1)}` : `2px dashed ${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 ? alpha(theme2.palette.primary.main, 0.3) : alpha(theme2.palette.primary.main, 0.4),
+              backgroundColor: selectedImage ? "transparent" : alpha(theme2.palette.primary.main, 0.04)
+            }
+          }
+        },
+        selectedImage ? /* @__PURE__ */ React27.createElement(React27.Fragment, null, /* @__PURE__ */ React27.createElement(
+          Image5,
+          {
+            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__ */ React27.createElement(Fade, { in: true }, /* @__PURE__ */ React27.createElement(Tooltip2, { title: "\u062D\u0630\u0641" }, /* @__PURE__ */ React27.createElement(
+          IconButton8,
+          {
+            onClick: (e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              handleRemoveImage();
+            },
+            sx: {
+              position: "absolute",
+              top: 12,
+              right: 12,
+              backgroundColor: 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 ${alpha(
+                theme2.palette.error.main,
+                0.3
+              )}`
+            }
+          },
+          /* @__PURE__ */ React27.createElement(Delete2, { size: 18 })
+        )))) : /* @__PURE__ */ React27.createElement(
+          Stack6,
+          {
+            spacing: 3,
+            sx: {
+              height: "100%",
+              justifyContent: "center",
+              alignItems: "center",
+              p: 3
+            }
+          },
+          /* @__PURE__ */ React27.createElement(Stack6, { spacing: 2, alignItems: "center" }, /* @__PURE__ */ React27.createElement(
+            Box20,
+            {
+              sx: {
+                width: 64,
+                height: 64,
+                borderRadius: "50%",
+                backgroundColor: alpha(
+                  theme2.palette.successLight.main,
+                  0.1
+                ),
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: "all 0.3s ease"
+              }
+            },
+            /* @__PURE__ */ React27.createElement(
+              MdAddPhotoAlternate,
+              {
+                size: 32,
+                color: theme2.palette.successLight.main,
+                style: { opacity: 0.8 }
+              }
+            )
+          ), /* @__PURE__ */ React27.createElement(
+            Typography16,
+            {
+              variant: "h6",
+              sx: {
+                color: theme2.palette.text.primary,
+                fontWeight: 500,
+                textAlign: "center",
+                mb: 1
+              }
+            },
+            placeholder
+          ), /* @__PURE__ */ React27.createElement(
+            Typography16,
+            {
+              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__ */ React27.createElement(Stack6, { direction: "row", spacing: 2 }, /* @__PURE__ */ React27.createElement(
+            Button12,
+            {
+              variant: "contained",
+              startIcon: /* @__PURE__ */ React27.createElement(MdOutlineCameraAlt2, { 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 ${alpha(
+                  theme2.palette.successLight.main,
+                  0.3
+                )}`,
+                zIndex: 1,
+                transition: "all 0.2s ease",
+                "&:hover": {
+                  boxShadow: `0 6px 20px ${alpha(
+                    theme2.palette.successLight.main,
+                    0.4
+                  )}`,
+                  transform: "translateY(-1px)"
+                }
+              },
+              color: "successLight"
+            },
+            "\u062F\u0648\u0631\u0628\u06CC\u0646"
+          ), /* @__PURE__ */ React27.createElement(
+            Button12,
+            {
+              variant: "outlined",
+              startIcon: /* @__PURE__ */ React27.createElement(GrGallery2, { 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 ${alpha(
+                    theme2.palette.successLight.main,
+                    0.4
+                  )}`,
+                  transform: "translateY(-1px)"
+                }
+              },
+              color: "successLight"
+            },
+            "\u06AF\u0627\u0644\u0631\u06CC"
+          ))
+        )
+      ), !allowGallery && /* @__PURE__ */ React27.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__ */ React27.createElement(
+        "input",
+        {
+          id: "gallery-upload",
+          type: "file",
+          accept: "image/*",
+          onChange: (event) => {
+            handleImageChange(event);
+            field.onChange(event.target.files?.[0] || null);
+          },
+          style: { display: "none" }
+        }
+      ), /* @__PURE__ */ React27.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__ */ React27.createElement(Fade, { in: true }, /* @__PURE__ */ React27.createElement(
+        Box20,
+        {
+          sx: {
+            mt: 1.5,
+            p: 1.5,
+            borderRadius: 1,
+            backgroundColor: alpha(theme2.palette.error.main, 0.05),
+            border: `1px solid ${alpha(theme2.palette.error.main, 0.2)}`
+          }
+        },
+        /* @__PURE__ */ React27.createElement(
+          Typography16,
+          {
+            color: "error",
+            variant: "body2",
+            sx: {
+              fontWeight: 500,
+              display: "flex",
+              alignItems: "center",
+              gap: 1
+            }
+          },
+          String(errors[name]?.message || "")
+        )
+      )), /* @__PURE__ */ React27.createElement(
+        ImageViewer,
+        {
+          open: viewerOpen,
+          handleClose: () => setViewerOpen(false),
+          src: viewerSrc,
+          isLoading: false
+        }
+      ))
+    }
+  );
+};
+var enhanced_upload_image_default = UploadImage2;
+
 // src/accordion/index.tsx
 import { styled as styled3 } from "@mui/material/styles";
 import { IoIosArrowForward } from "react-icons/io";
@@ -4018,9 +4590,9 @@ import MuiAccordionSummary, {
 } from "@mui/material/AccordionSummary";
 import MuiAccordionDetails from "@mui/material/AccordionDetails";
 import {
-  Typography as Typography15
+  Typography as Typography17
 } from "@mui/material";
-import { useState as useState12 } from "react";
+import { useState as useState14 } from "react";
 function Page({
   data
 }) {
@@ -4050,7 +4622,7 @@ function Page({
     padding: theme2.spacing(2),
     borderTop: "1px solid rgba(0, 0, 0, .125)"
   }));
-  const [expanded, setExpanded] = useState12("");
+  const [expanded, setExpanded] = useState14("");
   const handleChange = (panel) => (event, newExpanded) => {
     setExpanded(newExpanded ? panel : false);
   };
@@ -4074,7 +4646,7 @@ function Page({
             }
           }
         },
-        /* @__PURE__ */ React.createElement(Typography15, { component: "span" }, item.title)
+        /* @__PURE__ */ React.createElement(Typography17, { component: "span" }, item.title)
       ),
       /* @__PURE__ */ React.createElement(AccordionDetails, null, item.body)
     );
@@ -4082,18 +4654,18 @@ function Page({
 }
 
 // src/switch-button/index.tsx
-import { Box as Box19, FormControlLabel as FormControlLabel3, Switch } from "@mui/material";
+import { Box as Box21, FormControlLabel as FormControlLabel3, Switch } from "@mui/material";
 import { styled as styled4 } from "@mui/system";
-import React27 from "react";
+import React28 from "react";
 import { PiCardsDuotone, PiTableDuotone } from "react-icons/pi";
-import { useTheme as useTheme6 } from "@mui/material";
+import { useTheme as useTheme7 } from "@mui/material";
 var SwitchButton = ({
   checked,
   handleChange,
   iconChecked,
   iconUnchecked
 }) => {
-  const theme2 = useTheme6();
+  const theme2 = useTheme7();
   const isDarkMode = theme2.palette.mode === "dark";
   const CustomSwitch = styled4(Switch)(({ theme: theme3 }) => ({
     "& .MuiSwitch-switchBase.Mui-checked": {
@@ -4108,7 +4680,7 @@ var SwitchButton = ({
       border: isDarkMode ? "2px solid white" : "2px solid rgba(80,80,80, 1)"
     }
   }));
-  const BoxContainer = styled4(Box19)(({ theme: theme3 }) => ({
+  const BoxContainer = styled4(Box21)(({ theme: theme3 }) => ({
     display: "flex",
     alignItems: "center",
     backgroundColor: "rgba(188,188,188, 0.1)",
@@ -4123,10 +4695,10 @@ var SwitchButton = ({
     transition: "all 0.2s ease",
     color: isDarkMode ? "rgba(220,220,220, 1)" : "rgba(160,160,160, 1)"
   });
-  return /* @__PURE__ */ React27.createElement(BoxContainer, null, /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(BoxContainer, null, /* @__PURE__ */ React28.createElement(
     FormControlLabel3,
     {
-      control: /* @__PURE__ */ React27.createElement(
+      control: /* @__PURE__ */ React28.createElement(
         CustomSwitch,
         {
           checked,
@@ -4134,15 +4706,15 @@ var SwitchButton = ({
           name: "switch"
         }
       ),
-      label: /* @__PURE__ */ React27.createElement(LabelContainer, null, checked ? iconChecked ? iconChecked : /* @__PURE__ */ React27.createElement(PiTableDuotone, { size: 30 }) : iconUnchecked ? iconUnchecked : /* @__PURE__ */ React27.createElement(PiCardsDuotone, { size: 30 }))
+      label: /* @__PURE__ */ React28.createElement(LabelContainer, null, checked ? iconChecked ? iconChecked : /* @__PURE__ */ React28.createElement(PiTableDuotone, { size: 30 }) : iconUnchecked ? iconUnchecked : /* @__PURE__ */ React28.createElement(PiCardsDuotone, { size: 30 }))
     }
   ));
 };
 var switch_button_default = SwitchButton;
 
 // src/bascule-connection-button/index.tsx
-import { Box as Box20, Button as Button12 } from "@mui/material";
-import React28, { useRef as useRef4, useState as useState13 } from "react";
+import { Box as Box22, Button as Button13 } from "@mui/material";
+import React29, { useRef as useRef4, useState as useState15 } from "react";
 import toast from "react-hot-toast";
 import { PiPlugs, PiPlugsConnected } from "react-icons/pi";
 var ConnectToBasculeButton = ({
@@ -4152,7 +4724,7 @@ var ConnectToBasculeButton = ({
   parity = "none",
   flowControl = "none"
 }) => {
-  const [connected, setConnected] = useState13(false);
+  const [connected, setConnected] = useState15(false);
   const portRef = useRef4(null);
   const connectToBascule = async () => {
     if (!("serial" in navigator)) {
@@ -4171,7 +4743,7 @@ var ConnectToBasculeButton = ({
       toast.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__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement("style", null, `
+  return /* @__PURE__ */ React29.createElement(React29.Fragment, null, /* @__PURE__ */ React29.createElement("style", null, `
         @keyframes jumpAnimation {
           0% { transform: translateY(1px); }
           12.5% { transform: translateY(-2px); }
@@ -4180,16 +4752,16 @@ var ConnectToBasculeButton = ({
           50% { transform: translateY(0); }
           100% { transform: translateY(0); }
         }
-      `), /* @__PURE__ */ React28.createElement(
-    Button12,
+      `), /* @__PURE__ */ React29.createElement(
+    Button13,
     {
       variant: "contained",
       onClick: connectToBascule,
       disabled: connected,
       sx: { minWidth: "11rem" }
     },
-    /* @__PURE__ */ React28.createElement(
-      Box20,
+    /* @__PURE__ */ React29.createElement(
+      Box22,
       {
         sx: {
           display: "flex",
@@ -4198,7 +4770,7 @@ var ConnectToBasculeButton = ({
           fontSize: 16
         }
       },
-      connected ? /* @__PURE__ */ React28.createElement(React28.Fragment, null, "\u0645\u062A\u0635\u0644 \u0628\u0647 \u0628\u0627\u0633\u06A9\u0648\u0644", /* @__PURE__ */ React28.createElement(PiPlugsConnected, { size: 20 })) : /* @__PURE__ */ React28.createElement(React28.Fragment, null, "\u0627\u062A\u0635\u0627\u0644 \u0628\u0647 \u0628\u0627\u0633\u06A9\u0648\u0644", /* @__PURE__ */ React28.createElement(
+      connected ? /* @__PURE__ */ React29.createElement(React29.Fragment, null, "\u0645\u062A\u0635\u0644 \u0628\u0647 \u0628\u0627\u0633\u06A9\u0648\u0644", /* @__PURE__ */ React29.createElement(PiPlugsConnected, { size: 20 })) : /* @__PURE__ */ React29.createElement(React29.Fragment, null, "\u0627\u062A\u0635\u0627\u0644 \u0628\u0647 \u0628\u0627\u0633\u06A9\u0648\u0644", /* @__PURE__ */ React29.createElement(
         PiPlugs,
         {
           size: 20,
@@ -4248,6 +4820,7 @@ export {
   date_time_picker_default as DateTimePicker,
   date_time_range_picker_default as DateTimeRangePicker,
   DraggablePaper,
+  enhanced_upload_image_default as EnhancedUploadImage,
   number_type_default as FormInputNumber,
   text_type_default as FormInputText,
   HorizontalStepper,