@codezee/sixtify-brahma 0.2.207 → 0.2.209

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

@@ -1,34 +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.ViewFilePreviewDialog = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const RotateLeftOutlined_1 = __importDefault(require("@mui/icons-material/RotateLeftOutlined"));
-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 IconButton_1 = __importDefault(require("@mui/material/IconButton"));
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const styles_1 = require("@mui/material/styles");
-const react_1 = require("react");
-const Dialog_1 = require("../../../Dialog");
-const PadBox_1 = require("../../../PadBox");
-const download_1 = require("../../../utils/download");
-const DownloadAction_1 = require("../DownloadAction");
-const FilePreview_1 = require("./FilePreview");
-const ViewFilePreviewDialog = ({ open, onClose, fileName, }) => {
-    const theme = (0, styles_1.useTheme)();
-    const [zoomLevel, setZoomLevel] = (0, react_1.useState)(0);
-    const filePreviewRef = (0, react_1.useRef)(null);
-    const { butterflyBlue, slate } = theme.palette.app.color;
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { maxWidth: "lg", onClose: onClose, open: open, title: "View File Preview", actions: (0, jsx_runtime_1.jsxs)(Stack_1.default, { height: 30, minHeight: 30, maxHeight: 30, direction: "row", children: [(0, FilePreview_1.isFileType)(fileName, FilePreview_1.SUPPORTED_IMAGE_FORMATS) && ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", alignContent: "center", justifyContent: "end", children: [zoomLevel !== 1 && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: () => filePreviewRef.current?.resetZoom(), children: (0, jsx_runtime_1.jsx)(RotateLeftOutlined_1.default, {}) })), (0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: () => filePreviewRef.current?.zoomIn(), children: (0, jsx_runtime_1.jsx)(ZoomInOutlined_1.default, {}) }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: () => filePreviewRef.current?.zoomOut(), children: (0, jsx_runtime_1.jsx)(ZoomOutOutlined_1.default, {}) })] })), (0, jsx_runtime_1.jsx)(DownloadAction_1.DownloadAction, { onClick: () => {
-                        (0, download_1.downloadFile)(fileName, fileName);
-                    } })] }), children: (0, jsx_runtime_1.jsx)(Stack_1.default, { bgcolor: butterflyBlue[700], position: "relative", borderRadius: "5px", children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: { sm: "20px 50px 20px 50px", xs: "0" } }, children: (0, jsx_runtime_1.jsx)(Box_1.default, { bgcolor: slate[600], borderRadius: 1, overflow: "hidden", height: "calc(100vh - 335px)", sx: {
-                        userSelect: "none",
-                    }, children: (0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { ref: filePreviewRef, fileName: fileName, resetTrigger: 1, showActions: false, onZoomChange: (zoomOffset) => {
-                            setZoomLevel(zoomOffset);
-                        } }) }) }) }) }));
-};
-exports.ViewFilePreviewDialog = ViewFilePreviewDialog;

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

@@ -1,18 +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("./FilePreview"), exports);
-__exportStar(require("./ViewFilePreviewDialog"), exports);

package/packages/shared-components/dist/FormFields/FileUpload/DownloadAction.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.DownloadAction = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
-const Svgs_1 = require("../../Svgs");
-const Tooltip_1 = require("../../Tooltip");
-const DownloadAction = (props) => {
-    return ((0, jsx_runtime_1.jsx)(IconButton_1.default, { sx: {
-            height: "30px",
-            width: "50px",
-        }, ...props, children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: "Download", children: (0, jsx_runtime_1.jsx)(Svgs_1.SvgDownload, { fontColor: "black", fill: "none" }) }) }));
-};
-exports.DownloadAction = DownloadAction;

package/packages/shared-components/dist/FormFields/FileUpload/FileNames.js

