@xaypay/tui 0.0.74 → 0.0.75

package/dist/index.js

@@ -95,9 +95,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
-var styles$b = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
-styleInject(css_248z$d);
+var css_248z$e = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
+var styles$c = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
+styleInject(css_248z$e);
 
 const File = ({
   name,
@@ -159,15 +159,15 @@ const File = ({
     document.querySelector(`.${name}`).value = "";
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
-    className: `${styles$b['file-form-title']} ile-form-title-rem`
+    className: `${styles$c['file-form-title']} ile-form-title-rem`
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
     style: {
       color: "#ee0000"
     }
   }, "*")), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classnames__default["default"](`${styles$b['file-form-wrap']} file-form-wrap-rem`, image ? styles$b['active'] : '')
+    className: classnames__default["default"](`${styles$c['file-form-wrap']} file-form-wrap-rem`, image ? styles$c['active'] : '')
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$b['file-form']} file-form-rem ${error || errorMessage ? styles$b['error'] : ''}`,
+    className: `${styles$c['file-form']} file-form-rem ${error || errorMessage ? styles$c['error'] : ''}`,
     onClick: () => document.querySelector(`.${name}`).click()
   }, /*#__PURE__*/React__default["default"].createElement("input", {
     hidden: true,
@@ -176,23 +176,23 @@ const File = ({
     disabled: disabled,
     onChange: e => handleCheckFile(e)
   }), image ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$b['upload-file-content']} upload-file-content-rem`
+    className: `${styles$c['upload-file-content']} upload-file-content-rem`
   }, image === 'pdf' ? /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : /*#__PURE__*/React__default["default"].createElement("img", {
     src: image,
     alt: fileName
   })) : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$b['file-form-inner-upload']} ile-form-inner-upload-rem`
+    className: `${styles$c['file-form-inner-upload']} ile-form-inner-upload-rem`
   }, /*#__PURE__*/React__default["default"].createElement("img", {
     src: "../../assets/upload.svg",
     alt: ""
   }), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${styles$b['upload-info']} upload-info-rem`
+    className: `${styles$c['upload-info']} upload-info-rem`
   }, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${styles$b['upload-info-txt']} upload-info-txt-rem`
+    className: `${styles$c['upload-info-txt']} upload-info-txt-rem`
   }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: `${styles$b['upload-info-size']} upload-info-size-rem`
+    className: `${styles$c['upload-info-size']} upload-info-size-rem`
   }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))), !disabled && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$b['delete-upload-icon']} delete-upload-icon-rem`,
