@codezee/sixtify-brahma 0.2.207 → 0.2.209

package/packages/shared-components/dist/FormFields/DateTimePicker/DateTimePicker.js

@@ -1,211 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DateTimePicker = DateTimePicker;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ChevronLeft_1 = __importDefault(require("@mui/icons-material/ChevronLeft"));
-const ChevronRight_1 = __importDefault(require("@mui/icons-material/ChevronRight"));
-const Box_1 = __importDefault(require("@mui/material/Box"));
-const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const styles_1 = require("@mui/material/styles");
-const Tooltip_1 = __importDefault(require("@mui/material/Tooltip"));
-const DateTimePicker_1 = require("@mui/x-date-pickers/DateTimePicker");
-const luxon_1 = require("luxon");
-const react_1 = require("react");
-const react_hook_form_1 = require("react-hook-form");
-const Actions_1 = require("../../Actions");
-const utils_1 = require("../../utils");
-const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
-const commonStyles_1 = require("../commonStyles");
-const Skeleton_1 = require("./Skeleton");
-const hoverTextStyle = (color) => ({
-    "&:hover": {
-        color,
-    },
-});
-const LeftArrowIcon = () => {
-    const theme = (0, styles_1.useTheme)();
-    const { iron } = theme.palette.app.color;
-    return ((0, jsx_runtime_1.jsx)(ChevronLeft_1.default, { sx: {
-            border: `1px solid ${iron[800]}`,
-            borderRadius: "5px",
-            p: "4px",
-        } }));
-};
-const RightArrowIcon = () => {
-    const theme = (0, styles_1.useTheme)();
-    const { iron } = theme.palette.app.color;
-    return ((0, jsx_runtime_1.jsx)(ChevronRight_1.default, { sx: {
-            border: `1px solid ${iron[800]}`,
-            borderRadius: "5px",
-            p: "4px",
-        } }));
-};
-function DateTimePicker({ control, defaultValue, disabled = false, label, readOnly = false, name, error = false, helperText, loading = false, required = false, clearable = required ? false : true, rules, format = "dd-MM-yyyy HH:mm", helperIcon, toolTipText, timeStepsMinutes = 1, styling = "custom", navigationKey, ...restProps }) {
-    const { field: { value, onChange, ...restField }, } = (0, react_hook_form_1.useController)({ name, control, defaultValue, rules });
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const { navigationKey: navigationKeyFromContext } = (0, utils_1.useNavigationKeyContext)();
-    const resolvedNavigationKey = navigationKey ?? navigationKeyFromContext;
-    const { setInputRef, maintainFocus, maintainFocusAfterClose, handleKeyDown, handleEnterNavigation, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ isOpen: open, navigationKey: resolvedNavigationKey });
-    if (error && value && typeof value === "object") {
-        helperText = "Invalid time";
-    }
-    const theme = (0, styles_1.useTheme)();
-    const { iron, butterflyBlue, mirage } = theme.palette.app.color;
-    const pickerValue = value
-        ? luxon_1.DateTime.fromISO(value)
-        : null;
-    if (loading) {
-        return ((0, jsx_runtime_1.jsx)(Box_1.default, { sx: { width: "350px" }, children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, styling: styling }) }));
-    }
-    const EmptyIcon = () => null;
-    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(Stack_1.default, { alignItems: "center", flexDirection: "row", gap: "5px", children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.default, { required: required, disabled: disabled, children: label })), helperIcon && toolTipText && ((0, jsx_runtime_1.jsx)(Tooltip_1.default, { title: toolTipText, placement: "bottom", children: helperIcon }))] })), (0, jsx_runtime_1.jsx)(DateTimePicker_1.DateTimePicker, { ...restField, ...restProps, disabled: disabled, readOnly: readOnly, open: open, ampm: false, value: pickerValue, timeSteps: { minutes: timeStepsMinutes }, format: format, onOpen: () => {
-                    setOpen(true);
-                }, onClose: () => {
-                    setOpen(false);
-                    maintainFocusAfterClose();
-                }, slotProps: {
-                    field: {
-                        inputRef: setInputRef,
-                        clearable,
-                        onClear: () => {
-                            onChange(null);
-                        },
-                    },
-                    clearButton: {
-                        tabIndex: clearable ? 0 : -1,
-                        onKeyDown: (event) => {
-                            if (resolvedNavigationKey === "enter" && event.key === "Enter") {
-                                handleEnterNavigation(event);
-                            }
-                        },
-                    },
-                    textField: {
-                        disabled,
-                        helperText,
-                        error,
-                        label: styling === "default" ? label : undefined,
-                        required: styling === "default" ? required : undefined,
-                        inputRef: setInputRef,
-                        InputProps: {
-                            endAdornment: ((0, jsx_runtime_1.jsx)(Actions_1.CalendarIconAction, { showTooltip: false, disabled: disabled, onClick: () => setOpen(true), onKeyDown: (event) => {
-                                    if (resolvedNavigationKey === "enter" &&
-                                        event.key === "Enter") {
-                                        handleEnterNavigation(event);
-                                    }
-                                } })),
-                            sx: {
-                                "& .MuiInputAdornment-root": {
-                                    width: "30px",
-                                },
-                            },
-                        },
-                        sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling),
-                        InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling),
-                        onKeyDown: (event) => {
-                            handleKeyDown(event, () => {
-                                setOpen(false);
-                            }, open);
-                            if (event.key === "Backspace" && clearable) {
-                                onChange(null);
-                            }
-                        },
-                    },
-                    popper: {
-                        sx: {
-                            "& .MuiMultiSectionDigitalClockSection-root::after": {
-                                display: "unset",
-                            },
-                            "& .MuiList-padding": {
-                                padding: "10px",
-                            },
-                            "& .MuiMultiSectionDigitalClockSection-item:not(.Mui-selected)": {
-                                padding: "4px",
-                                ...hoverTextStyle(butterflyBlue[900]),
-                            },
-                            "& .MuiMultiSectionDigitalClockSection-item": {
-                                padding: "4px",
-                            },
-                            "& .MuiMultiSectionDigitalClockSection-item.Mui-selected": {
-                                backgroundColor: butterflyBlue[900],
-                                borderRadius: "5px",
-                                "&:hover": {
-                                    backgroundColor: butterflyBlue[900],
-                                    color: iron[600],
-                                },
-                            },
-                            "& .Mui-selected:hover": {
-                                backgroundColor: butterflyBlue[900],
-                                borderRadius: "5px",
-                            },
-                            "& .MuiMultiSectionDigitalClockSection-item.Mui-selected:focus-visible": {
-                                backgroundColor: `${butterflyBlue[900]} !important`,
-                                borderRadius: "5px",
-                            },
-                            "& .Mui-selected:focus-visible": {
-                                backgroundColor: butterflyBlue[900],
-                                borderRadius: "5px",
-                            },
-                        },
-                    },
-                    day: {
-                        sx: {
-                            "&.MuiPickersDay-root": {
-                                borderRadius: "5px",
-                                borderColor: butterflyBlue[900],
-                                fontWeight: 500,
-                                color: mirage[900],
-                            },
-                            "&.MuiPickersDay-root.Mui-selected": {
-                                backgroundColor: butterflyBlue[900],
-                                color: iron[600],
-                            },
-                            "&.MuiPickersDay-root:not(.Mui-selected)": {
-                                ...hoverTextStyle(butterflyBlue[900]),
-                            },
-                            "&.MuiPickersDay-today": {
-                                color: butterflyBlue[900],
-                                backgroundColor: iron[600],
-                            },
-                            ":focus": {
-                                backgroundColor: "transparent",
-                            },
-                        },
-                    },
-                    calendarHeader: {
-                        sx: {
-                            "& .MuiPickersCalendarHeader-label": {
-                                fontWeight: "500",
-                                ...hoverTextStyle(butterflyBlue[900]),
-                            },
-                        },
-                    },
-                    yearButton: {
-                        sx: {
-                            "&.MuiPickersYear-yearButton.Mui-selected": {
-                                backgroundColor: butterflyBlue[900],
-                                borderRadius: "25px",
-                            },
-                            "&.MuiPickersYear-yearButton:not(.Mui-selected)": {
-                                ...hoverTextStyle(butterflyBlue[900]),
-                                borderRadius: "25px",
-                            },
-                        },
-                    },
-                }, slots: {
-                    leftArrowIcon: LeftArrowIcon,
-                    rightArrowIcon: RightArrowIcon,
-                    switchViewIcon: EmptyIcon,
-                }, shouldDisableTime: () => !pickerValue, onChange: (value) => {
-                    if (value?.isValid) {
-                        onChange(value.toUTC().toISO());
-                        maintainFocus();
-                        return;
-                    }
-                    onChange(value);
-                    maintainFocus();
-                } })] }));
-}

