siam-ui-utils 3.0.15 → 3.0.16

package/dist/dropzone-uploader/base/index.js

@@ -0,0 +1,135 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { getDroppedOrSelectedFiles } from "html5-file-selector";
+import { useState, useEffect } from "react";
+import Dropzone from "../../dropzone/Dropzone.js";
+import "./index.css";
+import { IconButtonSvg as _t } from "../../iconos/icon-button-svg.js";
+import { pdfImage } from "../../iconos/constants-svg.js";
+const maxSize = 7;
+const DropzoneUploader = ({
+  onChangeFiles,
+  totalFiles,
+  maxFiles = 3,
+  accept = "image/*, application/pdf",
+  capture = null,
+  nameFileLabel = "Subir archivos",
+  classNames = "",
+  maxFileSize = maxSize,
+  onMaxFileSizeError = () => {
+    alert("El archivo supera el tamaño máximo");
+  }
+}) => {
+  const [files, setFiles] = useState([]);
+  const [totalFilesDU, setTotalFilesDU] = useState(totalFiles);
+  const handleChangeStatus = ({ file }, status) => {
+    if (status == "done") {
+      const filesTemp = files;
+      filesTemp.push(file);
+      setFiles(filesTemp);
+      onChangeFiles(files);
+      setTotalFilesDU(files.length);
+    } else if (status == "removed") {
+      const filesTemp = files;
+      const index = files.indexOf(file);
+      if (index > -1) {
+        filesTemp.splice(index, 1);
+      }
+      setFiles(filesTemp);
+      onChangeFiles(files);
+      setTotalFilesDU(files.length);
+    }
+  };
+  const getFilesFromEvent = (e) => {
+    return new Promise((resolve) => {
+      getDroppedOrSelectedFiles(e).then((chosenFiles) => {
+        resolve(chosenFiles.map((f) => f.fileObject));
+      });
+    });
+  };
+  const CustomPreview = ({ fileWithMeta }) => {
+    const { meta, remove } = fileWithMeta;
+    if (meta.size / (1024 * 1024) > maxFileSize) {
+      onMaxFileSizeError();
+      remove();
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "dropzone-upload-previewContainer", children: [
+      meta.type === "application/pdf" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          _t,
+          {
+            className: "form-control flex",
+            svg: pdfImage,
+            svgOver: pdfImage,
+            height: "1.6rem",
+            width: "1.6rem",
+            title: meta.name
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { children: meta.name.length > 17 ? meta.name.substring(0, 17) + "..." : meta.name })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: "dropzone-upload-previewImage",
+            src: meta.previewUrl,
+            alt: meta.name
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { children: meta.name.length > 17 ? meta.name.substring(0, 17) + "..." : meta.name })
+      ] }),
+      /* @__PURE__ */ jsxs("p", { children: [
+        (meta.size / 1024).toFixed(2),
+        " .Kb"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: remove,
+          className: "dropzone-upload-delete-btn icon-trash"
+        }
+      )
+    ] });
+  };
+  const Input = ({ accept: accept2, onFiles, getFilesFromEvent: getFilesFromEvent2 }) => {
+    const text = totalFilesDU > 0 ? `${maxFiles - totalFilesDU} archivo/s más` : nameFileLabel;
+    return /* @__PURE__ */ jsxs("label", { className: "dropzone-upload-button", children: [
+      text,
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          style: { display: "none" },
+          type: "file",
+          accept: accept2,
+          capture,
+          multiple: true,
+          onChange: (e) => {
+            getFilesFromEvent2(e).then((chosenFiles) => {
+              onFiles(chosenFiles);
+            });
+          }
+        }
+      )
+    ] });
+  };
+  useEffect(() => {
+    setTotalFilesDU(totalFiles);
+  }, [totalFiles]);
+  return /* @__PURE__ */ jsx("div", { className: `${classNames}`, children: /* @__PURE__ */ jsx(
+    Dropzone,
+    {
+      disableUpload: false,
+      maxFiles: totalFilesDU < maxFiles ? maxFiles : 0,
+      maxSize: maxFileSize,
+      InputComponent: Input,
+      PreviewComponent: CustomPreview,
+      classNames: { dropzone: "dropzone-upload-frame" },
+      onChangeStatus: handleChangeStatus,
+      getFilesFromEvent,
+      accept
+    }
+  ) });
+};
+export {
+  DropzoneUploader
+};
+//# sourceMappingURL=index.js.map

