@xaypay/tui 0.0.61 → 0.0.62

package/dist/index.es.js

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useRef, createRef, useMemo } from 'react';
+import * as React from 'react';
+import React__default, { useState, useEffect, useRef, createRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import styled, { keyframes, css } from 'styled-components';
@@ -97,46 +98,46 @@ const File = ({
     setFileName('no selected file');
     document.querySelector(`.${name}`).value = "";
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("p", {
     className: `${styles$b['file-form-title']} ile-form-title-rem`
-  }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
+  }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
       color: "#ee0000"
     }
-  }, "*")), /*#__PURE__*/React.createElement("div", {
+  }, "*")), /*#__PURE__*/React__default.createElement("div", {
     className: classnames(`${styles$b['file-form-wrap']} file-form-wrap-rem`, image ? styles$b['active'] : '')
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     onChange: e => console.log(e),
     className: `${styles$b['file-form']} file-form-rem ${errorMessage ? styles$b['error'] : ''}`,
     onClick: () => document.querySelector(`.${name}`).click()
-  }, /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React__default.createElement("input", {
     hidden: true,
     type: "file",
     className: name,
     disabled: disabled,
     onChange: e => handleCheckFile(e)
-  }), image ? /*#__PURE__*/React.createElement("div", {
+  }), image ? /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$b['upload-file-content']} upload-file-content-rem`
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React__default.createElement("img", {
     src: image,
     alt: fileName
-  })) : /*#__PURE__*/React.createElement("div", {
+  })) : /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$b['file-form-inner-upload']} ile-form-inner-upload-rem`
-  }, /*#__PURE__*/React.createElement("img", {
+  }, /*#__PURE__*/React__default.createElement("img", {
     src: "../../assets/upload.svg",
     alt: ""
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React__default.createElement("span", {
     className: `${styles$b['upload-info']} upload-info-rem`
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: `${styles$b['upload-info-txt']} upload-info-txt-rem`
-  }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React.createElement("span", {
+  }, "\u0532\u0565\u057C\u0576\u0565\u056C")), /*#__PURE__*/React__default.createElement("span", {
     className: `${styles$b['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(', '), " )"))), /*#__PURE__*/React.createElement("div", {
+  }, "\u0531\u057C\u0561\u057E\u0565\u056C\u0561\u0563\u0578\u0582\u0575\u0576\u0568 ", maxSize, "\u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$b['delete-upload-icon']} delete-upload-icon-rem`,
     onClick: handleRemoveFile
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-delete"
-  })), errorMessage || error ? /*#__PURE__*/React.createElement("span", {
+  })), errorMessage || error ? /*#__PURE__*/React__default.createElement("span", {
     style: {
       color: 'red'
     }
@@ -226,11 +227,11 @@ const Checkbox = ({
     value: 'value',
     label: 'label'
   } : '';
-  return /*#__PURE__*/React.createElement(React.Fragment, null, data.map(element => {
-    return /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, data.map(element => {
+    return /*#__PURE__*/React__default.createElement("label", {
       className: `${styles$9["checkbox-wrap"]} checkbox-wrap-rem`,
       key: element.value
-    }, /*#__PURE__*/React.createElement("input", _extends({
+    }, /*#__PURE__*/React__default.createElement("input", _extends({
       type: "checkbox",
       className: classProps,
       disabled: disabled,
@@ -241,9 +242,9 @@ const Checkbox = ({
       onChange: handleChange,
       onClick: onClick ? onClick : () => {},
       defaultChecked: element.checked
-    }, props)), /*#__PURE__*/React.createElement("span", {
+    }, props)), /*#__PURE__*/React__default.createElement("span", {
       className: `${styles$9["checkmark"]} checkmark-rem`
-    }), element[keyNames.label] ? /*#__PURE__*/React.createElement("label", {
+    }), element[keyNames.label] ? /*#__PURE__*/React__default.createElement("label", {
       className: styles$9.labelCheckbox,
       for: element[keyNames.id]
     }, element[keyNames.label]) : "");
@@ -285,26 +286,26 @@ const Table = ({
   config.isCheckbox && config.isCheckbox.showCheckbox == undefined ? config.isCheckbox.showCheckbox = () => {
     return true;
   } : "";
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$a["table-wrap"]} table-wrap-rem`
   }, config.isHeader && hearderData.map((header, key) => {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React__default.createElement("div", {
       className: `${styles$a["table-top"]} table-top-rem`,
       key: key
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React__default.createElement("div", {
       className: `${styles$a["table-items"]} table-items-rem`
     }, header));
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$a["table-bottom"]} table-bottom-rem`
   }, tbodyData.map((item, key) => {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React__default.createElement("div", {
       className: `${styles$a["table-bottom-inner"]} table-bottom-inner-rem`,
       key: key
     }, keyNames.map((keyName, keyNameKey) => {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React__default.createElement("div", {
         className: `${styles$a["table-items"]} table-items-rem`,
         key: keyNameKey
-      }, config.isCheckbox && config.isCheckbox.showCheckbox && config.isCheckbox.showCheckbox(item) && keyNameKey == 0 && /*#__PURE__*/React.createElement(Checkbox, {
+      }, config.isCheckbox && config.isCheckbox.showCheckbox && config.isCheckbox.showCheckbox(item) && keyNameKey == 0 && /*#__PURE__*/React__default.createElement(Checkbox, {
         onClick: e => {
           const id = e.target.id;
           const checkedValue = e.target.checked;
@@ -314,15 +315,15 @@ const Table = ({
           config.isCheckbox.onChange(ch);
         },
         jsonData: `[{"value":"", "name":"", "label":"", "id":${item.id}, "checked":${checked.indexOf(item.id) > -1 ? true : false}}]`
-      }), typeof keyName === "string" ? item[keyName] : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
+      }), typeof keyName === "string" ? item[keyName] : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("i", {
         className: keyName.icon
       }), item[keyName.name]));
-    }), actions && /*#__PURE__*/React.createElement("div", {
+    }), actions && /*#__PURE__*/React__default.createElement("div", {
       className: `${styles$a["table-items"]} table-items-rem`
     }, actions.filter(a => a.show && a.show(item) || a.show === undefined).map((action, key) => {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React__default.createElement("div", {
         key: key
-      }, /*#__PURE__*/React.createElement("i", {
+      }, /*#__PURE__*/React__default.createElement("i", {
         className: action.icon,
         onClick: action.click ? action.click : () => {}
       }, action.icon));
@@ -428,7 +429,7 @@ const Typography = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
-  const tagT = /*#__PURE__*/React.createElement(variant, {
+  const tagT = /*#__PURE__*/React__default.createElement(variant, {
     style: {
       border: border ? border : configStyles.TYPOGRAPHY.border,
       cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
@@ -488,51 +489,51 @@ const Modal = ({
 }) => {
   classnames(styles$8.modal, className);
   const [select, setSelect] = useState(selected);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["modal-wrap"]} modal-wrap-rem`,
     onClick: () => setShow(false)
-  }, type == "content" ? /*#__PURE__*/React.createElement("div", {
+  }, type == "content" ? /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["modal-content"]} modal-content-rem`,
     onClick: e => {
       e.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["modal-top"]} modal-top-rem`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["modal-title"]} modal-title-rem`
-  }, /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React__default.createElement(Typography, {
     variant: TypographyType.p,
     color: "#00236A"
-  }, headerText)), /*#__PURE__*/React.createElement("div", {
+  }, headerText)), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["close-btn"]} close-btn-rem`,
     onClick: () => setShow(false)
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-close"
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["modal-section"]} modal-section-rem`
-  }, children)) : type == "images" ? /*#__PURE__*/React.createElement("div", {
+  }, children)) : type == "images" ? /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["modal-content"]} modal-content-rem`,
     onClick: e => {
       e.stopPropagation();
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["close-btn"]} close-btn-rem`,
     onClick: () => setShow(false)
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-close"
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8["modal-section"]} modal-section-rem`
-  }, /*#__PURE__*/React.createElement("div", null, select > 1 ? /*#__PURE__*/React.createElement("h1", {
+  }, /*#__PURE__*/React__default.createElement("div", null, select > 1 ? /*#__PURE__*/React__default.createElement("h1", {
     onClick: () => setSelect(select - 1)
   }, "-") : null, data.map(elem => {
     if (select == elem.id) {
-      return /*#__PURE__*/React.createElement("img", {
+      return /*#__PURE__*/React__default.createElement("img", {
         width: "600px",
         key: elem.id,
         src: elem.url
       });
     }
-  }), select < data.length ? /*#__PURE__*/React.createElement("h1", {
+  }), select < data.length ? /*#__PURE__*/React__default.createElement("h1", {
     onClick: () => {
       setSelect(select + 1);
     }
@@ -634,9 +635,9 @@ const Input = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$7["input-wrap"]}`
-  }, label ? /*#__PURE__*/React.createElement("label", {
+  }, label ? /*#__PURE__*/React__default.createElement("label", {
     className: `${styles$7["input-title"]}`,
     style: {
       color: labelColor ? labelColor : configStyles.INPUT.labelColor,
@@ -646,11 +647,11 @@ const Input = ({
       lineHeight: labelLineHeight ? labelLineHeight : configStyles.INPUT.labelLineHeight,
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.INPUT.labelMarginBottom
     }
-  }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
+  }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
       color: "#ee0000"
     }
-  }, "*")) : '', /*#__PURE__*/React.createElement("div", {
+  }, "*")) : '', /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$7["input-content"]}`,
     style: {
       width: width ? width : configStyles.INPUT.width,
@@ -659,7 +660,7 @@ const Input = ({
     },
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }, leftIcon && leftIcon.length > 0 && type != 'tel' ? /*#__PURE__*/React.createElement("div", {
+  }, leftIcon && leftIcon.length > 0 && type != 'tel' ? /*#__PURE__*/React__default.createElement("div", {
     onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
     onMouseDown: type === 'password' ? _ => setShow(true) : _ => _,
     onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
@@ -673,7 +674,7 @@ const Input = ({
       borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
-  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React.createElement("div", {
+  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       pointerEvents: disabled ? 'none' : 'auto',
       fontSize: size ? size : configStyles.INPUT.size,
@@ -688,7 +689,7 @@ const Input = ({
       justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
-  }, "+374") : '', /*#__PURE__*/React.createElement("input", _extends({}, props, {
+  }, "+374") : '', /*#__PURE__*/React__default.createElement("input", _extends({}, props, {
     value: value,
     className: classProps,
     onChange: handleChange,
@@ -710,7 +711,7 @@ const Input = ({
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
       color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color
     }
-  })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React.createElement("div", {
+  })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
     onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
     onMouseDown: type === 'password' ? _ => setShow(true) : _ => _,
     onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
@@ -724,7 +725,7 @@ const Input = ({
       borderBottomRightRadius: radius ? radius : configStyles.INPUT.radius,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
-  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', errorMessage ? /*#__PURE__*/React.createElement(P, {
+  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', errorMessage ? /*#__PURE__*/React__default.createElement(P, {
     style: {
       left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
       color: errorColor ? errorColor : configStyles.INPUT.errorColor,
@@ -807,11 +808,11 @@ const Radio = ({
 }) => {
   const classProps = classnames(styles$6.checkbox, className);
   const parseData = jsonData.length !== 0 ? JSON.parse(jsonData) : [];
-  return /*#__PURE__*/React.createElement(React.Fragment, null, parseData.map((element, id) => {
-    return /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, parseData.map((element, id) => {
+    return /*#__PURE__*/React__default.createElement("label", {
       className: `${styles$6["radio-wrap"]} radio-wrap-rem`,
       key: element.value
-    }, /*#__PURE__*/React.createElement("input", _extends({
+    }, /*#__PURE__*/React__default.createElement("input", _extends({
       type: "radio",
       className: classProps,
       disabled: disabled,
@@ -819,9 +820,9 @@ const Radio = ({
       defaultChecked: id === 0 ? defaultChecked : "",
       value: value ? value : element.value,
       name: name ? name : element.name
-    }, props)), /*#__PURE__*/React.createElement("span", {
+    }, props)), /*#__PURE__*/React__default.createElement("span", {
       className: `${styles$6["radio-checkmark"]} radio-checkmark-rem`
-    }), element.label ? /*#__PURE__*/React.createElement("span", {
+    }), element.label ? /*#__PURE__*/React__default.createElement("span", {
       className: styles$6.labelRadio
     }, label ? label : element.label) : "");
   }));
@@ -884,7 +885,7 @@ const Button = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
-  return /*#__PURE__*/React.createElement("button", _extends({
+  return /*#__PURE__*/React__default.createElement("button", _extends({
     style: {
       fontSize: size ? size : configStyles.BUTTON.size,
       fontFamily: font ? font : configStyles.BUTTON.font,
@@ -944,13 +945,13 @@ var ReactCheckboxChecked = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\
 const SelectCheckbox = ({
   checked
 }) => {
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     style: {
       marginRight: '9px'
     }
-  }, checked ? /*#__PURE__*/React.createElement("img", {
+  }, checked ? /*#__PURE__*/React__default.createElement("img", {
     src: ReactCheckboxChecked
-  }) : /*#__PURE__*/React.createElement("img", {
+  }) : /*#__PURE__*/React__default.createElement("img", {
     src: ReactCheckbox
   }));
 };
@@ -958,11 +959,43 @@ SelectCheckbox.propTypes = {
   checked: PropTypes.bool
 };
 
-var ReactArrowIcon = "<svg width=\"15\" height=\"9\" viewBox=\"0 0 15 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.9878 8.00003C7.75456 8.00049 7.52851 7.91911 7.34892 7.77003L1.3594 2.77003C1.15554 2.60029 1.02734 2.35638 1.003 2.09196C0.978666 1.82753 1.06019 1.56425 1.22963 1.36003C1.39907 1.15581 1.64255 1.02739 1.90652 1.00301C2.17048 0.978631 2.4333 1.06029 2.63716 1.23003L7.9878 5.71003L13.3384 1.39003C13.4405 1.30697 13.558 1.24493 13.6842 1.2075C13.8103 1.17007 13.9425 1.15798 14.0733 1.17192C14.2041 1.18586 14.3309 1.22555 14.4463 1.28873C14.5618 1.3519 14.6636 1.4373 14.746 1.54003C14.8374 1.64285 14.9066 1.76348 14.9493 1.89435C14.9921 2.02523 15.0073 2.16353 14.9942 2.30059C14.9811 2.43765 14.9399 2.57053 14.8731 2.69088C14.8063 2.81124 14.7155 2.91649 14.6062 3.00003L8.6167 7.83003C8.43194 7.95555 8.21051 8.0154 7.9878 8.00003Z\" fill=\"#3C393E\"/>\n</svg>";
+const SvgArrow = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 15 9",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  d: "M7.988 8a.997.997 0 0 1-.64-.23l-5.989-5a1.002 1.002 0 0 1 .548-1.767.998.998 0 0 1 .73.227l5.35 4.48 5.351-4.32a.997.997 0 0 1 1.408.15 1 1 0 0 1-.14 1.46l-5.99 4.83a.997.997 0 0 1-.628.17Z",
+  fill: "#3C393E"
+}));
 
-var ReactCloseIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.4253 0.241029L12.431 0.236144C12.6129 0.0804082 12.8468 -0.00097097 13.0861 0.00827014C13.3253 0.0175112 13.5523 0.116692 13.7216 0.285992C13.8909 0.455292 13.9901 0.682241 13.9993 0.921488C14.0085 1.16074 13.9272 1.39466 13.7714 1.57651L13.7665 1.58222L8.38622 6.96254L13.7665 12.3429L13.7714 12.3486C13.9272 12.5304 14.0085 12.7643 13.9993 13.0036C13.9901 13.2428 13.8909 13.4698 13.7216 13.6391C13.5523 13.8084 13.3253 13.9076 13.0861 13.9168C12.8468 13.926 12.6129 13.8447 12.431 13.6889L12.4253 13.684L7.04493 8.30363L1.66742 13.6738C1.58315 13.7705 1.48016 13.8492 1.36462 13.9051C1.24669 13.9622 1.11823 13.9942 0.987309 13.9993C0.85639 14.0043 0.72584 13.9823 0.603852 13.9345C0.481865 13.8867 0.371073 13.8142 0.27843 13.7216C0.185788 13.6289 0.113295 13.5181 0.0655034 13.3961C0.0177115 13.2742 -0.00434842 13.1436 0.000708381 13.0127C0.00576522 12.8818 0.0378304 12.7533 0.0948891 12.6354C0.150805 12.5198 0.229542 12.4168 0.326326 12.3325L5.70384 6.96235L0.323475 1.57461L0.318633 1.56895C0.162897 1.3871 0.0815178 1.15317 0.0907589 0.913926C0.1 0.674678 0.199181 0.447729 0.36848 0.27843C0.53778 0.10913 0.76473 0.00995005 1.00398 0.000708956C1.24322 -0.00853214 1.47715 0.0728459 1.659 0.228582L1.66476 0.233511L7.04512 5.62125L12.4253 0.241029Z\" fill=\"#3C393E\"/>\n</svg>";
+const SvgCloseIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 14 14",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  d: "m12.425.241.006-.005a.95.95 0 0 1 1.34 1.34l-.005.006-5.38 5.38 5.38 5.38.005.007a.95.95 0 0 1-1.34 1.34l-.006-.005-5.38-5.38-5.378 5.37a.951.951 0 1 1-1.34-1.341l5.377-5.37-5.38-5.388-.005-.006a.95.95 0 0 1 1.34-1.34l.006.005 5.38 5.387 5.38-5.38Z",
+  fill: "#3C393E"
+}));
 
-var css_248z$5 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:1}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
+var css_248z$5 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:1}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
 var styles$5 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
 styleInject(css_248z$5);
 
@@ -1079,6 +1112,14 @@ const Select = ({
     e.target.style.color = optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor;
     e.target.style.backgroundColor = optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor;
   };
+  const isObjectEmpty = obj => {
+    for (var key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        return false;
+      }
+    }
+    return true;
+  };
   useEffect(() => {
     if (opened) {
       const checkIfClickedOutside = e => {
@@ -1093,7 +1134,7 @@ const Select = ({
     }
   }, [opened]);
   useEffect(() => {
-    selected && selected.length > 0 && setNewSelected(selected);
+    selected && selected.length > 0 && setNewSelected(isObjectEmpty(selected[0]) ? [] : selected);
     if (!multiple) {
       options && options.length > 0 && setExistOptions(options);
     } else {
@@ -1111,9 +1152,9 @@ const Select = ({
       setExistOptions(modifiedOptions);
     }
   }, [options, multiple, selected]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: classProps
-  }, label ? /*#__PURE__*/React.createElement("label", {
+  }, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.SELECT.labelColor,
       fontWeight: labelWeight ? labelWeight : configStyles.SELECT.labelWeight,
@@ -1123,15 +1164,15 @@ const Select = ({
       marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.SELECT.labelMarginBottom,
       textTransform: labelTextTransform ? labelTextTransform : configStyles.SELECT.labelTextTransform
     }
-  }, label, required && /*#__PURE__*/React.createElement("sup", {
+  }, label, required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
       color: "#ee0000"
     }
-  }, "*")) : "", /*#__PURE__*/React.createElement("div", {
+  }, "*")) : "", /*#__PURE__*/React__default.createElement("div", {
     ref: ref
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$5['select-content']
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
       minHeight: selectedMinHeight ? selectedMinHeight : configStyles.SELECT.selectedMinHeight,
@@ -1149,7 +1190,7 @@ const Select = ({
     onMouseEnter: disabled ? _ => _ : _ => handleMouseEnter(),
     onMouseLeave: disabled ? _ => _ : _ => handleMouseLeave(),
     className: `${styles$5['select-content-top']}`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$5['select-content-top-text']}`,
     style: {
       color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selectedHoverColor : selectedColor ? selectedColor : configStyles.SELECT.selectedColor
@@ -1162,26 +1203,20 @@ const Select = ({
         return newSelected[index][keyNames.name];
       }
     }
-  }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React.createElement("div", {
+  }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$5['select-content-top-icon']}`
-  }, multiple && newSelected.length > 1 && /*#__PURE__*/React.createElement("span", null, newSelected.length), newSelected && newSelected.length > 0 && /*#__PURE__*/React.createElement("div", {
+  }, multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$5['close-icon']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
     style: {
       marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
     }
-  }, closeIcon ? closeIcon : /*#__PURE__*/React.createElement("img", {
-    src: ReactCloseIcon,
-    alt: "icon"
-  })), /*#__PURE__*/React.createElement("div", {
+  }, closeIcon ? closeIcon : /*#__PURE__*/React__default.createElement(SvgCloseIcon, null)), /*#__PURE__*/React__default.createElement("div", {
     style: {
       transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
     },
     className: `${styles$5['arrow-icon']}`
-  }, arrowIcon ? arrowIcon : /*#__PURE__*/React.createElement("img", {
-    src: ReactArrowIcon,
-    alt: "icon"
-  })))), opened && !disabled ? /*#__PURE__*/React.createElement("div", {
+  }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default.createElement(SvgArrow, null)))), opened && !disabled ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
       borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
@@ -1189,10 +1224,10 @@ const Select = ({
       top: parseFloat(selectedMinHeight ? selectedMinHeight.substring(0, selectedMinHeight.length - 2) : configStyles.SELECT.selectedMinHeight.substring(0, configStyles.SELECT.selectedMinHeight.length - 2)) + 6 + 'px'
     },
     className: `${styles$5['select-content-bottom']}`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$5['select-content-bottom-inner']}`
   }, existOptions && existOptions.length > 0 && existOptions.map((option, i) => {
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React__default.createElement("div", {
       key: i,
       disabled: true,
       defaultValue: option[keyNames.id],
@@ -1212,10 +1247,10 @@ const Select = ({
         marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
         backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor
       }
-    }, multiple && multipleCheckbox ? /*#__PURE__*/React.createElement(SelectCheckbox, {
+    }, multiple && multipleCheckbox ? /*#__PURE__*/React__default.createElement(SelectCheckbox, {
       checked: option.checked
     }) : '', option[keyNames.name]);
-  }))) : null)), errorMessage ? /*#__PURE__*/React.createElement("span", {
+  }))) : null)), errorMessage ? /*#__PURE__*/React__default.createElement("span", {
     style: {
       color: errorColor ? errorColor : configStyles.SELECT.errorColor,
       fontSize: errorSize ? errorSize : configStyles.SELECT.errorSize
@@ -1314,7 +1349,7 @@ const Tooltip = ({
     tooltipRef.current && tooltipRef.current.clientWidth && tooltipRef.current.clientWidth > 0 && setCheckTooltipWidth(tooltipRef.current.clientWidth);
     tooltipRef.current && tooltipRef.current.clientHeight && tooltipRef.current.clientHeight > 0 && setCheckTooltipHeight(tooltipRef.current.clientHeight);
   }, [text, tooltipRef, checkTooltipWidth, checkTooltipHeight]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$4['tooltip-block']}`,
     style: {
       width: width ? width : configStyles.TOOLTIP.width,
@@ -1322,7 +1357,7 @@ const Tooltip = ({
       borderRadius: radius ? radius : configStyles.TOOLTIP.radius,
       backgroundColor: backgroundColor ? backgroundColor : configStyles.TOOLTIP.backgroundColor
     }
-  }, showTooltip ? /*#__PURE__*/React.createElement("div", {
+  }, showTooltip ? /*#__PURE__*/React__default.createElement("div", {
     ref: tooltipRef,
     className: classProps,
     style: {
@@ -1332,27 +1367,27 @@ const Tooltip = ({
       top: type === 'top' ? `calc(-${checkTooltipHeight + 7}px)` : type === 'bottom' ? 'calc(100% + 7px)' : type === 'left' || type === 'right' ? `calc(50% - ${checkTooltipHeight / 2}px)` : '0px',
       left: type === 'top' || type === 'bottom' ? `calc(50% - ${checkTooltipWidth / 2}px)` : type === 'left' ? `-${checkTooltipWidth + 7}px` : type === 'right' ? 'calc(100% + 7px)' : '0px'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$4['tooltip-rel']}`
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$4['tooltip-decor']}`,
     style: {
       backgroundColor: tooltipBackgroundColor ? tooltipBackgroundColor : configStyles.TOOLTIP.tooltipBackgroundColor,
       left: type === 'top' || type === 'bottom' ? 'calc(50% - 5px)' : type === 'right' ? '-15px' : type === 'left' ? 'calc(100% + 5px)' : '0px',
       top: type === 'top' ? 'calc(100% + 5px)' : type === 'bottom' ? '-15px' : type === 'right' || type === 'left' ? 'calc(50% - 5px)' : '0px'
     }
-  }), /*#__PURE__*/React.createElement("p", {
+  }), /*#__PURE__*/React__default.createElement("p", {
     style: {
       color: color ? color : configStyles.TOOLTIP.color,
       fontSize: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
       fontFamily: fontFamily ? fontFamily : configStyles.TOOLTIP.fontFamily
     }
-  }, text))) : '', /*#__PURE__*/React.createElement("div", {
+  }, text))) : '', /*#__PURE__*/React__default.createElement("div", {
     style: {
       cursor: 'pointer'
     },
     onClick: handleShow
-  }, tooltipIcon ? tooltipIcon : /*#__PURE__*/React.createElement("img", {
+  }, tooltipIcon ? tooltipIcon : /*#__PURE__*/React__default.createElement("img", {
     src: ReactInfoIcon
   })));
 };
@@ -1410,27 +1445,27 @@ const Captcha = ({
   function sliderChange(e) {
     setRight(rangeCount == e.target.value ? true : false);
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: styles$3.main
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$3.range
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-vector-down"
-  })), /*#__PURE__*/React.createElement("input", {
+  })), /*#__PURE__*/React__default.createElement("input", {
     type: "range",
     className: styles$3.slider,
     onClick: right ? onclick : null,
     onInput: sliderInput,
     onMouseUp: sliderChange
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: styles$3.selector
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$3.selectBtn
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement("div", {
     className: styles$3.progressBar
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: styles$3.range
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-vector-up"
   }))));
 };
@@ -1454,15 +1489,15 @@ const Stepper = ({
   activeSteps
 }) => {
   classnames(className, 'stepper-inner-rem');
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$2['stepper-container']} stepper-container-rem`
   }, (() => {
     let steppers = [];
     for (let step = 1; step <= stepLength; step++) {
-      steppers.push( /*#__PURE__*/React.createElement("div", {
+      steppers.push( /*#__PURE__*/React__default.createElement("div", {
         className: classnames(`${step <= activeSteps ? styles$2.activeRing : styles$2.bigRing}`),
         key: step
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React__default.createElement("div", {
         className: classnames(`${step <= activeSteps ? styles$2.smallActiveRing : styles$2.smallRing}`)
       }, step <= activeSteps ? step : "")));
     }
@@ -1579,50 +1614,50 @@ const Pagination = ({
     currentPageNumber !== 5 ? onPageChange(currentPageNumber - 5) : onPageChange(currentPageNumber - 4);
   };
   let lastPage = paginationRange[paginationRange.length - 1];
-  return /*#__PURE__*/React.createElement("ul", {
+  return /*#__PURE__*/React__default.createElement("ul", {
     className: classProps
-  }, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React__default.createElement("button", {
     className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
     onClick: onPrevious,
     disabled: currentPage === 1 ? true : false
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-arrow-back"
   })), paginationRange.map((pageNumber, id) => {
     if (pageNumber === Dots) {
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
-      return /*#__PURE__*/React.createElement("li", {
+      return /*#__PURE__*/React__default.createElement("li", {
         key: id,
         className: classnames(`${styles$1["pagination-jump-next"]} pagination-jump-next-rem`, styles$1.listItem),
         onClick: id < currentPageIndex ? onPreviousFive : onNextFive,
         disabled: currentPageIndex === 0 ? true : false
-      }, id < currentPageIndex ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      }, id < currentPageIndex ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
         className: `${styles$1["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
-      }, /*#__PURE__*/React.createElement("i", {
+      }, /*#__PURE__*/React__default.createElement("i", {
         className: "icon-text"
-      })), /*#__PURE__*/React.createElement("span", {
+      })), /*#__PURE__*/React__default.createElement("span", {
         className: `${styles$1["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
-      }, /*#__PURE__*/React.createElement("i", {
+      }, /*#__PURE__*/React__default.createElement("i", {
         className: "icon-arrow-jump-back"
-      }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+      }))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
         className: `${styles$1["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
-      }, /*#__PURE__*/React.createElement("i", {
+      }, /*#__PURE__*/React__default.createElement("i", {
         className: "icon-text"
-      })), /*#__PURE__*/React.createElement("span", {
+      })), /*#__PURE__*/React__default.createElement("span", {
         className: `${styles$1["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
-      }, /*#__PURE__*/React.createElement("i", {
+      }, /*#__PURE__*/React__default.createElement("i", {
         className: "icon-arrow-jump-next"
       }))));
     }
-    return /*#__PURE__*/React.createElement("li", {
+    return /*#__PURE__*/React__default.createElement("li", {
       onClick: () => onPageChange(pageNumber),
       key: id,
       className: classnames(`${pageNumber === currentPageNumber ? styles$1.selected : styles$1.listItem}`, `${styles$1["pagination-item"]} pagination-item-rem`)
     }, pageNumber);
-  }), /*#__PURE__*/React.createElement("button", {
+  }), /*#__PURE__*/React__default.createElement("button", {
     onClick: onNext,
     className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
     disabled: currentPageNumber === lastPage ? true : false
-  }, /*#__PURE__*/React.createElement("i", {
+  }, /*#__PURE__*/React__default.createElement("i", {
     className: "icon-arrow"
   })));
 };
@@ -1694,32 +1729,32 @@ const Autocomplate = ({
   let optionList;
   if (showOptions && inputValue) {
     if (parseOptionsData.length && inputValue.length >= searchCount) {
-      optionList = /*#__PURE__*/React.createElement("div", {
+      optionList = /*#__PURE__*/React__default.createElement("div", {
         className: `${styles['autocomplate-content-bottom']} autocomplate-content-bottom-rem`
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React__default.createElement("div", {
         className: `${styles['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", {
+        return /*#__PURE__*/React__default.createElement("div", {
           className: `${styles[className]} autocomplate-content-click-rem`,
           key: optionName[keyNames.id],
           onClick: handleClick
-        }, /*#__PURE__*/React.createElement("div", {
+        }, /*#__PURE__*/React__default.createElement("div", {
           id: optionName[keyNames.id],
           className: `${styles['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`
         }, optionName[keyNames.name]));
       })));
     } else {
-      optionList = /*#__PURE__*/React.createElement("div", {
+      optionList = /*#__PURE__*/React__default.createElement("div", {
         className: `${styles['autocomplate-content-bottom']} autocomplate-content-bottom-rem`
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React__default.createElement("div", {
         className: `${styles['autocomplate-content-bottom-inner']} autocomplate-content-bottom-inner-rem`
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React__default.createElement("div", {
         className: `${styles['autocomplate-content-bottom-row']} autocomplate-content-bottom-row-rem`
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/React__default.createElement("div", {
         className: `${styles['no-option']} autocomplate-no-option`
       }, inputValue.length < searchCount ? `Լրացնել առնվազն ${searchCount} նիշ` : 'Նման տվյալ առկա չէ'))));
     }
@@ -1728,15 +1763,15 @@ const Autocomplate = ({
     setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name]);
     setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id]);
   }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, label ? /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? /*#__PURE__*/React__default.createElement("label", {
     className: `${styles['autocomplate-title']} autocomplate-title-rem`
-  }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
+  }, label, " ", required && /*#__PURE__*/React__default.createElement("sup", {
     style: {
       color: "#ee0000"
     }
-  }, "*")) : "", /*#__PURE__*/React.createElement("div", {
+  }, "*")) : "", /*#__PURE__*/React__default.createElement("div", {
     className: `${styles['autocomplate-content']} autocomplate-content-rem`
-  }, /*#__PURE__*/React.createElement("input", _extends({
+  }, /*#__PURE__*/React__default.createElement("input", _extends({
     id: inputId,
     type: "text",
     autoComplete: autoComplete ? autoComplete : configStyles.INPUT.autoComplete,
@@ -1748,7 +1783,7 @@ const Autocomplate = ({
     },
     value: inputValue,
     placeholder: placeHolder
-  }, props)), errorMessage ? /*#__PURE__*/React.createElement("span", {
+  }, props)), errorMessage ? /*#__PURE__*/React__default.createElement("span", {
     className: styles.errorMessage
   }, errorMessage) : null, optionList));
 };

package/dist/index.js

@@ -9,7 +9,26 @@ var styled = require('styled-components');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
@@ -969,11 +988,43 @@ SelectCheckbox.propTypes = {
   checked: PropTypes__default["default"].bool
 };
 
-var ReactArrowIcon = "<svg width=\"15\" height=\"9\" viewBox=\"0 0 15 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.9878 8.00003C7.75456 8.00049 7.52851 7.91911 7.34892 7.77003L1.3594 2.77003C1.15554 2.60029 1.02734 2.35638 1.003 2.09196C0.978666 1.82753 1.06019 1.56425 1.22963 1.36003C1.39907 1.15581 1.64255 1.02739 1.90652 1.00301C2.17048 0.978631 2.4333 1.06029 2.63716 1.23003L7.9878 5.71003L13.3384 1.39003C13.4405 1.30697 13.558 1.24493 13.6842 1.2075C13.8103 1.17007 13.9425 1.15798 14.0733 1.17192C14.2041 1.18586 14.3309 1.22555 14.4463 1.28873C14.5618 1.3519 14.6636 1.4373 14.746 1.54003C14.8374 1.64285 14.9066 1.76348 14.9493 1.89435C14.9921 2.02523 15.0073 2.16353 14.9942 2.30059C14.9811 2.43765 14.9399 2.57053 14.8731 2.69088C14.8063 2.81124 14.7155 2.91649 14.6062 3.00003L8.6167 7.83003C8.43194 7.95555 8.21051 8.0154 7.9878 8.00003Z\" fill=\"#3C393E\"/>\n</svg>";
+const SvgArrow = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 15 9",
+  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: "M7.988 8a.997.997 0 0 1-.64-.23l-5.989-5a1.002 1.002 0 0 1 .548-1.767.998.998 0 0 1 .73.227l5.35 4.48 5.351-4.32a.997.997 0 0 1 1.408.15 1 1 0 0 1-.14 1.46l-5.99 4.83a.997.997 0 0 1-.628.17Z",
+  fill: "#3C393E"
+}));
 
-var ReactCloseIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.4253 0.241029L12.431 0.236144C12.6129 0.0804082 12.8468 -0.00097097 13.0861 0.00827014C13.3253 0.0175112 13.5523 0.116692 13.7216 0.285992C13.8909 0.455292 13.9901 0.682241 13.9993 0.921488C14.0085 1.16074 13.9272 1.39466 13.7714 1.57651L13.7665 1.58222L8.38622 6.96254L13.7665 12.3429L13.7714 12.3486C13.9272 12.5304 14.0085 12.7643 13.9993 13.0036C13.9901 13.2428 13.8909 13.4698 13.7216 13.6391C13.5523 13.8084 13.3253 13.9076 13.0861 13.9168C12.8468 13.926 12.6129 13.8447 12.431 13.6889L12.4253 13.684L7.04493 8.30363L1.66742 13.6738C1.58315 13.7705 1.48016 13.8492 1.36462 13.9051C1.24669 13.9622 1.11823 13.9942 0.987309 13.9993C0.85639 14.0043 0.72584 13.9823 0.603852 13.9345C0.481865 13.8867 0.371073 13.8142 0.27843 13.7216C0.185788 13.6289 0.113295 13.5181 0.0655034 13.3961C0.0177115 13.2742 -0.00434842 13.1436 0.000708381 13.0127C0.00576522 12.8818 0.0378304 12.7533 0.0948891 12.6354C0.150805 12.5198 0.229542 12.4168 0.326326 12.3325L5.70384 6.96235L0.323475 1.57461L0.318633 1.56895C0.162897 1.3871 0.0815178 1.15317 0.0907589 0.913926C0.1 0.674678 0.199181 0.447729 0.36848 0.27843C0.53778 0.10913 0.76473 0.00995005 1.00398 0.000708956C1.24322 -0.00853214 1.47715 0.0728459 1.659 0.228582L1.66476 0.233511L7.04512 5.62125L12.4253 0.241029Z\" fill=\"#3C393E\"/>\n</svg>";
+const SvgCloseIcon = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 14 14",
+  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: "m12.425.241.006-.005a.95.95 0 0 1 1.34 1.34l-.005.006-5.38 5.38 5.38 5.38.005.007a.95.95 0 0 1-1.34 1.34l-.006-.005-5.38-5.38-5.378 5.37a.951.951 0 1 1-1.34-1.341l5.377-5.37-5.38-5.388-.005-.006a.95.95 0 0 1 1.34-1.34l.006.005 5.38 5.387 5.38-5.38Z",
+  fill: "#3C393E"
+}));
 
-var css_248z$5 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:1}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
+var css_248z$5 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:1}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
 var styles$5 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
 styleInject(css_248z$5);
 
@@ -1090,6 +1141,14 @@ const Select = ({
     e.target.style.color = optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor;
     e.target.style.backgroundColor = optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor;
   };
+  const isObjectEmpty = obj => {
+    for (var key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        return false;
+      }
+    }
+    return true;
+  };
   React.useEffect(() => {
     if (opened) {
       const checkIfClickedOutside = e => {
@@ -1104,7 +1163,7 @@ const Select = ({
     }
   }, [opened]);
   React.useEffect(() => {
-    selected && selected.length > 0 && setNewSelected(selected);
+    selected && selected.length > 0 && setNewSelected(isObjectEmpty(selected[0]) ? [] : selected);
     if (!multiple) {
       options && options.length > 0 && setExistOptions(options);
     } else {
@@ -1181,18 +1240,12 @@ const Select = ({
     style: {
       marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
     }
-  }, closeIcon ? closeIcon : /*#__PURE__*/React__default["default"].createElement("img", {
-    src: ReactCloseIcon,
-    alt: "icon"
-  })), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, closeIcon ? closeIcon : /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null)), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
     },
     className: `${styles$5['arrow-icon']}`
-  }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default["default"].createElement("img", {
-    src: ReactArrowIcon,
-    alt: "icon"
-  })))), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default["default"].createElement(SvgArrow, null)))), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
       borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.61",
+  "version": "0.0.62",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -9,7 +9,7 @@
     "storybook": "STORYBOOK_PATH=../../tui.config.js  start-storybook -p 6006",
     "build-storybook": "STORYBOOK_PATH=../../tui.config.js build-storybook",
     "build-lib": "STORYBOOK_PATH=../tui.config.js rollup --config rollup.config.js",
-    "svgr": "svgr --icon --title-prop --replace-attr-values '#1D1D1D=currentColor' -d src/components/icon -- src/assets"
+    "svgr": "svgr --icon --title-prop -d src/components/icon -- src/assets/icons"
   },
   "author": "",
   "license": "MIT",
@@ -28,6 +28,7 @@
     "@storybook/react": "^6.5.10",
     "@storybook/testing-library": "^0.0.13",
     "@svgr/cli": "^6.4.0",
+    "@svgr/webpack": "^6.5.1",
     "babel-loader": "^8.2.5",
     "classnames": "^2.3.1",
     "css-loader": "^6.7.1",

package/src/components/icon/Arrow.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgArrow = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 15 9"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M7.988 8a.997.997 0 0 1-.64-.23l-5.989-5a1.002 1.002 0 0 1 .548-1.767.998.998 0 0 1 .73.227l5.35 4.48 5.351-4.32a.997.997 0 0 1 1.408.15 1 1 0 0 1-.14 1.46l-5.99 4.83a.997.997 0 0 1-.628.17Z"
+      fill="#3C393E"
+    />
+  </svg>
+);
+export default SvgArrow;

package/src/components/icon/CheckboxChecked.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgCheckboxChecked = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    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.8 0H3.2A3.2 3.2 0 0 0 0 3.2v9.6A3.2 3.2 0 0 0 3.2 16h9.6a3.2 3.2 0 0 0 3.2-3.2V3.2A3.2 3.2 0 0 0 12.8 0ZM6.85 10.966c.068.023.14.034.218.034.078 0 .151-.011.219-.034a.515.515 0 0 0 .19-.114l5.363-4.94A.496.496 0 0 0 13 5.53a.496.496 0 0 0-.16-.382.589.589 0 0 0-.415-.148.59.59 0 0 0-.416.148l-4.94 4.55-2.085-1.92a.579.579 0 0 0-.408-.147.579.579 0 0 0-.408.148A.52.52 0 0 0 4 8.16a.476.476 0 0 0 .154.383l2.506 2.308a.515.515 0 0 0 .19.114Z"
+      fill="#00236A"
+    />
+  </svg>
+);
+export default SvgCheckboxChecked;

package/src/components/icon/CheckboxUnchecked.js

@@ -0,0 +1,21 @@
+import * as React from "react";
+const SvgCheckboxUnchecked = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    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="M3.2 0h9.6A3.2 3.2 0 0 1 16 3.2v9.6a3.2 3.2 0 0 1-3.2 3.2H3.2A3.2 3.2 0 0 1 0 12.8V3.2A3.2 3.2 0 0 1 3.2 0Zm0 1.6a1.6 1.6 0 0 0-1.6 1.6v9.6a1.6 1.6 0 0 0 1.6 1.6h9.6a1.6 1.6 0 0 0 1.6-1.6V3.2a1.6 1.6 0 0 0-1.6-1.6H3.2Z"
+      fill="#D1D1D1"
+    />
+  </svg>
+);
+export default SvgCheckboxUnchecked;

package/src/components/icon/CloseIcon.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgCloseIcon = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="m12.425.241.006-.005a.95.95 0 0 1 1.34 1.34l-.005.006-5.38 5.38 5.38 5.38.005.007a.95.95 0 0 1-1.34 1.34l-.006-.005-5.38-5.38-5.378 5.37a.951.951 0 1 1-1.34-1.341l5.377-5.37-5.38-5.388-.005-.006a.95.95 0 0 1 1.34-1.34l.006.005 5.38 5.387 5.38-5.38Z"
+      fill="#3C393E"
+    />
+  </svg>
+);
+export default SvgCloseIcon;

package/src/components/icon/Tooltip.js

@@ -0,0 +1,19 @@
+import * as React from "react";
+const SvgTooltip = ({ title, titleId, ...props }) => (
+  <svg
+    width="1em"
+    height="1em"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path
+      d="M8 0a8 8 0 1 0 .001 16.001A8 8 0 0 0 8 0Zm.571 11.857A.143.143 0 0 1 8.43 12H7.57a.143.143 0 0 1-.142-.143V7c0-.079.064-.143.142-.143h.858c.078 0 .142.064.142.143v4.857ZM8 5.714A.857.857 0 0 1 8 4a.857.857 0 0 1 0 1.714Z"
+      fill="#D1D1D1"
+    />
+  </svg>
+);
+export default SvgTooltip;

package/src/components/icon/index.js

@@ -1,6 +1,5 @@
-export { default as HeartFilled } from "./HeartFilled";
-export { default as HeartOutline } from "./HeartOutline";
-export { default as LikeFilled } from "./LikeFilled";
-export { default as LikeOutline } from "./LikeOutline";
-export { default as StarFilled } from "./StarFilled";
-export { default as StarOutline } from "./StarOutline";
+export { default as Arrow } from "./Arrow";
+export { default as CheckboxChecked } from "./CheckboxChecked";
+export { default as CheckboxUnchecked } from "./CheckboxUnchecked";
+export { default as CloseIcon } from "./CloseIcon";
+export { default as Tooltip } from "./Tooltip";

package/src/components/select/index.js

@@ -2,11 +2,10 @@ import React, {useEffect, useState, useRef} from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { compereConfigs } from "./../../utils";
-
 import { SelectCheckbox } from './../selectCheckbox';
 
-import ReactArrowIcon from './../../assets/icons/arrow.svg';
-import ReactCloseIcon from './../../assets/icons/close-icon.svg';
+import ReactArrowIcon from '../icon/Arrow';
+import ReactCloseIcon from '../icon/CloseIcon';
 
 import styles from './select.module.css';
 
@@ -147,6 +146,15 @@ export const Select = ({
         e.target.style.backgroundColor = optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor;
     };
 
+    const isObjectEmpty = (obj) => {
+        for (var key in obj) {
+          if (obj.hasOwnProperty(key)) {
+            return false;
+          }
+        }
+        return true;
+      }
+
     useEffect(() => {
         if(opened){
             const checkIfClickedOutside = e => {
@@ -162,7 +170,7 @@ export const Select = ({
     }, [opened]);
 
     useEffect(() => {
-        selected && selected.length > 0 && setNewSelected(selected);
+        selected && selected.length > 0 && setNewSelected(isObjectEmpty(selected[0]) ? []: selected );
         if (!multiple) {
             options && options.length > 0 && setExistOptions(options);
         } else {
@@ -252,7 +260,7 @@ export const Select = ({
                                 onClick={disabled ? _ => _ : handleClearSelect}
                                 style={{marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'}}
                                 >
-                                    { closeIcon ? closeIcon : <img src={ReactCloseIcon} alt="icon" /> }
+                                    { closeIcon ? closeIcon : <ReactCloseIcon /> }
                                 </div>
                             }
 
@@ -261,7 +269,7 @@ export const Select = ({
                                     transform: opened ? 'rotate(180deg)' : 'rotate(0deg)',
                                 }}
                                 className={`${styles['arrow-icon']}`}>
-                                {arrowIcon ? arrowIcon : <img src={ReactArrowIcon} alt="icon"/>}
+                                {arrowIcon ? arrowIcon : <ReactArrowIcon />}
                             </div>
                         </div>
                     </div>

package/src/components/select/select.module.css

@@ -50,6 +50,7 @@
 .close-icon {
     padding-right: 9px;
     border-right: 1px solid #EEEEEE;
+    box-sizing: content-box;
 }
 
 .arrow-icon{

package/src/components/icon/LikeFilled.js

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-const SvgLikeFilled = ({ title, titleId, ...props }) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 23 20"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <g fill="none" fillRule="evenodd">
-      <path opacity={0.87} d="M-1-1h24v24H-1z" />
-      <path
-        d="M12.12 1.06 6.58 6.6c-.37.37-.58.88-.58 1.41V18c0 1.1.9 2 2 2h9c.8 0 1.52-.48 1.84-1.21l3.26-7.61C22.94 9.2 21.49 7 19.34 7h-5.65l.95-4.58c.1-.5-.05-1.01-.41-1.37-.59-.58-1.53-.58-2.11.01ZM2 20c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2s-2 .9-2 2v8c0 1.1.9 2 2 2Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
-
-export default SvgLikeFilled;

package/src/components/icon/LikeOutline.js

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-const SvgLikeOutline = ({ title, titleId, ...props }) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 22 20"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <g fill="none" fillRule="evenodd">
-      <path opacity={0.87} d="M-1-1h24v24H-1z" />
-      <path
-        d="M20 7h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L13.17 0 6.59 6.59C6.22 6.95 6 7.45 6 8v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73V9c0-1.1-.9-2-2-2Zm0 4-3 7H8V8l4.34-4.34L11.23 9H20v2ZM0 8h4v12H0V8Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
-
-export default SvgLikeOutline;

package/src/components/icon/StarFilled.js

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-const SvgStarFilled = ({ title, titleId, ...props }) => (
-  <svg
-    width="1em"
-    height="1em"
-    viewBox="0 0 18 17"
-    xmlns="http://www.w3.org/2000/svg"
-    role="img"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <g fill="none" fillRule="evenodd">
-      <path d="M-3-3h24v24H-3z" />
-      <path
-        d="m9 14.27 4.15 2.51c.76.46 1.69-.22 1.49-1.08l-1.1-4.72 3.67-3.18c.67-.58.31-1.68-.57-1.75l-4.83-.41-1.89-4.46c-.34-.81-1.5-.81-1.84 0L6.19 5.63l-4.83.41C.48 6.11.12 7.21.79 7.79l3.67 3.18-1.1 4.72c-.2.86.73 1.54 1.49 1.08L9 14.27Z"
-        fill="currentColor"
-      />
-    </g>
-  </svg>
-);
-
-export default SvgStarFilled;

package/src/components/icon/StarOutline.js

@@ -1,24 +0,0 @@
-import * as React from "react";
-
-const SvgStarOutline = ({ title, titleId, ...props }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth={2}
-    strokeLinecap="round"
-    strokeLinejoin="round"
-    className="star-outline_svg__feather star-outline_svg__feather-star"
-    width="1em"
-    height="1em"
-    role="img"
-    aria-labelledby={titleId}
-    {...props}
-  >
-    {title ? <title id={titleId}>{title}</title> : null}
-    <path d="m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-  </svg>
-);
-
-export default SvgStarOutline;