@@ -1,44 +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.FileNames = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const AttachFile_1 = __importDefault(require("@mui/icons-material/AttachFile"));
-const DeleteOutlineOutlined_1 = __importDefault(require("@mui/icons-material/DeleteOutlineOutlined"));
-const VisibilityOutlined_1 = __importDefault(require("@mui/icons-material/VisibilityOutlined"));
-const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const Typography_1 = __importDefault(require("@mui/material/Typography"));
-const drop_1 = __importDefault(require("lodash/drop"));
-const join_1 = __importDefault(require("lodash/join"));
-const last_1 = __importDefault(require("lodash/last"));
-const split_1 = __importDefault(require("lodash/split"));
-const react_1 = require("react");
-const uuid_1 = require("uuid");
-const Tooltip_1 = require("../../Tooltip");
-const utils_1 = require("../../utils");
-const ViewFilePreviewDialog_1 = require("./Dialogs/ViewFilePreviewDialog");
-const FileNames = ({ fileNames, previewEnabled = false, onDelete, }) => {
-    const [selectedFile, setSelectedFile] = (0, react_1.useState)();
-    const { openedDialog, onDialogClose, onDialogOpen } = (0, utils_1.useDialogActions)();
-    const names = (0, react_1.useMemo)(() => {
-        if (fileNames && Array.isArray(fileNames)) {
-            return fileNames.map((url) => {
-                const imageName = (0, join_1.default)((0, drop_1.default)((0, split_1.default)((0, last_1.default)((0, split_1.default)(url, "/")), "_")), "_");
-                return imageName;
-            });
-        }
-        return [];
-    }, [fileNames]);
-    const handlePreviewClick = (name) => {
-        setSelectedFile(name);
-        onDialogOpen("viewAttachment");
-    };
-    const dialogRenderer = {
-        viewAttachment: selectedFile && ((0, jsx_runtime_1.jsx)(ViewFilePreviewDialog_1.ViewFilePreviewDialog, { open: openedDialog === "viewAttachment", onClose: onDialogClose, fileName: selectedFile })),
-    };
-    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "5px", maxHeight: "120px", overflow: "auto", children: [names.map((name, index) => ((0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", gap: "5x", alignItems: "center", maxWidth: "80%", overflow: "hidden", children: [(0, jsx_runtime_1.jsx)(AttachFile_1.default, {}), (0, jsx_runtime_1.jsx)(Typography_1.default, { maxWidth: "100%", textOverflow: "clip", children: name })] }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", children: [previewEnabled && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: () => fileNames[index] && handlePreviewClick(fileNames[index]), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: "Preview", children: (0, jsx_runtime_1.jsx)(VisibilityOutlined_1.default, {}) }) })), (0, jsx_runtime_1.jsx)(IconButton_1.default, { onClick: () => onDelete(index), children: (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { toolTipLabel: "Delete", children: (0, jsx_runtime_1.jsx)(DeleteOutlineOutlined_1.default, {}) }) })] })] }, (0, uuid_1.v4)()))), openedDialog && dialogRenderer[openedDialog]] }));
-};
-exports.FileNames = FileNames;

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