package/packages/shared-components/dist/FormFields/DateTimePicker/Skeleton.js

@@ -1,17 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Skeleton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Skeleton_1 = __importDefault(require("@mui/material/Skeleton"));
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const Skeleton = ({ label, styling }) => {
-    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "10px", flex: 1, children: [label && styling === "custom" && ((0, jsx_runtime_1.jsx)(Skeleton_1.default, { width: 120, height: "18.69px", sx: {
-                    transform: "scale(1)",
-                } })), (0, jsx_runtime_1.jsx)(Skeleton_1.default, { height: "35.69px", width: "100%", sx: {
-                    transform: "scale(1)",
-                } })] }));
-};
-exports.Skeleton = Skeleton;

package/packages/shared-components/dist/FormFields/DateTimePicker/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./DateTimePicker"), exports);

package/packages/shared-components/dist/FormFields/DecimalTextField/DecimalTextField.js

@@ -1,186 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DecimalTextField = DecimalTextField;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const InfoOutlined_1 = __importDefault(require("@mui/icons-material/InfoOutlined"));
-const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const TextField_1 = __importDefault(require("@mui/material/TextField"));
-const react_1 = require("react");
-const react_hook_form_1 = require("react-hook-form");
-const react_number_format_1 = require("react-number-format");
-const Tooltip_1 = require("../../Tooltip");
-const utils_1 = require("../../utils");
-const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
-const commonStyles_1 = require("../commonStyles");
-const Skeleton_1 = require("../TextField/Skeleton");
-function DecimalTextField({ control, name, decimalScale, returnDecimalScale, defaultFallbackValue, min, max, defaultValue, label = "", required, disabled, loading = false, placeholder = "", containerProps, styling = "custom", infoMessage, customOnChange, navigationKey, rules, ...restProps }) {
-    const validationRules = (0, react_1.useMemo)(() => {
-        const builtRules = { ...rules };
-        builtRules.validate = (val) => {
-            const isEmpty = val === undefined || val == null;
-            if (required && isEmpty) {
-                return "This field is required";
-            }
-            if (isEmpty) {
-                return true;
-            }
-            if (isNaN(val)) {
-                return "Please enter a valid number";
-            }
-            if (min !== undefined && val < min) {
-                return `Value must be at least ${min}`;
-            }
-            if (max !== undefined && val > max) {
-                return `Value must be at most ${max}`;
-            }
-            return true;
-        };
-        return builtRules;
-    }, [required, min, max, rules]);
-    const { field: { value, onChange, onBlur, ref }, fieldState: { error }, } = (0, react_hook_form_1.useController)({
-        name,
-        control,
-        rules: validationRules,
-        defaultValue,
-    });
-    const { navigationKey: navigationKeyFromContext } = (0, utils_1.useNavigationKeyContext)();
-    const resolvedNavigationKey = navigationKey ?? navigationKeyFromContext;
-    const { inputRef: navigationInputRef, maintainFocus, handleKeyDown: handleNavigationKeyDown, } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey: resolvedNavigationKey });
-    const inputRef = (0, react_1.useRef)(null);
-    const lastInputStringRef = (0, react_1.useRef)("");
-    const parseValue = (val) => {
-        if (val === "") {
-            return undefined;
-        }
-        const parsed = Number(val);
-        return isNaN(parsed) ? undefined : parsed;
-    };
-    const isEmptyReturnDecimalScale = returnDecimalScale === undefined;
-    const truncateStringValue = (0, react_1.useCallback)((valStr) => {
-        if (isEmptyReturnDecimalScale || valStr === "") {
-            return valStr;
-        }
-        const decimalIndex = valStr.indexOf(".");
-        if (decimalIndex === -1) {
-            return valStr;
-        }
-        const integerPart = valStr.substring(0, decimalIndex);
-        const decimalPart = valStr.substring(decimalIndex + 1);
-        if (decimalPart.length <= returnDecimalScale) {
-            return valStr;
-        }
-        const truncatedDecimal = decimalPart.substring(0, returnDecimalScale);
-        return `${integerPart}.${truncatedDecimal}`;
-    }, [returnDecimalScale]);
-    const formatReturnValue = (0, react_1.useCallback)((valStr) => {
-        if (valStr === undefined || valStr == null || valStr === "") {
-            return undefined;
-        }
-        if (isEmptyReturnDecimalScale) {
-            return typeof valStr === "string" ? parseValue(valStr) : valStr;
-        }
-        const valString = typeof valStr === "string" ? valStr : valStr.toString();
-        const truncatedStr = truncateStringValue(valString);
-        return parseValue(truncatedStr);
-    }, [returnDecimalScale, truncateStringValue]);
-    const handleValueChange = (0, react_1.useCallback)((values) => {
-        const rawValue = values.value;
-        lastInputStringRef.current = rawValue;
-        const numericValue = parseValue(rawValue);
-        onChange(numericValue);
-        const returnValue = !isEmptyReturnDecimalScale
-            ? formatReturnValue(rawValue)
-            : numericValue;
-        customOnChange?.(returnValue);
-        maintainFocus();
-    }, [
-        onChange,
-        customOnChange,
-        maintainFocus,
-        formatReturnValue,
-        returnDecimalScale,
-    ]);
-    const isValidValue = (0, react_1.useCallback)((val) => {
-        if (val === undefined || isNaN(val)) {
-            return false;
-        }
-        return ((min === undefined || val >= min) && (max === undefined || val <= max));
-    }, [min, max]);
-    const handleBlur = (0, react_1.useCallback)(
-    // eslint-disable-next-line sonarjs/cognitive-complexity
-    (event) => {
-        const inputStringValue = lastInputStringRef.current || "";
-        let currentValue;
-        if (inputStringValue) {
-            currentValue = parseValue(inputStringValue);
-        }
-        else if (typeof value === "number") {
-            currentValue = value;
-        }
-        else {
-            currentValue = undefined;
-        }
-        if (error && currentValue !== undefined && !isValidValue(currentValue)) {
-            let resetValue;
-            if (defaultFallbackValue !== undefined &&
-                isValidValue(defaultFallbackValue)) {
-                resetValue = defaultFallbackValue;
-            }
-            else if (min !== undefined) {
-                resetValue = min;
-            }
-            else if (max !== undefined && currentValue > max) {
-                resetValue = max;
-            }
-            else {
-                resetValue = defaultFallbackValue ?? 0;
-            }
-            onChange(resetValue);
-        }
-        lastInputStringRef.current = "";
-        onBlur();
-        restProps.onBlur?.(event);
-    }, [
-        value,
-        error,
-        min,
-        max,
-        defaultFallbackValue,
-        isValidValue,
-        onChange,
-        onBlur,
-        restProps,
-        returnDecimalScale,
-        formatReturnValue,
-    ]);
-    const handleKeyDown = (0, react_1.useCallback)((event) => {
-        handleNavigationKeyDown(event, undefined, false);
-        restProps.onKeyDown?.(event);
-    }, [handleNavigationKeyDown, restProps]);
-    const handleInputRef = (0, react_1.useCallback)((el) => {
-        inputRef.current = el;
-        navigationInputRef.current = el;
-        if (typeof ref === "function") {
-            ref(el);
-        }
-        else if (ref) {
-            ref.current = el;
-        }
-    }, [ref, navigationInputRef]);
-    const displayValue = (0, react_1.useMemo)(() => {
-        if (typeof value !== "number") {
-            return "";
-        }
-        return value;
-    }, [value]);
-    if (loading) {
-        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { label: label, styling: styling });
-    }
-    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { ...containerProps, gap: "5px", children: [label && styling === "custom" && ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", alignItems: "center", gap: "4px", children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { required: required, disabled: disabled, children: label }), infoMessage && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: infoMessage, children: (0, jsx_runtime_1.jsx)(InfoOutlined_1.default, { sx: { fontSize: 13 } }) }))] })), (0, jsx_runtime_1.jsx)(react_number_format_1.NumericFormat, { customInput: TextField_1.default, ...restProps, value: displayValue, decimalScale: decimalScale, fixedDecimalScale: returnDecimalScale === undefined ||
-                    returnDecimalScale === decimalScale, allowNegative: false, thousandSeparator: false, disabled: disabled, required: required, fullWidth: true, name: name, error: Boolean(error), helperText: error?.message, placeholder: styling === "default" ? placeholder : placeholder || label, label: styling === "default" ? label : undefined, sx: (0, commonStyles_1.getDefaultTextFieldSx)(styling), InputLabelProps: (0, commonStyles_1.getDefaultInputLabelProps)(styling), onValueChange: handleValueChange, onBlur: handleBlur, onKeyDown: handleKeyDown, inputMode: "decimal", getInputRef: handleInputRef })] }));
-}

