@xaypay/tui 0.0.121 → 0.0.123

package/dist/index.es.js

@@ -782,14 +782,14 @@ const File = ({
                 change({
                   file: file[ix],
                   uuid: v4(),
-                  check: formatError
+                  check: formatError ? formatError : configStyles.FILE.formatError
                 });
               }
             } else {
               change({
                 file: file[ix],
                 uuid: v4(),
-                check: maxSizeError
+                check: maxSizeError ? maxSizeError : configStyles.FILE.maxSizeError
               });
             }
           }
@@ -811,14 +811,14 @@ const File = ({
               change({
                 file: file[ix],
                 uuid: v4(),
-                check: formatError
+                check: formatError ? formatError : configStyles.FILE.formatError
               });
             }
           } else {
             change({
               file: file[ix],
               uuid: v4(),
-              check: maxSizeError
+              check: maxSizeError ? maxSizeError : configStyles.FILE.maxSizeError
             });
           }
         }
@@ -832,7 +832,7 @@ const File = ({
       setImage(null);
       handleUploadFiles(file);
       if (file.length === 0 && memoizedItems.length === 0) {
-        setError(noChoosenFile);
+        setError(noChoosenFile ? noChoosenFile : configStyles.FILE.noChoosenFile);
       }
     } else {
       if (file[0]) {
@@ -850,16 +850,16 @@ const File = ({
             }
           } else {
             setImage(null);
-            setError(formatError);
+            setError(formatError ? formatError : configStyles.FILE.formatError);
           }
         } else {
           setImage(null);
-          setError(maxSizeError);
+          setError(maxSizeError ? maxSizeError : configStyles.FILE.maxSizeError);
         }
       }
       if (file.length === 0) {
         setImage(null);
-        setError(noChoosenFile);
+        setError(noChoosenFile ? noChoosenFile : configStyles.FILE.noChoosenFile);
       }
     }
   };