package/dist/dropzone-uploader/base/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/dropzone-uploader/base/index.jsx"],"sourcesContent":["import { getDroppedOrSelectedFiles } from 'html5-file-selector';\r\nimport { useEffect, useState } from 'react';\r\nimport Dropzone from '../../dropzone/Dropzone';\r\nimport { IconButtonSvg, pdfImage } from '../../iconos';\r\nimport './index.css';\r\n\r\nconst maxSize = 7;\r\nexport const DropzoneUploader = ({\r\n  onChangeFiles,\r\n  totalFiles,\r\n  maxFiles = 3,\r\n  accept = 'image/*, application/pdf',\r\n  capture = null,\r\n  nameFileLabel = 'Subir archivos',\r\n  classNames = '',\r\n  maxFileSize = maxSize,\r\n  onMaxFileSizeError = () => {\r\n    alert('El archivo supera el tamaño máximo');\r\n  },\r\n}) => {\r\n  const [files, setFiles] = useState([]);\r\n  const [totalFilesDU, setTotalFilesDU] = useState(totalFiles);\r\n  const handleChangeStatus = ({ file }, status) => {\r\n    if (status == 'done') {\r\n      const filesTemp = files;\r\n      filesTemp.push(file);\r\n      setFiles(filesTemp);\r\n      onChangeFiles(files);\r\n      setTotalFilesDU(files.length);\r\n    } else if (status == 'removed') {\r\n      const filesTemp = files;\r\n      const index = files.indexOf(file);\r\n      if (index > -1) {\r\n        filesTemp.splice(index, 1);\r\n      }\r\n      setFiles(filesTemp);\r\n      onChangeFiles(files);\r\n      setTotalFilesDU(files.length);\r\n    }\r\n  };\r\n  const getFilesFromEvent = (e) => {\r\n    return new Promise((resolve) => {\r\n      getDroppedOrSelectedFiles(e).then((chosenFiles) => {\r\n        resolve(chosenFiles.map((f) => f.fileObject));\r\n      });\r\n    });\r\n  };\r\n  const CustomPreview = ({ fileWithMeta }) => {\r\n    const { meta, remove } = fileWithMeta;\r\n    if (meta.size / (1024 * 1024) > maxFileSize) {\r\n      onMaxFileSizeError();\r\n      remove();\r\n    }\r\n    return (\r\n      <div className=\"dropzone-upload-previewContainer\">\r\n        {meta.type === 'application/pdf' ? (\r\n          <>\r\n            <IconButtonSvg\r\n              className=\"form-control flex\"\r\n              svg={pdfImage}\r\n              svgOver={pdfImage}\r\n              height=\"1.6rem\"\r\n              width=\"1.6rem\"\r\n              title={meta.name}\r\n            />\r\n            <p>\r\n              {meta.name.length > 17\r\n                ? meta.name.substring(0, 17) + '...'\r\n                : meta.name}\r\n            </p>\r\n          </>\r\n        ) : (\r\n          <>\r\n            <img\r\n              className=\"dropzone-upload-previewImage\"\r\n              src={meta.previewUrl}\r\n              alt={meta.name}\r\n            />\r\n            <p>\r\n              {meta.name.length > 17\r\n                ? meta.name.substring(0, 17) + '...'\r\n                : meta.name}\r\n            </p>\r\n          </>\r\n        )}\r\n        <p>{(meta.size / 1024).toFixed(2)} .Kb</p>\r\n        <button\r\n          onClick={remove}\r\n          className=\"dropzone-upload-delete-btn icon-trash\"\r\n        ></button>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  const Input = ({ accept, onFiles, getFilesFromEvent }) => {\r\n    const text =\r\n      totalFilesDU > 0\r\n        ? `${maxFiles - totalFilesDU} archivo/s más`\r\n        : nameFileLabel;\r\n    return (\r\n      <label className=\"dropzone-upload-button\">\r\n        {text}\r\n        <input\r\n          style={{ display: 'none' }}\r\n          type=\"file\"\r\n          accept={accept}\r\n          capture={capture}\r\n          multiple\r\n          onChange={(e) => {\r\n            getFilesFromEvent(e).then((chosenFiles) => {\r\n              onFiles(chosenFiles);\r\n            });\r\n          }}\r\n        />\r\n      </label>\r\n    );\r\n  };\r\n  useEffect(() => {\r\n    setTotalFilesDU(totalFiles);\r\n  }, [totalFiles]);\r\n\r\n  return (\r\n    <div className={`${classNames}`}>\r\n      <Dropzone\r\n        disableUpload={false}\r\n        maxFiles={totalFilesDU < maxFiles ? maxFiles : 0}\r\n        maxSize={maxFileSize} // en megas\r\n        InputComponent={Input}\r\n        PreviewComponent={CustomPreview}\r\n        classNames={{ dropzone: 'dropzone-upload-frame' }}\r\n        onChangeStatus={handleChangeStatus}\r\n        getFilesFromEvent={getFilesFromEvent}\r\n        accept={accept}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n"],"names":["IconButtonSvg","accept","getFilesFromEvent"],"mappings":"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"}

package/dist/dropzone-uploader/index.js

@@ -1,135 +1,7 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { getDroppedOrSelectedFiles } from "html5-file-selector";
-import { useState, useEffect } from "react";
-import Dropzone from "../dropzone/Dropzone.js";
-import "./dropzone-uploader.css";
-import { IconButtonSvg as _t } from "../iconos/icon-button-svg.js";
-import { pdfImage } from "../iconos/constants-svg.js";
-const maxSize = 7;
-const DropzoneUploader = ({
-  onChangeFiles,
-  totalFiles,
-  maxFiles = 3,
-  accept = "image/*, application/pdf",
-  capture = null,
-  nameFileLabel = "Subir archivos",
-  classNames = "",
-  maxFileSize = maxSize,
-  onMaxFileSizeError = () => {
-    alert("El archivo supera el tamaño máximo");
-  }
-}) => {
-  const [files, setFiles] = useState([]);
-  const [totalFilesDU, setTotalFilesDU] = useState(totalFiles);
-  const handleChangeStatus = ({ file }, status) => {
-    if (status == "done") {
-      const filesTemp = files;
-      filesTemp.push(file);
-      setFiles(filesTemp);
-      onChangeFiles(files);
-      setTotalFilesDU(files.length);
-    } else if (status == "removed") {
-      const filesTemp = files;
-      const index = files.indexOf(file);
-      if (index > -1) {
-        filesTemp.splice(index, 1);
-      }
-      setFiles(filesTemp);
-      onChangeFiles(files);
-      setTotalFilesDU(files.length);
-    }
-  };
-  const getFilesFromEvent = (e) => {
-    return new Promise((resolve) => {
-      getDroppedOrSelectedFiles(e).then((chosenFiles) => {
-        resolve(chosenFiles.map((f) => f.fileObject));
-      });
-    });
-  };
-  const CustomPreview = ({ fileWithMeta }) => {
-    const { meta, remove } = fileWithMeta;
-    if (meta.size / (1024 * 1024) > maxFileSize) {
-      onMaxFileSizeError();
-      remove();
-    }
-    return /* @__PURE__ */ jsxs("div", { className: "dropzone-upload-previewContainer", children: [
-      meta.type === "application/pdf" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          _t,
-          {
-            className: "form-control flex",
-            svg: pdfImage,
-            svgOver: pdfImage,
-            height: "1.6rem",
-            width: "1.6rem",
-            title: meta.name
-          }
-        ),
-        /* @__PURE__ */ jsx("p", { children: meta.name.length > 17 ? meta.name.substring(0, 17) + "..." : meta.name })
-      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "img",
-          {
-            className: "dropzone-upload-previewImage",
-            src: meta.previewUrl,
-            alt: meta.name
-          }
-        ),
-        /* @__PURE__ */ jsx("p", { children: meta.name.length > 17 ? meta.name.substring(0, 17) + "..." : meta.name })
-      ] }),
-      /* @__PURE__ */ jsxs("p", { children: [
-        (meta.size / 1024).toFixed(2),
-        " .Kb"
-      ] }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: remove,
-          className: "dropzone-upload-delete-btn icon-trash"
-        }
-      )
-    ] });
-  };
-  const Input = ({ accept: accept2, onFiles, getFilesFromEvent: getFilesFromEvent2 }) => {
-    const text = totalFilesDU > 0 ? `${maxFiles - totalFilesDU} archivo/s más` : nameFileLabel;
-    return /* @__PURE__ */ jsxs("label", { className: "dropzone-upload-button", children: [
-      text,
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          style: { display: "none" },
-          type: "file",
-          accept: accept2,
-          capture,
-          multiple: true,
-          onChange: (e) => {
-            getFilesFromEvent2(e).then((chosenFiles) => {
-              onFiles(chosenFiles);
-            });
-          }
-        }
-      )
-    ] });
-  };
-  useEffect(() => {
-    setTotalFilesDU(totalFiles);
-  }, [totalFiles]);
-  return /* @__PURE__ */ jsx("div", { className: `${classNames}`, children: /* @__PURE__ */ jsx(
-    Dropzone,
-    {
-      disableUpload: false,
-      maxFiles: totalFilesDU < maxFiles ? maxFiles : 0,
-      maxSize: maxFileSize,
-      InputComponent: Input,
-      PreviewComponent: CustomPreview,
-      classNames: { dropzone: "dropzone-upload-frame" },
-      onChangeStatus: handleChangeStatus,
-      getFilesFromEvent,
-      accept
-    }
-  ) });
-};
+import { DropzoneUploader } from "./base/index.js";
+import { DropzoneUploaderStyled } from "./styled/index.js";
 export {
-  DropzoneUploader
+  DropzoneUploader,
+  DropzoneUploaderStyled
 };
 //# sourceMappingURL=index.js.map