@@ -1,190 +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.error_with_transaltion = void 0;
-exports.FileUpload = FileUpload;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const InputLabel_1 = __importDefault(require("@mui/material/InputLabel"));
-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 isNull_1 = __importDefault(require("lodash/isNull"));
-const react_1 = require("react");
-const react_i18next_1 = require("react-i18next");
-const PadBox_1 = require("../../PadBox");
-const Svgs_1 = require("../../Svgs");
-const utils_1 = require("../../utils");
-const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
-const FileUpload_styled_1 = require("./FileUpload.styled");
-const Skeleton_1 = require("./Skeleton");
-exports.error_with_transaltion = "error_with_transaltion";
-function FileUpload({ loading = false, onChange, isDisabled, multiple = false, required = false, error, helperText, label, fileNames, size = 10, name, setError, accept = utils_1.SUPPORTED_FILE_TYPES, acceptTitle = "Only JPG, PNG, PDF files are accepted.", ...restProps }) {
-    const theme = (0, styles_1.useTheme)();
-    const { red, iron, black, butterflyBlue } = theme.palette.app.color;
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const { inputRef, setInputRef } = (0, useFormFieldFocus_1.useFormFieldFocus)({ navigationKey: "tab" });
-    const dragCounter = (0, react_1.useRef)(0);
-    const rafRef = (0, react_1.useRef)(null);
-    const animStartRef = (0, react_1.useRef)(null);
-    const animFromRef = (0, react_1.useRef)(0);
-    const animToRef = (0, react_1.useRef)(0);
-    const [dragProgress, setDragProgress] = (0, react_1.useState)(0);
-    const easeOutCubic = (x) => 1 - Math.pow(1 - x, 3);
-    const processFiles = (files) => {
-        const result = files.reduce((acc, currentFile) => {
-            const { name } = currentFile;
-            if (!(0, utils_1.isFileSizeValid)(currentFile, size)) {
-                acc.errors.push(t("fileUpload.fileSize.error.message", {
-                    fileName: name,
-                    fileSize: size,
-                }));
-                return acc;
-            }
-            if (accept.length && !(0, utils_1.isFileTypeValid)(currentFile, accept)) {
-                acc.errors.push(t("fileUpload.fileType.error.message", {
-                    fileName: name,
-                }));
-                return acc;
-            }
-            acc.validFiles.push(currentFile);
-            return acc;
-        }, { validFiles: [], errors: [] });
-        const { errors, validFiles } = result;
-        if (errors.length && (0, isFunction_1.default)(setError)) {
-            setError(name, {
-                type: exports.error_with_transaltion,
-                message: errors.join("\n"),
-            });
-            return;
-        }
-        if (!validFiles.length) {
-            return;
-        }
-        onChange(validFiles);
-    };
-    const handleFileChange = (event) => {
-        const files = event.target.files;
-        if (files) {
-            processFiles(Array.from(files));
-            event.target.value = "";
-        }
-    };
-    const animate = (timestamp) => {
-        if ((0, isNull_1.default)(animStartRef.current)) {
-            animStartRef.current = timestamp;
-        }
-        const duration = 220;
-        const elapsed = Math.min(timestamp - animStartRef.current, duration);
-        const tNorm = !duration ? 1 : elapsed / duration;
-        const eased = easeOutCubic(tNorm);
-        const value = animFromRef.current + (animToRef.current - animFromRef.current) * eased;
-        setDragProgress(Number(value.toFixed(3)));
-        if (elapsed < duration) {
-            rafRef.current = requestAnimationFrame(animate);
-            return;
-        }
-        setDragProgress(animToRef.current);
-        animStartRef.current = null;
-        rafRef.current = null;
-    };
-    const animateTo = (target) => {
-        const clamped = Math.max(0, Math.min(1, target));
-        if (rafRef.current) {
-            cancelAnimationFrame(rafRef.current);
-            rafRef.current = null;
-        }
-        animFromRef.current = dragProgress;
-        animToRef.current = clamped;
-        animStartRef.current = null;
-        rafRef.current = requestAnimationFrame(animate);
-    };
-    (0, react_1.useEffect)(() => {
-        // useEffect ensures RAF cleanup happens when the component unmounts
-        return () => {
-            if (rafRef.current) {
-                cancelAnimationFrame(rafRef.current);
-                rafRef.current = null;
-            }
-        };
-    }, []);
-    const handleDragEnter = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (isDisabled) {
-            return;
-        }
-        dragCounter.current += 1;
-        if (dragCounter.current) {
-            animateTo(1);
-        }
-    };
-    const handleDragOver = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (isDisabled) {
-            return;
-        }
-        if (e.dataTransfer) {
-            e.dataTransfer.dropEffect = "copy";
-        }
-    };
-    const handleDragLeave = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (isDisabled) {
-            return;
-        }
-        dragCounter.current -= 1;
-        if (dragCounter.current <= 0) {
-            dragCounter.current = 0;
-            animateTo(0);
-        }
-    };
-    const handleDrop = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        if (isDisabled) {
-            return;
-        }
-        dragCounter.current = 0;
-        animateTo(0);
-        const dt = e.dataTransfer;
-        if (!dt) {
-            return;
-        }
-        const { files } = dt;
-        if (!files?.length) {
-            return;
-        }
-        const fileArray = Array.from(files);
-        processFiles(fileArray);
-    };
-    const handleContainerKeyDown = (event) => {
-        if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            inputRef.current?.click();
-        }
-    };
-    if (loading) {
-        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
-    }
-    const boxShadowIntensity = 0.08 + 0.12 * dragProgress;
-    const scale = 1 + 0.02 * dragProgress;
-    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "5px", children: [(0, jsx_runtime_1.jsx)(InputLabel_1.default, { disabled: isDisabled, required: required, children: label }), (0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileUploadContainer, { onClick: () => inputRef.current?.click(), onKeyDown: handleContainerKeyDown, onDragEnter: handleDragEnter, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, error: error, disabled: isDisabled, tabIndex: isDisabled ? -1 : 0, role: "button", "aria-label": label ?? "Upload files", sx: {
-                    transform: `scale(${scale})`,
-                    transition: "transform 30ms linear",
-                    boxShadow: `0 0px ${12 * dragProgress}px ${(0, styles_1.alpha)(black[900], boxShadowIntensity)}`,
-                    cursor: isDisabled ? "not-allowed" : "pointer",
-                    "&:focus-visible": {
-                        outline: `2px solid ${butterflyBlue[900]}`,
-                        outlineOffset: "2px",
-                    },
-                }, ...restProps, children: (0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "20px" }, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "4px", alignItems: "center", justifyContent: "center", children: [(0, jsx_runtime_1.jsx)(FileUpload_styled_1.FileInput, { disabled: isDisabled, type: "file", accept: accept.toString(), ref: setInputRef, onChange: handleFileChange, multiple: multiple }), (0, jsx_runtime_1.jsx)(Svgs_1.SvgDrop, { disabled: isDisabled }), (0, jsx_runtime_1.jsx)(Typography_1.default, { color: isDisabled ? iron[800] : "revert-layer", children: "Drag & drop files or Browse" }), (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", color: isDisabled ? iron[800] : "revert-layer", children: acceptTitle })] }) }) }), error && ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", sx: {
-                    color: `${red[900]}`,
-                    whiteSpace: "pre",
-                    textWrap: "wrap",
-                }, children: helperText })), fileNames] }));
-}

