cloudmr-ux 1.0.5 → 1.0.7

package/dist/index.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,14 +17,25 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  CMRUpload: () => Upload_default,
   CmrButton: () => CmrButton,
   CmrCheckbox: () => CmrCheckbox,
+  CmrCollapse: () => Collapse_default,
   CmrInput: () => CmrInput,
+  CmrPanel: () => Panel_default,
   CmrRadioGroup: () => CmrRadioGroup_default,
   CmrSelect: () => CmrSelect_default,
   CmrTable: () => CmrTable2
@@ -174,9 +187,580 @@ var CmrSelect = ({ options, label, disabled }) => {
 };
 var CmrSelect_default = CmrSelect;
 
+// src/CmrComponents/collapse/Collapse.tsx
+var import_react3 = __toESM(require("react"));
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var CmrCollapse = (props) => {
+  let { activeKey, defaultActiveKey, onChange, children } = props;
+  defaultActiveKey = defaultActiveKey || [];
+  const [activeKeys, setActiveKeys] = import_react3.default.useState(defaultActiveKey);
+  import_react3.default.useEffect(() => {
+    if (activeKey !== void 0 && activeKey !== activeKeys) {
+      if (Array.isArray(activeKey)) {
+        setActiveKeys(activeKey);
+      } else {
+        setActiveKeys([activeKey]);
+      }
+    }
+  }, [activeKey]);
+  const onToggle = (key) => {
+    const newKeys = [...activeKeys];
+    const keyIndex = newKeys.indexOf(key);
+    if (keyIndex === -1) {
+      newKeys.push(key);
+    } else {
+      newKeys.splice(keyIndex, 1);
+    }
+    setActiveKeys(newKeys);
+    if (onChange)
+      onChange(newKeys);
+  };
+  const renderChildren = () => {
+    if (!children)
+      return null;
+    if (Array.isArray(children)) {
+      return children.map((child, index) => {
+        const panelKey = index;
+        const expanded = activeKeys.includes(panelKey);
+        const header = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { onClick: () => onToggle(panelKey), style: { cursor: "pointer" }, children: child.props.header });
+        return (0, import_react3.cloneElement)(child, {
+          expanded,
+          panelKey,
+          onToggle,
+          header
+          // Override header with clickable version
+        });
+      });
+    } else {
+      const panelKey = 0;
+      const expanded = activeKeys.includes(panelKey);
+      const header = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { onClick: () => onToggle(panelKey), style: { cursor: "pointer" }, children: children.props.header });
+      return (0, import_react3.cloneElement)(children, {
+        expanded,
+        panelKey,
+        onToggle,
+        header
+        // Override header with clickable version
+      });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cmr-collapse", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { children: renderChildren() }) });
+};
+var Collapse_default = CmrCollapse;
+
+// src/CmrComponents/panel/Panel.tsx
+var import_ArrowDropUp = __toESM(require("@mui/icons-material/ArrowDropUp"));
+var import_ArrowDropDown = __toESM(require("@mui/icons-material/ArrowDropDown"));
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var CmrPanel = function(props) {
+  var _a, _b;
+  let { expanded, onToggle } = props;
+  const toggle = () => {
+    if (onToggle)
+      onToggle(props.panelKey);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `card ${props.className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "card-header", style: { background: "white", display: props.header == void 0 ? "none" : void 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "row align-items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "col", children: props.header }),
+      onToggle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "col text-end", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "span",
+        {
+          className: "react-collapse float-end btn",
+          onClick: (e) => {
+            toggle();
+          },
+          children: !expanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ArrowDropDown.default, {}) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ArrowDropUp.default, {})
+        }
+      ) })
+    ] }) }),
+    !expanded ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `card-body m-0 ${(_a = props.cardProps) == null ? void 0 : _a.className}`, style: {
+      maxHeight: "0",
+      padding: 0,
+      opacity: "0",
+      overflow: "hidden",
+      visibility: "collapse",
+      transition: "all 0.5s"
+    }, children: props.children }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `card-body m-4 ${(_b = props.cardProps) == null ? void 0 : _b.className}`, style: {
+      maxHeight: void 0,
+      padding: 0,
+      opacity: "1",
+      visibility: "visible",
+      transition: "all 0.5s"
+    }, children: props.children })
+  ] });
+};
+var Panel_default = CmrPanel;
+
+// src/CmrComponents/upload/Upload.tsx
+var import_react4 = __toESM(require("react"));
+var import_material7 = require("@mui/material");
+
+// src/CmrComponents/upload/UploadWindow.tsx
+var React4 = __toESM(require("react"));
+var import_Button = __toESM(require("@mui/material/Button"));
+var import_TextField = __toESM(require("@mui/material/TextField"));
+var import_Dialog = __toESM(require("@mui/material/Dialog"));
+var import_DialogActions = __toESM(require("@mui/material/DialogActions"));
+var import_DialogContent = __toESM(require("@mui/material/DialogContent"));
+var import_DialogContentText = __toESM(require("@mui/material/DialogContentText"));
+var import_DialogTitle = __toESM(require("@mui/material/DialogTitle"));
+var import_Typography = __toESM(require("@mui/material/Typography"));
+var import_Box = __toESM(require("@mui/material/Box"));
+var import_material6 = require("@mui/material");
+
+// src/CmrComponents/label/Label.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var CmrLabel = (props) => {
+  const { children, required = false } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("label", { className: "cmr-label", style: { fontSize: "16px", ...props.style }, children: [
+    children,
+    required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "asterik", children: "*" })
+  ] });
+};
+var Label_default = CmrLabel;
+
+// src/CmrComponents/upload/UploadWindow.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function UploadWindow({
+  upload,
+  open,
+  setOpen,
+  fileExtension,
+  template = { showFileName: true, showDatabase: true, showFileSize: true }
+  // default values
+}) {
+  const [fileOriginalName, setFileOriginalName] = React4.useState("");
+  const [fileAlias, setFileAlias] = React4.useState("/");
+  const [fileSize, setFileSize] = React4.useState("0 MB");
+  const [warningText, setWarningText] = React4.useState("Unknown Status");
+  const [infoOpen, setInfoOpen] = React4.useState(false);
+  const [locationSelection, setLocationSelection] = React4.useState("s3");
+  const [infoStyle, setInfoStyle] = React4.useState("info");
+  const [uploadedFiles, setUploaded] = React4.useState([]);
+  const [UpBtnDisabled, setUpBtnDisabled] = React4.useState(false);
+  const [UpBtnText, setUpBtnText] = React4.useState("Upload");
+  const [uploadBoxWarning, setUploadBoxWarning] = React4.useState(void 0);
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const getExtension = (fileName) => {
+    if (fileName == void 0)
+      return;
+    return fileName.split(".").pop();
+  };
+  const handleConfirm = () => {
+    if (uploadedFiles.length === 0) {
+      setInfoOpen(true);
+      setInfoStyle("error");
+      setWarningText("Must select files to upload!");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    if (fileAlias.length === 0) {
+      setInfoOpen(true);
+      setInfoStyle("error");
+      setWarningText("File name can't be empty");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    setOpen(false);
+    upload(uploadedFiles[0], fileAlias, locationSelection).then((response) => {
+      console.log(response);
+      if (response > 0) {
+        setInfoOpen(true);
+        if (response === 200) {
+          setInfoStyle("success");
+          setWarningText("Upload successful");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setOpen(false);
+          }, 1e3);
+          setUpBtnDisabled(false);
+          setUpBtnText("Upload");
+        } else if (response === 413) {
+          setInfoStyle("error");
+          setWarningText("File size limit exceeded");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 2e3);
+        } else if (response === 500) {
+          setInfoStyle("error");
+          setWarningText("Internal server error");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 1500);
+          setOpen(true);
+        } else if (response === 400) {
+          setInfoStyle("warning");
+          setWarningText("File upload cancelled");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 1e3);
+          setOpen(true);
+        } else {
+          setInfoStyle("warning");
+          setWarningText("Unknown status");
+          setTimeout(() => {
+            setInfoOpen(false);
+            setUpBtnDisabled(false);
+            setUpBtnText("Upload");
+          }, 2e3);
+          setOpen(true);
+        }
+      }
+    }).catch((error) => {
+      setUpBtnDisabled(false);
+      setUpBtnText("Upload");
+      setInfoOpen(true);
+      setInfoStyle("error");
+      setWarningText("Upload unsuccessful: " + error.message);
+      setTimeout(() => setInfoOpen(false), 2500);
+      console.error("Error:", error);
+    });
+    setUpBtnDisabled(true);
+    setUpBtnText("Uploading");
+  };
+  const changeFileName = (e) => {
+    setFileAlias(e.target.value);
+  };
+  function loadFiles(files) {
+    if (files.length == 0) {
+      setInfoOpen(true);
+      setInfoStyle("warning");
+      setWarningText("No file selected");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    if (files.length > 1) {
+      setInfoOpen(true);
+      setInfoStyle("warning");
+      setWarningText("Only accepts one file at a time");
+      setTimeout(() => setInfoOpen(false), 2500);
+      return;
+    }
+    let file = files[0];
+    setUploaded([file]);
+    function readFile(file2) {
+      setFileOriginalName(file2.name);
+      setFileAlias(file2.name);
+      const units = [
+        "B",
+        "KB",
+        "MB",
+        "GB",
+        "TB",
+        "PB",
+        "EB",
+        "ZB",
+        "YB"
+      ];
+      let numberOfBytes = file2.size;
+      const exponent = Math.min(
+        Math.floor(Math.log(numberOfBytes) / Math.log(1024)),
+        units.length - 1
+      );
+      const approx = numberOfBytes / 1024 ** exponent;
+      const output = exponent === 0 ? `${numberOfBytes} bytes` : `${approx.toFixed(3)} ${units[exponent]}`;
+      setFileSize(output);
+    }
+    readFile(file);
+  }
+  let initialized = false;
+  let fileInput = (inputRef) => {
+    if (initialized)
+      return;
+    inputRef.addEventListener("dragover", function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      if (e.dataTransfer.files) {
+        let draggedFiles = e.dataTransfer.files;
+        if (draggedFiles.length > 1) {
+          setUploadBoxWarning("Only one file can be uploaded at a time");
+        } else if (fileExtension != void 0 && draggedFiles.length != 0 && getExtension(draggedFiles[0].name) != fileExtension) {
+          setUploadBoxWarning(`Only accepting files with extension ${fileExtension}`);
+        }
+      }
+      e.dataTransfer.dropEffect = "copy";
+    });
+    inputRef.addEventListener("drop", function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      setUploadBoxWarning(void 0);
+      let files = e.dataTransfer.files;
+      if (files.length > 1) {
+        setInfoOpen(true);
+        setInfoStyle("warning");
+        setWarningText("Only one file can be uploaded at a time");
+        setTimeout(() => setInfoOpen(false), 2500);
+        return;
+      } else if (fileExtension != void 0 && `.${getExtension(files[0].name)}` != fileExtension) {
+        setInfoOpen(true);
+        setInfoStyle("warning");
+        setWarningText(`Only accepting files with extension ${fileExtension}`);
+        setTimeout(() => setInfoOpen(false), 2500);
+        return;
+      }
+      loadFiles(files);
+    });
+    inputRef.addEventListener("dragleave", () => {
+      setUploadBoxWarning(void 0);
+    });
+    initialized = true;
+  };
+  const fileInputClick = (e) => {
+    const fileElem = document.getElementById("file-window");
+    e.preventDefault();
+    if (fileElem) {
+      fileElem.click();
+    }
+  };
+  const loadSelectedFiles = (e) => {
+    e.preventDefault();
+    const fileElem = document.getElementById("file-window");
+    loadFiles(fileElem.files);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_Dialog.default, { open, onClose: handleClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_DialogTitle.default, { children: "File Upload" }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_DialogContent.default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_DialogContentText.default, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_DialogContent.default, { dividers: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_Box.default,
+          {
+            width: 500,
+            height: 250,
+            style: {
+              borderStyle: "dashed",
+              borderRadius: "5pt",
+              borderColor: uploadBoxWarning == void 0 ? "lightGray" : "#BA3C3C"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_Typography.default, { component: "div", style: { height: "100%" }, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+              import_Box.default,
+              {
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  justifyContent: "center",
+                  alignItems: "center",
+                  height: "100%"
+                },
+                onClick: fileInputClick,
+                ref: fileInput,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_Typography.default, { variant: "body1", align: "center", style: { marginTop: "auto" }, children: [
+                    "Drag & Drop or Click to Upload Your File Here ",
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("sup", { children: "*" })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_Typography.default, { variant: "body2", align: "center", style: { marginTop: "auto", fontSize: "0.8rem", fontStyle: "italic" }, children: "* Warning: The file you are uploading may contain sensitive information protected under privacy laws. Please ensure all PHI is anonymized before proceeding.Before proceeding. The user is the sole responsible for data anonymization." })
+                ]
+              }
+            ) })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "input",
+          {
+            type: "file",
+            id: "file-window",
+            multiple: true,
+            accept: fileExtension == void 0 ? "*" : fileExtension,
+            style: { display: "none" },
+            onChange: loadSelectedFiles
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_Box.default, { component: "form", sx: { "& .MuiTextField-root": { m: 2, width: "25ch", mb: 0 } }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+            template.showFileName && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_TextField.default,
+              {
+                required: true,
+                style: { marginTop: "30px" },
+                label: `File Alias:`,
+                value: fileAlias,
+                variant: "standard",
+                onChange: changeFileName
+              }
+            ),
+            fileOriginalName != "" && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Label_default, { style: { marginLeft: "16px", fontSize: "9pt", color: "#267833" }, children: fileOriginalName }),
+            template.showDatabase && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_TextField.default,
+              {
+                select: true,
+                label: "Database:",
+                defaultValue: "s3",
+                helperText: "Upstream Storage Location",
+                variant: "standard",
+                children: [{ value: "s3", label: "S3" }].map((option) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.MenuItem, { value: option.value, children: option.label }, option.value))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { children: [
+            template.showFileSize && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+              import_TextField.default,
+              {
+                label: "File Size:",
+                value: fileSize,
+                InputProps: {
+                  readOnly: true
+                },
+                variant: "standard"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.Collapse, { in: infoOpen, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.Alert, { severity: infoStyle, sx: { m: 1 }, children: warningText }) })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_DialogActions.default, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_Button.default,
+          {
+            color: "inherit",
+            sx: { color: "#333" },
+            disabled: UpBtnDisabled,
+            onClick: handleClose,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_Button.default,
+          {
+            variant: "contained",
+            disabled: UpBtnDisabled,
+            onClick: handleConfirm,
+            children: UpBtnText
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+
+// src/CmrComponents/upload/Upload.tsx
+var import_axios = __toESM(require("axios"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var CmrUpload = (props) => {
+  let [open, setOpen] = (0, import_react4.useState)(false);
+  let [uploading, setUploading] = (0, import_react4.useState)(false);
+  let [progress, setProgress] = (0, import_react4.useState)(0);
+  let [uploadedFile, setUploadedFile] = (0, import_react4.useState)(void 0);
+  const upload = async (file, fileAlias, fileDatabase) => {
+    setUploading(true);
+    const onProgress = (progress2) => {
+      let percentage = progress2 * 99;
+      props.uploadProgressed && props.uploadProgressed(+percentage.toFixed(2));
+      setProgress(+percentage.toFixed(2));
+    };
+    if (props.uploadStarted)
+      props.uploadStarted();
+    let status = 0;
+    if (props.beforeUpload != void 0 && !await props.beforeUpload(file)) {
+      if (props.uploadEnded)
+        props.uploadEnded();
+      setUploading(false);
+      return 200;
+    }
+    if (props.preprocess) {
+      let processed = await props.preprocess(file);
+      if (processed == void 0)
+        return failUpload();
+      if (typeof processed == "number") {
+        setUploading(false);
+        return processed;
+      }
+      file = processed;
+    }
+    if (props.uploadHandler != void 0) {
+      status = await props.uploadHandler(file, fileAlias, fileDatabase, onProgress, props.onUploaded);
+      setUploadedFile(props.reusable ? void 0 : file.name);
+    } else if (props.createPayload) {
+      let payload = await props.createPayload(file, fileAlias, fileDatabase);
+      if (payload == void 0) {
+        return failUpload();
+      }
+      payload.config.onUploadProgress = (progressEvent) => {
+        if (progressEvent.total == void 0)
+          return;
+        onProgress(progressEvent.loaded / progressEvent.total);
+      };
+      const res = await import_axios.default.post(payload.destination, payload.lambdaFile, payload.config);
+      status = res.status;
+      if (status === 200) {
+        console.log(res.data);
+        await import_axios.default.put(res.data.upload_url, payload.file, {
+          headers: {
+            "Content-Type": payload.file.type
+          }
+        });
+        await props.onUploaded(res, payload.file);
+        setUploadedFile(props.reusable ? void 0 : payload.file.name);
+      }
+    } else {
+      return failUpload();
+    }
+    if (props.uploadEnded)
+      props.uploadEnded();
+    setUploading(false);
+    setProgress(0);
+    return status;
+  };
+  function failUpload() {
+    setUploading(false);
+    setProgress(0);
+    if (props.uploadFailed)
+      return props.uploadFailed();
+    return 0;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react4.default.Fragment, { children: [
+    !uploading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      import_material7.Button,
+      {
+        fullWidth: props.fullWidth,
+        style: props.style,
+        variant: uploadedFile == void 0 ? "contained" : "outlined",
+        onClick: () => {
+          setOpen(true);
+        },
+        color: props.color || "primary",
+        sx: props.sx,
+        children: [
+          props.changeNameAfterUpload ? uploadedFile === void 0 ? props.uploadButtonName ? props.uploadButtonName : "Upload" : uploadedFile : props.uploadButtonName ? props.uploadButtonName : "Upload",
+          "                "
+        ]
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_material7.Button, { fullWidth: props.fullWidth, style: props.style, variant: "contained", sx: { overflowWrap: "inherit" }, color: "primary", disabled: true, children: [
+      "Uploading ",
+      progress,
+      "%"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      UploadWindow,
+      {
+        open,
+        setOpen,
+        upload,
+        fileExtension: props.fileExtension,
+        template: { showFileName: true, showFileSize: true }
+      }
+    )
+  ] });
+};
+CmrUpload.defaultProps = {
+  changeNameAfterUpload: true
+};
+var Upload_default = CmrUpload;
+
 // src/CmrTable/CmrTable.tsx
 var import_x_data_grid = require("@mui/x-data-grid");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -188,7 +772,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_x_data_grid.DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -214,9 +798,12 @@ var CmrTable_default = CmrTable;
 var CmrTable2 = CmrTable_default;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CMRUpload,
   CmrButton,
   CmrCheckbox,
+  CmrCollapse,
   CmrInput,
+  CmrPanel,
   CmrRadioGroup,
   CmrSelect,
   CmrTable