@xaypay/tui 0.0.46 → 0.0.48

package/dist/index.js

@@ -94,7 +94,7 @@ const Button = ({
   outline,
   ...props
 }) => {
-  const classProps = classnames__default["default"](styles$b.btn, styles$b[theme], styles$b[size], outline ? styles$b['type-outline'] : styles$b['type-filled'], className);
+  const classProps = classnames__default["default"](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__default["default"].createElement("button", _extends({
     type: "button",
@@ -163,7 +163,7 @@ const Typography = ({
   children,
   ...props
 }) => {
-  const classProps = classnames__default["default"](className, bold ? 'bold' : '');
+  const classProps = classnames__default["default"](className, 'sizes-rem', bold ? 'bold' : '');
   const CustomTag = variant;
 
   // const Tag = ({ className, children }) => (
@@ -255,47 +255,47 @@ const Autocomplate = ({
   if (showOptions && inputValue) {
     if (parseOptionsData.length && inputValue.length >= searchCount) {
       optionList = /*#__PURE__*/React__default["default"].createElement("div", {
-        className: styles$a['autocomplate-content-bottom']
+        className: `${styles$a['autocomplate-content-bottom']} autocomplate-content-bottom-rem`
       }, /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
-          className: styles$a[className],
+          className: `${styles$a[className]} autocomplate-content-click-rem`,
           key: optionName[keyNames.id],
           onClick: handleClick
         }, /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
-        className: styles$a['autocomplate-content-bottom']
+        className: `${styles$a['autocomplate-content-bottom']} autocomplate-content-bottom-rem`
       }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: styles$a['autocomplate-content-bottom-inner']
+        className: `${styles$a['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`
       }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: styles$a['autocomplate-content-bottom-row']
+        className: `${styles$a['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`
       }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: styles$a['no-option']
+        className: `${styles$a['no-option']} autocomplate-no-option`
       }, inputValue.length <= searchCount ? `առնվազն ${searchCount} նիշ` : 'տվյալներ չկան'))));
     }
   }
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
-    className: styles$a['autocomplate-title']
+    className: `${styles$a['autocomplate-title']} autocomplate-title-rem`
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
     style: {
       color: "#ee0000"
     }
   }, "*")) : "", /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$a['autocomplate-content']
