@xaypay/tui 0.0.58 → 0.0.60

package/dist/index.js

@@ -57,7 +57,7 @@ const File = ({
   onChange,
   className,
   defaultData,
-  errorMesage,
+  errorMessage,
   fileExtensions,
   ...props
 }) => {
@@ -108,12 +108,6 @@ const File = ({
     setFileName('no selected file');
     document.querySelector(`.${name}`).value = "";
   };
-  React.useEffect(() => {
-    return () => {
-      setError('');
-      setImage(null);
-    };
-  }, []);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
     className: `${styles$b['file-form-title']} ile-form-title-rem`
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
@@ -124,7 +118,7 @@ const File = ({
     className: classnames__default["default"](`${styles$b['file-form-wrap']} file-form-wrap-rem`, image ? styles$b['active'] : '')
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     onChange: e => console.log(e),
-    className: `${styles$b['file-form']} file-form-rem ${errorMesage ? styles$b['error'] : ''}`,
+    className: `${styles$b['file-form']} file-form-rem ${errorMessage ? styles$b['error'] : ''}`,
     onClick: () => document.querySelector(`.${name}`).click()
   }, /*#__PURE__*/React__default["default"].createElement("input", {
     hidden: true,
@@ -153,11 +147,11 @@ const File = ({
     onClick: handleRemoveFile
   }, /*#__PURE__*/React__default["default"].createElement("i", {
     className: "icon-delete"
-  })), errorMesage || error ? /*#__PURE__*/React__default["default"].createElement("span", {
+  })), errorMessage || error ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: 'red'
     }
-  }, errorMesage || error) : null));
+  }, errorMessage || error) : null));
 };
 File.propTypes = {
   label: PropTypes__default["default"].string,
@@ -166,7 +160,7 @@ File.propTypes = {
   onChange: PropTypes__default["default"].func,
   maxSize: PropTypes__default["default"].number,
   className: PropTypes__default["default"].string,
-  errorMesage: PropTypes__default["default"].string,
+  errorMessage: PropTypes__default["default"].string,
   defaultData: PropTypes__default["default"].object,
   fileExtensions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
 };
@@ -358,7 +352,7 @@ Table.propTypes = {
 Table.defaultProps = {
   className: "",
   onChange: undefined,
-  errorMesage: "",
+  errorMessage: "",
   config: {
     isHeader: true,
     isCheckbox: {
@@ -415,8 +409,6 @@ const Typography = ({
   radius,
   border,
   cursor,
-  margin,
-  padding,
   variant,
   onClick,
   children,
@@ -453,9 +445,7 @@ const Typography = ({
       cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
       borderRadius: radius ? radius : configStyles.TYPOGRAPHY.radius,
       fontSize: size ? size : configStyles.TYPOGRAPHY['size' + variant],
-      margin: margin ? margin : configStyles.TYPOGRAPHY['margin' + variant],
       fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight' + variant],
-      padding: padding ? padding : configStyles.TYPOGRAPHY['padding' + variant],
       textShadow: textShadow ? textShadow : configStyles.TYPOGRAPHY.textShadow,
       textAlign: textAlign ? textAlign : configStyles.TYPOGRAPHY['textAlign' + variant],
       fontStyle: fontStyle ? fontStyle : configStyles.TYPOGRAPHY['fontStyle' + variant],
@@ -481,9 +471,7 @@ Typography.propTypes = {
   weight: PropTypes__default["default"].string,
   border: PropTypes__default["default"].string,
   cursor: PropTypes__default["default"].string,
-  margin: PropTypes__default["default"].string,
   radius: PropTypes__default["default"].string,
-  padding: PropTypes__default["default"].string,
   textAlign: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   fontStyle: PropTypes__default["default"].string,
@@ -610,6 +598,7 @@ const Input = ({
   errorZindex,
   errorBottom,
   labelWeight,
+  phoneDisplay,
   errorMessage,
   autoComplete,
   labelDisplay,
@@ -617,10 +606,12 @@ const Input = ({
   boxShadowHover,
   errorClassName,
   errorAnimation,
+  phoneAlignItems,
   errorLineHeight,
   labelLineHeight,
   backgroundColor,
   labelMarginBottom,
+  phoneJustifyContent,
   errorAnimationDuration,
   ...props
 }) => {
@@ -702,8 +693,11 @@ const Input = ({
       boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
       borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
       borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
-      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
-      color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color
+      display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
+      alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
+      color: errorMessage && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+      justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
+      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
   }, "+374") : '', /*#__PURE__*/React__default["default"].createElement("input", _extends({}, props, {
     value: value,
@@ -784,6 +778,7 @@ Input.propTypes = {
   errorBottom: PropTypes__default["default"].string,
   labelWeight: PropTypes__default["default"].string,
   errorMessage: PropTypes__default["default"].string,
+  phoneDisplay: PropTypes__default["default"].string,
   autoComplete: PropTypes__default["default"].string,
   errorAnimation: PropTypes__default["default"].bool,
   labelDisplay: PropTypes__default["default"].string,
@@ -791,9 +786,11 @@ Input.propTypes = {
   boxShadowHover: PropTypes__default["default"].string,
   errorClassName: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
+  phoneAlignItems: PropTypes__default["default"].string,
   errorLineHeight: PropTypes__default["default"].string,
   labelLineHeight: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
+  phoneJustifyContent: PropTypes__default["default"].string,
   errorAnimationDuration: PropTypes__default["default"].string,
   leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   rightIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
@@ -951,6 +948,27 @@ Button.propTypes = {
   disabledBackgroundColor: PropTypes__default["default"].string
 };
 
+var ReactCheckbox = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.2 0H12.8C14.5673 0 16 1.43269 16 3.2V12.8C16 14.5673 14.5673 16 12.8 16H3.2C1.43269 16 0 14.5673 0 12.8V3.2C0 1.43269 1.43269 0 3.2 0ZM3.2 1.6C2.31634 1.6 1.6 2.31634 1.6 3.2V12.8C1.6 13.6837 2.31634 14.4 3.2 14.4H12.8C13.6837 14.4 14.4 13.6837 14.4 12.8V3.2C14.4 2.31634 13.6837 1.6 12.8 1.6H3.2Z\" fill=\"#D1D1D1\"/>\n</svg>";
+
+var ReactCheckboxChecked = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12.8 0H3.2C1.43269 0 0 1.43269 0 3.2V12.8C0 14.5673 1.43269 16 3.2 16H12.8C14.5673 16 16 14.5673 16 12.8V3.2C16 1.43269 14.5673 0 12.8 0ZM6.84979 10.9662C6.9178 10.9887 6.99067 11 7.0684 11C7.14613 11 7.219 10.9887 7.28701 10.9662C7.35502 10.944 7.41818 10.906 7.47647 10.8523L12.8397 5.91275C12.9466 5.81432 13 5.68671 13 5.52993C13 5.37351 12.9466 5.24609 12.8397 5.14765C12.7328 5.04922 12.5945 5 12.4246 5C12.2544 5 12.1158 5.04922 12.009 5.14765L7.0684 9.69799L4.98433 7.77852C4.87745 7.68009 4.74143 7.63087 4.57625 7.63087C4.41108 7.63087 4.27506 7.68009 4.16818 7.77852C4.06131 7.87696 4.00534 8.00438 4.00029 8.1608C3.99563 8.31758 4.04673 8.44519 4.15361 8.54362L6.66033 10.8523C6.71863 10.906 6.78178 10.944 6.84979 10.9662Z\" fill=\"#00236A\"/>\n</svg>";
+
+const SelectCheckbox = ({
+  checked
+}) => {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      marginRight: '9px'
+    }
+  }, checked ? /*#__PURE__*/React__default["default"].createElement("img", {
+    src: ReactCheckboxChecked
+  }) : /*#__PURE__*/React__default["default"].createElement("img", {
+    src: ReactCheckbox
+  }));
+};
+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>";
 
 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>";
@@ -960,8 +978,9 @@ var styles$5 = {"select-content":"select-module_select-content__GCMDX","select-c
 styleInject(css_248z$5);
 
 const Select = ({
+  options,
+  multiple,
   disabled,
-  jsonData,
   required,
   onChange,
   keyNames,
@@ -971,6 +990,7 @@ const Select = ({
   closeIcon,
   errorMessage,
   defaultOption,
+  multipleCheckbox,
   label,
   labelColor,
   labelWeight,
@@ -984,7 +1004,7 @@ const Select = ({
   errorColor,
   selectedColor,
   selectedRadius,
-  selectedHeight,
+  selectedMinHeight,
   selectedBorder,
   selectedPadding,
   selectedFontSize,
@@ -1010,11 +1030,11 @@ const Select = ({
   optionItemBackgroudColor,
   optionItemBackgroudColorHover
 }) => {
-  const options = jsonData.length ? JSON.parse(jsonData) : [];
   const ref = React.useRef();
   const [opened, setOpened] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
-  const [newSelected, setNewSelected] = React.useState({});
+  const [newSelected, setNewSelected] = React.useState([]);
+  const [existOptions, setExistOptions] = React.useState([]);
   const configStyles = compereConfigs();
   const classProps = classnames__default["default"](className);
   const handleOpenClose = () => {
@@ -1022,13 +1042,37 @@ const Select = ({
   };
   const handleClearSelect = e => {
     onChange({});
-    setNewSelected({});
+    setNewSelected([]);
+    const clearedOptions = existOptions && existOptions.length > 0 && existOptions.map(item => {
+      item.checked = false;
+      return item;
+    });
+    setExistOptions(clearedOptions);
     e.stopPropagation();
   };
   const handleSelectItem = option => {
-    onChange(option);
-    setOpened(!opened);
-    setNewSelected(option);
+    const checkedOption = {
+      ...option
+    };
+    delete checkedOption.checked;
+    onChange(checkedOption);
+    if (!multiple) {
+      setOpened(!opened);
+      setNewSelected([option]);
+    } else {
+      const indexOfObject = newSelected.findIndex(obj => {
+        return obj.value === option.value;
+      });
+      if (indexOfObject === -1) {
+        option.checked = true;
+        setNewSelected(prev => {
+          return [...prev, option];
+        });
+      } else {
+        option.checked = false;
+        setNewSelected([...newSelected.slice(0, indexOfObject), ...newSelected.slice(indexOfObject + 1)]);
+      }
+    }
   };
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -1044,10 +1088,6 @@ const Select = ({
     e.target.style.color = optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor;
     e.target.style.backgroundColor = optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor;
   };
-  React.useEffect(() => {
-    const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
-    setNewSelected(parseSelectedData);
-  }, [selected]);
   React.useEffect(() => {
     if (opened) {
       const checkIfClickedOutside = e => {
@@ -1061,6 +1101,25 @@ const Select = ({
       };
     }
   }, [opened]);
+  React.useEffect(() => {
+    selected && selected.length > 0 && setNewSelected(selected);
+    if (!multiple) {
+      options && options.length > 0 && setExistOptions(options);
+    } else {
+      const modifiedOptions = options && options.length > 0 && options.map((item, index) => {
+        item.checked = false;
+        if (selected && selected.length > 0) {
+          selected.map(innerItem => {
+            if (innerItem.value === item.value) {
+              item.checked = true;
+            }
+          });
+        }
+        return item;
+      });
+      setExistOptions(modifiedOptions);
+    }
+  }, [options, multiple, selected]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
@@ -1084,7 +1143,7 @@ const Select = ({
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
-      height: selectedHeight ? selectedHeight : configStyles.SELECT.selectedHeight,
+      minHeight: selectedMinHeight ? selectedMinHeight : configStyles.SELECT.selectedMinHeight,
       border: selectedBorder ? selectedBorder : configStyles.SELECT.selectedBorder,
       padding: selectedPadding ? selectedPadding : configStyles.SELECT.selectedPadding,
       borderRadius: selectedRadius ? selectedRadius : configStyles.SELECT.selectedRadius,
@@ -1096,19 +1155,30 @@ const Select = ({
       borderColor: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : selectedBorderColor ? selectedBorderColor : configStyles.SELECT.selectedBorderColor
     },
     onClick: disabled ? _ => _ : _ => handleOpenClose(),
-    onMouseEnter: disabled ? _ => _ : handleMouseEnter,
-    onMouseLeave: disabled ? _ => _ : handleMouseLeave,
+    onMouseEnter: disabled ? _ => _ : _ => handleMouseEnter(),
+    onMouseLeave: disabled ? _ => _ : _ => handleMouseLeave(),
     className: `${styles$5['select-content-top']}`
   }, /*#__PURE__*/React__default["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
     }
-  }, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !multiple && newSelected && newSelected[0] && newSelected[0][keyNames.name] ? newSelected[0][keyNames.name] : newSelected && newSelected.length > 0 ? newSelected.map((_, index) => {
+    if (newSelected[index][keyNames.name]) {
+      if (index > 0) {
+        return ', ' + newSelected[index][keyNames.name];
+      } else {
+        return newSelected[index][keyNames.name];
+      }
+    }
+  }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$5['select-content-top-icon']}`
-  }, Object.keys(newSelected).length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$5['close-icon']}`,
-    onClick: disabled ? _ => _ : handleClearSelect
+    onClick: disabled ? _ => _ : handleClearSelect,
+    style: {
+      marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
+    }
   }, closeIcon ? closeIcon : /*#__PURE__*/React__default["default"].createElement("img", {
     src: ReactCloseIcon,
     alt: "icon"
@@ -1125,12 +1195,12 @@ const Select = ({
       boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
       borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
       backgroundColor: optionsBackgroundColor ? optionsBackgroundColor : configStyles.SELECT.optionsBackgroundColor,
-      top: parseFloat(selectedHeight ? selectedHeight.substring(0, selectedHeight.length - 2) : configStyles.SELECT.selectedHeight.substring(0, configStyles.SELECT.selectedHeight.length - 2)) + 6 + 'px'
+      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__default["default"].createElement("div", {
     className: `${styles$5['select-content-bottom-inner']}`
-  }, options.map((option, i) => {
+  }, existOptions && existOptions.length > 0 && existOptions.map((option, i) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: i,
       disabled: true,
@@ -1151,7 +1221,9 @@ const Select = ({
         marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
         backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor
       }
-    }, option[keyNames.name]);
+    }, multiple && multipleCheckbox ? /*#__PURE__*/React__default["default"].createElement(SelectCheckbox, {
+      checked: option.checked
+    }) : '', option[keyNames.name]);
   }))) : null)), errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: errorColor ? errorColor : configStyles.SELECT.errorColor,
@@ -1160,17 +1232,19 @@ const Select = ({
   }, errorMessage) : '');
 };
 Select.propTypes = {
+  options: PropTypes__default["default"].array,
+  multiple: PropTypes__default["default"].bool,
   onChange: PropTypes__default["default"].func,
   required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
-  selected: PropTypes__default["default"].string,
-  jsonData: PropTypes__default["default"].string,
+  selected: PropTypes__default["default"].array,
   keyNames: PropTypes__default["default"].object,
   className: PropTypes__default["default"].string,
   arrowIcon: PropTypes__default["default"].element,
   closeIcon: PropTypes__default["default"].element,
   errorMessage: PropTypes__default["default"].string,
   defaultOption: PropTypes__default["default"].string,
+  multipleCheckbox: PropTypes__default["default"].bool,
   label: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
   labelWeight: PropTypes__default["default"].string,
@@ -1185,7 +1259,7 @@ Select.propTypes = {
   selectedColor: PropTypes__default["default"].string,
   selectedBorder: PropTypes__default["default"].string,
   selectedRadius: PropTypes__default["default"].string,
-  selectedHeight: PropTypes__default["default"].string,
+  selectedMinHeight: PropTypes__default["default"].string,
   selectedPadding: PropTypes__default["default"].string,
   selectedFontSize: PropTypes__default["default"].string,
   selectedBoxSizing: PropTypes__default["default"].string,
@@ -1587,7 +1661,7 @@ const Autocomplate = ({
   className,
   searchCount,
   placeHolder,
-  errorMesage,
+  errorMessage,
   autoComplete,
   jsonOptionsData,
   jsonSelectedOptionsData,
@@ -1675,7 +1749,7 @@ const Autocomplate = ({
     id: inputId,
     type: "text",
     autoComplete: autoComplete ? autoComplete : configStyles.INPUT.autoComplete,
-    className: `${styles['autocomplate-content-top']} autocomplate-content-top-rem ${errorMesage ? styles.errorBorder : ''}`,
+    className: `${styles['autocomplate-content-top']} autocomplate-content-top-rem ${errorMessage ? styles.errorBorder : ''}`,
     disabled: disabled,
     onChange: handleChange,
     onClick: () => {
@@ -1683,9 +1757,9 @@ const Autocomplate = ({
     },
     value: inputValue,
     placeholder: placeHolder
-  }, props)), errorMesage ? /*#__PURE__*/React__default["default"].createElement("span", {
+  }, props)), errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
     className: styles.errorMessage
-  }, errorMesage) : null, optionList));
+  }, errorMessage) : null, optionList));
 };
 Autocomplate.propTypes = {
   label: PropTypes__default["default"].string,
@@ -1696,7 +1770,7 @@ Autocomplate.propTypes = {
   keyNames: PropTypes__default["default"].object,
   className: PropTypes__default["default"].string,
   searchCount: PropTypes__default["default"].number,
-  errorMesage: PropTypes__default["default"].string,
+  errorMessage: PropTypes__default["default"].string,
   placeHolder: PropTypes__default["default"].string,
   autoComplete: PropTypes__default["default"].string,
   jsonOptionsData: PropTypes__default["default"].string,
@@ -1717,6 +1791,7 @@ exports.Modal = Modal;
 exports.Pagination = Pagination;
 exports.Radio = Radio;
 exports.Select = Select;
+exports.SelectCheckbox = SelectCheckbox;
 exports.Stepper = Stepper;
 exports.Table = Table;
 exports.Tooltip = Tooltip;

package/package.json

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

package/src/assets/icons/checkbox-checked.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8 0H3.2C1.43269 0 0 1.43269 0 3.2V12.8C0 14.5673 1.43269 16 3.2 16H12.8C14.5673 16 16 14.5673 16 12.8V3.2C16 1.43269 14.5673 0 12.8 0ZM6.84979 10.9662C6.9178 10.9887 6.99067 11 7.0684 11C7.14613 11 7.219 10.9887 7.28701 10.9662C7.35502 10.944 7.41818 10.906 7.47647 10.8523L12.8397 5.91275C12.9466 5.81432 13 5.68671 13 5.52993C13 5.37351 12.9466 5.24609 12.8397 5.14765C12.7328 5.04922 12.5945 5 12.4246 5C12.2544 5 12.1158 5.04922 12.009 5.14765L7.0684 9.69799L4.98433 7.77852C4.87745 7.68009 4.74143 7.63087 4.57625 7.63087C4.41108 7.63087 4.27506 7.68009 4.16818 7.77852C4.06131 7.87696 4.00534 8.00438 4.00029 8.1608C3.99563 8.31758 4.04673 8.44519 4.15361 8.54362L6.66033 10.8523C6.71863 10.906 6.78178 10.944 6.84979 10.9662Z" fill="#00236A"/>
+</svg>

package/src/assets/icons/checkbox-unchecked.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.2 0H12.8C14.5673 0 16 1.43269 16 3.2V12.8C16 14.5673 14.5673 16 12.8 16H3.2C1.43269 16 0 14.5673 0 12.8V3.2C0 1.43269 1.43269 0 3.2 0ZM3.2 1.6C2.31634 1.6 1.6 2.31634 1.6 3.2V12.8C1.6 13.6837 2.31634 14.4 3.2 14.4H12.8C13.6837 14.4 14.4 13.6837 14.4 12.8V3.2C14.4 2.31634 13.6837 1.6 12.8 1.6H3.2Z" fill="#D1D1D1"/>
+</svg>

package/src/components/autocomplate/index.js

@@ -14,7 +14,7 @@ export const Autocomplate = ({
   className,
   searchCount,
   placeHolder,
-  errorMesage,
+  errorMessage,
   autoComplete,
   jsonOptionsData,
   jsonSelectedOptionsData,
@@ -101,7 +101,7 @@ export const Autocomplate = ({
           id={inputId}
           type="text"
           autoComplete={autoComplete ? autoComplete : configStyles.INPUT.autoComplete}
-          className={`${styles['autocomplate-content-top']} autocomplate-content-top-rem ${errorMesage ? styles.errorBorder : ''}`}
+          className={`${styles['autocomplate-content-top']} autocomplate-content-top-rem ${errorMessage ? styles.errorBorder : ''}`}
           disabled={disabled}
           onChange={handleChange}
           onClick={() => { setShowOptions(!showOptions) }}
@@ -109,7 +109,7 @@ export const Autocomplate = ({
           placeholder={placeHolder}
           {...props}
           />
-          {errorMesage ? <span className={styles.errorMessage}>{errorMesage}</span> : null}
+          {errorMessage ? <span className={styles.errorMessage}>{errorMessage}</span> : null}
         {optionList}
       </div>
     </>
@@ -125,7 +125,7 @@ Autocomplate.propTypes = {
   keyNames: PropTypes.object,
   className: PropTypes.string,
   searchCount: PropTypes.number,
-  errorMesage: PropTypes.string,
+  errorMessage: PropTypes.string,
   placeHolder: PropTypes.string,
   autoComplete: PropTypes.string,
   jsonOptionsData: PropTypes.string,

package/src/components/file/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
 import styles from "./file.module.css";
@@ -13,7 +13,7 @@ export const File = ({
   onChange,
   className,
   defaultData,
-  errorMesage,
+  errorMessage,
   fileExtensions,
   ...props
 }) => {
@@ -62,13 +62,6 @@ export const File = ({
     document.querySelector(`.${name}`).value = "";
   };
 
-  useEffect(() => {
-    return () => {
-      setError('');
-      setImage(null);
-    }
-  }, []);
-
   return (
       <>
         <p className={`${styles['file-form-title']} ile-form-title-rem`}>
@@ -77,7 +70,7 @@ export const File = ({
         <div className={classnames(`${styles['file-form-wrap']} file-form-wrap-rem`,image ? styles['active'] : '')}>
           <div
             onChange={(e) => console.log(e)}
-            className={`${styles['file-form']} file-form-rem ${errorMesage ? styles['error'] : '' }`}
+            className={`${styles['file-form']} file-form-rem ${errorMessage ? styles['error'] : '' }`}
             onClick={() => document.querySelector(`.${name}`).click()}
           >
             <input
@@ -110,7 +103,7 @@ export const File = ({
             <i className="icon-delete"/>
           </div>
           {
-            errorMesage || error ? <span style={{ color: 'red' }}>{errorMesage || error}</span> : null
+            errorMessage || error ? <span style={{ color: 'red' }}>{errorMessage || error}</span> : null
           }
       </div>
     </>
@@ -124,7 +117,7 @@ File.propTypes = {
   onChange: PropTypes.func,
   maxSize: PropTypes.number,
   className: PropTypes.string,
-  errorMesage: PropTypes.string,
+  errorMessage: PropTypes.string,
   defaultData: PropTypes.object,
   fileExtensions: PropTypes.arrayOf(PropTypes.string)
 };

package/src/components/input/index.js

@@ -43,6 +43,7 @@ export const Input = ({
     errorZindex,
     errorBottom,
     labelWeight,
+    phoneDisplay,
     errorMessage,
     autoComplete,
     labelDisplay,
@@ -50,10 +51,12 @@ export const Input = ({
     boxShadowHover,
     errorClassName,
     errorAnimation,
+    phoneAlignItems,
     errorLineHeight,
     labelLineHeight,
     backgroundColor,
     labelMarginBottom,
+    phoneJustifyContent,
     errorAnimationDuration,
     ...props
 }) => {
@@ -156,8 +159,11 @@ export const Input = ({
                                 boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
                                 borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
                                 borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
-                                backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
+                                display: phoneDisplay ? phoneDisplay : configStyles.INPUT.phoneDisplay,
+                                alignItems: phoneAlignItems ? phoneAlignItems : configStyles.INPUT.phoneAlignItems,
                                 color: errorMessage  && errorColor ? errorColor : color ? color : configStyles.INPUT.color,
+                                justifyContent: phoneJustifyContent ? phoneJustifyContent : configStyles.INPUT.phoneJustifyContent,
+                                backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor,
                             }}
                         >
                             +374
@@ -264,6 +270,7 @@ Input.propTypes = {
     errorBottom: PropTypes.string,
     labelWeight: PropTypes.string,
     errorMessage: PropTypes.string,
+    phoneDisplay: PropTypes.string,
     autoComplete: PropTypes.string,
     errorAnimation: PropTypes.bool,
     labelDisplay: PropTypes.string,
@@ -271,9 +278,11 @@ Input.propTypes = {
     boxShadowHover: PropTypes.string,
     errorClassName: PropTypes.string,
     backgroundColor: PropTypes.string,
+    phoneAlignItems: PropTypes.string,
     errorLineHeight: PropTypes.string,
     labelLineHeight: PropTypes.string,
     labelMarginBottom: PropTypes.string,
+    phoneJustifyContent: PropTypes.string,
     errorAnimationDuration: PropTypes.string,
     leftIcon: PropTypes.arrayOf(PropTypes.element),
     rightIcon: PropTypes.arrayOf(PropTypes.element),