package/dist/dropzone-uploader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/dropzone-uploader/index.jsx"],"sourcesContent":["import { getDroppedOrSelectedFiles } from 'html5-file-selector';\r\nimport { useEffect, useState } from 'react';\r\nimport Dropzone from '../dropzone/Dropzone';\r\nimport { IconButtonSvg, pdfImage } from '../iconos';\r\nimport './dropzone-uploader.css';\r\n\r\nconst maxSize = 7;\r\nexport const DropzoneUploader = ({\r\n  onChangeFiles,\r\n  totalFiles,\r\n  maxFiles = 3,\r\n  accept = 'image/*, application/pdf',\r\n  capture = null,\r\n  nameFileLabel = 'Subir archivos',\r\n  classNames = '',\r\n  maxFileSize = maxSize,\r\n  onMaxFileSizeError = () => {\r\n    alert('El archivo supera el tamaño máximo');\r\n  },\r\n}) => {\r\n  const [files, setFiles] = useState([]);\r\n  const [totalFilesDU, setTotalFilesDU] = useState(totalFiles);\r\n  const handleChangeStatus = ({ file }, status) => {\r\n    if (status == 'done') {\r\n      const filesTemp = files;\r\n      filesTemp.push(file);\r\n      setFiles(filesTemp);\r\n      onChangeFiles(files);\r\n      setTotalFilesDU(files.length);\r\n    } else if (status == 'removed') {\r\n      const filesTemp = files;\r\n      const index = files.indexOf(file);\r\n      if (index > -1) {\r\n        filesTemp.splice(index, 1);\r\n      }\r\n      setFiles(filesTemp);\r\n      onChangeFiles(files);\r\n      setTotalFilesDU(files.length);\r\n    }\r\n  };\r\n  const getFilesFromEvent = (e) => {\r\n    return new Promise((resolve) => {\r\n      getDroppedOrSelectedFiles(e).then((chosenFiles) => {\r\n        resolve(chosenFiles.map((f) => f.fileObject));\r\n      });\r\n    });\r\n  };\r\n  const CustomPreview = ({ fileWithMeta }) => {\r\n    const { meta, remove } = fileWithMeta;\r\n    if (meta.size / (1024 * 1024) > maxFileSize) {\r\n      onMaxFileSizeError();\r\n      remove();\r\n    }\r\n    return (\r\n      <div className=\"dropzone-upload-previewContainer\">\r\n        {meta.type === 'application/pdf' ? (\r\n          <>\r\n            <IconButtonSvg\r\n              className=\"form-control flex\"\r\n              svg={pdfImage}\r\n              svgOver={pdfImage}\r\n              height=\"1.6rem\"\r\n              width=\"1.6rem\"\r\n              title={meta.name}\r\n            />\r\n            <p>\r\n              {meta.name.length > 17\r\n                ? meta.name.substring(0, 17) + '...'\r\n                : meta.name}\r\n            </p>\r\n          </>\r\n        ) : (\r\n          <>\r\n            <img\r\n              className=\"dropzone-upload-previewImage\"\r\n              src={meta.previewUrl}\r\n              alt={meta.name}\r\n            />\r\n            <p>\r\n              {meta.name.length > 17\r\n                ? meta.name.substring(0, 17) + '...'\r\n                : meta.name}\r\n            </p>\r\n          </>\r\n        )}\r\n        <p>{(meta.size / 1024).toFixed(2)} .Kb</p>\r\n        <button\r\n          onClick={remove}\r\n          className=\"dropzone-upload-delete-btn icon-trash\"\r\n        ></button>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  const Input = ({ accept, onFiles, getFilesFromEvent }) => {\r\n    const text =\r\n      totalFilesDU > 0\r\n        ? `${maxFiles - totalFilesDU} archivo/s más`\r\n        : nameFileLabel;\r\n    return (\r\n      <label className=\"dropzone-upload-button\">\r\n        {text}\r\n        <input\r\n          style={{ display: 'none' }}\r\n          type=\"file\"\r\n          accept={accept}\r\n          capture={capture}\r\n          multiple\r\n          onChange={(e) => {\r\n            getFilesFromEvent(e).then((chosenFiles) => {\r\n              onFiles(chosenFiles);\r\n            });\r\n          }}\r\n        />\r\n      </label>\r\n    );\r\n  };\r\n  useEffect(() => {\r\n    setTotalFilesDU(totalFiles);\r\n  }, [totalFiles]);\r\n\r\n  return (\r\n    <div className={`${classNames}`}>\r\n      <Dropzone\r\n        disableUpload={false}\r\n        maxFiles={totalFilesDU < maxFiles ? maxFiles : 0}\r\n        maxSize={maxFileSize} // en megas\r\n        InputComponent={Input}\r\n        PreviewComponent={CustomPreview}\r\n        classNames={{ dropzone: 'dropzone-upload-frame' }}\r\n        onChangeStatus={handleChangeStatus}\r\n        getFilesFromEvent={getFilesFromEvent}\r\n        accept={accept}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n"],"names":["IconButtonSvg","accept","getFilesFromEvent"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/dropzone-uploader/styled/index.css

@@ -0,0 +1,348 @@
+.dzu-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  min-height: 120px;
+  overflow: scroll;
+  margin: 0 auto;
+  position: relative;
+  box-sizing: border-box;
+  transition: all .15s linear;
+  border: 2px solid #d9d9d9;
+  border-radius: 4px;
+}
+
+.dzu-dropzoneActive {
+  background-color: #DEEBFF;
+  border-color: #2484FF;
+}
+
+.dzu-dropzoneDisabled {
+  opacity: 0.5;
+}
+
+.dzu-dropzoneDisabled *:hover {
+  cursor: unset;
+}
+
+.dzu-input {
+  display: none;
+}
+
+.dzu-inputLabel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-family: 'Helvetica', sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  color: #2484FF;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+}
+
+.dzu-inputLabelWithFiles {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: flex-start;
+  padding: 0 14px;
+  min-height: 32px;
+  background-color: #E6E6E6;
+  color: #2484FF;
+  border: none;
+  font-family: 'Helvetica', sans-serif;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  margin-top: 20px;
+  margin-left: 3%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+}
+
+.dzu-previewContainer {
+  padding: 40px 3%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  width: 100%;
+  min-height: 60px;
+  z-index: 1;
+  border-bottom: 1px solid #ECECEC;
+  box-sizing: border-box;
+}
+
+.dzu-previewStatusContainer {
+  display: flex;
+  align-items: center;
+}
+
+.dzu-previewFileName {
+  font-family: 'Helvetica', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  color: #333333;
+}
+
+.dzu-previewImage {
+  width: auto;
+  max-height: 40px;
+  max-width: 140px;
+  border-radius: 4px;
+}
+
+.dzu-previewButton {
+  background-size: 14px 14px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  opacity: 0.9;
+  margin: 0 0 2px 10px;
+}
+
+.dzu-submitButtonContainer {
+  margin: 24px 0;
+  z-index: 1;
+}
+
+.dzu-submitButton {
+  padding: 0 14px;
+  min-height: 32px;
+  background-color: #2484FF;
+  border: none;
+  border-radius: 4px;
+  font-family: 'Helvetica', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: #FFF;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+}
+
+.dzu-submitButton:disabled {
+  background-color: #E6E6E6;
+  color: #333333;
+  cursor: unset;
+}
+
+.dropzone-upload-button {
+  padding: 25;
+  border-radius: 5px !important;
+  cursor: pointer;
+  color: #fff;
+  width: 10rem !important;
+  height: 2rem !important;
+  line-height: 1.5 !important;
+  font-size: 13px;
+  text-align: center;
+  vertical-align: middle !important;
+  border: none;
+  padding-top: 0.5rem;
+  margin-top: 0.5rem;
+  background-color: #af251b;
+  &:hover {
+    background-color: rgb(108, 31, 1);
+  }
+}
+.dropzone-upload-frame {
+  border: 0px !important;
+  overflow: 'none' !important;
+}
+.dropzone-upload-previewContainer {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  width: 100px;
+  min-height: 60px;
+  z-index: 1;
+  border-bottom: 1px solid #ececec;
+  box-sizing: border-box;
+}
+
+.dropzone-upload-previewImage {
+  width: 60rem;
+  max-height: 60px;
+  max-width: 10rem;
+  border-radius: 4px;
+  padding-right: 1rem;
+}
+
+.dropzone-upload-delete-btn {
+  width: 2rem;
+  line-height: 1.5;
+  border: 0;
+  color: #ff0000;
+  background-color: #f8f8f8;
+  padding-right: 1rem;
+}
+
+.dropzone-upload-file-name-container {
+  position: relative;
+  display: inline-block;
+  max-width: 150px; /* Ajusta este valor para aumentar el ancho */
+}
+
+.dropzone-upload-file-name {
+  padding-right: 1rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 150px; /* Ajusta este valor para aumentar el ancho */
+}
+
+.dzu-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  min-height: 120px;
+  overflow: scroll;
+  margin: 0 auto;
+  position: relative;
+  box-sizing: border-box;
+  transition: all 0.15s linear;
+  border: 2px solid #d9d9d9;
+  border-radius: 4px;
+}
+
+.dzu-dropzoneActive {
+  background-color: #deebff;
+  border-color: #2484ff;
+}
+
+.dzu-dropzoneDisabled {
+  opacity: 0.5;
+}
+
+.dzu-dropzoneDisabled *:hover {
+  cursor: unset;
+}
+
+.dzu-input {
+  display: none;
+}
+
+.dzu-inputLabel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  font-family: 'Helvetica', sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  color: #2484ff;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+}
+
+.dzu-inputLabelWithFiles {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: flex-start;
+  padding: 0 14px;
+  min-height: 32px;
+  background-color: #e6e6e6;
+  color: #2484ff;
+  border: none;
+  font-family: 'Helvetica', sans-serif;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  margin-top: 20px;
+  margin-left: 3%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+}
+
+.dzu-previewContainer {
+  padding: 40px 3%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+  width: 100%;
+  min-height: 60px;
+  z-index: 1;
+  border-bottom: 1px solid #ececec;
+  box-sizing: border-box;
+}
+
+.dzu-previewStatusContainer {
+  display: flex;
+  align-items: center;
+}
+
+.dzu-previewFileName {
+  font-family: 'Helvetica', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  color: #333333;
+}
+
+.dzu-previewImage {
+  width: auto;
+  max-height: 40px;
+  max-width: 140px;
+  border-radius: 4px;
+}
+
+.dzu-previewButton {
+  background-size: 14px 14px;
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  opacity: 0.9;
+  margin: 0 0 2px 10px;
+}
+
+.dzu-submitButtonContainer {
+  margin: 24px 0;
+  z-index: 1;
+}
+
+.dzu-submitButton {
+  padding: 0 14px;
+  min-height: 32px;
+  background-color: #2484ff;
+  border: none;
+  border-radius: 4px;
+  font-family: 'Helvetica', sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: #fff;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  cursor: pointer;
+}
+
+.dzu-submitButton:disabled {
+  background-color: #e6e6e6;
+  color: #333333;
+  cursor: unset;
+}

package/dist/dropzone-uploader/styled/index.js

@@ -0,0 +1,149 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { getDroppedOrSelectedFiles } from "html5-file-selector";
+import { useState } from "react";
+import { Button } from "reactstrap";
+import Dropzone from "../../dropzone/Dropzone.js";
+import "./index.css";
+import { IconButtonSvg as _t } from "../../iconos/icon-button-svg.js";
+import { pdfImage } from "../../iconos/constants-svg.js";
+const DropzoneUploaderStyled = ({
+  accept = "image/*, application/pdf",
+  classNames = "",
+  onChangeFiles,
+  totalFiles,
+  label = "Cargar Dni",
+  maxFiles = 2,
+  maxSize = 2,
+  onMaxFileSizeError = () => {
+    alert("El archivo supera el tamaño máximo");
+  }
+}) => {
+  const [files, setFiles] = useState([]);
+  const handleChangeStatus = ({ file }, status) => {
+    if (status === "done") {
+      const filesTemp = [...files];
+      filesTemp.push(file);
+      setFiles(filesTemp);
+      onChangeFiles(filesTemp);
+    } else if (status === "removed") {
+      const filesTemp = [...files];
+      const index = filesTemp.indexOf(file);
+      if (index > -1) {
+        filesTemp.splice(index, 1);
+      }
+      setFiles(filesTemp);
+      onChangeFiles(filesTemp);
+    }
+  };
+  const getFilesFromEvent = (e) => {
+    return new Promise((resolve) => {
+      getDroppedOrSelectedFiles(e).then((chosenFiles) => {
+        resolve(chosenFiles.map((f) => f.fileObject));
+      });
+    });
+  };
+  const CustomPreview = ({ fileWithMeta }) => {
+    const { meta, remove } = fileWithMeta;
+    if (meta.size / (1024 * 1024) > maxSize) {
+      onMaxFileSizeError();
+      remove();
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "dropzone-upload-previewContainer",
+        style: { width: "100%", display: "flex", alignItems: "center" },
+        children: [
+          meta.type === "application/pdf" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              _t,
+              {
+                className: "form-control flex",
+                svg: pdfImage,
+                svgOver: pdfImage,
+                height: "1.6rem",
+                width: "1.6rem",
+                title: meta.name
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { style: { paddingRight: "1rem" }, children: meta.name.length > 17 ? meta.name.substring(0, 17) + "..." : meta.name })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                className: "dropzone-upload-previewImage mt-1",
+                src: meta.previewUrl,
+                alt: meta.name,
+                style: {
+                  width: "110px",
+                  height: "110px",
+                  objectFit: "cover",
+                  marginRight: "0.5rem"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "dropzone-upload-file-name-container", children: /* @__PURE__ */ jsx("p", { className: "dropzone-upload-file-name", title: meta.name, children: meta.name }) })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              style: { marginTop: "0rem" },
+              onClick: remove,
+              className: "dropzone-upload-delete-btn simple-icon-trash"
+            }
+          )
+        ]
+      }
+    );
+  };
+  const Input = ({ accept: accept2, onFiles, getFilesFromEvent: getFilesFromEvent2 }) => {
+    const text = totalFiles > 0 ? `${maxFiles - totalFiles} archivos más` : `${label}`;
+    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        outline: true,
+        block: true,
+        size: "xs",
+        className: "mt-5 ml-5",
+        onClick: () => document.getElementById("fileInput").click(),
+        children: [
+          text,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              id: "fileInput",
+              style: { display: "none" },
+              type: "file",
+              accept: accept2,
+              multiple: true,
+              onChange: (e) => {
+                getFilesFromEvent2(e).then((chosenFiles) => {
+                  onFiles(chosenFiles);
+                });
+              }
+            }
+          )
+        ]
+      }
+    ) });
+  };
+  return /* @__PURE__ */ jsx("div", { className: classNames, children: /* @__PURE__ */ jsx(
+    Dropzone,
+    {
+      disableUpload: false,
+      maxFiles: totalFiles < maxFiles ? maxFiles : 0,
+      maxSize,
+      InputComponent: Input,
+      PreviewComponent: CustomPreview,
+      classNames: { dropzone: "dropzone-upload-frame" },
+      onChangeStatus: handleChangeStatus,
+      getFilesFromEvent,
+      accept
+    }
+  ) });
+};
+export {
+  DropzoneUploaderStyled,
+  DropzoneUploaderStyled as default
+};
+//# sourceMappingURL=index.js.map