+    className: `${styles$a['autocomplate-content']} autocomplate-content-rem`
   }, /*#__PURE__*/React__default["default"].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: () => {
@@ -342,7 +342,7 @@ const Checkbox = ({
   onClick,
   ...props
 }) => {
-  const classProps = classnames__default["default"](styles$9.checkbox, className);
+  const classProps = classnames__default["default"](styles$9.checkbox, className, 'checkbox-input-rem');
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   const [data, setData] = React.useState(parseData);
   React.useEffect(() => {
@@ -375,7 +375,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"],
+      className: `${styles$9["checkbox-wrap"]} checkbox-wrap-rem`,
       key: element.value
     }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
       type: "checkbox",
@@ -389,7 +389,7 @@ const Checkbox = ({
       onClick: onClick ? onClick : () => {},
       defaultChecked: element.checked
     }, props)), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: styles$9["checkmark"]
+      className: `${styles$9["checkmark"]} checkmark-rem`
     }), element[keyNames.label] ? /*#__PURE__*/React__default["default"].createElement("label", {
       className: styles$9.labelCheckbox,
       for: element[keyNames.id]
@@ -416,15 +416,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__default["default"].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);
@@ -471,11 +462,11 @@ const Input = ({
     const regex = new RegExp(regexp);
     eMessage = regex.test(inputValue) ? "" : regexpError;
   }
-  const classProps = classnames__default["default"](styles$8.input, styles$8[size], eMessage != '' ? styles$8['error-message'] : "", className);
+  const classProps = classnames__default["default"](styles$8.input, styles$8[size], eMessage != '' ? styles$8['error-message'] : "", className, 'input-inner-rem');
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$8['input-wrap']
+    className: `${styles$8['input-wrap']} input-wrap-rem`
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
-    className: styles$8['input-title']
+    className: `${styles$8['input-title']} input-title-rem`
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
     style: {
       color: "#ee0000"
@@ -607,7 +598,7 @@ const Pagination = ({
   if (currentPageNumber === 0 || paginationRange.length < 2) {
     return null;
   }
-  const classProps = classnames__default["default"](styles$7.list, className ? className : styles$7["pagination-bar"]);
+  const classProps = classnames__default["default"](styles$7.list, className ? className : `${styles$7["pagination-bar"]} pagination-bar-rem`);
   const onNext = () => {
     onPageChange(currentPageNumber + 1);
   };
@@ -624,7 +615,7 @@ const Pagination = ({
   return /*#__PURE__*/React__default["default"].createElement("ul", {
     className: classProps
   }, /*#__PURE__*/React__default["default"].createElement("button", {
-    className: styles$7["pagination-btn"],
+    className: `${styles$7["pagination-btn"]} pagination-btn-rem`,
     onClick: onPrevious,
     disabled: currentPage === 1 ? true : false
   }, /*#__PURE__*/React__default["default"].createElement("i", {
@@ -634,23 +625,23 @@ const Pagination = ({
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
       return /*#__PURE__*/React__default["default"].createElement("li", {
         key: id,
-        className: classnames__default["default"](styles$7["pagination-jump-next"], styles$7.listItem),
+        className: classnames__default["default"](`${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__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-        className: styles$7["pagination-jump-next-txt"]
+        className: `${styles$7["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
       }, /*#__PURE__*/React__default["default"].createElement("i", {
         className: "icon-text"
       })), /*#__PURE__*/React__default["default"].createElement("span", {
-        className: styles$7["pagination-jump-next-arrow"]
+        className: `${styles$7["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
       }, /*#__PURE__*/React__default["default"].createElement("i", {
         className: "icon-arrow-jump-back"
       }))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-        className: styles$7["pagination-jump-next-txt"]
+        className: `${styles$7["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
       }, /*#__PURE__*/React__default["default"].createElement("i", {
         className: "icon-text"
       })), /*#__PURE__*/React__default["default"].createElement("span", {
-        className: styles$7["pagination-jump-next-arrow"]
+        className: `${styles$7["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
       }, /*#__PURE__*/React__default["default"].createElement("i", {
         className: "icon-arrow-jump-next"
       }))));
@@ -658,11 +649,11 @@ const Pagination = ({
     return /*#__PURE__*/React__default["default"].createElement("li", {
       onClick: () => onPageChange(pageNumber),
       key: id,
-      className: classnames__default["default"](`${pageNumber === currentPageNumber ? styles$7.selected : styles$7.listItem}`, styles$7["pagination-item"])
+      className: classnames__default["default"](`${pageNumber === currentPageNumber ? styles$7.selected : styles$7.listItem}`, `${styles$7["pagination-item"]} pagination-item-rem`)
     }, pageNumber);
   }), /*#__PURE__*/React__default["default"].createElement("button", {
     onClick: onNext,
-    className: styles$7["pagination-btn"],
+    className: `${styles$7["pagination-btn"]} pagination-btn-rem`,
     disabled: currentPageNumber === lastPage ? true : false
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-arrow"
@@ -700,7 +691,7 @@ const Radio = ({
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, parseData.map((element, id) => {
     return /*#__PURE__*/React__default["default"].createElement("label", {
-      className: styles$6["radio-wrap"],
+      className: `${styles$6["radio-wrap"]} radio-wrap-rem`,
       key: element.value
     }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
       type: "radio",
@@ -711,7 +702,7 @@ const Radio = ({
       value: value ? value : element.value,
       name: name ? name : element.name
     }, props)), /*#__PURE__*/React__default["default"].createElement("span", {
-      className: styles$6["radio-checkmark"]
+      className: `${styles$6["radio-checkmark"]} radio-checkmark-rem`
     }), element.label ? /*#__PURE__*/React__default["default"].createElement("span", {
       className: styles$6.labelRadio
     }, label ? label : element.label) : "");
@@ -772,7 +763,7 @@ const Captcha = ({
     className: styles$5.main
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$5.range
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-vector-down"
   })), /*#__PURE__*/React__default["default"].createElement("input", {
     type: "range",
@@ -788,7 +779,7 @@ const Captcha = ({
     className: styles$5.progressBar
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$5.range
-  }, /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-vector-up"
   }))));
 };
@@ -811,9 +802,9 @@ const Stepper = ({
   stepLength,
   activeSteps
 }) => {
-  classnames__default["default"](className);
+  classnames__default["default"](className, 'stepper-inner-rem');
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$4['stepper-container']
+    className: `${styles$4['stepper-container']} stepper-container-rem`
   }, (() => {
     let steppers = [];
     for (let step = 1; step <= stepLength; step++) {
@@ -892,26 +883,26 @@ const Select = ({
     [styles$3.required]: required
   }, className);
   return /*#__PURE__*/React__default["default"].createElement("div", null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
-    className: styles$3['select-title']
+    className: `${styles$3['select-title']} select-title-rem`
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
     style: {
       color: "#ee0000"
     }
   }, "*")) : "", /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$3['select-wrap'],
+    className: `${styles$3['select-wrap']} select-wrap-rem`,
     ref: ref
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$3['select-content'],
     id: styles$3.selector
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$3['select-content-top'],
+    className: `${styles$3['select-content-top']} select-content-top-rem`,
     onClick: () => {
       setOpened(!opened);
     }
   }, /*#__PURE__*/React__default["default"].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__default["default"].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__default["default"].createElement("i", {
     className: "icon-close",
     onClick: e => {
@@ -922,13 +913,13 @@ const Select = ({
   }), /*#__PURE__*/React__default["default"].createElement("i", {
     className: opened ? 'icon-icon-up' : 'icon-icon-down'
   }))), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$3['select-content-bottom']
+    className: `${styles$3['select-content-bottom']} select-content-bottom-rem`
   }, /*#__PURE__*/React__default["default"].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__default["default"].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);
@@ -1006,15 +997,15 @@ const File = ({
     }
   }
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
-    className: styles$2['file-form-title']
+    className: `${styles$2['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$2['file-form-wrap'], image ? styles$2['active'] : '')
+    className: classnames__default["default"](`${styles$2['file-form-wrap']} file-form-wrap-rem`, image ? styles$2['active'] : '')
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$2['file-form'],
+    className: `${styles$2['file-form']} file-form-rem`,
     onChange: e => {
       console.log(e);
     },
@@ -1039,23 +1030,23 @@ const File = ({
       }
     }
   }), image ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$2['upload-file-content']
+    className: `${styles$2['upload-file-content']} upload-file-content-rem`
   }, /*#__PURE__*/React__default["default"].createElement("img", {
     src: image,
     alt: fileName
   })) : /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$2['file-form-inner-upload']
+    className: `${styles$2['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$2['upload-info']
+    className: `${styles$2['upload-info']} upload-info-rem`
   }, /*#__PURE__*/React__default["default"].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__default["default"].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__default["default"].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);
@@ -1101,32 +1092,32 @@ const Modal = ({
   classnames__default["default"](styles$1.modal, className);
   const [select, setSelect] = React.useState(selected);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$1["modal-wrap"]
+    className: `${styles$1["modal-wrap"]} modal-wrap-rem`
   }, type == "content" ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$1["modal-content"]
+    className: `${styles$1["modal-content"]} modal-content-rem`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$1["modal-top"]
+    className: `${styles$1["modal-top"]} modal-top-rem`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$1["modal-title"]
+    className: `${styles$1["modal-title"]} modal-title-rem`
   }, /*#__PURE__*/React__default["default"].createElement(Typography, {
     variant: TypographyType.p,
     color: "#00236A"
   }, headerText)), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$1["close-btn"],
+    className: `${styles$1["close-btn"]} close-btn-rem`,
     onClick: () => setShow(false)
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-close"
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$1["modal-section"]
+    className: `${styles$1["modal-section"]} modal-section-rem`
   }, children)) : type == "images" ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$1["modal-content"]
+    className: `${styles$1["modal-content"]} modal-content-rem`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$1["close-btn"],
+    className: `${styles$1["close-btn"]} close-btn-rem`,
     onClick: () => setShow(false)
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-close"
   })), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$1["modal-section"]
+    className: `${styles$1["modal-section"]} modal-section-rem`
   }, /*#__PURE__*/React__default["default"].createElement("div", null, select > 1 ? /*#__PURE__*/React__default["default"].createElement("h1", {
     onClick: () => setSelect(select - 1)
   }, "-") : null, data.map(elem => {
@@ -1176,23 +1167,23 @@ const Table = ({
     return true;
   } : "";
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles["table-wrap"]
+    className: `${styles["table-wrap"]} table-wrap-rem`
   }, config.isHeader && hearderData.map((header, key) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles["table-top"],
+      className: `${styles["table-top"]} table-top-rem`,
       key: key
     }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: styles["table-items"]
+      className: `${styles["table-items"]} table-items-rem`
     }, header));
   }), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles["table-bottom"]
+    className: `${styles["table-bottom"]} table-bottom-rem`
   }, tbodyData.map((item, key) => {
     return /*#__PURE__*/React__default["default"].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__default["default"].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__default["default"].createElement(Checkbox, {
         onClick: e => {
@@ -1208,7 +1199,7 @@ const Table = ({
         className: keyName.icon
       }), item[keyName.name]));
     }), actions && /*#__PURE__*/React__default["default"].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__default["default"].createElement("div", {
         key: key

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -46,8 +46,8 @@
     "styled-components": "^5.3.5"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "17 - 18",
+    "react-dom": "17 - 18",
     "styled-components": "^5.3.5",
     "classnames": "^2.3.1"
   },

package/src/components/autocomplate/index.js

@@ -54,8 +54,8 @@ export const Autocomplate = ({
   if (showOptions && inputValue) {
     if (parseOptionsData.length && inputValue.length >= searchCount) {
       optionList = (
-        <div className={styles['autocomplate-content-bottom']}>
-          <div className={styles['autocomplate-content-bottom-inner']}>
+        <div className={`${styles['autocomplate-content-bottom']} autocomplate-content-bottom-rem`}>
+          <div className={`${styles['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`}>
             {parseOptionsData.map((optionName, index) => {
               let className;
               if (index === activeOption) {
@@ -63,11 +63,11 @@ export const Autocomplate = ({
               }
               return (
                 <div
-                  className={styles[className]}
+                  className={`${styles[className]} autocomplate-content-click-rem`}
                   key={optionName[keyNames.id]}
                   onClick={handleClick}
                 >
-                  <div id={optionName[keyNames.id]} className={styles['autocomplate-content-bottom-row']}>{optionName[keyNames.name]}</div>
+                  <div id={optionName[keyNames.id]} className={`${styles['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`}>{optionName[keyNames.name]}</div>
                 </div>
               );
             })}
@@ -78,10 +78,10 @@ export const Autocomplate = ({
       );
     } else {
       optionList = (
-        <div className={styles['autocomplate-content-bottom']}>
-          <div className={styles['autocomplate-content-bottom-inner']}>
-            <div className={styles['autocomplate-content-bottom-row']}>
-              <div className={styles['no-option']}>{inputValue.length <= searchCount ? `առնվազն ${searchCount} նիշ` :  'տվյալներ չկան'}</div>
+        <div className={`${styles['autocomplate-content-bottom']} autocomplate-content-bottom-rem`}>
+          <div className={`${styles['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`}>
+            <div className={`${styles['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`}>
+              <div className={`${styles['no-option']} autocomplate-no-option`}>{inputValue.length <= searchCount ? `առնվազն ${searchCount} նիշ` :  'տվյալներ չկան'}</div>
             </div>
           </div>
         </div>
@@ -91,12 +91,12 @@ export const Autocomplate = ({
 
   return (
     <>
-      {label ? <label className={styles['autocomplate-title']}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</label> : ""}
-      <div className={styles['autocomplate-content']}>
+      {label ? <label className={`${styles['autocomplate-title']} autocomplate-title-rem`}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</label> : ""}
+      <div className={`${styles['autocomplate-content']} autocomplate-content-rem`}>
         <input
           id={inputId}
           type="text"
-          className={styles['autocomplate-content-top']}
+          className={`${styles['autocomplate-content-top']} autocomplate-content-top-rem`}
           disabled={disabled}
           onChange={handleChange}
           onClick={() => { setShowOptions(!showOptions) }}

package/src/components/button/index.js

@@ -36,7 +36,8 @@ export const Button = ({ primary, backgroundColor, theme, size, className, disab
     styles[theme],
     styles[size],
     outline ? styles['type-outline'] : styles['type-filled'],
-    className
+    className,
+    'button-rem'
   );
   // className='btn type-outline size-default' 
   return (

package/src/components/captcha/index.js

@@ -40,7 +40,8 @@ export const Captcha = ({ onclick, rangeCount }) => {
     <>
       <div className={styles.main}>
         <div className={styles.range}>
-          <Icon className='icon-vector-down'/>
+          {/*<Icon className='icon-vector-down'/>*/}
+          <i className='icon-vector-down'></i>
         </div>
         <input type='range' className={styles.slider} onClick={right ? onclick : null} onInput={sliderInput} onMouseUp={sliderChange} />
         <div className={styles.selector} >
@@ -48,7 +49,8 @@ export const Captcha = ({ onclick, rangeCount }) => {
         </div>
         <div className={styles.progressBar}></div>
         <div className={styles.range} >
-          <Icon className='icon-vector-up'/>
+          {/*<Icon className='icon-vector-up'/>*/}
+          <i className='icon-vector-up'></i>
         </div>
       </div>
 

package/src/components/checkbox/index.js

@@ -17,7 +17,7 @@ export const Checkbox = ({
   onClick,
   ...props
 }) => {
-  const classProps = classNames(styles.checkbox, className);
+  const classProps = classNames(styles.checkbox, className, 'checkbox-input-rem');
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
   const [data, setData] = useState(parseData);
 
@@ -51,7 +51,7 @@ export const Checkbox = ({
     <>
       {data.map((element) => {
         return (
-          <label className={styles["checkbox-wrap"]} key={element.value}>
+          <label className={`${styles["checkbox-wrap"]} checkbox-wrap-rem`} key={element.value}>
             <input
               type="checkbox"
               className={classProps}
@@ -65,7 +65,7 @@ export const Checkbox = ({
               defaultChecked = {element.checked}
               {...props}
             />
-            <span className={styles["checkmark"]} />
+            <span className={`${styles["checkmark"]} checkmark-rem`} />
             {element[keyNames.label] ? (
               <label
                 className={styles.labelCheckbox}

package/src/components/file/index.js

@@ -51,10 +51,10 @@ export const File = ({
 
   return (
       <>
-      <p className={styles['file-form-title']}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</p>
-      <div className={classnames(styles['file-form-wrap'],image ? styles['active'] : '')}>
+      <p className={`${styles['file-form-title']} ile-form-title-rem`}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</p>
+      <div className={classnames(`${styles['file-form-wrap']} file-form-wrap-rem`,image ? styles['active'] : '')}>
         <div
-          className={styles['file-form']}
+          className={`${styles['file-form']} file-form-rem`}
             onChange={(e) => { console.log(e) }}
             style={error || errorMesage ? { borderColor: 'red' } : {}}
             onClick={() => {
@@ -70,20 +70,20 @@ export const File = ({
           />
             {
                 image ?
-                    <div className={styles['upload-file-content']}>
+                    <div className={`${styles['upload-file-content']} upload-file-content-rem`}>
                       <img
                           src={image}
                           alt={fileName}
                       />
                     </div> :
-                    <div className={styles['file-form-inner-upload']}>
+                    <div className={`${styles['file-form-inner-upload']} ile-form-inner-upload-rem`}>
                       <img src="../../assets/upload.svg" alt=""/>
-                      <span className={styles['upload-info']}><span className={styles['upload-info-txt']}>Բեռնել</span></span>
-                      <span className={styles['upload-info-size']}>Առավելագույնը 5ՄԲ ( jpg, jpeg, png, pdf)</span>
+                      <span className={`${styles['upload-info']} upload-info-rem`}><span className={`${styles['upload-info-txt']} upload-info-txt-rem`}>Բեռնել</span></span>
+                      <span className={`${styles['upload-info-size']} upload-info-size-rem`}>Առավելագույնը 5ՄԲ ( jpg, jpeg, png, pdf)</span>
                     </div>
             }
         </div>
-        <div className={styles['delete-upload-icon']}
+        <div className={`${styles['delete-upload-icon']} delete-upload-icon-rem`}
              onClick={(e) => {
                  setFileName('no selected file');
                  setImage(null);

package/src/components/input/index.js

@@ -50,10 +50,10 @@ export const Input = ({
     eMessage = regex.test(inputValue) ? "" : regexpError;
   }
 
-  const classProps = classnames(styles.input, styles[size], eMessage != '' ? styles['error-message'] :"" , className);
+  const classProps = classnames(styles.input, styles[size], eMessage != '' ? styles['error-message'] :"" , className,'input-inner-rem');
   return (
-    <div className={styles['input-wrap']}>
-      {label ? <label className={styles['input-title']}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</label> : ""}
+    <div className={`${styles['input-wrap']} input-wrap-rem`}>
+      {label ? <label className={`${styles['input-title']} input-title-rem`}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</label> : ""}
       <input
         {...props}
         type={type}