@xaypay/tui 0.0.55 → 0.0.56

package/dist/index.js

@@ -376,8 +376,10 @@ const compereConfigs = () => {
   try {
     packageConfig = require('../tui.config.js');
   } catch (error) {
+    packageConfig = require('../../tui.config.js');
     // console.log(error, 'Package: tui.config.js file is not define');
   }
+
   try {
     projectConfig = require('../../../../tui.config.js');
   } catch (error) {
@@ -495,7 +497,10 @@ Typography.propTypes = {
   colorHover: PropTypes__default["default"].string,
   textTransform: PropTypes__default["default"].string,
   textDecoration: PropTypes__default["default"].string,
-  variant: PropTypes__default["default"].oneOf(Object.values(TypographyType)).isRequired
+  variant: PropTypes__default["default"].oneOf(Object.values(TypographyType))
+};
+Typography.defaultProps = {
+  variant: 'p'
 };
 
 const Modal = ({
@@ -624,19 +629,9 @@ const Input = ({
 }) => {
   const [show, setShow] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
-  const [tooltipStatus, setTooltipStatus] = React.useState(false);
   const random = Math.floor(Math.random() * 1000 + 1);
   const configStyles = compereConfigs();
   const classProps = classnames__default["default"](className ? className : configStyles.INPUT.className);
-  const handleChange = event => {
-    onChange ? onChange(event.target.value) : _ => _;
-  };
-  const handleMouseEnter = () => {
-    setIsHover(true);
-  };
-  const handleMouseLeave = () => {
-    setIsHover(false);
-  };
   const errorShow = styled.keyframes`
         100% {
             bottom: '-20px';
@@ -653,6 +648,15 @@ const Input = ({
   const P = styled__default["default"].p`
         animation: ${errorAnimation ? animation : 'none'};
     `;
+  const handleChange = event => {
+    onChange ? onChange(event.target.value) : _ => _;
+  };
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7["input-wrap"]}`
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
@@ -739,10 +743,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 ? /*#__PURE__*/React__default["default"].createElement(Typography, {
-    variant: "p",
-    onClick: () => setTooltipStatus(!tooltipStatus)
-  }, "\u24D8") : null, tooltipStatus ? /*#__PURE__*/React__default["default"].createElement("p", null, tooltip) : null, errorMessage ? /*#__PURE__*/React__default["default"].createElement(P, {
+  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip && tooltip.length > 0 ? tooltip[0] : '', errorMessage ? /*#__PURE__*/React__default["default"].createElement(P, {
     style: {
       left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
       color: errorColor ? errorColor : configStyles.INPUT.errorColor,
@@ -769,7 +770,6 @@ Input.propTypes = {
   radius: PropTypes__default["default"].string,
   padding: PropTypes__default["default"].string,
   fontSize: PropTypes__default["default"].string,
-  tooltip: PropTypes__default["default"].element,
   transform: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   iconWidth: PropTypes__default["default"].string,
@@ -796,6 +796,7 @@ Input.propTypes = {
   labelLineHeight: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
   errorAnimationDuration: PropTypes__default["default"].string,
+  tooltip: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   rightIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   type: PropTypes__default["default"].oneOf(Object.values(InputTypes))
@@ -872,7 +873,6 @@ const Button = ({
   radius,
   outline,
   padding,
-  bgColor,
   onClick,
   disabled,
   className,
@@ -881,8 +881,9 @@ const Button = ({
   contentWidth,
   disabledColor,
   textTransform,
-  disabledBgColor,
+  backgroundColor,
   disabledLineColor,
+  disabledBackgroundColor,
   ...props
 }) => {
   const [isHover, setIsHover] = React.useState(false);
@@ -913,9 +914,9 @@ const Button = ({
       width: contentWidth ? 'auto' : width ? width : configStyles.BUTTON.width,
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
       textTransform: textTransform ? textTransform : configStyles.BUTTON.textTransform,
-      backgroundColor: (outline || !outline) && disabled ? disabledBgColor ? disabledBgColor : configStyles.BUTTON.disabledBgColor : outline && !disabled ? isHover ? bgColor ? bgColor : configStyles.BUTTON.bgColor : '#ffffff' : bgColor ? bgColor : configStyles.BUTTON.bgColor,
-      boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.disabledLineColor}` : `inset 0 0 0 2px ${bgColor ? bgColor : configStyles.BUTTON.bgColor}` : 'none',
-      color: (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : bgColor ? bgColor : configStyles.BUTTON.bgColor : color ? color : configStyles.BUTTON.color
+      backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.disabledBackgroundColor : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
+      boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.disabledLineColor}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor}` : 'none',
+      color: (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : color ? color : configStyles.BUTTON.color
     },
     type: type ? type : configStyles.BUTTON.type,
     disabled: disabled ? disabled : configStyles.BUTTON.disabled,
@@ -940,16 +941,16 @@ Button.propTypes = {
   disabled: PropTypes__default["default"].bool,
   radius: PropTypes__default["default"].string,
   padding: PropTypes__default["default"].string,
-  bgColor: PropTypes__default["default"].string,
   boxSizing: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   transition: PropTypes__default["default"].string,
   contentWidth: PropTypes__default["default"].bool,
   textTransform: PropTypes__default["default"].string,
   disabledColor: PropTypes__default["default"].string,
-  disabledBgColor: PropTypes__default["default"].string,
+  backgroundColor: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string.isRequired,
-  disabledLineColor: PropTypes__default["default"].string
+  disabledLineColor: PropTypes__default["default"].string,
+  disabledBackgroundColor: PropTypes__default["default"].string
 };
 
 var css_248z$5 = ".select-module_select-title__c8bR7{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{border:2px solid #d1d1d1;border-radius:6px;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;flex-direction:row;font-size:16px;font-weight:500;height:46px;line-height:22px;max-width:400px;padding:0 15px;transition:border-color .24s}.select-module_select-content-top__Aw-fB.select-module_active__v2Dce{border-color:#00236a}.select-module_select-content-top__Aw-fB:hover{border-color:#3c393e}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;background:#fbfbfb;border-radius:6px;box-shadow:0 0 10px rgba(60,57,62,.08);left:0;max-height:0;max-width:400px;overflow:hidden;position:absolute;top:52px;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}@keyframes select-module_select-show__391hQ{to{max-height:400px}}.select-module_select-content-top-text__euajq{align-items:center;display:flex;flex:1;flex-direction:row;flex-wrap:nowrap}.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>i{color:#3c393e;font-size:12px!important}.select-module_select-content-top-icon__MBrGK>i:not(:last-child){align-items:center;border-right:1px solid #eee;display:flex;height:22px;margin-right:8px;padding:0 8px}.select-module_select-content-bottom-row__eKq5L{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;line-height:22px;margin-bottom:2px;min-height:46px;padding:0 15px;transition:background .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_select-content-bottom-row__eKq5L:hover{background:unset;color:#00236a}.select-module_error-message__-ac6X{border:2px solid #e00!important}.select-module_eMessage__Mm-F7{color:#e00}";
@@ -1078,7 +1079,9 @@ Select.defaultProps = {
   required: false
 };
 
-var css_248z$4 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:20px;min-width:50px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
+var ReactInfoIcon = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M8 0C3.58214 0 0 3.58214 0 8C0 12.4179 3.58214 16 8 16C12.4179 16 16 12.4179 16 8C16 3.58214 12.4179 0 8 0ZM8.57143 11.8571C8.57143 11.9357 8.50714 12 8.42857 12H7.57143C7.49286 12 7.42857 11.9357 7.42857 11.8571V7C7.42857 6.92143 7.49286 6.85714 7.57143 6.85714H8.42857C8.50714 6.85714 8.57143 6.92143 8.57143 7V11.8571ZM8 5.71429C7.7757 5.70971 7.56213 5.61739 7.40513 5.45714C7.24812 5.2969 7.16018 5.08149 7.16018 4.85714C7.16018 4.6328 7.24812 4.41739 7.40513 4.25714C7.56213 4.0969 7.7757 4.00458 8 4C8.2243 4.00458 8.43787 4.0969 8.59488 4.25714C8.75189 4.41739 8.83982 4.6328 8.83982 4.85714C8.83982 5.08149 8.75189 5.2969 8.59488 5.45714C8.43787 5.61739 8.2243 5.70971 8 5.71429Z\" fill=\"#D1D1D1\"/>\n</svg>";
+
+var css_248z$4 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
 var styles$4 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
 styleInject(css_248z$4);
 
@@ -1087,58 +1090,57 @@ const Tooltip = ({
   text,
   width,
   color,
-  tIcon,
   height,
-  bgColor,
+  radius,
   fontSize,
-  tBgColor,
   className,
   fontFamily,
-  borderRadius,
-  tBorderRadius
+  tooltipIcon,
+  tooltipWidth,
+  tooltipRadius,
+  backgroundColor,
+  tooltipBackgroundColor
 }) => {
   const tooltipRef = /*#__PURE__*/React.createRef(null);
-  const [tooltipWidth, setTooltipWidth] = React.useState(0);
-  const [tooltipHeight, setTooltipHeight] = React.useState(0);
+  const [checkTooltipWidth, setCheckTooltipWidth] = React.useState(0);
+  const [checkTooltipHeight, setCheckTooltipHeight] = React.useState(0);
   const [showTooltip, setShowTooltip] = React.useState(false);
   const configStyles = compereConfigs();
   const classProps = classnames__default["default"](styles$4['tooltip'], className);
-  React.useEffect(_ => {
-    if (!type && !text) {
-      alert('Add type and text on tooltip');
-    } else if (!type) {
-      alert('Add type on tooltip');
-    } else if (!text) {
-      alert('Add text on tooltip');
-    }
-    tooltipRef.current && tooltipRef.current.clientWidth && tooltipRef.current.clientWidth > 0 && setTooltipWidth(tooltipRef.current.clientWidth);
-    tooltipRef.current && tooltipRef.current.clientHeight && tooltipRef.current.clientHeight > 0 && setTooltipHeight(tooltipRef.current.clientHeight);
-  }, [type, text, tooltipWidth, tooltipRef]);
   const handleShow = () => {
     setShowTooltip(!showTooltip);
   };
+  React.useEffect(_ => {
+    if (!text) {
+      alert('Add text on 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__default["default"].createElement("div", {
     className: `${styles$4['tooltip-block']}`,
     style: {
       width: width ? width : configStyles.TOOLTIP.width,
       height: height ? height : configStyles.TOOLTIP.height,
-      backgroundColor: bgColor ? bgColor : configStyles.TOOLTIP.bgColor
+      borderRadius: radius ? radius : configStyles.TOOLTIP.radius,
+      backgroundColor: backgroundColor ? backgroundColor : configStyles.TOOLTIP.backgroundColor
     }
   }, showTooltip ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: tooltipRef,
     className: classProps,
     style: {
-      backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.tBgColor,
-      borderRadius: tBorderRadius ? tBorderRadius : configStyles.TOOLTIP.tBorderRadius,
-      top: type === 'top' ? `calc(-${tooltipHeight + 7}px)` : type === 'bottom' ? 'calc(100% + 7px)' : type === 'left' || type === 'right' ? `calc(50% - ${tooltipHeight / 2}px)` : '0px',
-      left: type === 'top' || type === 'bottom' ? `calc(50% - ${tooltipWidth / 2}px)` : type === 'left' ? `-${tooltipWidth + 7}px` : type === 'right' ? 'calc(100% + 7px)' : '0px'
+      width: tooltipWidth ? tooltipWidth : configStyles.TOOLTIP.tooltipWidth,
+      borderRadius: tooltipRadius ? tooltipRadius : configStyles.TOOLTIP.tooltipRadius,
+      backgroundColor: tooltipBackgroundColor ? tooltipBackgroundColor : configStyles.TOOLTIP.tooltipBackgroundColor,
+      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__default["default"].createElement("div", {
     className: `${styles$4['tooltip-rel']}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$4['tooltip-decor']}`,
     style: {
-      backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.bgColor,
+      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'
     }
@@ -1146,7 +1148,6 @@ const Tooltip = ({
     style: {
       color: color ? color : configStyles.TOOLTIP.color,
       fontSize: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
-      lineHeight: fontSize ? fontSize : configStyles.TOOLTIP.fontSize,
       fontFamily: fontFamily ? fontFamily : configStyles.TOOLTIP.fontFamily
     }
   }, text))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
@@ -1154,22 +1155,28 @@ const Tooltip = ({
       cursor: 'pointer'
     },
     onClick: handleShow
-  }));
+  }, tooltipIcon && tooltipIcon[0] ? tooltipIcon[0] : /*#__PURE__*/React__default["default"].createElement("img", {
+    src: ReactInfoIcon
+  })));
 };
 Tooltip.propTypes = {
+  type: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
   color: PropTypes__default["default"].string,
-  tIcon: PropTypes__default["default"].element,
   height: PropTypes__default["default"].string,
-  bgColor: PropTypes__default["default"].string,
-  tBgColor: PropTypes__default["default"].string,
+  radius: PropTypes__default["default"].string,
   fontSize: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   fontFamily: PropTypes__default["default"].string,
-  borderRadius: PropTypes__default["default"].string,
-  tBorderRadius: PropTypes__default["default"].string,
-  type: PropTypes__default["default"].string.isRequired,
-  text: PropTypes__default["default"].string.isRequired
+  tooltipWidth: PropTypes__default["default"].string,
+  tooltipRadius: PropTypes__default["default"].string,
+  text: PropTypes__default["default"].string.isRequired,
+  backgroundColor: PropTypes__default["default"].string,
+  tooltipBackgroundColor: PropTypes__default["default"].string,
+  tooltipIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element)
+};
+Tooltip.defaultProps = {
+  type: 'top'
 };
 
 var css_248z$3 = "*{margin:0;padding:0}.captcha-module_main__Ys3EH{height:74px;max-width:400px;position:relative;width:100%}.captcha-module_slider__KLYny{-webkit-appearance:none;background:#eee;border-radius:2px;bottom:0;height:4px;left:0;margin:auto 0;outline:none;position:absolute;top:0;width:100%}.captcha-module_slider__KLYny::-webkit-slider-thumb{-webkit-appearance:none;height:30px;position:relative;width:30px;z-index:3}.captcha-module_selector__JFhb4{left:0;z-index:2}.captcha-module_selectBtn__GP1iH,.captcha-module_selector__JFhb4{bottom:0;height:30px;margin:auto 0;position:absolute;top:0;width:30px}.captcha-module_selectBtn__GP1iH{background:#00236a;border:2px solid #fff;border-radius:50%;box-shadow:1px 0 6px rgba(60,57,62,.15);cursor:pointer}.captcha-module_progressBar__mhdtM{background:red;bottom:0;height:4px;left:0;margin:auto 0;position:absolute;top:0;width:auto}.captcha-module_range__k24I2{color:blue;margin-bottom:15px;margin-top:15px}";
@@ -1439,20 +1446,22 @@ var styles = {"autocomplate-content":"autocomplate-module_autocomplate-content__
 styleInject(css_248z);
 
 const Autocomplate = ({
-  className,
   label,
+  value,
   required,
   disabled,
-  jsonOptionsData,
-  jsonSelectedOptionsData,
+  keyNames,
   onChange,
-  value,
+  className,
   searchCount,
   placeHolder,
-  keyNames,
   errorMesage,
+  autoComplete,
+  jsonOptionsData,
+  jsonSelectedOptionsData,
   ...props
 }) => {
+  const configStyles = compereConfigs();
   classnames__default["default"](styles.searchBox, className);
   const parseSelectedOptionsData = jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : {
     name: '',
@@ -1463,10 +1472,6 @@ const Autocomplate = ({
   const [activeOption, setActiveOption] = React.useState(0);
   const [showOptions, setShowOptions] = React.useState(false);
   const parseOptionsData = jsonOptionsData ? JSON.parse(jsonOptionsData) : [];
-  React.useEffect(() => {
-    setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name]);
-    setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id]);
-  }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]]);
   const handleChange = e => {
     const currentInputValue = e.currentTarget.value;
     setInputId(null);
@@ -1522,6 +1527,10 @@ const Autocomplate = ({
       }, inputValue.length < searchCount ? `Լրացնել առնվազն ${searchCount} նիշ` : 'Նման տվյալ առկա չէ'))));
     }
   }
+  React.useEffect(() => {
+    setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name]);
+    setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id]);
+  }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     className: `${styles['autocomplate-title']} autocomplate-title-rem`
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
@@ -1533,6 +1542,7 @@ const Autocomplate = ({
   }, /*#__PURE__*/React__default["default"].createElement("input", _extends({
     id: inputId,
     type: "text",
+    autoComplete: autoComplete ? autoComplete : configStyles.INPUT.autoComplete,
     className: `${styles['autocomplate-content-top']} autocomplate-content-top-rem ${errorMesage ? styles.errorBorder : ''}`,
     disabled: disabled,
     onChange: handleChange,
@@ -1546,18 +1556,19 @@ const Autocomplate = ({
   }, errorMesage) : null, optionList));
 };
 Autocomplate.propTypes = {
-  className: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string,
-  placeHolder: PropTypes__default["default"].string,
-  required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
-  jsonOptionsData: PropTypes__default["default"].string,
-  jsonSelectedOptionsData: PropTypes__default["default"].string,
+  required: PropTypes__default["default"].bool,
   onChange: PropTypes__default["default"].func,
   value: PropTypes__default["default"].string,
-  searchCount: PropTypes__default["default"].number,
   keyNames: PropTypes__default["default"].object,
-  errorMesage: PropTypes__default["default"].string
+  className: PropTypes__default["default"].string,
+  searchCount: PropTypes__default["default"].number,
+  errorMesage: PropTypes__default["default"].string,
+  placeHolder: PropTypes__default["default"].string,
+  autoComplete: PropTypes__default["default"].string,
+  jsonOptionsData: PropTypes__default["default"].string,
+  jsonSelectedOptionsData: PropTypes__default["default"].string
 };
 Autocomplate.defaultProps = {
   required: false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.55",
+  "version": "0.0.56",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -41,6 +41,7 @@
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-svg": "^2.0.0",
     "sass": "^1.54.9",
     "sass-loader": "^13.0.2",
     "style-loader": "^3.3.1",

package/rollup.config.js

@@ -1,4 +1,5 @@
 // import {babel} from '@rollup/plugin-babel';
+import svg from 'rollup-plugin-svg';
 import babel from 'rollup-plugin-babel';
 import resolve from '@rollup/plugin-node-resolve';
 import external from 'rollup-plugin-peer-deps-external';
@@ -28,6 +29,7 @@ export default [
                 exclude: 'node_modules/**',
                 presets: ['@babel/preset-react'],
             }),
+            svg(),
             external(),
             resolve()
         ]

package/src/components/autocomplate/index.js

@@ -1,23 +1,26 @@
 import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
+import { compereConfigs } from "./../../utils";
 import styles from "./autocomplate.module.css";
 
 export const Autocomplate = ({
-  className,
   label,
+  value,
   required,
   disabled,
-  jsonOptionsData,
-  jsonSelectedOptionsData,
+  keyNames,
   onChange,
-  value,
+  className,
   searchCount,
   placeHolder,
-  keyNames,
   errorMesage,
+  autoComplete,
+  jsonOptionsData,
+  jsonSelectedOptionsData,
   ...props
 }) => {
+  const configStyles = compereConfigs();
   const classProps = classnames(styles.searchBox, className);
   const parseSelectedOptionsData =
     jsonSelectedOptionsData ? JSON.parse(jsonSelectedOptionsData) : { name: '', id: '' };
@@ -27,10 +30,6 @@ export const Autocomplate = ({
   const [showOptions, setShowOptions] = useState(false);
   const parseOptionsData =
     jsonOptionsData ? JSON.parse(jsonOptionsData) : [];
-  useEffect(() => {
-    setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name])
-    setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id])
-  }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]])
 
   const handleChange = (e) => {
     const currentInputValue = e.currentTarget.value;
@@ -89,6 +88,11 @@ export const Autocomplate = ({
     }
   }
 
+  useEffect(() => {
+    setInputValue(JSON.parse(jsonSelectedOptionsData)[keyNames.name])
+    setInputId(JSON.parse(jsonSelectedOptionsData)[keyNames.id])
+  }, [JSON.parse(jsonSelectedOptionsData)[keyNames.id]])
+
   return (
     <>
       {label ? <label className={`${styles['autocomplate-title']} autocomplate-title-rem`}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</label> : ""}
@@ -96,6 +100,7 @@ export const Autocomplate = ({
         <input
           id={inputId}
           type="text"
+          autoComplete={autoComplete ? autoComplete : configStyles.INPUT.autoComplete}
           className={`${styles['autocomplate-content-top']} autocomplate-content-top-rem ${errorMesage ? styles.errorBorder : ''}`}
           disabled={disabled}
           onChange={handleChange}
@@ -112,21 +117,21 @@ export const Autocomplate = ({
 };
 
 Autocomplate.propTypes = {
-  className: PropTypes.string,
   label: PropTypes.string,
-  placeHolder: PropTypes.string,
-  required: PropTypes.bool,
   disabled: PropTypes.bool,
-  jsonOptionsData: PropTypes.string,
-  jsonSelectedOptionsData: PropTypes.string,
+  required: PropTypes.bool,
   onChange: PropTypes.func,
   value: PropTypes.string,
-  searchCount: PropTypes.number,
   keyNames: PropTypes.object,
+  className: PropTypes.string,
+  searchCount: PropTypes.number,
   errorMesage: PropTypes.string,
+  placeHolder: PropTypes.string,
+  autoComplete: PropTypes.string,
+  jsonOptionsData: PropTypes.string,
+  jsonSelectedOptionsData: PropTypes.string,
 };
 
-
 Autocomplate.defaultProps = {
   required: false,
-};
+};

package/src/components/button/index.js

@@ -17,7 +17,6 @@ export const Button = ({
   radius,
   outline,
   padding,
-  bgColor,
   onClick,
   disabled,
   className,
@@ -26,8 +25,9 @@ export const Button = ({
   contentWidth,
   disabledColor,
   textTransform,
-  disabledBgColor,
+  backgroundColor,
   disabledLineColor,
+  disabledBackgroundColor,
   ...props
 }) => {
 
@@ -68,17 +68,17 @@ export const Button = ({
         cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
         textTransform: textTransform ? textTransform : configStyles.BUTTON.textTransform,
         backgroundColor:
-          (outline || !outline) && disabled ? disabledBgColor ? disabledBgColor : configStyles.BUTTON.disabledBgColor :
-          outline && !disabled ? isHover ? bgColor ? bgColor : configStyles.BUTTON.bgColor : '#ffffff' : bgColor ? bgColor : configStyles.BUTTON.bgColor,
+          (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : configStyles.BUTTON.disabledBackgroundColor :
+          outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor,
         boxShadow:
           outline ?
             disabled ?
             `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : configStyles.BUTTON.disabledLineColor}` :
-            `inset 0 0 0 2px ${bgColor ? bgColor : configStyles.BUTTON.bgColor}` :
+            `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor}` :
           'none',
         color:          
           (outline || !outline) && disabled ? disabledColor ? disabledColor : configStyles.BUTTON.disabledColor :
-          outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : bgColor ? bgColor : configStyles.BUTTON.bgColor : color ? color : configStyles.BUTTON.color
+          outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.backgroundColor : color ? color : configStyles.BUTTON.color
       }}
       type={type ? type : configStyles.BUTTON.type}
       disabled={disabled ? disabled : configStyles.BUTTON.disabled}
@@ -108,14 +108,14 @@ Button.propTypes = {
   disabled: PropTypes.bool,
   radius: PropTypes.string,
   padding: PropTypes.string,
-  bgColor: PropTypes.string,
   boxSizing: PropTypes.string,
   className: PropTypes.string,
   transition: PropTypes.string,
   contentWidth: PropTypes.bool,
   textTransform: PropTypes.string,
   disabledColor: PropTypes.string,
-  disabledBgColor: PropTypes.string,
+  backgroundColor: PropTypes.string,
   label: PropTypes.string.isRequired,
   disabledLineColor: PropTypes.string,
+  disabledBackgroundColor: PropTypes.string
 };

package/src/components/input/index.js

@@ -60,7 +60,6 @@ export const Input = ({
 }) => {
     const [show, setShow] = useState(false);
     const [isHover, setIsHover] = useState(false);
-    const [tooltipStatus, setTooltipStatus] = useState(false);
     
     const random = Math.floor((Math.random() * 1000) + 1);
     const configStyles = compereConfigs();
@@ -68,18 +67,6 @@ export const Input = ({
         className ? className : configStyles.INPUT.className
     );
 
-    const handleChange = (event) => {
-        onChange ? onChange(event.target.value) : _ => _;
-    };
-
-    const handleMouseEnter = () => {
-        setIsHover(true);
-    };
-      
-    const handleMouseLeave = () => {
-        setIsHover(false);
-    };
-    
     const errorShow = keyframes`
         100% {
             bottom: '-20px';
@@ -98,6 +85,18 @@ export const Input = ({
     const P = styled.p`
         animation: ${errorAnimation ? animation : 'none'};
     `;
+
+    const handleChange = (event) => {
+        onChange ? onChange(event.target.value) : _ => _;
+    };
+
+    const handleMouseEnter = () => {
+        setIsHover(true);
+    };
+      
+    const handleMouseLeave = () => {
+        setIsHover(false);
+    };
     
     return (
         <div className={`${styles["input-wrap"]}`}>
@@ -211,11 +210,8 @@ export const Input = ({
                 }
             </div>
             {
-                tooltip ? <Typography variant="p" onClick={()=> setTooltipStatus(!tooltipStatus)}>
-                    ⓘ
-                </Typography> : null
+                tooltip && tooltip.length > 0 ? tooltip[0] : ''
             }
-            {tooltipStatus ? <p>{tooltip}</p> : null}
             {
                 errorMessage ?
                     <P
@@ -252,7 +248,6 @@ Input.propTypes = {
     radius: PropTypes.string,
     padding: PropTypes.string,
     fontSize: PropTypes.string,
-    tooltip: PropTypes.element,
     transform: PropTypes.string,
     className: PropTypes.string,
     iconWidth: PropTypes.string,
@@ -279,6 +274,7 @@ Input.propTypes = {
     labelLineHeight: PropTypes.string,
     labelMarginBottom: PropTypes.string,
     errorAnimationDuration: PropTypes.string,
+    tooltip: PropTypes.arrayOf(PropTypes.element),
     leftIcon: PropTypes.arrayOf(PropTypes.element),
     rightIcon: PropTypes.arrayOf(PropTypes.element),
     type: PropTypes.oneOf(Object.values(InputTypes)),

package/src/components/table/index.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import PropTypes, { bool, checkPropTypes, func } from "prop-types";
+import PropTypes from "prop-types";
 import classnames from "classnames";
 import styles from "./table.module.css";
 import { Checkbox } from "../checkbox";