package/packages/shared-components/dist/FormFields/FileUpload/FileUpload.styled.js

@@ -1,23 +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.FileInput = exports.FileUploadContainer = void 0;
-const Box_1 = __importDefault(require("@mui/material/Box"));
-const styles_1 = require("@mui/material/styles");
-exports.FileUploadContainer = (0, styles_1.styled)(Box_1.default)(({ theme, error, disabled }) => ({
-    border: error
-        ? `2px dashed ${theme.palette.app.color.red[900]}`
-        : `2px dashed ${theme.palette.app.color.iron[800]}`,
-    borderRadius: "8px",
-    cursor: disabled ? "not-allowed" : "pointer",
-    "&:hover": {
-        borderColor: disabled
-            ? theme.palette.app.color.iron[800]
-            : theme.palette.app.color.butterflyBlue[900],
-    },
-}));
-exports.FileInput = (0, styles_1.styled)("input")({
-    display: "none",
-});

package/packages/shared-components/dist/FormFields/FileUpload/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 = () => {
-    return ((0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "10px", children: [(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: "136px", sx: {
-                    transform: "scale(1)",
-                } })] }));
-};
-exports.Skeleton = Skeleton;

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

@@ -1,20 +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("./Dialogs"), exports);
-__exportStar(require("./DownloadAction"), exports);
-__exportStar(require("./FileNames"), exports);
-__exportStar(require("./FileUpload"), exports);

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