package/dist/dropzone-uploader/styled/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/dropzone-uploader/styled/index.jsx"],"sourcesContent":["import { getDroppedOrSelectedFiles } from 'html5-file-selector';\r\nimport { useState } from 'react';\r\nimport { Button } from 'reactstrap';\r\nimport Dropzone from '../../dropzone/Dropzone';\r\nimport { IconButtonSvg, pdfImage } from '../../iconos';\r\nimport './index.css';\r\n\r\nexport const DropzoneUploaderStyled = ({\r\n  accept = 'image/*, application/pdf',\r\n  classNames = '',\r\n  onChangeFiles,\r\n  totalFiles,\r\n  label = 'Cargar Dni',\r\n  maxFiles = 2,\r\n  maxSize = 2,\r\n  onMaxFileSizeError = () => {\r\n    alert('El archivo supera el tamaño máximo');\r\n  },\r\n}) => {\r\n  const [files, setFiles] = useState([]);\r\n\r\n  const handleChangeStatus = ({ file }, status) => {\r\n    if (status === 'done') {\r\n      const filesTemp = [...files];\r\n      filesTemp.push(file);\r\n      setFiles(filesTemp);\r\n      onChangeFiles(filesTemp);\r\n    } else if (status === 'removed') {\r\n      const filesTemp = [...files];\r\n      const index = filesTemp.indexOf(file);\r\n      if (index > -1) {\r\n        filesTemp.splice(index, 1);\r\n      }\r\n      setFiles(filesTemp);\r\n      onChangeFiles(filesTemp);\r\n    }\r\n  };\r\n\r\n  const getFilesFromEvent = (e) => {\r\n    return new Promise((resolve) => {\r\n      getDroppedOrSelectedFiles(e).then((chosenFiles) => {\r\n        resolve(chosenFiles.map((f) => f.fileObject));\r\n      });\r\n    });\r\n  };\r\n\r\n  const CustomPreview = ({ fileWithMeta }) => {\r\n    const { meta, remove } = fileWithMeta;\r\n    if (meta.size / (1024 * 1024) > maxSize) {\r\n      onMaxFileSizeError();\r\n      remove();\r\n    }\r\n    return (\r\n      <div\r\n        className=\"dropzone-upload-previewContainer\"\r\n        style={{ width: '100%', display: 'flex', alignItems: 'center' }}\r\n      >\r\n        {meta.type === 'application/pdf' ? (\r\n          <>\r\n            <IconButtonSvg\r\n              className=\"form-control flex\"\r\n              svg={pdfImage}\r\n              svgOver={pdfImage}\r\n              height=\"1.6rem\"\r\n              width=\"1.6rem\"\r\n              title={meta.name}\r\n            />\r\n            <p style={{ paddingRight: '1rem' }}>\r\n              {meta.name.length > 17\r\n                ? meta.name.substring(0, 17) + '...'\r\n                : meta.name}\r\n            </p>\r\n          </>\r\n        ) : (\r\n          <>\r\n            <img\r\n              className=\"dropzone-upload-previewImage mt-1\"\r\n              src={meta.previewUrl}\r\n              alt={meta.name}\r\n              style={{\r\n                width: '110px',\r\n                height: '110px',\r\n                objectFit: 'cover',\r\n                marginRight: '0.5rem',\r\n              }}\r\n            />\r\n            <div className=\"dropzone-upload-file-name-container\">\r\n              <p className=\"dropzone-upload-file-name\" title={meta.name}>\r\n                {meta.name}\r\n              </p>\r\n            </div>\r\n          </>\r\n        )}\r\n        <button\r\n          style={{ marginTop: '0rem' }}\r\n          onClick={remove}\r\n          className=\"dropzone-upload-delete-btn simple-icon-trash\"\r\n        ></button>\r\n      </div>\r\n    );\r\n  };\r\n\r\n  const Input = ({ accept, onFiles, getFilesFromEvent }) => {\r\n    const text =\r\n      totalFiles > 0 ? `${maxFiles - totalFiles} archivos más` : `${label}`;\r\n    return (\r\n      <>\r\n        <Button\r\n          outline\r\n          block\r\n          size=\"xs\"\r\n          className=\"mt-5 ml-5\"\r\n          onClick={() => document.getElementById('fileInput').click()}\r\n        >\r\n          {text}\r\n          <input\r\n            id=\"fileInput\"\r\n            style={{ display: 'none' }}\r\n            type=\"file\"\r\n            accept={accept}\r\n            multiple\r\n            onChange={(e) => {\r\n              getFilesFromEvent(e).then((chosenFiles) => {\r\n                onFiles(chosenFiles);\r\n              });\r\n            }}\r\n          />\r\n        </Button>\r\n      </>\r\n    );\r\n  };\r\n\r\n  return (\r\n    <div className={classNames}>\r\n      <Dropzone\r\n        disableUpload={false}\r\n        maxFiles={totalFiles < maxFiles ? maxFiles : 0}\r\n        maxSize={maxSize} // en megas\r\n        InputComponent={Input}\r\n        PreviewComponent={CustomPreview}\r\n        classNames={{ dropzone: 'dropzone-upload-frame' }}\r\n        onChangeStatus={handleChangeStatus}\r\n        getFilesFromEvent={getFilesFromEvent}\r\n        accept={accept}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default DropzoneUploaderStyled;\r\n"],"names":["IconButtonSvg","accept","getFilesFromEvent"],"mappings":"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"}

package/dist/tomar-foto/index.js

@@ -1,7 +1,7 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 import { Row } from "reactstrap";
-import { DropzoneUploader } from "../dropzone-uploader/index.js";
+import { DropzoneUploader } from "../dropzone-uploader/base/index.js";
 import { Colxx } from "../CustomBootstrap.js";
 import imgHacerFoto from "../assets/img/take-photo.jpg.js";
 import { TAKE_PHOTO } from "../constants.js";

package/dist/tomar-foto/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/tomar-foto/index.jsx"],"sourcesContent":["import { useState } from 'react';\r\nimport { Row } from 'reactstrap';\r\nimport { DropzoneUploader } from '../dropzone-uploader';\r\nimport { Colxx } from '../CustomBootstrap';\r\nimport imgHacerFoto from '../assets/img/take-photo.jpg';\r\nimport { TAKE_PHOTO } from '../constants';\r\n\r\nexport const TomarFoto = ({\r\n  onFilesSelectedSelfie = () => {},\r\n  isMobile = false,\r\n}) => {\r\n  const [filesTotalSelectedSelfie, setTotalFilesSelectedSelfie] = useState(0);\r\n  const {\r\n    LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE,\r\n    MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE,\r\n    TAKE_PHOTO_MESSAGE,\r\n  } = TAKE_PHOTO;\r\n\r\n  const handleFilesSelectedSelfie = (files) => {\r\n    setTotalFilesSelectedSelfie(files.length);\r\n    onFilesSelectedSelfie(files);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Row className=\"pt-2 ml-4\">\r\n        <Colxx xxs=\"11\" md=\"5\">\r\n          {LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE}\r\n        </Colxx>\r\n      </Row>\r\n      <Row className=\"pt-2 ml-2\">\r\n        <Colxx xxs=\"12\" md=\"9\">\r\n          {isMobile ? (\r\n            <>\r\n              <Colxx xxs=\"12\" className=\"text-center\">\r\n                {filesTotalSelectedSelfie === 0 && (\r\n                  <img\r\n                    style={{ width: '97%' }}\r\n                    alt=\"hacerFotoDNI\"\r\n                    src={imgHacerFoto}\r\n                  />\r\n                )}\r\n                <DropzoneUploader\r\n                  className=\"pt-2 ml-2\"\r\n                  maxFiles={1}\r\n                  onChangeFiles={handleFilesSelectedSelfie}\r\n                  totalFiles={filesTotalSelectedSelfie}\r\n                  accept=\"image/jpg,image/jpeg\"\r\n                  capture=\"environment\"\r\n                  nameFileLabel={TAKE_PHOTO_MESSAGE}\r\n                />\r\n              </Colxx>\r\n            </>\r\n          ) : (\r\n            <h2\r\n              className={'view-icon iconsminds-smartphone-4 ml-2 mr-2'}\r\n              style={{\r\n                color: 'red',\r\n                margin: '10px 10px 0px 10px',\r\n              }}\r\n            >\r\n              {MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE}\r\n            </h2>\r\n          )}\r\n        </Colxx>\r\n      </Row>\r\n    </>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;;;;;AAOO,MAAM,YAAY,CAAC;AAAA,EACxB,wBAAwB,MAAM;AAAA,EAAC;AAAA,EAC/B,WAAW;AACb,MAAM;AACJ,QAAM,CAAC,0BAA0B,2BAA2B,IAAI,SAAS,CAAC;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,4BAA4B,CAAC,UAAU;AAC3C,gCAA4B,MAAM,MAAM;AACxC,0BAAsB,KAAK;AAAA,EAC7B;AAEA,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAI,WAAU,aACb,UAAA,oBAAC,OAAA,EAAM,KAAI,MAAK,IAAG,KAChB,UAAA,uCAAA,CACH,GACF;AAAA,wBACC,KAAA,EAAI,WAAU,aACb,UAAA,oBAAC,SAAM,KAAI,MAAK,IAAG,KAChB,qBACC,oBAAA,UAAA,EACE,UAAA,qBAAC,SAAM,KAAI,MAAK,WAAU,eACvB,UAAA;AAAA,MAAA,6BAA6B,KAC5B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,EAAE,OAAO,MAAA;AAAA,UAChB,KAAI;AAAA,UACJ,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAGT;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAAU;AAAA,UACV,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,eAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB,EAAA,CACF,GACF,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,QAGT,UAAA;AAAA,MAAA;AAAA,IAAA,GAGP,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"index.js","sources":["../../src/tomar-foto/index.jsx"],"sourcesContent":["import { useState } from 'react';\r\nimport { Row } from 'reactstrap';\r\nimport { DropzoneUploader } from '../dropzone-uploader/base';\r\nimport { Colxx } from '../CustomBootstrap';\r\nimport imgHacerFoto from '../assets/img/take-photo.jpg';\r\nimport { TAKE_PHOTO } from '../constants';\r\n\r\nexport const TomarFoto = ({\r\n  onFilesSelectedSelfie = () => {},\r\n  isMobile = false,\r\n}) => {\r\n  const [filesTotalSelectedSelfie, setTotalFilesSelectedSelfie] = useState(0);\r\n  const {\r\n    LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE,\r\n    MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE,\r\n    TAKE_PHOTO_MESSAGE,\r\n  } = TAKE_PHOTO;\r\n\r\n  const handleFilesSelectedSelfie = (files) => {\r\n    setTotalFilesSelectedSelfie(files.length);\r\n    onFilesSelectedSelfie(files);\r\n  };\r\n\r\n  return (\r\n    <>\r\n      <Row className=\"pt-2 ml-4\">\r\n        <Colxx xxs=\"11\" md=\"5\">\r\n          {LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE}\r\n        </Colxx>\r\n      </Row>\r\n      <Row className=\"pt-2 ml-2\">\r\n        <Colxx xxs=\"12\" md=\"9\">\r\n          {isMobile ? (\r\n            <>\r\n              <Colxx xxs=\"12\" className=\"text-center\">\r\n                {filesTotalSelectedSelfie === 0 && (\r\n                  <img\r\n                    style={{ width: '97%' }}\r\n                    alt=\"hacerFotoDNI\"\r\n                    src={imgHacerFoto}\r\n                  />\r\n                )}\r\n                <DropzoneUploader\r\n                  className=\"pt-2 ml-2\"\r\n                  maxFiles={1}\r\n                  onChangeFiles={handleFilesSelectedSelfie}\r\n                  totalFiles={filesTotalSelectedSelfie}\r\n                  accept=\"image/jpg,image/jpeg\"\r\n                  capture=\"environment\"\r\n                  nameFileLabel={TAKE_PHOTO_MESSAGE}\r\n                />\r\n              </Colxx>\r\n            </>\r\n          ) : (\r\n            <h2\r\n              className={'view-icon iconsminds-smartphone-4 ml-2 mr-2'}\r\n              style={{\r\n                color: 'red',\r\n                margin: '10px 10px 0px 10px',\r\n              }}\r\n            >\r\n              {MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE}\r\n            </h2>\r\n          )}\r\n        </Colxx>\r\n      </Row>\r\n    </>\r\n  );\r\n};\r\n"],"names":[],"mappings":";;;;;;;AAOO,MAAM,YAAY,CAAC;AAAA,EACxB,wBAAwB,MAAM;AAAA,EAAC;AAAA,EAC/B,WAAW;AACb,MAAM;AACJ,QAAM,CAAC,0BAA0B,2BAA2B,IAAI,SAAS,CAAC;AAC1E,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,4BAA4B,CAAC,UAAU;AAC3C,gCAA4B,MAAM,MAAM;AACxC,0BAAsB,KAAK;AAAA,EAC7B;AAEA,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAI,WAAU,aACb,UAAA,oBAAC,OAAA,EAAM,KAAI,MAAK,IAAG,KAChB,UAAA,uCAAA,CACH,GACF;AAAA,wBACC,KAAA,EAAI,WAAU,aACb,UAAA,oBAAC,SAAM,KAAI,MAAK,IAAG,KAChB,qBACC,oBAAA,UAAA,EACE,UAAA,qBAAC,SAAM,KAAI,MAAK,WAAU,eACvB,UAAA;AAAA,MAAA,6BAA6B,KAC5B;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO,EAAE,OAAO,MAAA;AAAA,UAChB,KAAI;AAAA,UACJ,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAGT;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,UAAU;AAAA,UACV,eAAe;AAAA,UACf,YAAY;AAAA,UACZ,QAAO;AAAA,UACP,SAAQ;AAAA,UACR,eAAe;AAAA,QAAA;AAAA,MAAA;AAAA,IACjB,EAAA,CACF,GACF,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,QACX,OAAO;AAAA,UACL,OAAO;AAAA,UACP,QAAQ;AAAA,QAAA;AAAA,QAGT,UAAA;AAAA,MAAA;AAAA,IAAA,GAGP,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/index.d.ts

@@ -43,10 +43,42 @@ declare module 'siam-ui-utils/react-notifications/NotificationContainer' {
 
 declare module 'siam-ui-utils/react-notifications/NotificationManager' {
   export class NotificationManager {
-    static info(message: string, title?: string, duration?: number): void;
-    static success(message: string, title?: string, duration?: number): void;
-    static warning(message: string, title?: string, duration?: number): void;
-    static error(message: string, title?: string, duration?: number): void;
+    static info(
+      customClassName?: string,
+      message: string,
+      onClick?: any,
+      priority?: string,
+      timeOut?: number,
+      title?: string,
+      type?: string
+    ): void;
+    static success(
+      customClassName?: string,
+      message: string,
+      onClick?: any,
+      priority?: string,
+      timeOut?: number,
+      title?: string,
+      type?: string
+    ): void;
+    static warning(
+      customClassName?: string,
+      message: string,
+      onClick?: any,
+      priority?: string,
+      timeOut?: number,
+      title?: string,
+      type?: string
+    ): void;
+    static error(
+      customClassName?: string,
+      message: string,
+      onClick?: any,
+      priority?: string,
+      timeOut?: number,
+      title?: string,
+      type?: string
+    ): void;
   }
 
   declare module 'siam-ui-utils/react-notifications/Notifications' {
@@ -118,7 +150,7 @@ declare module 'siam-ui-utils/select/multi-select' {
   export function CustomMultiSelect(props: CustomMultiSelectProps): JSX.Element;
 }
 
-declare module 'siam-ui-utils/dropzone-uploader' {
+declare module 'siam-ui-utils/dropzone-uploader/generic' {
   export interface DropzoneUploaderProps {
     onChangeFiles?: (files: File[]) => void;
     totalFiles?: number;
@@ -132,8 +164,19 @@ declare module 'siam-ui-utils/dropzone-uploader' {
     [key: string]: any;
   }
   export function DropzoneUploader(props: DropzoneUploaderProps): JSX.Element;
+}
 
+declare module 'siam-ui-utils/dropzone-uploader/dni-digital' {
   export interface DropzoneUploaderDniDigitalProps {
+    onChangeFiles?: (files: File[]) => void;
+    totalFiles?: number;
+    maxFiles?: number;
+    accept?: string;
+    capture?: string | null;
+    nameFileLabel?: string;
+    classNames?: string;
+    maxFileSize?: number;
+    onMaxFileSizeError?: () => void;
     [key: string]: any;
   }
   export function DropzoneUploaderDniDigital(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siam-ui-utils",
-  "version": "3.0.15",
+  "version": "3.0.16",
   "keywords": [
     "ampf-react",
     "ampf-utils",
@@ -36,7 +36,7 @@
       "import": "./dist/intl-messages/index.js",
       "types": "./index.d.ts"
     },
-    "./dropzone-uploader": {
+    "./dropzone-uploader/*": {
       "import": "./dist/dropzone-uploader/index.js",
       "types": "./index.d.ts"
     },