package/packages/shared-components/dist/FormFields/DecimalTextField/index.js

@@ -1,17 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./DecimalTextField"), exports);

package/packages/shared-components/dist/FormFields/FileUpload/Dialogs/FilePreview.js

@@ -1,202 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FilePreview = exports.SUPPORTED_EXCEL_FORMATS = exports.SUPPORTED_DOC_FORMATS = exports.SUPPORTED_PDF_FORMATS = exports.SUPPORTED_IMAGE_FORMATS = void 0;
-exports.isFileType = isFileType;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ZoomInOutlined_1 = __importDefault(require("@mui/icons-material/ZoomInOutlined"));
-const ZoomOutOutlined_1 = __importDefault(require("@mui/icons-material/ZoomOutOutlined"));
-const Box_1 = __importDefault(require("@mui/material/Box"));
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const styles_1 = require("@mui/material/styles");
-const Typography_1 = __importDefault(require("@mui/material/Typography"));
-const isFunction_1 = __importDefault(require("lodash/isFunction"));
-const react_1 = require("react");
-const Button_1 = require("../../../Button");
-const Layouts_1 = require("../../../Layouts");
-const PadBox_1 = require("../../../PadBox");
-const utils_1 = require("../../../utils");
-exports.SUPPORTED_IMAGE_FORMATS = [".png", ".jpg", ".jpeg"];
-exports.SUPPORTED_PDF_FORMATS = [".pdf"];
-exports.SUPPORTED_DOC_FORMATS = [".doc", ".docx"];
-exports.SUPPORTED_EXCEL_FORMATS = [".xls", ".xlsx"];
-const DEFAULT_ZOOM_CONFIG = {
-    min: 0.5,
-    max: 2,
-    step: 2,
-    sensitivity: 0.1,
-};
-function isFileType(url, extensions) {
-    return extensions.some((ext) => url.toLowerCase().endsWith(ext));
-}
-exports.FilePreview = (0, react_1.forwardRef)(({ fileName, resetTrigger, showActions = true, onZoomChange, }, ref) => {
-    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
-    const [position, setPosition] = (0, react_1.useState)({ x: 0, y: 0 });
-    const [startPos, setStartPos] = (0, react_1.useState)({ x: 0, y: 0 });
-    const [zoomLevel, setZoomLevel] = (0, react_1.useState)(1);
-    const imageContainerRef = (0, react_1.useRef)(null);
-    const { isDesktop } = (0, utils_1.useGetDeviceType)();
-    const theme = (0, styles_1.useTheme)();
-    const { slate } = theme.palette.app.color;
-    const { sensitivity, min, max, step } = DEFAULT_ZOOM_CONFIG;
-    const { x: positionX, y: positionY } = position;
-    const handleMouseDown = ({ clientX, clientY, }) => {
-        setIsDragging(true);
-        setStartPos({ x: clientX - positionX, y: clientY - positionY });
-    };
-    const handleMouseMove = ({ clientX, clientY, }) => {
-        if (isDragging) {
-            const x = clientX - startPos.x;
-            const y = clientY - startPos.y;
-            setPosition({ x, y });
-        }
-    };
-    const calculateOffset = ({ clientX, clientY, }, container) => {
-        const { left, top, height, width } = container.getBoundingClientRect();
-        const mouseX = clientX - left;
-        const mouseY = clientY - top;
-        return {
-            offsetX: mouseX - width / 2,
-            offsetY: mouseY - height / 2,
-        };
-    };
-    const handleWheel = (e) => {
-        const container = imageContainerRef.current;
-        if (!container) {
-            return;
-        }
-        const { offsetX, offsetY } = calculateOffset(e, container);
-        const delta = e.deltaY > 0 ? -sensitivity : sensitivity;
-        const newZoom = Math.min(Math.max(zoomLevel + delta, min), max);
-        if (newZoom !== zoomLevel) {
-            const zoomFactor = newZoom / zoomLevel;
-            const newX = positionX - offsetX * (zoomFactor - 1);
-            const newY = positionY - offsetY * (zoomFactor - 1);
-            setPosition({ x: newX, y: newY });
-            setZoomLevel(newZoom);
-        }
-    };
-    const resetZoom = () => {
-        setZoomLevel(1);
-        setPosition({ x: 0, y: 0 });
-    };
-    (0, react_1.useMemo)(() => {
-        resetZoom();
-    }, [resetTrigger]);
-    const updateZoomLevel = (delta) => {
-        setZoomLevel((prev) => {
-            const updatedZoom = Math.min(2, Math.max(0.5, prev + delta));
-            return updatedZoom;
-        });
-    };
-    const handleDoubleClick = (e) => {
-        e.preventDefault();
-        const container = imageContainerRef.current;
-        if (!container) {
-            return;
-        }
-        const { offsetX, offsetY } = calculateOffset(e, container);
-        const newZoom = zoomLevel > 1 ? 1 : Math.min(zoomLevel + step, max);
-        if (zoomLevel > 1) {
-            resetZoom();
-            setZoomLevel(newZoom);
-            return;
-        }
-        const zoomFactor = newZoom / zoomLevel;
-        const newX = positionX - offsetX * (zoomFactor - 1);
-        const newY = positionY - offsetY * (zoomFactor - 1);
-        setPosition({ x: newX, y: newY });
-        setZoomLevel(newZoom);
-    };
-    const endDrag = () => {
-        setIsDragging(false);
-    };
-    const zoomOut = () => {
-        updateZoomLevel(-0.3);
-    };
-    const zoomIn = () => {
-        updateZoomLevel(0.3);
-    };
-    (0, react_1.useMemo)(() => {
-        if ((0, isFunction_1.default)(onZoomChange)) {
-            onZoomChange(zoomLevel);
-        }
-    }, [zoomLevel]);
-    (0, react_1.useEffect)(() => {
-        const handleKeyDown = (e) => {
-            if (e.key === "Escape") {
-                resetZoom();
-            }
-            if (e.key === "ArrowUp") {
-                zoomIn();
-            }
-            if (e.key === "ArrowDown") {
-                zoomOut();
-            }
-        };
-        window.addEventListener("keyup", handleKeyDown);
-        return () => window.removeEventListener("keyup", handleKeyDown);
-    }, []);
-    (0, react_1.useImperativeHandle)(ref, () => {
-        return {
-            resetZoom,
-            zoomIn,
-            zoomOut,
-        };
-    }, [zoomLevel, resetZoom, zoomIn, zoomOut]);
-    const pointerEvent = isDesktop ? "auto" : "none";
-    if (isFileType(fileName, exports.SUPPORTED_PDF_FORMATS)) {
-        return ((0, jsx_runtime_1.jsx)(Box_1.default, { onClick: () => window.open(fileName, "_blank"), height: "100%", children: (0, jsx_runtime_1.jsx)("iframe", { src: `${fileName}#toolbar=0`, style: {
-                    width: "100%",
-                    height: "100%",
-                    pointerEvents: pointerEvent,
-                } }) }));
-    }
-    if (isFileType(fileName, exports.SUPPORTED_IMAGE_FORMATS)) {
-        return ((0, jsx_runtime_1.jsxs)(Layouts_1.FilePreviewContainer, { height: "100%", children: [showActions && ((0, jsx_runtime_1.jsxs)(Stack_1.default, { flexDirection: "row", alignItems: "center", justifyContent: "center", gap: "10px", sx: {
-                        position: "absolute",
-                        top: 10,
-                        right: 66,
-                        zIndex: 10,
-                    }, children: [zoomLevel !== 1 && ((0, jsx_runtime_1.jsx)(Button_1.Button, { sx: {
-                                backgroundColor: slate[900],
-                                minWidth: "42px",
-                                height: "42px",
-                            }, onClick: () => resetZoom(), children: "Reset" })), (0, jsx_runtime_1.jsx)(Button_1.Button, { sx: {
-                                backgroundColor: slate[900],
-                                minWidth: "42px",
-                                height: "42px",
-                            }, onClick: zoomOut, children: (0, jsx_runtime_1.jsx)(ZoomOutOutlined_1.default, {}) }), (0, jsx_runtime_1.jsx)(Button_1.Button, { sx: {
-                                backgroundColor: slate[900],
-                                minWidth: "42px",
-                                height: "42px",
-                            }, onClick: zoomIn, children: (0, jsx_runtime_1.jsx)(ZoomInOutlined_1.default, {}) })] })), (0, jsx_runtime_1.jsx)(Box_1.default, { ref: imageContainerRef, style: {
-                        position: "relative",
-                        width: "100%",
-                        height: "100%",
-                        cursor: isDragging ? "grabbing" : "grab",
-                        transform: `scale(${zoomLevel}) translate(${positionX / zoomLevel}px, ${positionY / zoomLevel}px)`,
-                        transformOrigin: "center center",
-                        transition: isDragging ? "none" : "transform 0.2s ease-in-out",
-                    }, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: endDrag, onMouseLeave: endDrag, onWheel: handleWheel, onDoubleClick: handleDoubleClick, children: (0, jsx_runtime_1.jsx)("img", { src: fileName, alt: "Attachment", style: {
-                            position: "absolute",
-                            width: "100%",
-                            height: "100%",
-                            objectFit: "contain",
-                            userSelect: "none",
-                            pointerEvents: "none",
-                        } }) })] }));
-    }
-    if (isFileType(fileName, exports.SUPPORTED_DOC_FORMATS) ||
-        isFileType(fileName, exports.SUPPORTED_EXCEL_FORMATS)) {
-        return ((0, jsx_runtime_1.jsx)(Box_1.default, { onClick: () => window.open(fileName, "_blank"), height: "100%", children: (0, jsx_runtime_1.jsx)("iframe", { src: `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileName)}`, style: {
-                    width: "100%",
-                    height: "100%",
-                    pointerEvents: pointerEvent,
-                } }) }));
-    }
-    return ((0, jsx_runtime_1.jsx)(Layouts_1.FilePreviewContainer, { children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "10px" }, children: (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body1", sx: { textAlign: "center" }, children: "File Preview Not Supported" }) }) }));
-});
-exports.FilePreview.displayName = "FilePreview";