@@ -1,132 +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.ImageUpload = ImageUpload;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const CameraAltOutlined_1 = __importDefault(require("@mui/icons-material/CameraAltOutlined"));
-const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
-const Edit_1 = __importDefault(require("@mui/icons-material/Edit"));
-const PersonAddAlt_1 = __importDefault(require("@mui/icons-material/PersonAddAlt"));
-const Box_1 = __importDefault(require("@mui/material/Box"));
-const Fade_1 = __importDefault(require("@mui/material/Fade"));
-const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const styles_1 = require("@mui/material/styles");
-const Typography_1 = __importDefault(require("@mui/material/Typography"));
-const react_1 = require("react");
-const react_i18next_1 = require("react-i18next");
-const Button_1 = require("../../Button");
-const PadBox_1 = require("../../PadBox");
-const Toast_1 = require("../../Toast");
-const utils_1 = require("../../utils");
-const useFormFieldFocus_1 = require("../../utils/hooks/useFormFieldFocus");
-const ImageUpload_styled_1 = require("./ImageUpload.styled");
-const PhotoCaptureDialog_1 = require("./PhotoCaptureDialog");
-const Skeleton_1 = require("./Skeleton");
-const imageFileType = ["image/png", "image/jpeg", "image/jpg"];
-function ImageUpload({ variant = "square", isUploading = false, defaultValue = "", onDelete, onChange, label, isCapture = false, loading = false, size = 5, subTitle = "PNG, JPEG under 5 MB", }) {
-    const { t } = (0, react_i18next_1.useTranslation)();
-    const [hover, setHover] = (0, react_1.useState)(false);
-    const [isOpenCaptureModal, setIsOpenCaptureModal] = (0, react_1.useState)(false);
-    const { inputRef, setInputRef, maintainFocusAfterClose } = (0, useFormFieldFocus_1.useFormFieldFocus)({
-        isOpen: isOpenCaptureModal,
-    });
-    const theme = (0, styles_1.useTheme)();
-    const { butterflyBlue, iron, lightBlue } = theme.palette.app.color;
-    const handleFileChange = (event) => {
-        if (event.target.files) {
-            const files = Array.from(event.target.files);
-            for (const element of files) {
-                if (!(0, utils_1.isFileSizeValid)(element, size)) {
-                    Toast_1.toasts.error({
-                        title: t("imageUpload.fileSize.error.message", {
-                            fileSize: size,
-                        }),
-                    });
-                    return;
-                }
-                if (!(0, utils_1.isFileTypeValid)(element, imageFileType)) {
-                    Toast_1.toasts.error({
-                        title: t("fileUpload.fileType.error.message", {
-                            fileName: element.name,
-                        }),
-                    });
-                    return;
-                }
-            }
-            onChange(files);
-        }
-    };
-    const handleFileRemove = (event) => {
-        event.stopPropagation();
-        onDelete();
-    };
-    const handleContainerKeyDown = (event) => {
-        if (event.key === "Enter" || event.key === " ") {
-            event.preventDefault();
-            if (!defaultValue) {
-                inputRef.current?.click();
-            }
-        }
-    };
-    const { layout } = (0, utils_1.useGetDeviceType)();
-    if (loading) {
-        return (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {});
-    }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Stack_1.default, { flexWrap: isCapture ? "wrap" : "nowrap", gap: "20px", direction: "row", alignItems: "center", children: [(0, jsx_runtime_1.jsxs)(Box_1.default, { onClick: () => !defaultValue && inputRef.current?.click(), onKeyDown: handleContainerKeyDown, onMouseEnter: () => setHover(true), onFocus: () => setHover(true), onBlur: (e) => {
-                            if (!e.currentTarget.contains(e.relatedTarget)) {
-                                setHover(false);
-                            }
-                        }, onMouseLeave: () => setHover(false), tabIndex: 0, role: "button", "aria-label": label ?? "Upload image", sx: {
-                            height: "120px",
-                            width: "120px",
-                            position: "relative",
-                            overflow: "hidden",
-                            border: defaultValue
-                                ? `1px solid ${butterflyBlue[900]}`
-                                : `1px solid ${theme.palette.grey[400]}`,
-                            cursor: "pointer",
-                            borderRadius: "10px",
-                            "& img": {
-                                borderRadius: "10px",
-                            },
-                            ":hover": {
-                                border: `1px solid ${butterflyBlue[900]}`,
-                            },
-                            ":focus-visible": {
-                                outline: `2px solid ${butterflyBlue[900]}`,
-                                outlineOffset: "2px",
-                            },
-                            ...(variant === "circle"
-                                ? {
-                                    borderRadius: "50%",
-                                    "& img": {
-                                        borderRadius: "50%",
-                                    },
-                                }
-                                : {}),
-                        }, children: [(0, jsx_runtime_1.jsx)("input", { type: "file", ref: setInputRef, accept: imageFileType.join(","), onChange: handleFileChange, style: { display: "none" } }), (0, jsx_runtime_1.jsx)(Fade_1.default, { in: hover && !!defaultValue, timeout: { enter: 300, exit: 1000 }, children: (0, jsx_runtime_1.jsxs)(ImageUpload_styled_1.DarkBackgroundContainer, { onFocus: () => setHover(true), onBlur: (e) => {
-                                        if (!e.currentTarget.contains(e.relatedTarget)) {
-                                            setHover(false);
-                                        }
-                                    }, children: [(0, jsx_runtime_1.jsx)(IconButton_1.default, { tabIndex: 0, onClick: () => inputRef.current?.click(), onKeyDown: (event) => {
-                                                if (event.key === "Enter" || event.key === " ") {
-                                                    event.preventDefault();
-                                                    inputRef.current?.click();
-                                                }
-                                            }, children: (0, jsx_runtime_1.jsx)(Edit_1.default, { sx: { color: lightBlue[50] } }) }), (0, jsx_runtime_1.jsx)(IconButton_1.default, { onKeyDown: (event) => {
-                                                if (event.key === "Enter" || event.key === " ") {
-                                                    event.preventDefault();
-                                                    onDelete();
-                                                }
-                                            }, tabIndex: 0, onClick: handleFileRemove, children: (0, jsx_runtime_1.jsx)(Delete_1.default, { sx: { color: lightBlue[50] } }) })] }) }), isUploading && ((0, jsx_runtime_1.jsx)(ImageUpload_styled_1.DarkBackgroundContainer, { children: (0, jsx_runtime_1.jsx)(Typography_1.default, { color: iron[600], children: "Processing..." }) })), defaultValue ? ((0, jsx_runtime_1.jsx)(PadBox_1.PadBox, { padding: { padding: "2px" }, children: (0, jsx_runtime_1.jsx)("img", { alt: "", src: defaultValue, style: {
-                                        width: "100%",
-                                        height: "100%",
-                                        objectFit: "cover",
-                                    } }) })) : ((0, jsx_runtime_1.jsx)(Stack_1.default, { justifyContent: "center", alignItems: "center", sx: { height: "100%" }, children: (0, jsx_runtime_1.jsx)(PersonAddAlt_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [(0, jsx_runtime_1.jsx)(Typography_1.default, { noWrap: true, variant: "subtitle1", fontWeight: 500, children: label }), (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "caption", color: iron[800], children: subTitle })] }), isCapture && ((0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => setIsOpenCaptureModal(true), variant: "outlined", fullWidth: layout === "mobile", children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: "10px", direction: "row", children: [(0, jsx_runtime_1.jsx)(CameraAltOutlined_1.default, {}), (0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "body1", children: "Capture photo" })] }) }))] }), isOpenCaptureModal && ((0, jsx_runtime_1.jsx)(PhotoCaptureDialog_1.PhotoCaptureDialog, { onChange: onChange, isUploading: isUploading, open: isOpenCaptureModal, onClose: () => {
-                    setIsOpenCaptureModal(false);
-                    maintainFocusAfterClose();
-                } }))] }));
-}

