@xaypay/tui 0.2.23 → 0.2.24

package/dist/index.es.js

@@ -154,6 +154,28 @@ const SvgDocIcon = ({
   d: "M5.922 23.8H3.859v-5.818h2.08q.878 0 1.511.35.633.346.975.996.343.651.343 1.557 0 .909-.343 1.563-.341.653-.98 1.003-.637.349-1.523.349m-.833-1.054h.782q.546 0 .917-.193.375-.196.563-.605.19-.413.19-1.063 0-.645-.19-1.054a1.23 1.23 0 0 0-.56-.602q-.372-.193-.918-.193H5.09zm9.937-1.855q0 .951-.36 1.62a2.5 2.5 0 0 1-.978 1.02q-.616.348-1.386.349-.776 0-1.392-.353a2.5 2.5 0 0 1-.975-1.02q-.357-.668-.358-1.616 0-.952.358-1.62.359-.667.975-1.017a2.76 2.76 0 0 1 1.392-.352q.77 0 1.386.352.62.35.977 1.018.36.667.361 1.619m-1.247 0q0-.617-.185-1.04a1.4 1.4 0 0 0-.514-.642 1.4 1.4 0 0 0-.778-.219q-.447 0-.779.22-.332.218-.517.641-.182.423-.182 1.04 0 .616.182 1.04.185.423.517.642.332.218.779.218.445 0 .778-.218.333-.219.514-.642.185-.425.185-1.04m7.292-.872h-1.245a1.2 1.2 0 0 0-.139-.43 1.1 1.1 0 0 0-.27-.323 1.2 1.2 0 0 0-.38-.205 1.5 1.5 0 0 0-.463-.07 1.4 1.4 0 0 0-.787.224 1.43 1.43 0 0 0-.52.648q-.185.423-.185 1.028 0 .622.185 1.045.188.423.523.64.335.215.775.215.247 0 .457-.065.215-.065.378-.19.165-.128.273-.31.11-.182.154-.415l1.244.006a2.323 2.323 0 0 1-.756 1.435 2.4 2.4 0 0 1-.767.46q-.443.168-1.003.168-.778 0-1.392-.353a2.5 2.5 0 0 1-.966-1.02q-.352-.668-.352-1.616 0-.952.358-1.62.358-.667.972-1.017.614-.352 1.38-.352.506 0 .938.142.434.142.77.415.335.27.545.662.213.391.273.898"
 }));
 
