@mamrp/components 1.7.16 → 1.7.18

package/dist/index.d.mts

@@ -331,8 +331,9 @@ type UploadImageProps$1<T extends FieldValues> = {
     height?: string;
     allowGallery?: boolean;
     imageFit?: "contain" | "cover";
+    disableCamera?: boolean;
 };
-declare const UploadImage$1: <T extends FieldValues>({ placeholder, name, selectedImage, setSelectedImage, control, errors, setValue, height, allowGallery, imageFit, }: UploadImageProps$1<T>) => React__default.JSX.Element;
+declare const UploadImage$1: <T extends FieldValues>({ placeholder, name, selectedImage, setSelectedImage, control, errors, setValue, height, allowGallery, imageFit, disableCamera, }: UploadImageProps$1<T>) => React__default.JSX.Element;
 
 type UploadImageProps<T extends FieldValues> = {
     placeholder: string;
@@ -610,6 +611,18 @@ type DataTableProps<T extends Record<string, any>> = {
  */
 declare const DataTable: <T extends Record<string, any>>({ data, columns, isLoading, isRefetching, pagination, onPaginationChange, totalRows, manualPagination, columnFilters, onColumnFiltersChange, manualFiltering, onClearFilters, showClearFiltersButton, sorting, onSortingChange, manualSorting, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, enableStickyHeader, maxHeight, density, enableColumnOrdering, enableGlobalFilter, enableColumnFilterModes, enableRowSelection, showColumnFilters, onShowColumnFiltersChange, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, enableColumnVirtualization, columnVirtualizerOptions, enableColumnResizing, }: DataTableProps<T>) => React$1.JSX.Element;
 
+declare function imgViewer({ open, handleClose, src, isLoading, title, noResetBtn, noRotate, noZoom, unoptimized, }: {
+    open: boolean;
+    handleClose: () => void;
+    isLoading: boolean;
+    src: string | undefined;
+    title?: string;
+    unoptimized?: boolean;
+    noResetBtn?: boolean;
+    noRotate?: boolean;
+    noZoom?: boolean;
+}): React$1.JSX.Element;
+
 type PaletteColor = "primary" | "secondary" | "error" | "warning" | "info" | "success" | "tertiary" | "accent" | "successLight" | "orange" | "indigo" | "teal" | "pinkLight" | "aqua" | "customRed";
 interface CustomDialogProps {
     title: string;
@@ -619,10 +632,16 @@ interface CustomDialogProps {
     onClose: () => void;
     maxWidth?: DialogProps["maxWidth"];
     fullWidth?: boolean;
+    fullScreen?: boolean;
     children: ReactNode;
     actions?: ReactNode;
     isSubmiting?: boolean;
+    sx?: SxProps<Theme>;
+    paperSx?: SxProps<Theme>;
+    contentSx?: SxProps<Theme>;
+    titleSx?: SxProps<Theme>;
+    actionsSx?: SxProps<Theme>;
 }
-declare function CustomDialog({ title, icon: Icon, iconColor, open, onClose, maxWidth, fullWidth, children, actions, isSubmiting, }: CustomDialogProps): React$1.JSX.Element;
+declare function CustomDialog({ title, icon: Icon, iconColor, open, onClose, maxWidth, fullWidth, fullScreen, children, actions, isSubmiting, sx, paperSx, contentSx, titleSx, actionsSx, }: CustomDialogProps): React$1.JSX.Element;
 
-export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomDialog, type CustomDialogProps, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, type PaletteColor, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage$1 as UploadImage };
+export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomDialog, type CustomDialogProps, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, imgViewer as ImgViewer, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, type PaletteColor, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage$1 as UploadImage };

package/dist/index.d.ts

@@ -331,8 +331,9 @@ type UploadImageProps$1<T extends FieldValues> = {
     height?: string;
     allowGallery?: boolean;
     imageFit?: "contain" | "cover";
+    disableCamera?: boolean;
 };
-declare const UploadImage$1: <T extends FieldValues>({ placeholder, name, selectedImage, setSelectedImage, control, errors, setValue, height, allowGallery, imageFit, }: UploadImageProps$1<T>) => React__default.JSX.Element;
+declare const UploadImage$1: <T extends FieldValues>({ placeholder, name, selectedImage, setSelectedImage, control, errors, setValue, height, allowGallery, imageFit, disableCamera, }: UploadImageProps$1<T>) => React__default.JSX.Element;
 
 type UploadImageProps<T extends FieldValues> = {
     placeholder: string;
@@ -610,6 +611,18 @@ type DataTableProps<T extends Record<string, any>> = {
  */
 declare const DataTable: <T extends Record<string, any>>({ data, columns, isLoading, isRefetching, pagination, onPaginationChange, totalRows, manualPagination, columnFilters, onColumnFiltersChange, manualFiltering, onClearFilters, showClearFiltersButton, sorting, onSortingChange, manualSorting, columnVisibility, onColumnVisibilityChange, columnOrder, onColumnOrderChange, enableStickyHeader, maxHeight, density, enableColumnOrdering, enableGlobalFilter, enableColumnFilterModes, enableRowSelection, showColumnFilters, onShowColumnFiltersChange, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, tableOptions, localization, enableColumnVirtualization, columnVirtualizerOptions, enableColumnResizing, }: DataTableProps<T>) => React$1.JSX.Element;
 
+declare function imgViewer({ open, handleClose, src, isLoading, title, noResetBtn, noRotate, noZoom, unoptimized, }: {
+    open: boolean;
+    handleClose: () => void;
+    isLoading: boolean;
+    src: string | undefined;
+    title?: string;
+    unoptimized?: boolean;
+    noResetBtn?: boolean;
+    noRotate?: boolean;
+    noZoom?: boolean;
+}): React$1.JSX.Element;
+
 type PaletteColor = "primary" | "secondary" | "error" | "warning" | "info" | "success" | "tertiary" | "accent" | "successLight" | "orange" | "indigo" | "teal" | "pinkLight" | "aqua" | "customRed";
 interface CustomDialogProps {
     title: string;
@@ -619,10 +632,16 @@ interface CustomDialogProps {
     onClose: () => void;
     maxWidth?: DialogProps["maxWidth"];
     fullWidth?: boolean;
+    fullScreen?: boolean;
     children: ReactNode;
     actions?: ReactNode;
     isSubmiting?: boolean;
+    sx?: SxProps<Theme>;
+    paperSx?: SxProps<Theme>;
+    contentSx?: SxProps<Theme>;
+    titleSx?: SxProps<Theme>;
+    actionsSx?: SxProps<Theme>;
 }
-declare function CustomDialog({ title, icon: Icon, iconColor, open, onClose, maxWidth, fullWidth, children, actions, isSubmiting, }: CustomDialogProps): React$1.JSX.Element;
+declare function CustomDialog({ title, icon: Icon, iconColor, open, onClose, maxWidth, fullWidth, fullScreen, children, actions, isSubmiting, sx, paperSx, contentSx, titleSx, actionsSx, }: CustomDialogProps): React$1.JSX.Element;
 
-export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomDialog, type CustomDialogProps, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, type PaletteColor, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage$1 as UploadImage };
+export { Page as Accordion, AdvancedSearchButton, ConfirmationDialog$1 as ConfirmationDialog, ConnectToBasculeButton, CustomCheckbox, CustomDialog, type CustomDialogProps, CustomTimePicker, DataTable, DateFilter, DateFilterRange, DateMonthPicker, JalaliDatePicker$2 as DatePicker, JalaliDatePicker$1 as DateTimePicker, JalaliDateTimeRangePicker as DateTimeRangePicker, DraggablePaper, UploadImage as EnhancedUploadImage, FormInputNumber, FormInputText, HorizontalStepper, imgViewer as ImgViewer, LicensePlate, JalaliDatePicker as MobileDateTimePicker, ConfirmationDialog as Modal, NestedSelect as NestedSelectort, NoResult, PaginationList, type PaletteColor, PatternTextField, RadioButton, SearchLicensePlate, MultipleSelectChip as Selector, SkeletonCard, SonarSpinner, SwitchButton, Table, UploadImage$1 as UploadImage };

package/dist/index.js

@@ -49,6 +49,7 @@ __export(src_exports, {
   FormInputNumber: () => number_type_default,
   FormInputText: () => text_type_default,
   HorizontalStepper: () => HorizontalStepper,
+  ImgViewer: () => imgViewer,
   LicensePlate: () => LicensePlate,
   MobileDateTimePicker: () => mobile_date_time_picker_default,
   Modal: () => ConfirmationDialog2,
@@ -3919,7 +3920,8 @@ var UploadImage = ({
   setValue,
   height,
   allowGallery = false,
-  imageFit = "cover"
+  imageFit = "cover",
+  disableCamera = false
 }) => {
   const compressImage = (file, quality = 0.8, maxWidth = 800, maxHeight = 800) => {
     return new Promise((resolve) => {
@@ -4030,7 +4032,7 @@ var UploadImage = ({
             /* @__PURE__ */ import_react23.default.createElement(import_material22.Box, { sx: { paddingBottom: "0.5rem" } }, /* @__PURE__ */ import_react23.default.createElement(import_gr.GrUpload, null)),
             placeholder
           ),
-          allowGallery && /* @__PURE__ */ import_react23.default.createElement(import_material22.Stack, { spacing: 1.5 }, /* @__PURE__ */ import_react23.default.createElement(
+          allowGallery && /* @__PURE__ */ import_react23.default.createElement(import_material22.Stack, { spacing: 1.5 }, !disableCamera && /* @__PURE__ */ import_react23.default.createElement(
             import_material22.Button,
             {
               sx: { width: "9rem" },
@@ -5053,9 +5055,176 @@ var DataTable = ({
 };
 var data_table_default = DataTable;
 
-// src/custom-dialog/index.tsx
+// src/img-viewer/index.tsx
 var import_material31 = require("@mui/material");
 var import_md9 = require("react-icons/md");
+var import_image6 = __toESM(require("next/image"));
+var import_react31 = require("react");
+function imgViewer({
+  open,
+  handleClose,
+  src,
+  isLoading,
+  title = "",
+  noResetBtn = false,
+  noRotate = false,
+  noZoom = false,
+  unoptimized = false
+}) {
+  const [zoom, setZoom] = (0, import_react31.useState)(1);
+  const [rotate, setRotate] = (0, import_react31.useState)(0);
+  const [loading, setLoading] = (0, import_react31.useState)(true);
+  const [position, setPosition] = (0, import_react31.useState)({ x: 0, y: 0 });
+  const [dragging, setDragging] = (0, import_react31.useState)(false);
+  const [startMouse, setStartMouse] = (0, import_react31.useState)({ x: 0, y: 0 });
+  const [startOffset, setStartOffset] = (0, import_react31.useState)({ x: 0, y: 0 });
+  const reset = () => {
+    setZoom(1);
+    setRotate(0);
+    setPosition({ x: 0, y: 0 });
+  };
+  const handleWheel = (0, import_react31.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_react31.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_react31.useEffect)(() => {
+    if (open) reset();
+  }, [open]);
+  return /* @__PURE__ */ React.createElement(
+    import_material31.Dialog,
+    {
+      open,
+      onClose: handleClose,
+      maxWidth: "xl",
+      fullWidth: true,
+      sx: {
+        "& .MuiPaper-root": {
+          borderRadius: 3,
+          backgroundColor: "transparent"
+        }
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      import_material31.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_material31.Box,
+        {
+          sx: {
+            position: "absolute",
+            top: 10,
+            left: 10,
+            zIndex: 20,
+            display: "flex",
+            gap: 1,
+            alignItems: "center"
+          }
+        },
+        /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: handleClose }, /* @__PURE__ */ React.createElement(import_md9.MdClose, { color: "white" })),
+        !noResetBtn && /* @__PURE__ */ React.createElement(import_material31.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_material31.IconButton, { onClick: () => setRotate((r) => r - 90) }, /* @__PURE__ */ React.createElement(import_md9.MdRotateLeft, { color: "white" })), /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: () => setRotate((r) => r + 90) }, /* @__PURE__ */ React.createElement(import_md9.MdRotateRight, { color: "white" }))),
+        !noZoom && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_material31.IconButton, { onClick: () => setZoom((z) => z + 0.2) }, /* @__PURE__ */ React.createElement(import_md9.MdZoomIn, { color: "white" })), /* @__PURE__ */ React.createElement(
+          import_material31.IconButton,
+          {
+            onClick: () => setZoom((z) => Math.max(0.2, z - 0.2))
+          },
+          /* @__PURE__ */ React.createElement(import_md9.MdZoomOut, { color: "white" })
+        )),
+        /* @__PURE__ */ React.createElement(import_material31.Typography, { color: "white" }, title)
+      ),
+      (isLoading || loading) && /* @__PURE__ */ React.createElement(
+        import_material31.Box,
+        {
+          sx: {
+            position: "absolute",
+            zIndex: 10,
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            color: "white"
+          }
+        },
+        /* @__PURE__ */ React.createElement(import_material31.CircularProgress, { color: "inherit" })
+      ),
+      /* @__PURE__ */ React.createElement(
+        import_material31.Box,
+        {
+          onMouseDown: handleMouseDown,
+          sx: {
+            position: "relative",
+            cursor: dragging ? "grabbing" : "grab",
+            transform: `translate(${position.x}px, ${position.y}px) scale(${zoom}) rotate(${rotate}deg)`,
+            transition: dragging ? "none" : "transform 0.3s ease",
+            zIndex: 5
+          }
+        },
+        src && !isLoading && /* @__PURE__ */ React.createElement(
+          import_image6.default,
+          {
+            src,
+            alt: title,
+            width: 1e3,
+            height: 800,
+            onLoad: () => setLoading(false),
+            onError: () => setLoading(false),
+            style: {
+              objectFit: "contain",
+              userSelect: "none",
+              pointerEvents: "none"
+            },
+            unoptimized,
+            ...unoptimized ? { loader: ({ src: src2 }) => src2 } : { loader: void 0 }
+          }
+        )
+      )
+    )
+  );
+}
+
+// src/custom-dialog/index.tsx
+var import_material32 = require("@mui/material");
+var import_md10 = require("react-icons/md");
 function CustomDialog({
   title,
   icon: Icon,
@@ -5064,9 +5233,15 @@ function CustomDialog({
   onClose,
   maxWidth = "sm",
   fullWidth = true,
+  fullScreen = false,
   children,
   actions,
-  isSubmiting = false
+  isSubmiting = false,
+  sx,
+  paperSx,
+  contentSx,
+  titleSx,
+  actionsSx
 }) {
   const handleClose = (event, reason) => {
     if (isSubmiting) {
@@ -5075,79 +5250,156 @@ function CustomDialog({
     onClose();
   };
   return /* @__PURE__ */ React.createElement(
-    import_material31.Dialog,
+    import_material32.Dialog,
     {
       open,
       onClose: handleClose,
       maxWidth,
       fullWidth,
-      PaperComponent: DraggablePaper,
-      disableScrollLock: true
+      fullScreen,
+      PaperComponent: fullScreen ? void 0 : DraggablePaper,
+      disableScrollLock: true,
+      sx: [
+        fullScreen ? {
+          "& .MuiDialog-container": {
+            alignItems: "flex-start"
+          }
+        } : {},
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      PaperProps: {
+        sx: [
+          fullScreen ? {
+            height: "100vh",
+            maxHeight: "100vh",
+            width: "100%",
+            maxWidth: "100%",
+            margin: 0,
+            borderRadius: 0,
+            overflow: "hidden"
+          } : {
+            maxHeight: "calc(100vh - 64px)"
+          },
+          ...Array.isArray(paperSx) ? paperSx : [paperSx]
+        ]
+      }
     },
     /* @__PURE__ */ React.createElement(
-      import_material31.DialogTitle,
+      import_material32.Box,
       {
-        fontWeight: 700,
-        fontSize: "1.2rem",
-        display: "flex",
-        alignItems: "center",
-        gap: "4px",
-        sx: { cursor: "move" },
-        id: "draggable-dialog"
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          height: fullScreen ? "100%" : "auto"
+        }
       },
-      /* @__PURE__ */ React.createElement(import_material31.Stack, { direction: "row", alignItems: "center", spacing: 0.5 }, /* @__PURE__ */ React.createElement(import_material31.Box, null, Icon && /* @__PURE__ */ React.createElement(
-        import_material31.Stack,
+      /* @__PURE__ */ React.createElement(
+        import_material32.DialogTitle,
         {
+          fontWeight: 700,
+          fontSize: "1.2rem",
+          display: "flex",
           alignItems: "center",
-          sx: {
-            color: iconColor ? (theme3) => {
-              const paletteColors = [
-                "primary",
-                "secondary",
-                "error",
-                "warning",
-                "info",
-                "success",
-                "tertiary",
-                "accent",
-                "successLight",
-                "orange",
-                "indigo",
-                "teal",
-                "pinkLight",
-                "aqua",
-                "customRed"
-              ];
-              if (paletteColors.includes(iconColor)) {
-                const palette = theme3.palette;
-                return palette[iconColor]?.main || iconColor;
-              }
-              return iconColor;
-            } : (theme3) => theme3.palette.info.main,
-            pr: 0.5
-          }
+          gap: "4px",
+          sx: [
+            fullScreen ? { cursor: "default" } : { cursor: "move" },
+            {
+              flexShrink: 0,
+              py: 2,
+              px: 3
+            },
+            ...Array.isArray(titleSx) ? titleSx : [titleSx]
+          ],
+          id: fullScreen ? void 0 : "draggable-dialog"
         },
-        /* @__PURE__ */ React.createElement(Icon, { size: 20 })
-      )), /* @__PURE__ */ React.createElement(import_material31.Box, null, title))
-    ),
-    /* @__PURE__ */ React.createElement(import_material31.Tooltip, { title: "\u0628\u0633\u062A\u0646" }, /* @__PURE__ */ React.createElement(
-      import_material31.IconButton,
-      {
-        "aria-label": "close",
-        onClick: onClose,
-        sx: {
-          position: "absolute",
-          right: 8,
-          top: 8,
-          color: (theme3) => theme3.palette.grey[500]
+        /* @__PURE__ */ React.createElement(import_material32.Stack, { direction: "row", alignItems: "center", spacing: 0.5 }, /* @__PURE__ */ React.createElement(import_material32.Box, null, Icon && /* @__PURE__ */ React.createElement(
+          import_material32.Stack,
+          {
+            alignItems: "center",
+            sx: {
+              color: iconColor ? (theme3) => {
+                const paletteColors = [
+                  "primary",
+                  "secondary",
+                  "error",
+                  "warning",
+                  "info",
+                  "success",
+                  "tertiary",
+                  "accent",
+                  "successLight",
+                  "orange",
+                  "indigo",
+                  "teal",
+                  "pinkLight",
+                  "aqua",
+                  "customRed"
+                ];
+                if (paletteColors.includes(iconColor)) {
+                  const palette = theme3.palette;
+                  return palette[iconColor]?.main || iconColor;
+                }
+                return iconColor;
+              } : (theme3) => theme3.palette.info.main,
+              pr: 0.5
+            }
+          },
+          /* @__PURE__ */ React.createElement(Icon, { size: 20 })
+        )), /* @__PURE__ */ React.createElement(import_material32.Box, null, title))
+      ),
+      /* @__PURE__ */ React.createElement(import_material32.Tooltip, { title: "\u0628\u0633\u062A\u0646" }, /* @__PURE__ */ React.createElement(
+        import_material32.IconButton,
+        {
+          "aria-label": "close",
+          onClick: onClose,
+          sx: [
+            {
+              position: "absolute",
+              right: 8,
+              top: 8,
+              color: (theme3) => theme3.palette.grey[500]
+            },
+            fullScreen && {
+              top: 12,
+              right: 12
+            }
+          ],
+          disabled: isSubmiting
         },
-        disabled: isSubmiting
-      },
-      /* @__PURE__ */ React.createElement(import_md9.MdClose, null)
-    )),
-    /* @__PURE__ */ React.createElement(import_material31.Divider, null),
-    /* @__PURE__ */ React.createElement(import_material31.DialogContent, null, children),
-    actions && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(import_material31.DialogActions, null, actions))
+        /* @__PURE__ */ React.createElement(import_md10.MdClose, null)
+      )),
+      /* @__PURE__ */ React.createElement(import_material32.Divider, { sx: { flexShrink: 0 } }),
+      /* @__PURE__ */ React.createElement(
+        import_material32.DialogContent,
+        {
+          sx: [
+            {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              overflow: "auto",
+              p: 0
+            },
+            ...Array.isArray(contentSx) ? contentSx : [contentSx]
+          ]
+        },
+        /* @__PURE__ */ React.createElement(import_material32.Box, { sx: { p: fullScreen ? 3 : 2, flex: 1, overflow: "auto" } }, children)
+      ),
+      actions && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+        import_material32.DialogActions,
+        {
+          sx: [
+            {
+              flexShrink: 0,
+              py: 2,
+              px: 3
+            },
+            ...Array.isArray(actionsSx) ? actionsSx : [actionsSx]
+          ]
+        },
+        actions
+      ))
+    )
   );
 }
 // Annotate the CommonJS export names for ESM import in node:
@@ -5171,6 +5423,7 @@ function CustomDialog({
   FormInputNumber,
   FormInputText,
   HorizontalStepper,
+  ImgViewer,
   LicensePlate,
   MobileDateTimePicker,
   Modal,