package/packages/shared-components/dist/FormFields/ImageUpload/ImageUpload.styled.js

@@ -1,23 +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.DarkBackgroundContainer = void 0;
-const Box_1 = __importDefault(require("@mui/material/Box"));
-const styles_1 = require("@mui/material/styles");
-exports.DarkBackgroundContainer = (0, styles_1.styled)(Box_1.default)(({ theme, }) => {
-    return {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: (0, styles_1.alpha)(theme.palette.app.color.mirage[600], 0.2),
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        backdropFilter: "blur(3px)",
-        transition: "1s",
-    };
-});

package/packages/shared-components/dist/FormFields/ImageUpload/ImageUploadView.js

@@ -1,73 +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.ImageUploadView = ImageUploadView;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Avatar_1 = __importDefault(require("@mui/material/Avatar"));
-const Box_1 = __importDefault(require("@mui/material/Box"));
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const styles_1 = require("@mui/material/styles");
-const react_1 = require("react");
-function ImageUploadView({ defaultValue, variant, sx, borderProgress, borderSide = "right", width, height, }) {
-    const theme = (0, styles_1.useTheme)();
-    const { butterflyBlue } = theme.palette.app.color;
-    const [hasError, setHasError] = (0, react_1.useState)(false);
-    const defaultImageSize = { xs: "100px", md: "120px" };
-    const imageWidth = width ?? defaultImageSize;
-    const imageHeight = height ?? defaultImageSize;
-    const isCircle = variant === "circle";
-    const borderRadius = isCircle ? "50%" : "10px";
-    const getBorderClipPath = () => {
-        if (borderProgress === undefined) {
-            return undefined;
-        }
-        const progress = Math.max(0, Math.min(180, borderProgress));
-        const percentage = (progress / 180) * 100;
-        if (isCircle) {
-            if (borderSide === "right") {
-                return `inset(0 ${100 - percentage}% 0 50%)`;
-            }
-            return `inset(0 50% 0 ${100 - percentage}%)`;
-        }
-        const startX = 50;
-        const endX = 50 + percentage / 2;
-        if (borderSide === "right") {
-            return `polygon(${startX}% 0%, ${endX}% 0%, ${endX}% 100%, ${startX}% 100%)`;
-        }
-        const leftEndX = 50 - percentage / 2;
-        return `polygon(${leftEndX}% 0%, ${startX}% 0%, ${startX}% 100%, ${leftEndX}% 100%)`;
-    };
-    const borderClipPath = getBorderClipPath();
-    return ((0, jsx_runtime_1.jsx)(Box_1.default, { sx: {
-            width: "100%",
-            minWidth: imageWidth,
-            maxWidth: imageWidth,
-            height: imageHeight,
-            overflow: "hidden",
-            position: "relative",
-            borderRadius,
-            border: "none",
-            padding: "4px",
-            boxSizing: "border-box",
-            "&::before": {
-                // eslint-disable-next-line quotes
-                content: '""',
-                position: "absolute",
-                inset: 0,
-                borderRadius,
-                border: `2.5px solid ${butterflyBlue[900]}`,
-                clipPath: borderClipPath,
-                pointerEvents: "none",
-            },
-            "& img": {
-                borderRadius,
-            },
-            ...sx,
-        }, children: defaultValue && !hasError ? ((0, jsx_runtime_1.jsx)(Stack_1.default, { justifyContent: "center", alignItems: "center", sx: { height: "100%" }, children: (0, jsx_runtime_1.jsx)("img", { alt: "", src: defaultValue, onError: () => setHasError(true), style: {
-                    width: "100%",
-                    height: "100%",
-                    objectFit: "cover",
-                } }) })) : ((0, jsx_runtime_1.jsx)(Stack_1.default, { justifyContent: "center", alignItems: "center", sx: { height: "100%" }, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { sx: { width: "100%", height: "100%" } }) })) }));
-}