+const SvgListItemSvg = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "28",
+  height: "36",
+  viewBox: "0 0 28 36",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  d: "M27.39 9.078v16.043a1.213 1.213 0 0 1 .61 1.05v6.778A3.05 3.05 0 0 1 24.957 36H3.043A3.051 3.051 0 0 1 0 32.95v-8.872a1.22 1.22 0 0 1 .61-1.05V2.44c0-.648.257-1.27.71-1.726A2.44 2.44 0 0 1 3.043 0h15.293ZM8.759 27.871q-.585 0-1.043.203c-.309.133-.547.32-.723.559a1.35 1.35 0 0 0-.258.84c-.004.39.13.699.387.93q.393.346 1.066.511l.586.145c.192.046.36.097.493.152a.9.9 0 0 1 .308.207q.105.125.106.3 0 .19-.117.337a.73.73 0 0 1-.333.23 1.4 1.4 0 0 1-.496.082q-.292.001-.527-.086a.9.9 0 0 1-.367-.265.8.8 0 0 1-.152-.446H6.594q.013.573.277.957.271.388.746.582.48.198 1.13.196.65 0 1.112-.192.464-.2.711-.55c.164-.239.25-.52.25-.844a1.331 1.331 0 0 0-.453-1.027 2.1 2.1 0 0 0-.508-.32 3.3 3.3 0 0 0-.64-.204l-.48-.113a3 3 0 0 1-.329-.094 1.4 1.4 0 0 1-.273-.133.6.6 0 0 1-.184-.183.43.43 0 0 1-.062-.247q.001-.17.101-.304a.65.65 0 0 1 .293-.211q.188-.077.465-.078.41 0 .645.175a.64.64 0 0 1 .27.485h1.081a1.47 1.47 0 0 0-.254-.832 1.63 1.63 0 0 0-.695-.559c-.297-.137-.64-.203-1.04-.203m10.426 0q-.528.001-.985.184-.451.181-.793.535a2.45 2.45 0 0 0-.535.855 3.3 3.3 0 0 0-.187 1.149c0 .554.105 1.039.316 1.445q.317.603.887.938.57.328 1.32.328.675 0 1.195-.27.522-.27.82-.77.299-.502.298-1.199v-.664h-2.235v.84h1.145q-.005.316-.145.555a.95.95 0 0 1-.418.383 1.45 1.45 0 0 1-.652.136c-.285 0-.527-.07-.735-.203a1.3 1.3 0 0 1-.48-.59 2.4 2.4 0 0 1-.172-.941q.001-.552.172-.934.175-.386.48-.585c.207-.133.45-.204.723-.204q.217.001.399.055c.12.035.23.09.324.156a1.05 1.05 0 0 1 .394.582h1.149a1.9 1.9 0 0 0-.246-.715 2 2 0 0 0-.5-.566c-.2-.16-.434-.281-.692-.367a2.6 2.6 0 0 0-.847-.133m-6.047 5.36h1.457l1.844-5.286h-1.254l-1.297 4.016h-.047l-1.293-4.016h-1.258ZM3.043 1.218c-.324 0-.633.129-.86.36-.23.226-.359.538-.359.862V22.86h8.633c.352 0 .684.153.918.418l1.46 1.676h13.337V9.938H19.91A2.436 2.436 0 0 1 17.476 7.5V1.218Zm7.738 9.164c.078 0 .137.062.137.14v.313h5.46v-.313a.14.14 0 0 1 .142-.14h1.539a.14.14 0 0 1 .14.14v1.524a.14.14 0 0 1-.14.137h-.313v5.402h.313c.078 0 .14.059.14.137v1.523a.137.137 0 0 1-.14.137h-1.54a.137.137 0 0 1-.14-.137v-.312h-5.461v.312a.134.134 0 0 1-.137.137H9.238a.136.136 0 0 1-.136-.137v-1.523c0-.078.062-.137.136-.137h.317v-5.402h-.317a.14.14 0 0 1-.136-.137v-1.524a.14.14 0 0 1 .136-.14Zm.137 1.664a.14.14 0 0 1-.137.137h-.316v5.402h.316c.074 0 .137.062.137.137v.312h5.46v-.312a.14.14 0 0 1 .142-.137h.316v-5.402h-.316a.14.14 0 0 1-.141-.137v-.313h-5.461Zm0 0",
+  style: {
+    stroke: 'none',
+    fillRule: 'nonzero',
+    fill: '#00236a',
+    fillOpacity: 1
+  }
+}));
+
 const SvgListItemPdf = ({
   title,
   titleId,
@@ -266,6 +288,7 @@ const FileItem = /*#__PURE__*/React__default.memo(({
   radius,
   status,
   iconDoc,
+  iconSvg,
   iconPdf,
   iconPng,
   iconJpg,
@@ -409,7 +432,7 @@ const FileItem = /*#__PURE__*/React__default.memo(({
     style: {
       width: '32px'
     }
-  }, fileFormat === 'pdf' ? iconPdf ? iconPdf : /*#__PURE__*/React__default.createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? iconJpg ? iconJpg : /*#__PURE__*/React__default.createElement(SvgListItemJpg, null) : fileFormat === 'png' ? iconPng ? iconPng : /*#__PURE__*/React__default.createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? iconJpeg ? iconJpeg : /*#__PURE__*/React__default.createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? iconHeic ? iconHeic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : fileFormat === 'msword' ? iconDoc ? iconDoc : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : fileFormat === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ? iconDocx ? iconDocx : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : ''), /*#__PURE__*/React__default.createElement("div", {
+  }, fileFormat === 'svg+xml' ? iconSvg ? iconSvg : /*#__PURE__*/React__default.createElement(SvgListItemSvg, null) : fileFormat === 'pdf' ? iconPdf ? iconPdf : /*#__PURE__*/React__default.createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? iconJpg ? iconJpg : /*#__PURE__*/React__default.createElement(SvgListItemJpg, null) : fileFormat === 'png' ? iconPng ? iconPng : /*#__PURE__*/React__default.createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? iconJpeg ? iconJpeg : /*#__PURE__*/React__default.createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? iconHeic ? iconHeic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : fileFormat === 'msword' ? iconDoc ? iconDoc : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : fileFormat === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ? iconDocx ? iconDocx : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : ''), /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'relative',
       display: 'flex',
@@ -1145,6 +1168,10 @@ var packageResult = {
       wrapWidth: '100%',
       wrapHeight: '100%'
     },
+    closeIcon: {
+      top: '24px',
+      right: '24px'
+    },
     icon: {
       className: 'tui_close-modal-icon'
       // zoom: React.createElement(SvgChecked, { fill: 'green' }),      
@@ -1581,6 +1608,24 @@ Button.propTypes = {
   withoutStylingHoverColor: PropTypes.string
 };
 
+const SvgSvg = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 40 52",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  fill: "#00236A",
+  d: "M39.13 13.11v23.175a1.772 1.772 0 0 1 .87 1.518v9.79a4.45 4.45 0 0 1-1.274 3.115A4.33 4.33 0 0 1 35.652 52H4.348a4.33 4.33 0 0 1-3.074-1.292A4.45 4.45 0 0 1 0 47.593V34.78a1.77 1.77 0 0 1 .87-1.517V3.525c0-.934.367-1.831 1.019-2.493A3.46 3.46 0 0 1 4.348 0h21.847zM12.514 40.26q-.836 0-1.492.29a2.5 2.5 0 0 0-1.033.81q-.372.519-.369 1.212-.003.846.556 1.346t1.524.734l.832.21q.417.1.704.223.291.123.44.299a.64.64 0 0 1 .154.432.77.77 0 0 1-.168.489q-.168.212-.473.332-.303.12-.712.119a2.1 2.1 0 0 1-.75-.127 1.2 1.2 0 0 1-.526-.384 1.17 1.17 0 0 1-.22-.642H9.418q.018.824.398 1.383.384.556 1.067.84.686.284 1.611.283.932 0 1.592-.28.663-.283 1.015-.794.353-.514.357-1.216-.003-.477-.175-.845a1.9 1.9 0 0 0-.473-.642 2.8 2.8 0 0 0-.724-.459 5 5 0 0 0-.917-.298l-.687-.164a4 4 0 0 1-.47-.135 2 2 0 0 1-.387-.19.9.9 0 0 1-.265-.264.63.63 0 0 1-.086-.358q0-.246.142-.44a.94.94 0 0 1 .418-.302q.272-.112.667-.112.582 0 .92.25.34.25.386.7h1.547a2.14 2.14 0 0 0-.366-1.2 2.35 2.35 0 0 0-.992-.81q-.633-.29-1.483-.29m14.893 0q-.756 0-1.406.265a3.3 3.3 0 0 0-1.137.772 3.5 3.5 0 0 0-.76 1.238q-.27.727-.269 1.656 0 1.207.451 2.087a3.3 3.3 0 0 0 1.268 1.354q.813.474 1.886.474.962 0 1.709-.388a2.9 2.9 0 0 0 1.17-1.111q.425-.724.425-1.731v-.962h-3.195v1.216h1.638a1.6 1.6 0 0 1-.206.798 1.4 1.4 0 0 1-.597.555q-.388.195-.936.195a1.87 1.87 0 0 1-1.048-.291q-.443-.296-.686-.855-.242-.56-.242-1.356 0-.799.246-1.35.246-.556.685-.847.445-.29 1.03-.29.313 0 .57.078a1.49 1.49 0 0 1 1.03 1.066h1.64a2.8 2.8 0 0 0-.354-1.036 2.9 2.9 0 0 0-.713-.818 3.2 3.2 0 0 0-.99-.529 3.7 3.7 0 0 0-1.209-.19M18.766 48h2.08l2.634-7.637h-1.79l-1.85 5.802h-.07l-1.846-5.802H16.13zM4.349 1.762a1.73 1.73 0 0 0-1.23.516c-.327.33-.51.78-.51 1.246V33.02H14.94c.5 0 .978.219 1.308.601l2.087 2.421h19.056V14.356h-8.949c-.922 0-1.806-.37-2.459-1.032a3.55 3.55 0 0 1-1.018-2.493v-9.07zM15.4 15c.11 0 .2.09.2.2v.45h7.8v-.45a.2.2 0 0 1 .2-.2h2.2c.11 0 .2.09.2.2v2.2a.2.2 0 0 1-.2.2h-.45v7.8h.45a.2.2 0 0 1 .2.2v2.2a.2.2 0 0 1-.2.2h-2.2a.2.2 0 0 1-.2-.2v-.45h-7.8v.45a.2.2 0 0 1-.2.2h-2.2a.2.2 0 0 1-.2-.2v-2.2c0-.11.09-.2.2-.2h.45v-7.8h-.45a.2.2 0 0 1-.2-.2v-2.2c0-.11.09-.2.2-.2zm.2 2.4a.2.2 0 0 1-.2.2h-.45v7.8h.45a.2.2 0 0 1 .2.2v.45h7.8v-.45a.2.2 0 0 1 .2-.2h.45v-7.8h-.45a.2.2 0 0 1-.2-.2v-.45h-7.8z"
+}));
+
 const SvgPdf = ({
   title,
   titleId,
@@ -1777,6 +1822,7 @@ const File = /*#__PURE__*/forwardRef(({
   maxSizeError,
   progressColor,
   noChoosenFile,
+  iconSvg,
   iconPdf,
   iconDoc,
   iconPng,
@@ -1891,7 +1937,7 @@ const File = /*#__PURE__*/forwardRef(({
         for (let ix = 0; ix < file.length; ix++) {
           if (file[ix]) {
             if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-              if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword')) {
+              if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword') || fileExtensions.includes('svg') && file[ix].type.split('/')[1] === 'svg+xml') {
                 if (file[ix].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
                   change({
                     id: '',
@@ -1927,6 +1973,15 @@ const File = /*#__PURE__*/forwardRef(({
                       check: formatError ?? configStyles.FILE.error.format
                     });
                   });
+                } else if (file[ix].type === 'image/svg+xml') {
+                  change({
+                    id: '',
+                    check: '',
+                    status: '',
+                    file: file[ix],
+                    uuid: v4()
+                  });
+                  setImage('svg');
                 } else {
                   change({
                     id: '',
@@ -1957,7 +2012,7 @@ const File = /*#__PURE__*/forwardRef(({
       for (let ix = 0; ix < file.length; ix++) {
         if (file[ix]) {
           if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-            if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword')) {
+            if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword') || fileExtensions.includes('svg') && file[ix].type.split('/')[1] === 'svg+xml') {
               if (file[ix].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
                 change({
                   id: '',
@@ -1993,6 +2048,15 @@ const File = /*#__PURE__*/forwardRef(({
                     check: formatError ?? configStyles.FILE.error.format
                   });
                 });
+              } else if (file[ix].type === 'image/svg+xml') {
+                change({
+                  id: '',
+                  check: '',
+                  status: '',
+                  file: file[ix],
+                  uuid: v4()
+                });
+                setImage('svg');
               } else {
                 change({
                   id: '',
@@ -2032,7 +2096,7 @@ const File = /*#__PURE__*/forwardRef(({
     } else {
       if (file[0]) {
         if (file[0].size <= maxSize * Math.pow(2, 20)) {
-          if (fileExtensions.includes(file[0].type.split('/')[1]) || (fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[0].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[0].type.split('/')[1] === 'msword')) {
+          if (fileExtensions.includes(file[0].type.split('/')[1]) || (fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[0].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[0].type.split('/')[1] === 'msword') || fileExtensions.includes('svg') && file[0].type.split('/')[1] === 'svg+xml') {
             setError('');
             if (file[0].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
               setImage('docx');
@@ -2076,7 +2140,7 @@ const File = /*#__PURE__*/forwardRef(({
     }
   };
   const handleClick = () => {
-    if (!image && !singleFile) {
+    if (!image && !singleFile || multiple) {
       inpRef.current.files = null;
       inpRef.current.value = null;
       inpRef.current.click();
@@ -2251,6 +2315,7 @@ const File = /*#__PURE__*/forwardRef(({
       }
     };
   }, []);
+  console.log(image, ' - - - -image');
   return configStyles.FILE && /*#__PURE__*/React__default.createElement("div", {
     ref: parentlRef,
     style: {
@@ -2335,7 +2400,7 @@ const File = /*#__PURE__*/forwardRef(({
       fontFamily: family ?? configStyles.FILE.font.family,
       fontWeight: weight ?? configStyles.FILE.font.weight
     }
-  }, !multiple && image && preview ? image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : /*#__PURE__*/React__default.createElement("img", {
+  }, !multiple && image && preview ? image === 'svg' ? iconSvg ? iconSvg : configStyles.FILE.icon.svg ? configStyles.FILE.icon.svg : /*#__PURE__*/React__default.createElement(SvgSvg, null) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : /*#__PURE__*/React__default.createElement("img", {
     src: image,
     style: {
       display: 'block',
@@ -2386,7 +2451,7 @@ const File = /*#__PURE__*/forwardRef(({
     hoverColor: uploadBtnHoverColor ?? configStyles.FILE.uploadBtn.colors.hover,
     backgroundColor: uploadBtnBackgroundColor ?? configStyles.FILE.uploadBtn.colors.background,
     backgroundHoverColor: uploadBtnBackgroundColorHover ?? configStyles.FILE.uploadBtn.colors.backgroundHover
-  }) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : singleFile[0].type === 'image/jpeg' ? iconJpeg ? iconJpeg : configStyles.FILE.icon.jpeg ? configStyles.FILE.icon.jpeg : /*#__PURE__*/React__default.createElement(SvgListItemJpeg, null) : singleFile[0].type === 'image/png' ? iconPng ? iconPng : configStyles.FILE.icon.png ? configStyles.FILE.icon.png : /*#__PURE__*/React__default.createElement(SvgListItemPng, null) : singleFile[0].type === 'image/jpg' ? iconJpeg ? iconJpg : configStyles.FILE.icon.jpg ? configStyles.FILE.icon.jpg : /*#__PURE__*/React__default.createElement(SvgListItemJpg, null) : '' : /*#__PURE__*/React__default.createElement(Button, {
+  }) : image === 'svg' ? iconSvg ? iconSvg : configStyles.FILE.icon.svg ? configStyles.FILE.icon.svg : /*#__PURE__*/React__default.createElement(SvgSvg, null) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : singleFile[0].type === 'image/jpeg' ? iconJpeg ? iconJpeg : configStyles.FILE.icon.jpeg ? configStyles.FILE.icon.jpeg : /*#__PURE__*/React__default.createElement(SvgListItemJpeg, null) : singleFile[0].type === 'image/png' ? iconPng ? iconPng : configStyles.FILE.icon.png ? configStyles.FILE.icon.png : /*#__PURE__*/React__default.createElement(SvgListItemPng, null) : singleFile[0].type === 'image/jpg' ? iconJpeg ? iconJpg : configStyles.FILE.icon.jpg ? configStyles.FILE.icon.jpg : /*#__PURE__*/React__default.createElement(SvgListItemJpg, null) : '' : /*#__PURE__*/React__default.createElement(Button, {
     contentWidth: true,
     onClick: _ => _,
     font: uploadBtnFont ?? configStyles.FILE.uploadBtn.font.family,
@@ -2450,6 +2515,7 @@ const File = /*#__PURE__*/forwardRef(({
       status: item.status,
       size: item?.file?.size,
       name: item?.file?.name,
+      iconSvg: iconSvg ?? configStyles.FILE.icon.svg,
       iconPdf: iconPdf ?? configStyles.FILE.icon.pdf,
       iconDoc: iconDoc ?? configStyles.FILE.icon.doc,
       iconPng: iconPng ?? configStyles.FILE.icon.png,
@@ -2537,6 +2603,7 @@ File.propTypes = {
   progressColor: PropTypes.string,
   deleteComponent: PropTypes.bool,
   removeComponent: PropTypes.func,
+  iconSvg: PropTypes.element,
   iconPdf: PropTypes.element,
   iconDoc: PropTypes.element,
   iconPng: PropTypes.element,
@@ -2955,6 +3022,7 @@ const TD = ({
   handleCheckedBody,
   openListFontWeight,
   openListFontFamily,
+  handleClickOnRowTd,
   tableColumnMinWidth,
   tableColumnMaxWidth,
   handleBodyActionClick,
@@ -3045,7 +3113,8 @@ const TD = ({
       borderBottomLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
       borderTopRightRadius: rowItem && innerIndex === row.length - 1 ? rowRadius : '0px',
       borderBottomRightRadius: rowItem && innerIndex === row.length - 1 ? rowRadius : '0px'
-    }
+    },
+    onClick: e => handleClickOnRowTd(e, row, item, index, innerIndex)
   }, Array.isArray(item) ? item.length > 0 ? item.map((newItem, newIndex) => {
     if (newItem && !Array.isArray(newItem) && typeof newItem === 'object') {
       return /*#__PURE__*/React__default.createElement("span", {
@@ -3364,7 +3433,8 @@ const Table = ({
   tableBorderColor,
   collapseFullRow,
   openArrow,
-  closeArrow
+  closeArrow,
+  clickableRowColumnTd
 }) => {
   const itemRefs = useRef({});
   const headerRef = useRef(null);
@@ -3939,6 +4009,20 @@ const Table = ({
       return value;
     });
   };
+  const handleClickOnRowTd = (e, row, item, index, innerIndex) => {
+    e.stopPropagation();
+    if (clickableRowColumnTd) {
+      const actionData = {
+        from: 'body',
+        item,
+        id: item.id,
+        index,
+        row,
+        innerIndex
+      };
+      getData(actionData);
+    }
+  };
   useEffect(() => {
     if (checkDrag != null) {
       const draggableArray = body && body.length > 0 ? body.map((item, index) => {
@@ -4155,6 +4239,7 @@ const Table = ({
         openListFontWeight: openListFontWeight ?? configStyles.TABLE.openList.font.weight,
         openListFontFamily: openListFontFamily ?? configStyles.TABLE.openList.font.family,
         handleCheckedBody: handleCheckedBody,
+        handleClickOnRowTd: handleClickOnRowTd,
         handleBodyActionClick: handleBodyActionClick,
         handleMoreOptionsClick: handleMoreOptionsClick,
         handleContentListClick: handleContentListClick,
@@ -4272,7 +4357,8 @@ Table.propTypes = {
   tableBorder: PropTypes.string,
   tableBorderColor: PropTypes.string,
   openArrow: PropTypes.element,
-  closeArrow: PropTypes.element
+  closeArrow: PropTypes.element,
+  clickableRowColumnTd: PropTypes.bool
 };
 
 var css_248z$b = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
@@ -4397,9 +4483,12 @@ const Modal = ({
   prevIcon,
   nextIcon,
   closeIcon,
+  closeIconFix,
   showCloseIcon,
   closeIconClass,
   closeSlideIcon,
+  closeIconTopPosition,
+  closeIconRightPosition,
   selected,
   children,
   minWidth,
@@ -4586,6 +4675,7 @@ const Modal = ({
     }
   }, type === 'content' && /*#__PURE__*/React__default.createElement("div", {
     style: {
+      position: closeIconFix ? 'relative' : 'unset',
       width: '100%',
       minWidth: '0',
       display: 'flex',
@@ -4624,6 +4714,9 @@ const Modal = ({
   }, headerText), showCloseIcon ? /*#__PURE__*/React__default.createElement("div", {
     onClick: () => setShow(false),
     style: {
+      position: closeIconFix ? 'absolute' : 'unset',
+      top: closeIconTopPosition ?? configStyles.MODAL?.closeIcon?.top,
+      right: closeIconRightPosition ?? configStyles.MODAL?.closeIcon?.right,
       display: 'flex',
       minWidth: '14px',
       minHeight: '14px',
@@ -4631,7 +4724,7 @@ const Modal = ({
       width: 'fit-content',
       alignItems: 'center',
       alignSelf: 'flex-end',
-      height: '100%',
+      height: closeIconFix ? 'fit-content' : '100%',
       justifyContent: 'center'
     },
     className: closeIconClass ? closeIconClass : configStyles.MODAL.icon.className
@@ -4783,9 +4876,12 @@ Modal.propTypes = {
   prevIcon: PropTypes.element,
   nextIcon: PropTypes.element,
   closeIcon: PropTypes.element,
+  closeIconFix: PropTypes.bool,
   showCloseIcon: PropTypes.bool,
   closeIconClass: PropTypes.string,
   closeSlideIcon: PropTypes.element,
+  closeIconTopPosition: PropTypes.string,
+  closeIconRightPosition: PropTypes.string,
   headerText: PropTypes.string,
   headerSize: PropTypes.string,
   headerStyle: PropTypes.string,
@@ -7805,6 +7901,7 @@ Accordion.propTypes = {
   fontFamily: PropTypes.string
 };
 
+// import React from 'react';
 const Swipe = ({
   id,
   title,
@@ -7826,8 +7923,8 @@ const Swipe = ({
   } = props || {};
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
-      width: '100%',
-      height: '100%'
+      width: position === 'left' || position === 'right' ? width ?? SWIPEMODAL.width : '100%',
+      height: position === 'top' || position === 'bottom' ? height ?? SWIPEMODAL.height : '100vh'
     }
   }, (title || showCloseIcon) && /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -7886,6 +7983,7 @@ var css_248z$2 = ".swipe-module_to-top__lrHfG{bottom:0}.swipe-module_to-left__kg
 var styles$2 = {"to-top":"swipe-module_to-top__lrHfG","to-left":"swipe-module_to-left__kgLsE","to-right":"swipe-module_to-right__Xu3Ul","to-bottom":"swipe-module_to-bottom__94M7H","visible":"swipe-module_visible__---aC","swipe-block":"swipe-module_swipe-block__Yv1B3","move-top":"swipe-module_move-top__m6t2O","slideTop":"swipe-module_slideTop__-Bbap","move-left":"swipe-module_move-left__4TDLs","slideLeft":"swipe-module_slideLeft__i24cS","move-right":"swipe-module_move-right__FrYo0","slideRight":"swipe-module_slideRight__swgSY","move-bottom":"swipe-module_move-bottom__eYDx6","slideBottom":"swipe-module_slideBottom__TBoZo","back-top":"swipe-module_back-top__gJZv0","backTop":"swipe-module_backTop__32loc","back-left":"swipe-module_back-left__Wd3aY","backLeft":"swipe-module_backLeft__q89ub","back-right":"swipe-module_back-right__Lgwz7","backRight":"swipe-module_backRight__8t5Dm","back-bottom":"swipe-module_back-bottom__JRN-7","backBottom":"swipe-module_backBottom__lwR8B"};
 styleInject(css_248z$2);
 
+// import React, { useEffect, useRef } from 'react';
 let swipeCount = 0;
 const createElem = (id, title, child, props, swipeBlock, innerConfigStyles) => {
   const {
@@ -7896,11 +7994,11 @@ const createElem = (id, title, child, props, swipeBlock, innerConfigStyles) => {
     borderRadius,
     backgroundColor
   } = props || {};
-  swipeBlock.style.position = 'absolute';
+  swipeBlock.style.position = 'fixed';
   swipeBlock.style.zIndex = swipeCount;
   swipeBlock.style.backgroundColor = backgroundColor ?? innerConfigStyles.SWIPEMODAL.colors.background;
   swipeBlock.style.width = position === 'left' || position === 'right' ? width ?? innerConfigStyles.SWIPEMODAL.width : '100%';
-  swipeBlock.style.height = position === 'top' || position === 'bottom' ? height ?? innerConfigStyles.SWIPEMODAL.height : '100%';
+  swipeBlock.style.height = position === 'top' || position === 'bottom' ? height ?? innerConfigStyles.SWIPEMODAL.height : '100vh';
   swipeBlock.style.borderTopLeftRadius = position === 'right' || position === 'bottom' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
   swipeBlock.style.borderTopRightRadius = position === 'left' || position === 'bottom' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
   swipeBlock.style.borderBottomLeftRadius = position === 'right' || position === 'top' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
@@ -7934,25 +8032,26 @@ const createSwipe = (id, title, child, props, swipable) => {
     };
     createElem(id, title, child, props, swipeBlock, innerConfigStyles);
     if (!swipable) {
+      const widthParent = hasOwnerProperty(props, 'withParent') ? props.withParent === true ? true : false : innerConfigStyles.SWIPEMODAL.withParent;
       swipable = document.createElement('div');
       swipable.setAttribute('id', 'swipable');
-      swipable.style.position = 'absolute';
+      swipable.style.position = 'fixed';
       swipable.style.top = '0px';
       swipable.style.left = '0px';
       swipable.style.zIndex = 99999;
       swipable.style.maxWidth = '100%';
       swipable.style.maxHeight = '100vh';
-      swipable.style.width = '100%';
-      swipable.style.height = '100%';
+      swipable.style.visibility = 'hidden';
+      swipable.style.width = widthParent ? '100%' : '0px';
+      swipable.style.height = widthParent ? '100vh' : '0px';
       swipable.style.backgroundColor = props?.parent?.backgroundColor ?? innerConfigStyles.SWIPEMODAL.parent.colors.background;
+      swipable.classList.add(styles$2['visible']);
       if (props.outSideClose || innerConfigStyles.SWIPEMODAL.outSideClose) {
         swipable.addEventListener('click', function () {
           hasOwnerProperty(props, 'callClose') && {}.toString.call(props.callClose) === '[object Function]' ? props.callClose() : '';
         });
       }
-      const SwipifyBlock = document.getElementById('swipify_tui');
-      SwipifyBlock.style.display = 'block';
-      SwipifyBlock.appendChild(swipable);
+      document.body.appendChild(swipable);
     }
     swipable.appendChild(swipeBlock);
   }, error => {
@@ -8001,6 +8100,7 @@ const swipe = {
   close: id => {
     if (id === undefined || id === null && (typeof id !== 'string' || typeof id !== 'number')) {
       alert('Please pass valid id prop (string / number)  when call swipe.close function');
+      return;
     }
     let swipable = document.getElementById('swipable');
     swipeCount -= 1;
@@ -8015,9 +8115,7 @@ const swipe = {
           if (swipeCount === 0 && swipable) {
             window.removeEventListener('popstate', handleNavigationChange);
             window.removeEventListener('navigationchange', handleNavigationChange);
-            const SwipifyBlock = document.getElementById('swipify_tui');
-            SwipifyBlock.style.display = 'none';
-            SwipifyBlock.removeChild(swipable);
+            document.body.removeChild(swipable);
           }
         }, 200);
       } else {
@@ -8025,42 +8123,14 @@ const swipe = {
         if (swipeCount === 0 && swipable) {
           window.removeEventListener('popstate', handleNavigationChange);
           window.removeEventListener('navigationchange', handleNavigationChange);
-          const SwipifyBlock = document.getElementById('swipify_tui');
-          SwipifyBlock.style.display = 'none';
-          SwipifyBlock.removeChild(swipable);
+          document.body.removeChild(swipable);
         }
       }
-    } else {
-      if (swipeCount === 0 && swipable) {
-        const SwipifyBlock = document.getElementById('swipify_tui');
-        SwipifyBlock.style.display = 'none';
-        SwipifyBlock.removeChild(swipable);
-      }
     }
   }
 };
 const SwipeModal = () => {
-  const ref = useRef(null);
-  useEffect(() => {
-    const parentSize = ref.current.parentNode.style.height;
-    if (Number(parentSize.replace(/\D/g, '')) > 0) {
-      ref.current.style.height = '100%';
-    } else {
-      ref.current.style.height = '100vh';
-    }
-  }, [ref]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    ref: ref,
-    id: "swipify_tui",
-    style: {
-      position: 'absolute',
-      width: '100%',
-      top: 0,
-      overflow: 'hidden',
-      zIndex: 1,
-      display: 'none'
-    }
-  });
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
 
 const TypographyType = {

package/dist/index.js

@@ -185,6 +185,28 @@ const SvgDocIcon = ({
   d: "M5.922 23.8H3.859v-5.818h2.08q.878 0 1.511.35.633.346.975.996.343.651.343 1.557 0 .909-.343 1.563-.341.653-.98 1.003-.637.349-1.523.349m-.833-1.054h.782q.546 0 .917-.193.375-.196.563-.605.19-.413.19-1.063 0-.645-.19-1.054a1.23 1.23 0 0 0-.56-.602q-.372-.193-.918-.193H5.09zm9.937-1.855q0 .951-.36 1.62a2.5 2.5 0 0 1-.978 1.02q-.616.348-1.386.349-.776 0-1.392-.353a2.5 2.5 0 0 1-.975-1.02q-.357-.668-.358-1.616 0-.952.358-1.62.359-.667.975-1.017a2.76 2.76 0 0 1 1.392-.352q.77 0 1.386.352.62.35.977 1.018.36.667.361 1.619m-1.247 0q0-.617-.185-1.04a1.4 1.4 0 0 0-.514-.642 1.4 1.4 0 0 0-.778-.219q-.447 0-.779.22-.332.218-.517.641-.182.423-.182 1.04 0 .616.182 1.04.185.423.517.642.332.218.779.218.445 0 .778-.218.333-.219.514-.642.185-.425.185-1.04m7.292-.872h-1.245a1.2 1.2 0 0 0-.139-.43 1.1 1.1 0 0 0-.27-.323 1.2 1.2 0 0 0-.38-.205 1.5 1.5 0 0 0-.463-.07 1.4 1.4 0 0 0-.787.224 1.43 1.43 0 0 0-.52.648q-.185.423-.185 1.028 0 .622.185 1.045.188.423.523.64.335.215.775.215.247 0 .457-.065.215-.065.378-.19.165-.128.273-.31.11-.182.154-.415l1.244.006a2.323 2.323 0 0 1-.756 1.435 2.4 2.4 0 0 1-.767.46q-.443.168-1.003.168-.778 0-1.392-.353a2.5 2.5 0 0 1-.966-1.02q-.352-.668-.352-1.616 0-.952.358-1.62.358-.667.972-1.017.614-.352 1.38-.352.506 0 .938.142.434.142.77.415.335.27.545.662.213.391.273.898"
 }));
 
+const SvgListItemSvg = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "28",
+  height: "36",
+  viewBox: "0 0 28 36",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M27.39 9.078v16.043a1.213 1.213 0 0 1 .61 1.05v6.778A3.05 3.05 0 0 1 24.957 36H3.043A3.051 3.051 0 0 1 0 32.95v-8.872a1.22 1.22 0 0 1 .61-1.05V2.44c0-.648.257-1.27.71-1.726A2.44 2.44 0 0 1 3.043 0h15.293ZM8.759 27.871q-.585 0-1.043.203c-.309.133-.547.32-.723.559a1.35 1.35 0 0 0-.258.84c-.004.39.13.699.387.93q.393.346 1.066.511l.586.145c.192.046.36.097.493.152a.9.9 0 0 1 .308.207q.105.125.106.3 0 .19-.117.337a.73.73 0 0 1-.333.23 1.4 1.4 0 0 1-.496.082q-.292.001-.527-.086a.9.9 0 0 1-.367-.265.8.8 0 0 1-.152-.446H6.594q.013.573.277.957.271.388.746.582.48.198 1.13.196.65 0 1.112-.192.464-.2.711-.55c.164-.239.25-.52.25-.844a1.331 1.331 0 0 0-.453-1.027 2.1 2.1 0 0 0-.508-.32 3.3 3.3 0 0 0-.64-.204l-.48-.113a3 3 0 0 1-.329-.094 1.4 1.4 0 0 1-.273-.133.6.6 0 0 1-.184-.183.43.43 0 0 1-.062-.247q.001-.17.101-.304a.65.65 0 0 1 .293-.211q.188-.077.465-.078.41 0 .645.175a.64.64 0 0 1 .27.485h1.081a1.47 1.47 0 0 0-.254-.832 1.63 1.63 0 0 0-.695-.559c-.297-.137-.64-.203-1.04-.203m10.426 0q-.528.001-.985.184-.451.181-.793.535a2.45 2.45 0 0 0-.535.855 3.3 3.3 0 0 0-.187 1.149c0 .554.105 1.039.316 1.445q.317.603.887.938.57.328 1.32.328.675 0 1.195-.27.522-.27.82-.77.299-.502.298-1.199v-.664h-2.235v.84h1.145q-.005.316-.145.555a.95.95 0 0 1-.418.383 1.45 1.45 0 0 1-.652.136c-.285 0-.527-.07-.735-.203a1.3 1.3 0 0 1-.48-.59 2.4 2.4 0 0 1-.172-.941q.001-.552.172-.934.175-.386.48-.585c.207-.133.45-.204.723-.204q.217.001.399.055c.12.035.23.09.324.156a1.05 1.05 0 0 1 .394.582h1.149a1.9 1.9 0 0 0-.246-.715 2 2 0 0 0-.5-.566c-.2-.16-.434-.281-.692-.367a2.6 2.6 0 0 0-.847-.133m-6.047 5.36h1.457l1.844-5.286h-1.254l-1.297 4.016h-.047l-1.293-4.016h-1.258ZM3.043 1.218c-.324 0-.633.129-.86.36-.23.226-.359.538-.359.862V22.86h8.633c.352 0 .684.153.918.418l1.46 1.676h13.337V9.938H19.91A2.436 2.436 0 0 1 17.476 7.5V1.218Zm7.738 9.164c.078 0 .137.062.137.14v.313h5.46v-.313a.14.14 0 0 1 .142-.14h1.539a.14.14 0 0 1 .14.14v1.524a.14.14 0 0 1-.14.137h-.313v5.402h.313c.078 0 .14.059.14.137v1.523a.137.137 0 0 1-.14.137h-1.54a.137.137 0 0 1-.14-.137v-.312h-5.461v.312a.134.134 0 0 1-.137.137H9.238a.136.136 0 0 1-.136-.137v-1.523c0-.078.062-.137.136-.137h.317v-5.402h-.317a.14.14 0 0 1-.136-.137v-1.524a.14.14 0 0 1 .136-.14Zm.137 1.664a.14.14 0 0 1-.137.137h-.316v5.402h.316c.074 0 .137.062.137.137v.312h5.46v-.312a.14.14 0 0 1 .142-.137h.316v-5.402h-.316a.14.14 0 0 1-.141-.137v-.313h-5.461Zm0 0",
+  style: {
+    stroke: 'none',
+    fillRule: 'nonzero',
+    fill: '#00236a',
+    fillOpacity: 1
+  }
+}));
+
 const SvgListItemPdf = ({
   title,
   titleId,
@@ -297,6 +319,7 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
   radius,
   status,
   iconDoc,
+  iconSvg,
   iconPdf,
   iconPng,
   iconJpg,
@@ -440,7 +463,7 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
     style: {
       width: '32px'
     }
-  }, fileFormat === 'pdf' ? iconPdf ? iconPdf : /*#__PURE__*/React__default["default"].createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? iconJpg ? iconJpg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpg, null) : fileFormat === 'png' ? iconPng ? iconPng : /*#__PURE__*/React__default["default"].createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? iconJpeg ? iconJpeg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? iconHeic ? iconHeic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : fileFormat === 'msword' ? iconDoc ? iconDoc : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : fileFormat === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ? iconDocx ? iconDocx : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, fileFormat === 'svg+xml' ? iconSvg ? iconSvg : /*#__PURE__*/React__default["default"].createElement(SvgListItemSvg, null) : fileFormat === 'pdf' ? iconPdf ? iconPdf : /*#__PURE__*/React__default["default"].createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? iconJpg ? iconJpg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpg, null) : fileFormat === 'png' ? iconPng ? iconPng : /*#__PURE__*/React__default["default"].createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? iconJpeg ? iconJpeg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? iconHeic ? iconHeic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : fileFormat === 'msword' ? iconDoc ? iconDoc : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : fileFormat === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ? iconDocx ? iconDocx : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'relative',
       display: 'flex',
@@ -1176,6 +1199,10 @@ var packageResult = {
       wrapWidth: '100%',
       wrapHeight: '100%'
     },
+    closeIcon: {
+      top: '24px',
+      right: '24px'
+    },
     icon: {
       className: 'tui_close-modal-icon'
       // zoom: React.createElement(SvgChecked, { fill: 'green' }),      
@@ -1612,6 +1639,24 @@ Button.propTypes = {
   withoutStylingHoverColor: PropTypes__default["default"].string
 };
 
+const SvgSvg = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 40 52",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  fill: "#00236A",
+  d: "M39.13 13.11v23.175a1.772 1.772 0 0 1 .87 1.518v9.79a4.45 4.45 0 0 1-1.274 3.115A4.33 4.33 0 0 1 35.652 52H4.348a4.33 4.33 0 0 1-3.074-1.292A4.45 4.45 0 0 1 0 47.593V34.78a1.77 1.77 0 0 1 .87-1.517V3.525c0-.934.367-1.831 1.019-2.493A3.46 3.46 0 0 1 4.348 0h21.847zM12.514 40.26q-.836 0-1.492.29a2.5 2.5 0 0 0-1.033.81q-.372.519-.369 1.212-.003.846.556 1.346t1.524.734l.832.21q.417.1.704.223.291.123.44.299a.64.64 0 0 1 .154.432.77.77 0 0 1-.168.489q-.168.212-.473.332-.303.12-.712.119a2.1 2.1 0 0 1-.75-.127 1.2 1.2 0 0 1-.526-.384 1.17 1.17 0 0 1-.22-.642H9.418q.018.824.398 1.383.384.556 1.067.84.686.284 1.611.283.932 0 1.592-.28.663-.283 1.015-.794.353-.514.357-1.216-.003-.477-.175-.845a1.9 1.9 0 0 0-.473-.642 2.8 2.8 0 0 0-.724-.459 5 5 0 0 0-.917-.298l-.687-.164a4 4 0 0 1-.47-.135 2 2 0 0 1-.387-.19.9.9 0 0 1-.265-.264.63.63 0 0 1-.086-.358q0-.246.142-.44a.94.94 0 0 1 .418-.302q.272-.112.667-.112.582 0 .92.25.34.25.386.7h1.547a2.14 2.14 0 0 0-.366-1.2 2.35 2.35 0 0 0-.992-.81q-.633-.29-1.483-.29m14.893 0q-.756 0-1.406.265a3.3 3.3 0 0 0-1.137.772 3.5 3.5 0 0 0-.76 1.238q-.27.727-.269 1.656 0 1.207.451 2.087a3.3 3.3 0 0 0 1.268 1.354q.813.474 1.886.474.962 0 1.709-.388a2.9 2.9 0 0 0 1.17-1.111q.425-.724.425-1.731v-.962h-3.195v1.216h1.638a1.6 1.6 0 0 1-.206.798 1.4 1.4 0 0 1-.597.555q-.388.195-.936.195a1.87 1.87 0 0 1-1.048-.291q-.443-.296-.686-.855-.242-.56-.242-1.356 0-.799.246-1.35.246-.556.685-.847.445-.29 1.03-.29.313 0 .57.078a1.49 1.49 0 0 1 1.03 1.066h1.64a2.8 2.8 0 0 0-.354-1.036 2.9 2.9 0 0 0-.713-.818 3.2 3.2 0 0 0-.99-.529 3.7 3.7 0 0 0-1.209-.19M18.766 48h2.08l2.634-7.637h-1.79l-1.85 5.802h-.07l-1.846-5.802H16.13zM4.349 1.762a1.73 1.73 0 0 0-1.23.516c-.327.33-.51.78-.51 1.246V33.02H14.94c.5 0 .978.219 1.308.601l2.087 2.421h19.056V14.356h-8.949c-.922 0-1.806-.37-2.459-1.032a3.55 3.55 0 0 1-1.018-2.493v-9.07zM15.4 15c.11 0 .2.09.2.2v.45h7.8v-.45a.2.2 0 0 1 .2-.2h2.2c.11 0 .2.09.2.2v2.2a.2.2 0 0 1-.2.2h-.45v7.8h.45a.2.2 0 0 1 .2.2v2.2a.2.2 0 0 1-.2.2h-2.2a.2.2 0 0 1-.2-.2v-.45h-7.8v.45a.2.2 0 0 1-.2.2h-2.2a.2.2 0 0 1-.2-.2v-2.2c0-.11.09-.2.2-.2h.45v-7.8h-.45a.2.2 0 0 1-.2-.2v-2.2c0-.11.09-.2.2-.2zm.2 2.4a.2.2 0 0 1-.2.2h-.45v7.8h.45a.2.2 0 0 1 .2.2v.45h7.8v-.45a.2.2 0 0 1 .2-.2h.45v-7.8h-.45a.2.2 0 0 1-.2-.2v-.45h-7.8z"
+}));
+
 const SvgPdf = ({
   title,
   titleId,
@@ -1808,6 +1853,7 @@ const File = /*#__PURE__*/React.forwardRef(({
   maxSizeError,
   progressColor,
   noChoosenFile,
+  iconSvg,
   iconPdf,
   iconDoc,
   iconPng,
@@ -1922,7 +1968,7 @@ const File = /*#__PURE__*/React.forwardRef(({
         for (let ix = 0; ix < file.length; ix++) {
           if (file[ix]) {
             if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-              if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword')) {
+              if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword') || fileExtensions.includes('svg') && file[ix].type.split('/')[1] === 'svg+xml') {
                 if (file[ix].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
                   change({
                     id: '',
@@ -1958,6 +2004,15 @@ const File = /*#__PURE__*/React.forwardRef(({
                       check: formatError ?? configStyles.FILE.error.format
                     });
                   });
+                } else if (file[ix].type === 'image/svg+xml') {
+                  change({
+                    id: '',
+                    check: '',
+                    status: '',
+                    file: file[ix],
+                    uuid: v4()
+                  });
+                  setImage('svg');
                 } else {
                   change({
                     id: '',
@@ -1988,7 +2043,7 @@ const File = /*#__PURE__*/React.forwardRef(({
       for (let ix = 0; ix < file.length; ix++) {
         if (file[ix]) {
           if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-            if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword')) {
+            if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword') || fileExtensions.includes('svg') && file[ix].type.split('/')[1] === 'svg+xml') {
               if (file[ix].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
                 change({
                   id: '',
@@ -2024,6 +2079,15 @@ const File = /*#__PURE__*/React.forwardRef(({
                     check: formatError ?? configStyles.FILE.error.format
                   });
                 });
+              } else if (file[ix].type === 'image/svg+xml') {
+                change({
+                  id: '',
+                  check: '',
+                  status: '',
+                  file: file[ix],
+                  uuid: v4()
+                });
+                setImage('svg');
               } else {
                 change({
                   id: '',
@@ -2063,7 +2127,7 @@ const File = /*#__PURE__*/React.forwardRef(({
     } else {
       if (file[0]) {
         if (file[0].size <= maxSize * Math.pow(2, 20)) {
-          if (fileExtensions.includes(file[0].type.split('/')[1]) || (fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[0].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[0].type.split('/')[1] === 'msword')) {
+          if (fileExtensions.includes(file[0].type.split('/')[1]) || (fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[0].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[0].type.split('/')[1] === 'msword') || fileExtensions.includes('svg') && file[0].type.split('/')[1] === 'svg+xml') {
             setError('');
             if (file[0].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
               setImage('docx');
@@ -2107,7 +2171,7 @@ const File = /*#__PURE__*/React.forwardRef(({
     }
   };
   const handleClick = () => {
-    if (!image && !singleFile) {
+    if (!image && !singleFile || multiple) {
       inpRef.current.files = null;
       inpRef.current.value = null;
       inpRef.current.click();
@@ -2282,6 +2346,7 @@ const File = /*#__PURE__*/React.forwardRef(({
       }
     };
   }, []);
+  console.log(image, ' - - - -image');
   return configStyles.FILE && /*#__PURE__*/React__default["default"].createElement("div", {
     ref: parentlRef,
     style: {
@@ -2366,7 +2431,7 @@ const File = /*#__PURE__*/React.forwardRef(({
       fontFamily: family ?? configStyles.FILE.font.family,
       fontWeight: weight ?? configStyles.FILE.font.weight
     }
-  }, !multiple && image && preview ? image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : /*#__PURE__*/React__default["default"].createElement("img", {
+  }, !multiple && image && preview ? image === 'svg' ? iconSvg ? iconSvg : configStyles.FILE.icon.svg ? configStyles.FILE.icon.svg : /*#__PURE__*/React__default["default"].createElement(SvgSvg, null) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : /*#__PURE__*/React__default["default"].createElement("img", {
     src: image,
     style: {
       display: 'block',
@@ -2417,7 +2482,7 @@ const File = /*#__PURE__*/React.forwardRef(({
     hoverColor: uploadBtnHoverColor ?? configStyles.FILE.uploadBtn.colors.hover,
     backgroundColor: uploadBtnBackgroundColor ?? configStyles.FILE.uploadBtn.colors.background,
     backgroundHoverColor: uploadBtnBackgroundColorHover ?? configStyles.FILE.uploadBtn.colors.backgroundHover
-  }) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : singleFile[0].type === 'image/jpeg' ? iconJpeg ? iconJpeg : configStyles.FILE.icon.jpeg ? configStyles.FILE.icon.jpeg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpeg, null) : singleFile[0].type === 'image/png' ? iconPng ? iconPng : configStyles.FILE.icon.png ? configStyles.FILE.icon.png : /*#__PURE__*/React__default["default"].createElement(SvgListItemPng, null) : singleFile[0].type === 'image/jpg' ? iconJpeg ? iconJpg : configStyles.FILE.icon.jpg ? configStyles.FILE.icon.jpg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpg, null) : '' : /*#__PURE__*/React__default["default"].createElement(Button, {
+  }) : image === 'svg' ? iconSvg ? iconSvg : configStyles.FILE.icon.svg ? configStyles.FILE.icon.svg : /*#__PURE__*/React__default["default"].createElement(SvgSvg, null) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : singleFile[0].type === 'image/jpeg' ? iconJpeg ? iconJpeg : configStyles.FILE.icon.jpeg ? configStyles.FILE.icon.jpeg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpeg, null) : singleFile[0].type === 'image/png' ? iconPng ? iconPng : configStyles.FILE.icon.png ? configStyles.FILE.icon.png : /*#__PURE__*/React__default["default"].createElement(SvgListItemPng, null) : singleFile[0].type === 'image/jpg' ? iconJpeg ? iconJpg : configStyles.FILE.icon.jpg ? configStyles.FILE.icon.jpg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpg, null) : '' : /*#__PURE__*/React__default["default"].createElement(Button, {
     contentWidth: true,
     onClick: _ => _,
     font: uploadBtnFont ?? configStyles.FILE.uploadBtn.font.family,
@@ -2481,6 +2546,7 @@ const File = /*#__PURE__*/React.forwardRef(({
       status: item.status,
       size: item?.file?.size,
       name: item?.file?.name,
+      iconSvg: iconSvg ?? configStyles.FILE.icon.svg,
       iconPdf: iconPdf ?? configStyles.FILE.icon.pdf,
       iconDoc: iconDoc ?? configStyles.FILE.icon.doc,
       iconPng: iconPng ?? configStyles.FILE.icon.png,
@@ -2568,6 +2634,7 @@ File.propTypes = {
   progressColor: PropTypes__default["default"].string,
   deleteComponent: PropTypes__default["default"].bool,
   removeComponent: PropTypes__default["default"].func,
+  iconSvg: PropTypes__default["default"].element,
   iconPdf: PropTypes__default["default"].element,
   iconDoc: PropTypes__default["default"].element,
   iconPng: PropTypes__default["default"].element,
@@ -2986,6 +3053,7 @@ const TD = ({
   handleCheckedBody,
   openListFontWeight,
   openListFontFamily,
+  handleClickOnRowTd,
   tableColumnMinWidth,
   tableColumnMaxWidth,
   handleBodyActionClick,
@@ -3076,7 +3144,8 @@ const TD = ({
       borderBottomLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
       borderTopRightRadius: rowItem && innerIndex === row.length - 1 ? rowRadius : '0px',
       borderBottomRightRadius: rowItem && innerIndex === row.length - 1 ? rowRadius : '0px'
-    }
+    },
+    onClick: e => handleClickOnRowTd(e, row, item, index, innerIndex)
   }, Array.isArray(item) ? item.length > 0 ? item.map((newItem, newIndex) => {
     if (newItem && !Array.isArray(newItem) && typeof newItem === 'object') {
       return /*#__PURE__*/React__default["default"].createElement("span", {
@@ -3395,7 +3464,8 @@ const Table = ({
   tableBorderColor,
   collapseFullRow,
   openArrow,
-  closeArrow
+  closeArrow,
+  clickableRowColumnTd
 }) => {
   const itemRefs = React.useRef({});
   const headerRef = React.useRef(null);
@@ -3970,6 +4040,20 @@ const Table = ({
       return value;
     });
   };
+  const handleClickOnRowTd = (e, row, item, index, innerIndex) => {
+    e.stopPropagation();
+    if (clickableRowColumnTd) {
+      const actionData = {
+        from: 'body',
+        item,
+        id: item.id,
+        index,
+        row,
+        innerIndex
+      };
+      getData(actionData);
+    }
+  };
   React.useEffect(() => {
     if (checkDrag != null) {
       const draggableArray = body && body.length > 0 ? body.map((item, index) => {
@@ -4186,6 +4270,7 @@ const Table = ({
         openListFontWeight: openListFontWeight ?? configStyles.TABLE.openList.font.weight,
         openListFontFamily: openListFontFamily ?? configStyles.TABLE.openList.font.family,
         handleCheckedBody: handleCheckedBody,
+        handleClickOnRowTd: handleClickOnRowTd,
         handleBodyActionClick: handleBodyActionClick,
         handleMoreOptionsClick: handleMoreOptionsClick,
         handleContentListClick: handleContentListClick,
@@ -4303,7 +4388,8 @@ Table.propTypes = {
   tableBorder: PropTypes__default["default"].string,
   tableBorderColor: PropTypes__default["default"].string,
   openArrow: PropTypes__default["default"].element,
-  closeArrow: PropTypes__default["default"].element
+  closeArrow: PropTypes__default["default"].element,
+  clickableRowColumnTd: PropTypes__default["default"].bool
 };
 
 var css_248z$b = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
@@ -4428,9 +4514,12 @@ const Modal = ({
   prevIcon,
   nextIcon,
   closeIcon,
+  closeIconFix,
   showCloseIcon,
   closeIconClass,
   closeSlideIcon,
+  closeIconTopPosition,
+  closeIconRightPosition,
   selected,
   children,
   minWidth,
@@ -4617,6 +4706,7 @@ const Modal = ({
     }
   }, type === 'content' && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
+      position: closeIconFix ? 'relative' : 'unset',
       width: '100%',
       minWidth: '0',
       display: 'flex',
@@ -4655,6 +4745,9 @@ const Modal = ({
   }, headerText), showCloseIcon ? /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: () => setShow(false),
     style: {
+      position: closeIconFix ? 'absolute' : 'unset',
+      top: closeIconTopPosition ?? configStyles.MODAL?.closeIcon?.top,
+      right: closeIconRightPosition ?? configStyles.MODAL?.closeIcon?.right,
       display: 'flex',
       minWidth: '14px',
       minHeight: '14px',
@@ -4662,7 +4755,7 @@ const Modal = ({
       width: 'fit-content',
       alignItems: 'center',
       alignSelf: 'flex-end',
-      height: '100%',
+      height: closeIconFix ? 'fit-content' : '100%',
       justifyContent: 'center'
     },
     className: closeIconClass ? closeIconClass : configStyles.MODAL.icon.className
@@ -4814,9 +4907,12 @@ Modal.propTypes = {
   prevIcon: PropTypes__default["default"].element,
   nextIcon: PropTypes__default["default"].element,
   closeIcon: PropTypes__default["default"].element,
+  closeIconFix: PropTypes__default["default"].bool,
   showCloseIcon: PropTypes__default["default"].bool,
   closeIconClass: PropTypes__default["default"].string,
   closeSlideIcon: PropTypes__default["default"].element,
+  closeIconTopPosition: PropTypes__default["default"].string,
+  closeIconRightPosition: PropTypes__default["default"].string,
   headerText: PropTypes__default["default"].string,
   headerSize: PropTypes__default["default"].string,
   headerStyle: PropTypes__default["default"].string,
@@ -7836,6 +7932,7 @@ Accordion.propTypes = {
   fontFamily: PropTypes__default["default"].string
 };
 
+// import React from 'react';
 const Swipe = ({
   id,
   title,
@@ -7857,8 +7954,8 @@ const Swipe = ({
   } = props || {};
   return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      width: '100%',
-      height: '100%'
+      width: position === 'left' || position === 'right' ? width ?? SWIPEMODAL.width : '100%',
+      height: position === 'top' || position === 'bottom' ? height ?? SWIPEMODAL.height : '100vh'
     }
   }, (title || showCloseIcon) && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -7917,6 +8014,7 @@ var css_248z$2 = ".swipe-module_to-top__lrHfG{bottom:0}.swipe-module_to-left__kg
 var styles$2 = {"to-top":"swipe-module_to-top__lrHfG","to-left":"swipe-module_to-left__kgLsE","to-right":"swipe-module_to-right__Xu3Ul","to-bottom":"swipe-module_to-bottom__94M7H","visible":"swipe-module_visible__---aC","swipe-block":"swipe-module_swipe-block__Yv1B3","move-top":"swipe-module_move-top__m6t2O","slideTop":"swipe-module_slideTop__-Bbap","move-left":"swipe-module_move-left__4TDLs","slideLeft":"swipe-module_slideLeft__i24cS","move-right":"swipe-module_move-right__FrYo0","slideRight":"swipe-module_slideRight__swgSY","move-bottom":"swipe-module_move-bottom__eYDx6","slideBottom":"swipe-module_slideBottom__TBoZo","back-top":"swipe-module_back-top__gJZv0","backTop":"swipe-module_backTop__32loc","back-left":"swipe-module_back-left__Wd3aY","backLeft":"swipe-module_backLeft__q89ub","back-right":"swipe-module_back-right__Lgwz7","backRight":"swipe-module_backRight__8t5Dm","back-bottom":"swipe-module_back-bottom__JRN-7","backBottom":"swipe-module_backBottom__lwR8B"};
 styleInject(css_248z$2);
 
+// import React, { useEffect, useRef } from 'react';
 let swipeCount = 0;
 const createElem = (id, title, child, props, swipeBlock, innerConfigStyles) => {
   const {
@@ -7927,11 +8025,11 @@ const createElem = (id, title, child, props, swipeBlock, innerConfigStyles) => {
     borderRadius,
     backgroundColor
   } = props || {};
-  swipeBlock.style.position = 'absolute';
+  swipeBlock.style.position = 'fixed';
   swipeBlock.style.zIndex = swipeCount;
   swipeBlock.style.backgroundColor = backgroundColor ?? innerConfigStyles.SWIPEMODAL.colors.background;
   swipeBlock.style.width = position === 'left' || position === 'right' ? width ?? innerConfigStyles.SWIPEMODAL.width : '100%';
-  swipeBlock.style.height = position === 'top' || position === 'bottom' ? height ?? innerConfigStyles.SWIPEMODAL.height : '100%';
+  swipeBlock.style.height = position === 'top' || position === 'bottom' ? height ?? innerConfigStyles.SWIPEMODAL.height : '100vh';
   swipeBlock.style.borderTopLeftRadius = position === 'right' || position === 'bottom' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
   swipeBlock.style.borderTopRightRadius = position === 'left' || position === 'bottom' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
   swipeBlock.style.borderBottomLeftRadius = position === 'right' || position === 'top' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
@@ -7965,25 +8063,26 @@ const createSwipe = (id, title, child, props, swipable) => {
     };
     createElem(id, title, child, props, swipeBlock, innerConfigStyles);
     if (!swipable) {
+      const widthParent = hasOwnerProperty(props, 'withParent') ? props.withParent === true ? true : false : innerConfigStyles.SWIPEMODAL.withParent;
       swipable = document.createElement('div');
       swipable.setAttribute('id', 'swipable');
-      swipable.style.position = 'absolute';
+      swipable.style.position = 'fixed';
       swipable.style.top = '0px';
       swipable.style.left = '0px';
       swipable.style.zIndex = 99999;
       swipable.style.maxWidth = '100%';
       swipable.style.maxHeight = '100vh';
-      swipable.style.width = '100%';
-      swipable.style.height = '100%';
+      swipable.style.visibility = 'hidden';
+      swipable.style.width = widthParent ? '100%' : '0px';
+      swipable.style.height = widthParent ? '100vh' : '0px';
       swipable.style.backgroundColor = props?.parent?.backgroundColor ?? innerConfigStyles.SWIPEMODAL.parent.colors.background;
+      swipable.classList.add(styles$2['visible']);
       if (props.outSideClose || innerConfigStyles.SWIPEMODAL.outSideClose) {
         swipable.addEventListener('click', function () {
           hasOwnerProperty(props, 'callClose') && {}.toString.call(props.callClose) === '[object Function]' ? props.callClose() : '';
         });
       }
-      const SwipifyBlock = document.getElementById('swipify_tui');
-      SwipifyBlock.style.display = 'block';
-      SwipifyBlock.appendChild(swipable);
+      document.body.appendChild(swipable);
     }
     swipable.appendChild(swipeBlock);
   }, error => {
@@ -8032,6 +8131,7 @@ const swipe = {
   close: id => {
     if (id === undefined || id === null && (typeof id !== 'string' || typeof id !== 'number')) {
       alert('Please pass valid id prop (string / number)  when call swipe.close function');
+      return;
     }
     let swipable = document.getElementById('swipable');
     swipeCount -= 1;
@@ -8046,9 +8146,7 @@ const swipe = {
           if (swipeCount === 0 && swipable) {
             window.removeEventListener('popstate', handleNavigationChange);
             window.removeEventListener('navigationchange', handleNavigationChange);
-            const SwipifyBlock = document.getElementById('swipify_tui');
-            SwipifyBlock.style.display = 'none';
-            SwipifyBlock.removeChild(swipable);
+            document.body.removeChild(swipable);
           }
         }, 200);
       } else {
@@ -8056,42 +8154,14 @@ const swipe = {
         if (swipeCount === 0 && swipable) {
           window.removeEventListener('popstate', handleNavigationChange);
           window.removeEventListener('navigationchange', handleNavigationChange);
-          const SwipifyBlock = document.getElementById('swipify_tui');
-          SwipifyBlock.style.display = 'none';
-          SwipifyBlock.removeChild(swipable);
+          document.body.removeChild(swipable);
         }
       }
-    } else {
-      if (swipeCount === 0 && swipable) {
-        const SwipifyBlock = document.getElementById('swipify_tui');
-        SwipifyBlock.style.display = 'none';
-        SwipifyBlock.removeChild(swipable);
-      }
     }
   }
 };
 const SwipeModal = () => {
-  const ref = React.useRef(null);
-  React.useEffect(() => {
-    const parentSize = ref.current.parentNode.style.height;
-    if (Number(parentSize.replace(/\D/g, '')) > 0) {
-      ref.current.style.height = '100%';
-    } else {
-      ref.current.style.height = '100vh';
-    }
-  }, [ref]);
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: ref,
-    id: "swipify_tui",
-    style: {
-      position: 'absolute',
-      width: '100%',
-      top: 0,
-      overflow: 'hidden',
-      zIndex: 1,
-      display: 'none'
-    }
-  });
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
 };
 
 const TypographyType = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.2.23",
+  "version": "0.2.24",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/tui.config.js

@@ -729,6 +729,11 @@ export default {
             wrapHeight: '100%',
         },
 
+        closeIcon: {
+            top: '24px',
+            right: '24px'
+        },
+
         icon: {
             className: 'tui_close-modal-icon'
             // zoom: React.createElement(SvgChecked, { fill: 'green' }),