+    className: `${styles$c['delete-upload-icon']} delete-upload-icon-rem`,
     onClick: handleRemoveFile
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-delete"
@@ -219,13 +219,13 @@ File.defaultProps = {
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
-var css_248z$c = ".table-module_table-wrap__KKAnM{background:#fff;border-radius:14px 14px 0 0;box-shadow:0 10px 30px rgba(0,35,106,.06);overflow:hidden;width:100%}.table-module_table-wrap__KKAnM:not(:first-child){margin-top:30px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:first-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:first-child{flex:0 0 auto;width:60px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(2),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(2){flex:0 0 auto;width:120px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(3),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(3){flex:0 0 auto;width:170px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(4),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(4){flex:0 0 auto;width:126px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(5),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(6),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(8),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(5),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(6),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(8){flex:0 0 auto;width:100px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:last-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:last-child{flex:0 0 auto;width:104px}.table-module_table-top__tfEKM{background:#00236a;height:44px;width:100%}.table-module_table-top__tfEKM .table-module_table-items__UpFg2{align-items:center;color:#fff;display:flex;flex:1 1;font-size:15px;justify-content:center;line-height:17px;text-align:center}.table-module_table-bottom-inner__0Pus0{background:#fff;min-height:40px;width:100%}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2{align-items:center;border-bottom:1px solid #eee;display:flex;flex:1 1;font-size:14px;justify-content:center;line-height:16px;padding:4px;text-align:center}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:not(:last-child){border-right:1px solid #eee}";
-var styles$a = {"table-wrap":"table-module_table-wrap__KKAnM","table-bottom-inner":"table-module_table-bottom-inner__0Pus0","table-items":"table-module_table-items__UpFg2","table-top":"table-module_table-top__tfEKM"};
-styleInject(css_248z$c);
+var css_248z$d = ".table-module_table-wrap__KKAnM{background:#fff;border-radius:14px 14px 0 0;box-shadow:0 10px 30px rgba(0,35,106,.06);overflow:hidden;width:100%}.table-module_table-wrap__KKAnM:not(:first-child){margin-top:30px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:first-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:first-child{flex:0 0 auto;width:60px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(2),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(2){flex:0 0 auto;width:120px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(3),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(3){flex:0 0 auto;width:170px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(4),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(4){flex:0 0 auto;width:126px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(5),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(6),.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:nth-child(8),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(5),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(6),.table-module_table-top__tfEKM .table-module_table-items__UpFg2:nth-child(8){flex:0 0 auto;width:100px}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:last-child,.table-module_table-top__tfEKM .table-module_table-items__UpFg2:last-child{flex:0 0 auto;width:104px}.table-module_table-top__tfEKM{background:#00236a;height:44px;width:100%}.table-module_table-top__tfEKM .table-module_table-items__UpFg2{align-items:center;color:#fff;display:flex;flex:1 1;font-size:15px;justify-content:center;line-height:17px;text-align:center}.table-module_table-bottom-inner__0Pus0{background:#fff;min-height:40px;width:100%}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2{align-items:center;border-bottom:1px solid #eee;display:flex;flex:1 1;font-size:14px;justify-content:center;line-height:16px;padding:4px;text-align:center}.table-module_table-bottom-inner__0Pus0 .table-module_table-items__UpFg2:not(:last-child){border-right:1px solid #eee}";
+var styles$b = {"table-wrap":"table-module_table-wrap__KKAnM","table-bottom-inner":"table-module_table-bottom-inner__0Pus0","table-items":"table-module_table-items__UpFg2","table-top":"table-module_table-top__tfEKM"};
+styleInject(css_248z$d);
 
-var css_248z$b = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;bottom:0;display:inline-block;height:14px;left:0;margin:auto 4px auto auto;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
-var styles$9 = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
-styleInject(css_248z$b);
+var css_248z$c = ".checkbox-module_checkbox-wrap__Xrg-m{align-items:center;cursor:pointer;display:inline-flex;flex-direction:row;flex-wrap:nowrap;margin:0 6px;padding-left:24px;position:relative}.checkbox-module_checkbox-wrap__Xrg-m>input{height:0;opacity:0;position:absolute;width:0}.checkbox-module_checkbox-wrap__Xrg-m .checkbox-module_checkmark__M8DY6{border:1px solid #d9d9d9;border-radius:3px;bottom:0;display:inline-block;height:14px;left:0;margin:auto 4px auto auto;position:absolute;top:0;transition:border-color .24s;vertical-align:top;width:14px}.checkbox-module_checkbox-wrap__Xrg-m>.checkbox-module_checkmark__M8DY6:after{border:solid #1890ff;border-width:0 2px 2px 0;content:\"\";display:block;height:8px;left:4px;opacity:0;position:absolute;top:1px;transform:rotate(45deg);transition:opacity .24s;width:4px}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6:after{opacity:1}.checkbox-module_checkbox-wrap__Xrg-m input:checked~.checkbox-module_checkmark__M8DY6,.checkbox-module_checkbox-wrap__Xrg-m:hover input~.checkbox-module_checkmark__M8DY6{border-color:#1890ff}";
+var styles$a = {"checkbox-wrap":"checkbox-module_checkbox-wrap__Xrg-m","checkmark":"checkbox-module_checkmark__M8DY6"};
+styleInject(css_248z$c);
 
 const Checkbox = ({
   disabled,
@@ -240,7 +240,7 @@ const Checkbox = ({
   onClick,
   ...props
 }) => {
-  const classProps = classnames__default["default"](styles$9.checkbox, className, 'checkbox-input-rem');
+  const classProps = classnames__default["default"](styles$a.checkbox, className, 'checkbox-input-rem');
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   const [data, setData] = React.useState(parseData);
   React.useEffect(() => {
@@ -273,7 +273,7 @@ const Checkbox = ({
   } : '';
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, data.map(element => {
     return /*#__PURE__*/React__default["default"].createElement("label", {
-      className: `${styles$9["checkbox-wrap"]} checkbox-wrap-rem`,
+      className: `${styles$a["checkbox-wrap"]} checkbox-wrap-rem`,
       key: element.value
     }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
       type: "checkbox",
@@ -287,9 +287,9 @@ const Checkbox = ({
       onClick: onClick ? onClick : () => {},
       defaultChecked: element.checked
     }, props)), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: `${styles$9["checkmark"]} checkmark-rem`
+      className: `${styles$a["checkmark"]} checkmark-rem`
     }), element[keyNames.label] ? /*#__PURE__*/React__default["default"].createElement("label", {
-      className: styles$9.labelCheckbox,
+      className: styles$a.labelCheckbox,
       for: element[keyNames.id]
     }, element[keyNames.label]) : "");
   }));
@@ -331,23 +331,23 @@ const Table = ({
     return true;
   } : "";
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$a["table-wrap"]} table-wrap-rem`
+    className: `${styles$b["table-wrap"]} table-wrap-rem`
   }, config.isHeader && hearderData.map((header, key) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${styles$a["table-top"]} table-top-rem`,
+      className: `${styles$b["table-top"]} table-top-rem`,
       key: key
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${styles$a["table-items"]} table-items-rem`
+      className: `${styles$b["table-items"]} table-items-rem`
     }, header));
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$a["table-bottom"]} table-bottom-rem`
+    className: `${styles$b["table-bottom"]} table-bottom-rem`
   }, tbodyData.map((item, key) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${styles$a["table-bottom-inner"]} table-bottom-inner-rem`,
+      className: `${styles$b["table-bottom-inner"]} table-bottom-inner-rem`,
       key: key
     }, keyNames.map((keyName, keyNameKey) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: `${styles$a["table-items"]} table-items-rem`,
+        className: `${styles$b["table-items"]} table-items-rem`,
         key: keyNameKey
       }, config.isCheckbox && config.isCheckbox.showCheckbox && config.isCheckbox.showCheckbox(item) && keyNameKey == 0 && /*#__PURE__*/React__default["default"].createElement(Checkbox, {
         onClick: e => {
@@ -363,7 +363,7 @@ const Table = ({
         className: keyName.icon
       }), item[keyName.name]));
     }), actions && /*#__PURE__*/React__default["default"].createElement("div", {
-      className: `${styles$a["table-items"]} table-items-rem`
+      className: `${styles$b["table-items"]} table-items-rem`
     }, actions.filter(a => a.show && a.show(item) || a.show === undefined).map((action, key) => {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         key: key
@@ -399,6 +399,73 @@ Table.defaultProps = {
   hearderData: []
 };
 
+const _ = require('lodash');
+const compereConfigs = () => {
+  let projectConfig = {};
+  let packageConfig = {};
+  try {
+    packageConfig = require('../tui.config.js');
+  } catch (e) {
+    try {
+      packageConfig = require('../../tui.config.js');
+    } catch (err) {
+      packageConfig = {};
+    }
+  }
+  try {
+    projectConfig = require('../../../../tui.config.js');
+  } catch (error) {
+    projectConfig = {};
+    // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
+  }
+
+  return _.merge(packageConfig, projectConfig);
+};
+
+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)}}";
+var styles$9 = {"animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
+styleInject(css_248z$b);
+
+const SvgNext = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm3.4-11.443a.854.854 0 0 0 .198-.548.855.855 0 0 0-.146-.539l-4.137-5.134a.857.857 0 0 0-1.251-.12.856.856 0 0 0-.129 1.207l3.701 4.586-3.838 4.587a.856.856 0 0 0 .739 1.4.858.858 0 0 0 .58-.305l4.284-5.134Z",
+  fill: "#fff"
+}));
+
+const SvgPrev = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0ZM8.6 11.443a.855.855 0 0 0-.198.548c-.013.19.038.38.146.539l4.137 5.133a.857.857 0 0 0 1.251.12.856.856 0 0 0 .129-1.206l-3.701-4.586 3.838-4.587a.856.856 0 0 0-.739-1.4.858.858 0 0 0-.58.305l-4.284 5.134Z",
+  fill: "#fff"
+}));
+
 const SvgCloseIcon = ({
   title,
   titleId,
@@ -417,36 +484,49 @@ const SvgCloseIcon = ({
   fill: "#3C393E"
 }));
 
-const SvgNextarrow = ({
+const SvgCloseSlide = ({
   title,
   titleId,
   ...props
 }) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
-  width: "6",
-  height: "12",
-  viewBox: "0 0 6 12",
+  width: "18",
+  height: "18",
+  viewBox: "0 0 18 18",
   fill: "none",
   xmlns: "http://www.w3.org/2000/svg",
   "aria-labelledby": titleId
 }, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
   id: titleId
 }, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
-  d: "M.851 11.998a.847.847 0 0 1-.847-.776.86.86 0 0 1 .193-.626l3.808-4.584L.333 1.419A.857.857 0 0 1 .46.213a.849.849 0 0 1 1.241.128l4.106 5.132a.859.859 0 0 1 0 1.086l-4.25 5.132a.85.85 0 0 1-.706.307Z",
-  fill: "#3C393E"
+  d: "m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z",
+  fill: "#fff"
 }));
 
 const Modal = ({
   type,
   data,
+  radius,
+  padding,
   setShow,
   selected,
   children,
+  minWidth,
+  minHeight,
   className,
-  headerText
+  headerText,
+  imageWidth,
+  headerSize,
+  imageHeight,
+  headerColor,
+  headerWeight,
+  headerHeight,
+  backgroundColor,
+  layerBackgroundColor
 }) => {
-  const classProps = classnames__default["default"](className);
   const [select, setSelect] = React.useState(0);
   const [innerData, setInnerData] = React.useState([]);
+  const configStyles = compereConfigs();
+  const classProps = classnames__default["default"](className);
   const handleCloseModal = () => {
     setShow(false);
   };
@@ -502,13 +582,13 @@ const Modal = ({
   return /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: handleCloseModal,
     style: {
-      position: 'fixed',
       top: '0px',
       left: '0px',
       zIndex: 999,
       width: '100%',
       height: '100vh',
-      backgroundColor: 'rgba(0,0,0,0.4)' // TODO: config
+      position: 'fixed',
+      backgroundColor: layerBackgroundColor ? layerBackgroundColor : configStyles.MODAL.layerBackgroundColor
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -517,10 +597,9 @@ const Modal = ({
       height: '100vh'
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classProps,
+    className: `${classProps} ${styles$9['animation__modal']}`,
     onClick: handleStopClosing,
     style: {
-      position: 'absolute',
       top: '0px',
       left: '0px',
       right: '0px',
@@ -529,33 +608,40 @@ const Modal = ({
       maxWidth: '95%',
       overflow: 'auto',
       maxHeight: '95vh',
+      position: 'absolute',
       width: 'fit-content',
-      borderRadius: '14px',
       height: 'fit-content',
       boxSizing: 'border-box',
-      backgroundColor: 'white',
-      padding: '10px 20px 20px'
-      // TODO: animation
+      borderRadius: radius ? radius : configStyles.MODAL.radius,
+      minWidth: type === 'content' ? minWidth ? minWidth : '' : '',
+      minHeight: type === 'content' ? minHeight ? minHeight : '' : '',
+      padding: type === 'content' ? padding ? padding : configStyles.MODAL.padding : '10px',
+      backgroundColor: backgroundColor ? backgroundColor : configStyles.MODAL.backgroundColor
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      display: 'flex',
+      position: 'relative',
       width: '100%',
-      height: '27px',
+      height: '100%'
+    }
+  }, type === 'content' ? /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: '100%',
+      display: 'flex',
       alignItems: 'center',
-      backgroundColor: '#fbfbfb',
+      height: headerHeight ? headerHeight : configStyles.MODAL.headerHeight,
       justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
     }
   }, headerText && type === 'content' && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
-      color: '#00236a',
-      fontSize: '20px',
-      fontWeight: '600',
       overflow: 'hidden',
       whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       margin: '0px 16px 0px 0px',
-      maxWidth: 'calc(100% - 30px)'
+      maxWidth: 'calc(100% - 30px)',
+      fontSize: headerSize ? headerSize : configStyles.MODAL.headerSize,
+      color: headerColor ? headerColor : configStyles.MODAL.headerColor,
+      fontWeight: headerWeight ? headerWeight : configStyles.MODAL.headerWeight
     }
   }, headerText), /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: handleCloseModal,
@@ -564,17 +650,32 @@ const Modal = ({
       height: '14px',
       cursor: 'pointer'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null))) : /*#__PURE__*/React__default["default"].createElement("button", {
+    onClick: handleCloseModal,
+    style: {
+      position: 'absolute',
+      top: '23px',
+      width: '18px',
+      right: '23px',
+      height: '18px',
+      border: 'none',
+      outline: 'none',
+      cursor: 'pointer',
+      backgroundColor: 'transparent'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(SvgCloseSlide, null)), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
-      paddingTop: '10px',
       alignItems: 'center',
       boxSizing: 'border-box',
-      justifyContent: 'center'
+      justifyContent: 'center',
+      paddingTop: type === 'content' ? '10px' : '0px'
     }
   }, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      width: '100%'
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center'
     }
   }, innerData && innerData.length > 0 && innerData.map((item, index) => {
     if (select === index) {
@@ -583,86 +684,73 @@ const Modal = ({
       } else {
         return /*#__PURE__*/React__default["default"].createElement("img", {
           style: {
-            width: '600px',
-            height: '300px',
             objectFit: 'cover',
-            objectPosition: 'center'
+            objectPosition: 'center',
+            borderRadius: radius ? radius : configStyles.MODAL.radius,
+            width: imageWidth ? imageWidth : configStyles.MODAL.imageWidth,
+            height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight
           },
-          src: item.url
+          src: item.url,
+          key: item.id ? item.id : index
         });
       }
     }
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      marginTop: '10px'
-    }
-  }, /*#__PURE__*/React__default["default"].createElement("button", {
+  }), innerData && innerData.length > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", {
     onClick: handleGoTo,
     "data-go": "prev",
     style: {
-      padding: '8px',
+      position: 'absolute',
+      left: '14px',
+      width: '24px',
+      height: '24px',
+      padding: '0px',
+      border: 'none',
       outline: 'none',
       cursor: 'pointer',
-      marginRight: '10px',
-      borderRadius: '6px',
-      alignItems: 'center',
-      display: 'inline-flex',
-      justifyContent: 'center',
-      backgroundColor: 'white',
-      transform: 'rotate(180deg)',
-      border: '1px solid #979090'
+      top: 'calc(50% - 12px)',
+      backgroundColor: 'transparent'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null)), /*#__PURE__*/React__default["default"].createElement("button", {
+  }, /*#__PURE__*/React__default["default"].createElement(SvgPrev, null)), /*#__PURE__*/React__default["default"].createElement("button", {
     onClick: handleGoTo,
     "data-go": "next",
     style: {
-      padding: '8px',
+      position: 'absolute',
+      width: '24px',
+      right: '14px',
+      height: '24px',
+      border: 'none',
+      padding: '0px',
       outline: 'none',
       cursor: 'pointer',
-      borderRadius: '6px',
-      alignItems: 'center',
-      display: 'inline-flex',
-      justifyContent: 'center',
-      backgroundColor: 'white',
-      border: '1px solid #979090'
+      top: 'calc(50% - 12px)',
+      backgroundColor: 'transparent'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null))))))));
+  }, /*#__PURE__*/React__default["default"].createElement(SvgNext, null)))))))));
 };
 Modal.propTypes = {
   data: PropTypes__default["default"].array,
   type: PropTypes__default["default"].string,
   setShow: PropTypes__default["default"].func,
+  radius: PropTypes__default["default"].string,
+  padding: PropTypes__default["default"].string,
   selected: PropTypes__default["default"].number,
+  minWidth: PropTypes__default["default"].string,
+  minHeight: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
-  headerText: PropTypes__default["default"].string
+  headerText: PropTypes__default["default"].string,
+  imageWidth: PropTypes__default["default"].string,
+  headerSize: PropTypes__default["default"].string,
+  headerColor: PropTypes__default["default"].string,
+  imageHeight: PropTypes__default["default"].string,
+  headerWeight: PropTypes__default["default"].string,
+  headerHeight: PropTypes__default["default"].string,
+  backgroundColor: PropTypes__default["default"].string,
+  layerBackgroundColor: PropTypes__default["default"].string
 };
 Modal.defaultProps = {
   type: 'content'
 };
 
-const _ = require('lodash');
-const compereConfigs = () => {
-  let projectConfig = {};
-  let packageConfig = {};
-  try {
-    packageConfig = require('../tui.config.js');
-  } catch (e) {
-    try {
-      packageConfig = require('../../tui.config.js');
-    } catch (err) {
-      packageConfig = {};
-    }
-  }
-  try {
-    projectConfig = require('../../../../tui.config.js');
-  } catch (error) {
-    projectConfig = {};
-    // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
-  }
-
-  return _.merge(packageConfig, projectConfig);
-};
-
 var css_248z$a = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
 var styles$8 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k"};
 styleInject(css_248z$a);
@@ -3323,6 +3411,24 @@ const SvgDots = ({
   fill: "#3C393E"
 }));
 
+const SvgNextarrow = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "6",
+  height: "12",
+  viewBox: "0 0 6 12",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  d: "M.851 11.998a.847.847 0 0 1-.847-.776.86.86 0 0 1 .193-.626l3.808-4.584L.333 1.419A.857.857 0 0 1 .46.213a.849.849 0 0 1 1.241.128l4.106 5.132a.859.859 0 0 1 0 1.086l-4.25 5.132a.85.85 0 0 1-.706.307Z",
+  fill: "#3C393E"
+}));
+
 const Pagination = ({
   goTo,
   onChange,

package/package.json

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

package/src/components/icon/CloseSlide.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgCloseSlide = ({ title, titleId, ...props }) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="m10.47 8.95 7.29-7.29A1 1 0 0 0 16.35.25L9.06 7.54 1.77.24A1 1 0 0 0 .36 1.65l7.29 7.3-7.3 7.29a.999.999 0 1 0 1.41 1.41l7.3-7.29 7.29 7.29a1 1 0 0 0 1.41-1.41l-7.29-7.29Z"
+      fill="#fff"
+    />
+  </svg>
+);
+export default SvgCloseSlide;

package/src/components/icon/Next.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgNext = ({ title, titleId, ...props }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 24c6.627 0 12-5.373 12-12S18.627 0 12 0 0 5.373 0 12s5.373 12 12 12Zm3.4-11.443a.854.854 0 0 0 .198-.548.855.855 0 0 0-.146-.539l-4.137-5.134a.857.857 0 0 0-1.251-.12.856.856 0 0 0-.129 1.207l3.701 4.586-3.838 4.587a.856.856 0 0 0 .739 1.4.858.858 0 0 0 .58-.305l4.284-5.134Z"
+      fill="#fff"
+    />
+  </svg>
+);
+export default SvgNext;

package/src/components/icon/Prev.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgPrev = ({ title, titleId, ...props }) => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0ZM8.6 11.443a.855.855 0 0 0-.198.548c-.013.19.038.38.146.539l4.137 5.133a.857.857 0 0 0 1.251.12.856.856 0 0 0 .129-1.206l-3.701-4.586 3.838-4.587a.856.856 0 0 0-.739-1.4.858.858 0 0 0-.58.305l-4.284 5.134Z"
+      fill="#fff"
+    />
+  </svg>
+);
+export default SvgPrev;