@@ -2492,13 +2492,14 @@ const Modal = ({
   outsideClose,
   headerWeight,
   headerHeight,
-  imageMaxWidth,
+  // imageMaxWidth,
   justifyContent,
-  imageWrapWidth,
+  // imageWrapWidth,
   backgroundColor,
   imageWrapHeight,
   grayDecorHeight,
-  layerBackgroundColor
+  layerBackgroundColor,
+  closeAreaBackgroundColor
 }) => {
   const [select, setSelect] = useState(0);
   const [isHover, setIsHover] = useState(false);
@@ -2668,7 +2669,7 @@ const Modal = ({
       borderTopLeftRadius: '6px',
       borderTopRightRadius: '6px',
       height: grayDecorHeight ? grayDecorHeight : configStyles.MODAL.grayDecorHeight,
-      backgroundImage: 'linear-gradient(rgb(60, 57, 62), rgba(60, 57, 62, 0))'
+      background: closeAreaBackgroundColor ? closeAreaBackgroundColor : configStyles.MODAL.closeAreaBackgroundColor
     }
   }, /*#__PURE__*/React__default.createElement("button", {
     onClick: handleCloseModal,
@@ -2687,7 +2688,6 @@ const Modal = ({
     }
   }, /*#__PURE__*/React__default.createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default.createElement("div", {
     style: {
-      width: imageWrapWidth ? imageWrapWidth : configStyles.MODAL.imageWrapWidth,
       height: imageWrapHeight ? imageWrapHeight : configStyles.MODAL.imageWrapHeight
     }
   }, innerData && innerData.length > 0 && innerData.map((item, index) => {
@@ -2700,13 +2700,12 @@ const Modal = ({
         }, /*#__PURE__*/React__default.createElement("img", {
           style: {
             display: 'block',
-            objectFit: 'cover',
-            objectPosition: 'center',
+            objectFit: 'contain',
             margin: imageMargin ? imageMargin : configStyles.MODAL.imageMargin,
             borderRadius: radius ? radius : configStyles.MODAL.radius,
             width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
-            height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight,
-            maxWidth: imageMaxWidth ? imageMaxWidth : configStyles.MODAL.imageMaxWidth
+            height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
+            // maxWidth: '100%'
           },
           src: item.url
         }), isHover && showZoomIcon ? /*#__PURE__*/React__default.createElement("div", {
@@ -2794,7 +2793,8 @@ Modal.propTypes = {
   backgroundColor: PropTypes.string,
   grayDecorHeight: PropTypes.string,
   imageWrapHeight: PropTypes.string,
-  layerBackgroundColor: PropTypes.string
+  layerBackgroundColor: PropTypes.string,
+  closeAreaBackgroundColor: PropTypes.string
 };
 Modal.defaultProps = {
   type: 'content'
@@ -2877,6 +2877,7 @@ const Input = ({
   const [show, setShow] = useState(false);
   const [isHover, setIsHover] = useState(false);
   const [innerValue, setInnerValue] = useState('');
+  const [innerMinNumSize, setInnerMinNumSize] = useState(0);
   const [innerErrorMessage, setInnerErrorMessage] = useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
@@ -2912,60 +2913,60 @@ const Input = ({
     }
     return val;
   };
-  const handleCheckTypeNumber = val => {
+  const handleCheckTypeNumber = (val, prevVal) => {
     if (type === 'number') {
-      const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
-      if (val.length > 16) {
-        val = val.substr(0, 16);
-      }
-      if (val > Number.MAX_SAFE_INTEGER) {
-        val = Number.MAX_SAFE_INTEGER;
-      }
-      if (val < Number.MIN_SAFE_INTEGER) {
-        val = Number.MIN_SAFE_INTEGER;
-      }
-      if (minNumSize && val < minNumSize) {
-        val = minNumSize;
-      }
-      if (maxNumSize && val > maxNumSize) {
-        val = maxNumSize;
-      }
-      if (floatToFix > 0) {
-        const floatNumParts = typeof val === 'string' ? val.split('.') : val;
-        const int = floatNumParts[0];
-        const float = floatNumParts[1];
-        if (float) {
-          if (float[0] === '0' || float[0] !== '0') {
-            if (float[1] === undefined) {
-              val = `${int}.${float[0]}`;
-            } else if (float[1] === '0') {
-              if (float[2] === undefined || float[2] === '0') {
-                val = `${int}.${float[0]}`;
-              } else if (float[2] !== undefined && float[2] !== '0') {
-                val = `${int}.${float[0]}${float[1]}${float[2]}`;
-              }
-            } else if (float[1] !== undefined && float[1] !== '0') {
-              if (float[2] === undefined || float[2] === '0') {
-                val = `${int}.${float[0]}${float[1]}`;
-              } else if (float[2] !== undefined && float[2] !== '0') {
-                val = `${int}.${float[0]}${float[1]}${float[2]}`;
+      if (maxLength && maxLength > 0) {
+        if (val.length > maxLength) {
+          val = val.substr(0, maxLength);
+        }
+      } else {
+        const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
+        if (val.length > 16 && !val.includes('.')) {
+          val = val.substr(0, 16);
+        }
+        if (val > Number.MAX_SAFE_INTEGER) {
+          val = prevVal;
+        }
+        if (val < Number.MIN_SAFE_INTEGER) {
+          val = prevVal;
+        }
+        if (innerMinNumSize && val < innerMinNumSize) {
+          val = prevVal;
+        }
+        if (maxNumSize && val > maxNumSize) {
+          val = prevVal;
+        }
+        if (floatToFix > 0) {
+          const floatNumParts = typeof val === 'string' ? val.split('.') : val;
+          const int = floatNumParts[0];
+          const float = floatNumParts[1];
+          if (float && float.length > 0) {
+            let floatResult = '';
+            [...float].map((item, index) => {
+              if (index + 1 <= floatToFix) {
+                floatResult += item;
               }
+            });
+            if (floatResult !== '') {
+              val = `${int}.${floatResult}`;
+            } else {
+              val = `${int}`;
             }
           }
+        } else {
+          const floatNumParts = typeof val === 'string' ? val.split('.') : val;
+          const int = floatNumParts[0];
+          if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
+            val = `${int}`;
+          }
         }
-      } else {
-        const floatNumParts = typeof val === 'string' ? val.split('.') : val;
-        const int = floatNumParts[0];
-        if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
-          val = `${int}`;
+        if (!regNum.test(val)) {
+          const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+            return b + c.replace(/\./g, '');
+          });
+          val = newStr;
         }
       }
-      if (!regNum.test(val)) {
-        const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
-          return b + c.replace(/\./g, '');
-        });
-        val = newStr;
-      }
       if (withoutDot && !/^\d+$/.test(val)) {
         const newStr = val.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
           return b + c.replace(/\./g, '');
@@ -2978,9 +2979,9 @@ const Input = ({
   const handleChange = event => {
     let prevValue = innerValue;
     let currentValue = event.target.value;
-    const max = maxLength ? maxLength : configStyles.INPUT.maxLength;
+    const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : configStyles.INPUT.maxLength;
     currentValue = handleCheckTypeTel(currentValue, prevValue);
-    currentValue = handleCheckTypeNumber(currentValue);
+    currentValue = handleCheckTypeNumber(currentValue, prevValue);
     if (max && currentValue.length > max && type !== 'tel' && type !== 'number') {
       currentValue = currentValue.substr(0, max);
     }
@@ -3002,29 +3003,41 @@ const Input = ({
     setShow(!show);
   };
   useEffect(() => {
+    let newValue = value;
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);
     } else {
       setInnerErrorMessage('');
     }
-    let newValue = value;
+    if (minNumSize && minNumSize < 0) {
+      setInnerMinNumSize(0);
+      alert("minNumSize prop can't be less then 0");
+    } else if (minNumSize && minNumSize >= 0) {
+      setInnerMinNumSize(minNumSize);
+    }
+    if (type === 'number' && (maxNumSize || maxNumSize === 0 || minNumSize || minNumSize === 0) && (maxLength || maxLength === 0)) {
+      alert("You can't use maxNumSize or minNumSize and maxLength props together when Input type is number");
+    }
+    if (type === 'number' && maxNumSize < minNumSize) {
+      alert("maxNumSize prop can't be less then minNumSize");
+    }
     if (value !== undefined) {
       if (value === null) {
         newValue = '';
       } else {
-        const max = maxLength ? maxLength : configStyles.INPUT.maxLength;
-        newValue = handleCheckTypeTel(newValue, value);
-        newValue = handleCheckTypeNumber(value);
+        const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : configStyles.INPUT.maxLength;
+        newValue = handleCheckTypeTel(value, newValue);
+        newValue = handleCheckTypeNumber(value, newValue);
         if (max && value.length > max && type !== 'tel' && type !== 'number') {
           newValue = value.substr(0, max);
         }
         if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
           !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
         }
-        setInnerValue(() => newValue);
       }
     }
-  }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage]);
+    setInnerValue(() => newValue);
+  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage, telErrorMessage]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default.createElement("label", {

package/dist/index.js

@@ -812,14 +812,14 @@ const File = ({
                 change({
                   file: file[ix],
                   uuid: v4(),
-                  check: formatError
+                  check: formatError ? formatError : configStyles.FILE.formatError
                 });
               }
             } else {
               change({
                 file: file[ix],
                 uuid: v4(),
-                check: maxSizeError
+                check: maxSizeError ? maxSizeError : configStyles.FILE.maxSizeError
               });
             }
           }
@@ -841,14 +841,14 @@ const File = ({
               change({
                 file: file[ix],
                 uuid: v4(),
-                check: formatError
+                check: formatError ? formatError : configStyles.FILE.formatError
               });
             }
           } else {
             change({
               file: file[ix],
               uuid: v4(),
-              check: maxSizeError
+              check: maxSizeError ? maxSizeError : configStyles.FILE.maxSizeError
             });
           }
         }
@@ -862,7 +862,7 @@ const File = ({
       setImage(null);
       handleUploadFiles(file);
       if (file.length === 0 && memoizedItems.length === 0) {
-        setError(noChoosenFile);
+        setError(noChoosenFile ? noChoosenFile : configStyles.FILE.noChoosenFile);
       }
     } else {
       if (file[0]) {
@@ -880,16 +880,16 @@ const File = ({
             }
           } else {
             setImage(null);
-            setError(formatError);
+            setError(formatError ? formatError : configStyles.FILE.formatError);
           }
         } else {
           setImage(null);
-          setError(maxSizeError);
+          setError(maxSizeError ? maxSizeError : configStyles.FILE.maxSizeError);
         }
       }
       if (file.length === 0) {
         setImage(null);
-        setError(noChoosenFile);
+        setError(noChoosenFile ? noChoosenFile : configStyles.FILE.noChoosenFile);
       }
     }
   };
@@ -2522,13 +2522,14 @@ const Modal = ({
   outsideClose,
   headerWeight,
   headerHeight,
-  imageMaxWidth,
+  // imageMaxWidth,
   justifyContent,
-  imageWrapWidth,
+  // imageWrapWidth,
   backgroundColor,
   imageWrapHeight,
   grayDecorHeight,
-  layerBackgroundColor
+  layerBackgroundColor,
+  closeAreaBackgroundColor
 }) => {
   const [select, setSelect] = React.useState(0);
   const [isHover, setIsHover] = React.useState(false);
@@ -2698,7 +2699,7 @@ const Modal = ({
       borderTopLeftRadius: '6px',
       borderTopRightRadius: '6px',
       height: grayDecorHeight ? grayDecorHeight : configStyles.MODAL.grayDecorHeight,
-      backgroundImage: 'linear-gradient(rgb(60, 57, 62), rgba(60, 57, 62, 0))'
+      background: closeAreaBackgroundColor ? closeAreaBackgroundColor : configStyles.MODAL.closeAreaBackgroundColor
     }
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     onClick: handleCloseModal,
@@ -2717,7 +2718,6 @@ const Modal = ({
     }
   }, /*#__PURE__*/React__default["default"].createElement(SvgCloseSlide, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      width: imageWrapWidth ? imageWrapWidth : configStyles.MODAL.imageWrapWidth,
       height: imageWrapHeight ? imageWrapHeight : configStyles.MODAL.imageWrapHeight
     }
   }, innerData && innerData.length > 0 && innerData.map((item, index) => {
@@ -2730,13 +2730,12 @@ const Modal = ({
         }, /*#__PURE__*/React__default["default"].createElement("img", {
           style: {
             display: 'block',
-            objectFit: 'cover',
-            objectPosition: 'center',
+            objectFit: 'contain',
             margin: imageMargin ? imageMargin : configStyles.MODAL.imageMargin,
             borderRadius: radius ? radius : configStyles.MODAL.radius,
             width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
-            height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight,
-            maxWidth: imageMaxWidth ? imageMaxWidth : configStyles.MODAL.imageMaxWidth
+            height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
+            // maxWidth: '100%'
           },
           src: item.url
         }), isHover && showZoomIcon ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2824,7 +2823,8 @@ Modal.propTypes = {
   backgroundColor: PropTypes__default["default"].string,
   grayDecorHeight: PropTypes__default["default"].string,
   imageWrapHeight: PropTypes__default["default"].string,
-  layerBackgroundColor: PropTypes__default["default"].string
+  layerBackgroundColor: PropTypes__default["default"].string,
+  closeAreaBackgroundColor: PropTypes__default["default"].string
 };
 Modal.defaultProps = {
   type: 'content'
@@ -2907,6 +2907,7 @@ const Input = ({
   const [show, setShow] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
   const [innerValue, setInnerValue] = React.useState('');
+  const [innerMinNumSize, setInnerMinNumSize] = React.useState(0);
   const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
@@ -2942,60 +2943,60 @@ const Input = ({
     }
     return val;
   };
-  const handleCheckTypeNumber = val => {
+  const handleCheckTypeNumber = (val, prevVal) => {
     if (type === 'number') {
-      const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
-      if (val.length > 16) {
-        val = val.substr(0, 16);
-      }
-      if (val > Number.MAX_SAFE_INTEGER) {
-        val = Number.MAX_SAFE_INTEGER;
-      }
-      if (val < Number.MIN_SAFE_INTEGER) {
-        val = Number.MIN_SAFE_INTEGER;
-      }
-      if (minNumSize && val < minNumSize) {
-        val = minNumSize;
-      }
-      if (maxNumSize && val > maxNumSize) {
-        val = maxNumSize;
-      }
-      if (floatToFix > 0) {
-        const floatNumParts = typeof val === 'string' ? val.split('.') : val;
-        const int = floatNumParts[0];
-        const float = floatNumParts[1];
-        if (float) {
-          if (float[0] === '0' || float[0] !== '0') {
-            if (float[1] === undefined) {
-              val = `${int}.${float[0]}`;
-            } else if (float[1] === '0') {
-              if (float[2] === undefined || float[2] === '0') {
-                val = `${int}.${float[0]}`;
-              } else if (float[2] !== undefined && float[2] !== '0') {
-                val = `${int}.${float[0]}${float[1]}${float[2]}`;
-              }
-            } else if (float[1] !== undefined && float[1] !== '0') {
-              if (float[2] === undefined || float[2] === '0') {
-                val = `${int}.${float[0]}${float[1]}`;
-              } else if (float[2] !== undefined && float[2] !== '0') {
-                val = `${int}.${float[0]}${float[1]}${float[2]}`;
+      if (maxLength && maxLength > 0) {
+        if (val.length > maxLength) {
+          val = val.substr(0, maxLength);
+        }
+      } else {
+        const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.)?(\d+)?$/ : /^\d+$/;
+        if (val.length > 16 && !val.includes('.')) {
+          val = val.substr(0, 16);
+        }
+        if (val > Number.MAX_SAFE_INTEGER) {
+          val = prevVal;
+        }
+        if (val < Number.MIN_SAFE_INTEGER) {
+          val = prevVal;
+        }
+        if (innerMinNumSize && val < innerMinNumSize) {
+          val = prevVal;
+        }
+        if (maxNumSize && val > maxNumSize) {
+          val = prevVal;
+        }
+        if (floatToFix > 0) {
+          const floatNumParts = typeof val === 'string' ? val.split('.') : val;
+          const int = floatNumParts[0];
+          const float = floatNumParts[1];
+          if (float && float.length > 0) {
+            let floatResult = '';
+            [...float].map((item, index) => {
+              if (index + 1 <= floatToFix) {
+                floatResult += item;
               }
+            });
+            if (floatResult !== '') {
+              val = `${int}.${floatResult}`;
+            } else {
+              val = `${int}`;
             }
           }
+        } else {
+          const floatNumParts = typeof val === 'string' ? val.split('.') : val;
+          const int = floatNumParts[0];
+          if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
+            val = `${int}`;
+          }
         }
-      } else {
-        const floatNumParts = typeof val === 'string' ? val.split('.') : val;
-        const int = floatNumParts[0];
-        if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
-          val = `${int}`;
+        if (!regNum.test(val)) {
+          const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+            return b + c.replace(/\./g, '');
+          });
+          val = newStr;
         }
       }
-      if (!regNum.test(val)) {
-        const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
-          return b + c.replace(/\./g, '');
-        });
-        val = newStr;
-      }
       if (withoutDot && !/^\d+$/.test(val)) {
         const newStr = val.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
           return b + c.replace(/\./g, '');
@@ -3008,9 +3009,9 @@ const Input = ({
   const handleChange = event => {
     let prevValue = innerValue;
     let currentValue = event.target.value;
-    const max = maxLength ? maxLength : configStyles.INPUT.maxLength;
+    const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : configStyles.INPUT.maxLength;
     currentValue = handleCheckTypeTel(currentValue, prevValue);
-    currentValue = handleCheckTypeNumber(currentValue);
+    currentValue = handleCheckTypeNumber(currentValue, prevValue);
     if (max && currentValue.length > max && type !== 'tel' && type !== 'number') {
       currentValue = currentValue.substr(0, max);
     }
@@ -3032,29 +3033,41 @@ const Input = ({
     setShow(!show);
   };
   React.useEffect(() => {
+    let newValue = value;
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);
     } else {
       setInnerErrorMessage('');
     }
-    let newValue = value;
+    if (minNumSize && minNumSize < 0) {
+      setInnerMinNumSize(0);
+      alert("minNumSize prop can't be less then 0");
+    } else if (minNumSize && minNumSize >= 0) {
+      setInnerMinNumSize(minNumSize);
+    }
+    if (type === 'number' && (maxNumSize || maxNumSize === 0 || minNumSize || minNumSize === 0) && (maxLength || maxLength === 0)) {
+      alert("You can't use maxNumSize or minNumSize and maxLength props together when Input type is number");
+    }
+    if (type === 'number' && maxNumSize < minNumSize) {
+      alert("maxNumSize prop can't be less then minNumSize");
+    }
     if (value !== undefined) {
       if (value === null) {
         newValue = '';
       } else {
-        const max = maxLength ? maxLength : configStyles.INPUT.maxLength;
-        newValue = handleCheckTypeTel(newValue, value);
-        newValue = handleCheckTypeNumber(value);
+        const max = type === 'number' ? maxLength ? maxLength : null : maxLength ? maxLength : configStyles.INPUT.maxLength;
+        newValue = handleCheckTypeTel(value, newValue);
+        newValue = handleCheckTypeNumber(value, newValue);
         if (max && value.length > max && type !== 'tel' && type !== 'number') {
           newValue = value.substr(0, max);
         }
         if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
           !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
         }
-        setInnerValue(() => newValue);
       }
     }
-  }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage]);
+    setInnerValue(() => newValue);
+  }, [type, value, regexp, maxLength, maxNumSize, minNumSize, errorMessage, regexpErrorMessage, telErrorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {

package/package.json

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

package/tui.config.js

@@ -413,8 +413,8 @@ module.exports = {
         imageWidth: '', // for modal image width on images mode
         headerHeight: '30px', // for modal header height
         grayDecorHeight: '80px', // for modal top decoration when show slider
-        width: 'fit-content', // for modal width
-        height: 'fit-content', // for modal width
+        width: '', // for modal width
+        height: '', // for modal width
         headerColor: '#00236a', // for modal header color
         backgroundColor: 'white', // for modal background color
         padding: '20px 20px 20px', // for modal padding
@@ -424,8 +424,9 @@ module.exports = {
         borderColor: 'transparent', // for modal border color
         imageMargin: '0px', // for image margin
         imageMaxWidth: '100%', // for image max width
-        imageWrapHeight: '80vh', // for image wrap
+        imageWrapHeight: '100%', // for image wrap
         imageWrapWidth: '100%', // for image wrap
+        closeAreaBackgroundColor: 'linear-gradient(to bottom, rgb(60, 57, 62), rgba(60, 57, 62, 0))' // for close div background color
     },
     // default properties for <Checkbox /> component
     CHECKBOX: {