package/packages/shared-components/dist/FormFields/ImageUpload/PhotoCaptureDialog.js

@@ -1,36 +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.PhotoCaptureDialog = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const Stack_1 = __importDefault(require("@mui/material/Stack"));
-const file64_1 = require("file64");
-const react_1 = require("react");
-const react_webcam_1 = __importDefault(require("react-webcam"));
-const Button_1 = require("../../Button");
-const Dialog_1 = require("../../Dialog");
-const Toast_1 = require("../../Toast");
-const PhotoCaptureDialog = ({ open, isUploading, onClose, onChange, }) => {
-    const webcamRef = (0, react_1.useRef)(null);
-    const capture = (0, react_1.useCallback)(async () => {
-        if (webcamRef.current) {
-            const imageSrc = webcamRef.current.getScreenshot();
-            if (imageSrc) {
-                try {
-                    const file = await (0, file64_1.base64ToFile)(imageSrc, "image/jpeg");
-                    onChange([file]);
-                    onClose();
-                }
-                catch (error) {
-                    Toast_1.toasts.error({ title: `Failed to convert base64 to file:${error}` });
-                }
-            }
-        }
-    }, [webcamRef]);
-    return ((0, jsx_runtime_1.jsx)(Dialog_1.Dialog, { onClose: onClose, open: open, title: "Photo Capture", maxWidth: "md", actions: (0, jsx_runtime_1.jsxs)(Stack_1.default, { direction: "row", gap: "5px", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onClose, variant: "outlined", children: "Cancel" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => {
-                        capture();
-                    }, loading: isUploading, children: "Save" })] }), children: (0, jsx_runtime_1.jsx)(react_webcam_1.default, { mirrored: true, ref: webcamRef, screenshotFormat: "image/jpeg", width: "100%", height: "600" }) }));
-};
-exports.PhotoCaptureDialog = PhotoCaptureDialog;