@xaypay/tui 0.0.46 → 0.0.48

package/dist/index.es.js

@@ -83,7 +83,7 @@ const Button = ({
   outline,
   ...props
 }) => {
-  const classProps = classnames(styles$b.btn, styles$b[theme], styles$b[size], outline ? styles$b['type-outline'] : styles$b['type-filled'], className);
+  const classProps = classnames(styles$b.btn, styles$b[theme], styles$b[size], outline ? styles$b['type-outline'] : styles$b['type-filled'], className, 'button-rem');
   // className='btn type-outline size-default' 
   return /*#__PURE__*/React.createElement("button", _extends({
     type: "button",
@@ -152,7 +152,7 @@ const Typography = ({
   children,
   ...props
 }) => {
-  const classProps = classnames(className, bold ? 'bold' : '');
+  const classProps = classnames(className, 'sizes-rem', bold ? 'bold' : '');
   const CustomTag = variant;
 
   // const Tag = ({ className, children }) => (
@@ -244,47 +244,47 @@ const Autocomplate = ({
   if (showOptions && inputValue) {
     if (parseOptionsData.length && inputValue.length >= searchCount) {
       optionList = /*#__PURE__*/React.createElement("div", {
-        className: styles$a['autocomplate-content-bottom']
+        className: `${styles$a['autocomplate-content-bottom']} autocomplate-content-bottom-rem`
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles$a['autocomplate-content-bottom-inner']
+        className: `${styles$a['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`
       }, parseOptionsData.map((optionName, index) => {
         let className;
         if (index === activeOption) {
           className = "option-active";
         }
         return /*#__PURE__*/React.createElement("div", {
-          className: styles$a[className],
+          className: `${styles$a[className]} autocomplate-content-click-rem`,
           key: optionName[keyNames.id],
           onClick: handleClick
         }, /*#__PURE__*/React.createElement("div", {
           id: optionName[keyNames.id],
-          className: styles$a['autocomplate-content-bottom-row']
+          className: `${styles$a['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`
         }, optionName[keyNames.name]));
       })));
     } else {
       optionList = /*#__PURE__*/React.createElement("div", {
-        className: styles$a['autocomplate-content-bottom']
+        className: `${styles$a['autocomplate-content-bottom']} autocomplate-content-bottom-rem`
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles$a['autocomplate-content-bottom-inner']
+        className: `${styles$a['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles$a['autocomplate-content-bottom-row']
+        className: `${styles$a['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`
       }, /*#__PURE__*/React.createElement("div", {
-        className: styles$a['no-option']
+        className: `${styles$a['no-option']} autocomplate-no-option`
       }, inputValue.length <= searchCount ? `առնվազն ${searchCount} նիշ` : 'տվյալներ չկան'))));
     }
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, label ? /*#__PURE__*/React.createElement("label", {
-    className: styles$a['autocomplate-title']
+    className: `${styles$a['autocomplate-title']} autocomplate-title-rem`
   }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
     style: {
       color: "#ee0000"
     }
   }, "*")) : "", /*#__PURE__*/React.createElement("div", {
-    className: styles$a['autocomplate-content']
+    className: `${styles$a['autocomplate-content']} autocomplate-content-rem`
   }, /*#__PURE__*/React.createElement("input", _extends({
     id: inputId,
     type: "text",
-    className: styles$a['autocomplate-content-top'],
+    className: `${styles$a['autocomplate-content-top']} autocomplate-content-top-rem`,
     disabled: disabled,
     onChange: handleChange,
     onClick: () => {
@@ -331,7 +331,7 @@ const Checkbox = ({
   onClick,
   ...props
 }) => {
-  const classProps = classnames(styles$9.checkbox, className);
+  const classProps = classnames(styles$9.checkbox, className, 'checkbox-input-rem');
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   const [data, setData] = useState(parseData);
   useEffect(() => {
@@ -364,7 +364,7 @@ const Checkbox = ({
   } : '';
   return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(element => {
     return /*#__PURE__*/React.createElement("label", {
-      className: styles$9["checkbox-wrap"],
+      className: `${styles$9["checkbox-wrap"]} checkbox-wrap-rem`,
       key: element.value
     }, /*#__PURE__*/React.createElement("input", _extends({
       type: "checkbox",
@@ -378,7 +378,7 @@ const Checkbox = ({
       onClick: onClick ? onClick : () => {},
       defaultChecked: element.checked
     }, props)), /*#__PURE__*/React.createElement("span", {
-      className: styles$9["checkmark"]
+      className: `${styles$9["checkmark"]} checkmark-rem`
     }), element[keyNames.label] ? /*#__PURE__*/React.createElement("label", {
       className: styles$9.labelCheckbox,
       for: element[keyNames.id]
@@ -405,15 +405,6 @@ Checkbox.defaultProps = {
 var css_248z$9 = "";
 styleInject(css_248z$9);
 
-/**
- * Created by aleksanyan.tigran on 10/7/2022.
- */
-const Icon = props => {
-  return /*#__PURE__*/React.createElement("i", {
-    className: css_248z$9[props.className]
-  });
-};
-
 var css_248z$8 = ".input-module_input-wrap__NunrE{max-width:400px;position:relative}.input-module_input__-ipHD{border:none;border-radius:6px;box-shadow:inset 0 0 0 2px #d1d1d1;box-sizing:border-box;color:#3c393e;cursor:text;font-size:16px;line-height:20px;outline:none;overflow:hidden;transition:background-color .24s,color .24s}.input-module_input__-ipHD.input-module_full-size__38YG7{width:100%}.input-module_input__-ipHD.input-module_content-size__rZ5EA{width:auto}.input-module_input__-ipHD.input-module_size-medium__frTDq{min-height:46px;padding:12px 15px}.input-module_input__-ipHD:hover{box-shadow:inset 0 0 0 2px #3c393e}.input-module_input__-ipHD:active{box-shadow:inset 0 0 0 2px #00236a}.input-module_inputErrorMessages__hx490{animation:input-module_error-message-show__OrVSo .24s forwards;bottom:0;color:#e00;font-size:14px;left:0;line-height:19px;position:absolute;transform:scale3d(0,0,0);z-index:1}.input-module_labelInput__sUMKQ{color:#000}.input-module_input__-ipHD.input-module_state-disabled__402v0{background-color:#fbfbfb;pointer-events:none}.input-module_input__-ipHD.input-module_error-message__7NphF{box-shadow:inset 0 0 0 2px #e00}.input-module_input-title__giCsY{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}@keyframes input-module_error-message-show__OrVSo{to{bottom:-20px;transform:scaleX(1)}}";
 var styles$8 = {"input-wrap":"input-module_input-wrap__NunrE","input":"input-module_input__-ipHD","full-size":"input-module_full-size__38YG7","content-size":"input-module_content-size__rZ5EA","size-medium":"input-module_size-medium__frTDq","with-icon":"input-module_with-icon__w3jTW","inputErrorMessages":"input-module_inputErrorMessages__hx490","error-message-show":"input-module_error-message-show__OrVSo","labelInput":"input-module_labelInput__sUMKQ","state-disabled":"input-module_state-disabled__402v0","error-message":"input-module_error-message__7NphF","input-title":"input-module_input-title__giCsY"};
 styleInject(css_248z$8);
@@ -460,11 +451,11 @@ const Input = ({
     const regex = new RegExp(regexp);
     eMessage = regex.test(inputValue) ? "" : regexpError;
   }
-  const classProps = classnames(styles$8.input, styles$8[size], eMessage != '' ? styles$8['error-message'] : "", className);
+  const classProps = classnames(styles$8.input, styles$8[size], eMessage != '' ? styles$8['error-message'] : "", className, 'input-inner-rem');
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$8['input-wrap']
+    className: `${styles$8['input-wrap']} input-wrap-rem`
   }, label ? /*#__PURE__*/React.createElement("label", {
-    className: styles$8['input-title']
+    className: `${styles$8['input-title']} input-title-rem`
   }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
     style: {
       color: "#ee0000"
@@ -596,7 +587,7 @@ const Pagination = ({
   if (currentPageNumber === 0 || paginationRange.length < 2) {
     return null;
   }
-  const classProps = classnames(styles$7.list, className ? className : styles$7["pagination-bar"]);
+  const classProps = classnames(styles$7.list, className ? className : `${styles$7["pagination-bar"]} pagination-bar-rem`);
   const onNext = () => {
     onPageChange(currentPageNumber + 1);
   };
@@ -613,7 +604,7 @@ const Pagination = ({
   return /*#__PURE__*/React.createElement("ul", {
     className: classProps
   }, /*#__PURE__*/React.createElement("button", {
-    className: styles$7["pagination-btn"],
+    className: `${styles$7["pagination-btn"]} pagination-btn-rem`,
     onClick: onPrevious,
     disabled: currentPage === 1 ? true : false
   }, /*#__PURE__*/React.createElement("i", {
@@ -623,23 +614,23 @@ const Pagination = ({
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
       return /*#__PURE__*/React.createElement("li", {
         key: id,
-        className: classnames(styles$7["pagination-jump-next"], styles$7.listItem),
+        className: classnames(`${styles$7["pagination-jump-next"]} pagination-jump-next-rem`, styles$7.listItem),
         onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
         disabled: currentPageIndex === 0 ? true : false
       }, id < currentPageIndex ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        className: styles$7["pagination-jump-next-txt"]
+        className: `${styles$7["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
       }, /*#__PURE__*/React.createElement("i", {
         className: "icon-text"
       })), /*#__PURE__*/React.createElement("span", {
-        className: styles$7["pagination-jump-next-arrow"]
+        className: `${styles$7["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
       }, /*#__PURE__*/React.createElement("i", {
         className: "icon-arrow-jump-back"
       }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        className: styles$7["pagination-jump-next-txt"]
+        className: `${styles$7["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
       }, /*#__PURE__*/React.createElement("i", {
         className: "icon-text"
       })), /*#__PURE__*/React.createElement("span", {
-        className: styles$7["pagination-jump-next-arrow"]
+        className: `${styles$7["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
       }, /*#__PURE__*/React.createElement("i", {
         className: "icon-arrow-jump-next"
       }))));
@@ -647,11 +638,11 @@ const Pagination = ({
     return /*#__PURE__*/React.createElement("li", {
       onClick: () => onPageChange(pageNumber),
       key: id,
-      className: classnames(`${pageNumber === currentPageNumber ? styles$7.selected : styles$7.listItem}`, styles$7["pagination-item"])
+      className: classnames(`${pageNumber === currentPageNumber ? styles$7.selected : styles$7.listItem}`, `${styles$7["pagination-item"]} pagination-item-rem`)
     }, pageNumber);
   }), /*#__PURE__*/React.createElement("button", {
     onClick: onNext,
-    className: styles$7["pagination-btn"],
+    className: `${styles$7["pagination-btn"]} pagination-btn-rem`,
     disabled: currentPageNumber === lastPage ? true : false
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon-arrow"
@@ -689,7 +680,7 @@ const Radio = ({
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   return /*#__PURE__*/React.createElement(React.Fragment, null, parseData.map((element, id) => {
     return /*#__PURE__*/React.createElement("label", {
-      className: styles$6["radio-wrap"],
+      className: `${styles$6["radio-wrap"]} radio-wrap-rem`,
       key: element.value
     }, /*#__PURE__*/React.createElement("input", _extends({
       type: "radio",
@@ -700,7 +691,7 @@ const Radio = ({
       value: value ? value : element.value,
       name: name ? name : element.name
     }, props)), /*#__PURE__*/React.createElement("span", {
-      className: styles$6["radio-checkmark"]
+      className: `${styles$6["radio-checkmark"]} radio-checkmark-rem`
     }), element.label ? /*#__PURE__*/React.createElement("span", {
       className: styles$6.labelRadio
     }, label ? label : element.label) : "");
@@ -761,7 +752,7 @@ const Captcha = ({
     className: styles$5.main
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$5.range
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement("i", {
     className: "icon-vector-down"
   })), /*#__PURE__*/React.createElement("input", {
     type: "range",
@@ -777,7 +768,7 @@ const Captcha = ({
     className: styles$5.progressBar
   }), /*#__PURE__*/React.createElement("div", {
     className: styles$5.range
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement("i", {
     className: "icon-vector-up"
   }))));
 };
@@ -800,9 +791,9 @@ const Stepper = ({
   stepLength,
   activeSteps
 }) => {
-  classnames(className);
+  classnames(className, 'stepper-inner-rem');
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$4['stepper-container']
+    className: `${styles$4['stepper-container']} stepper-container-rem`
   }, (() => {
     let steppers = [];
     for (let step = 1; step <= stepLength; step++) {
@@ -881,26 +872,26 @@ const Select = ({
     [styles$3.required]: required
   }, className);
   return /*#__PURE__*/React.createElement("div", null, label ? /*#__PURE__*/React.createElement("label", {
-    className: styles$3['select-title']
+    className: `${styles$3['select-title']} select-title-rem`
   }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
     style: {
       color: "#ee0000"
     }
   }, "*")) : "", /*#__PURE__*/React.createElement("div", {
-    className: styles$3['select-wrap'],
+    className: `${styles$3['select-wrap']} select-wrap-rem`,
     ref: ref
   }, /*#__PURE__*/React.createElement("div", {
     className: styles$3['select-content'],
     id: styles$3.selector
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3['select-content-top'],
+    className: `${styles$3['select-content-top']} select-content-top-rem`,
     onClick: () => {
       setOpened(!opened);
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3['select-content-top-text']
+    className: `${styles$3['select-content-top-text']} select-content-top-text-rem`
   }, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React.createElement("div", {
-    className: styles$3['select-content-top-icon']
+    className: `${styles$3['select-content-top-icon']} select-content-top-icon-rem`
   }, Object.keys(newSelected).length > 0 && /*#__PURE__*/React.createElement("i", {
     className: "icon-close",
     onClick: e => {
@@ -911,13 +902,13 @@ const Select = ({
   }), /*#__PURE__*/React.createElement("i", {
     className: opened ? 'icon-icon-up' : 'icon-icon-down'
   }))), opened && !disabled ? /*#__PURE__*/React.createElement("div", {
-    className: styles$3['select-content-bottom']
+    className: `${styles$3['select-content-bottom']} select-content-bottom-rem`
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$3['select-content-bottom-inner']
+    className: `${styles$3['select-content-bottom-inner']} select-content-bottom-inner-rem`
   }, options.map((option, i) => {
     return /*#__PURE__*/React.createElement("div", {
       key: i,
-      className: styles$3['select-content-bottom-row'],
+      className: `${styles$3['select-content-bottom-row']} select-content-bottom-row-rem`,
       disabled: true,
       onClick: () => {
         setNewSelected(option);
@@ -995,15 +986,15 @@ const File = ({
     }
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
-    className: styles$2['file-form-title']
+    className: `${styles$2['file-form-title']} ile-form-title-rem`
   }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
     style: {
       color: "#ee0000"
     }
   }, "*")), /*#__PURE__*/React.createElement("div", {
-    className: classnames(styles$2['file-form-wrap'], image ? styles$2['active'] : '')
+    className: classnames(`${styles$2['file-form-wrap']} file-form-wrap-rem`, image ? styles$2['active'] : '')
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$2['file-form'],
+    className: `${styles$2['file-form']} file-form-rem`,
     onChange: e => {
       console.log(e);
     },
@@ -1028,23 +1019,23 @@ const File = ({
       }
     }
   }), image ? /*#__PURE__*/React.createElement("div", {
-    className: styles$2['upload-file-content']
+    className: `${styles$2['upload-file-content']} upload-file-content-rem`
   }, /*#__PURE__*/React.createElement("img", {
     src: image,
     alt: fileName
   })) : /*#__PURE__*/React.createElement("div", {
-    className: styles$2['file-form-inner-upload']
+    className: `${styles$2['file-form-inner-upload']} ile-form-inner-upload-rem`
   }, /*#__PURE__*/React.createElement("img", {
     src: "../../assets/upload.svg",
     alt: ""
   }), /*#__PURE__*/React.createElement("span", {
-    className: styles$2['upload-info']
+    className: `${styles$2['upload-info']} upload-info-rem`
   }, /*#__PURE__*/React.createElement("span", {
-    className: styles$2['upload-info-txt']
+    className: `${styles$2['upload-info-txt']} upload-info-txt-rem`
   }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React.createElement("span", {
-    className: styles$2['upload-info-size']
+    className: `${styles$2['upload-info-size']} upload-info-size-rem`
   }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 5\u0544\u0532 ( jpg, jpeg, png, pdf)"))), /*#__PURE__*/React.createElement("div", {
-    className: styles$2['delete-upload-icon'],
+    className: `${styles$2['delete-upload-icon']} delete-upload-icon-rem`,
     onClick: e => {
       setFileName('no selected file');
       setImage(null);
@@ -1090,32 +1081,32 @@ const Modal = ({
   classnames(styles$1.modal, className);
   const [select, setSelect] = useState(selected);
   return /*#__PURE__*/React.createElement("div", {
-    className: styles$1["modal-wrap"]
+    className: `${styles$1["modal-wrap"]} modal-wrap-rem`
   }, type == "content" ? /*#__PURE__*/React.createElement("div", {
-    className: styles$1["modal-content"]
+    className: `${styles$1["modal-content"]} modal-content-rem`
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$1["modal-top"]
+    className: `${styles$1["modal-top"]} modal-top-rem`
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$1["modal-title"]
+    className: `${styles$1["modal-title"]} modal-title-rem`
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: TypographyType.p,
     color: "#00236A"
   }, headerText)), /*#__PURE__*/React.createElement("div", {
-    className: styles$1["close-btn"],
+    className: `${styles$1["close-btn"]} close-btn-rem`,
     onClick: () => setShow(false)
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon-close"
   }))), /*#__PURE__*/React.createElement("div", {
-    className: styles$1["modal-section"]
+    className: `${styles$1["modal-section"]} modal-section-rem`
   }, children)) : type == "images" ? /*#__PURE__*/React.createElement("div", {
-    className: styles$1["modal-content"]
+    className: `${styles$1["modal-content"]} modal-content-rem`
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$1["close-btn"],
+    className: `${styles$1["close-btn"]} close-btn-rem`,
     onClick: () => setShow(false)
   }, /*#__PURE__*/React.createElement("i", {
     className: "icon-close"
   })), /*#__PURE__*/React.createElement("div", {
-    className: styles$1["modal-section"]
+    className: `${styles$1["modal-section"]} modal-section-rem`
   }, /*#__PURE__*/React.createElement("div", null, select > 1 ? /*#__PURE__*/React.createElement("h1", {
     onClick: () => setSelect(select - 1)
   }, "-") : null, data.map(elem => {
@@ -1165,23 +1156,23 @@ const Table = ({
     return true;
   } : "";
   return /*#__PURE__*/React.createElement("div", {
-    className: styles["table-wrap"]
+    className: `${styles["table-wrap"]} table-wrap-rem`
   }, config.isHeader && hearderData.map((header, key) => {
     return /*#__PURE__*/React.createElement("div", {
-      className: styles["table-top"],
+      className: `${styles["table-top"]} table-top-rem`,
       key: key
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles["table-items"]
+      className: `${styles["table-items"]} table-items-rem`
     }, header));
   }), /*#__PURE__*/React.createElement("div", {
-    className: styles["table-bottom"]
+    className: `${styles["table-bottom"]} table-bottom-rem`
   }, tbodyData.map((item, key) => {
     return /*#__PURE__*/React.createElement("div", {
-      className: styles["table-bottom-inner"],
+      className: `${styles["table-bottom-inner"]} table-bottom-inner-rem`,
       key: key
     }, keyNames.map((keyName, keyNameKey) => {
       return /*#__PURE__*/React.createElement("div", {
-        className: styles["table-items"],
+        className: `${styles["table-items"]} table-items-rem`,
         key: keyNameKey
       }, config.isCheckbox && config.isCheckbox.showCheckbox && config.isCheckbox.showCheckbox(item) && keyNameKey == 0 && /*#__PURE__*/React.createElement(Checkbox, {
         onClick: e => {
@@ -1197,7 +1188,7 @@ const Table = ({
         className: keyName.icon
       }), item[keyName.name]));
     }), actions && /*#__PURE__*/React.createElement("div", {
-      className: styles["table-items"]
+      className: `${styles["table-items"]} table-items-rem`
     }, actions.filter(a => a.show && a.show(item) || a.show === undefined).map((action, key) => {
       return /*#__PURE__*/React.createElement("div", {
         key: key