@xaypay/tui 0.1.6 → 0.1.8

package/dist/index.js

@@ -489,6 +489,14 @@ const hasOwnerProperty = (object, property) => {
   return Object.prototype.hasOwnProperty.call(object, property);
 };
 
+const vertical = {
+  top: 'top',
+  bottom: 'bottom'
+};
+const horizontal = {
+  left: 'left',
+  right: 'right'
+};
 const Button = ({
   icon,
   size,
@@ -520,6 +528,20 @@ const Button = ({
   btnIconMarginRight,
   backgroundHoverColor,
   disabledBackgroundColor,
+  title,
+  titleSize,
+  titleFont,
+  titleWidth,
+  titleStyle,
+  titleColor,
+  titleRadius,
+  titleWeight,
+  titlePadding,
+  titleBackgroundColor,
+  titleVerticalDistance,
+  titleVerticalPosition,
+  titleHorizontalDistance,
+  titleHorizontalPosition,
   ...props
 }) => {
   const [isHover, setIsHover] = React.useState(false);
@@ -530,45 +552,75 @@ const Button = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
+  const buttonTemplate = () => {
+    return /*#__PURE__*/React__default["default"].createElement("button", _extends({
+      style: {
+        display: 'flex',
+        outline: 'none',
+        alignItems: 'center',
+        justifyContent: 'center',
+        fontSize: size ?? merge.BUTTON.font.size,
+        fontStyle: style ?? merge.BUTTON.font.style,
+        fontFamily: font ?? merge.BUTTON.font.family,
+        height: height ?? merge.BUTTON.height,
+        fontWeight: weight ?? merge.BUTTON.font.weight,
+        padding: padding ?? merge.BUTTON.padding,
+        borderRadius: radius ?? merge.BUTTON.radius,
+        boxSizing: boxSizing ?? merge.BUTTON.box.sizing,
+        transition: transition ?? merge.BUTTON.transition,
+        border: outline ? 'none' : border ?? merge.BUTTON.border,
+        width: contentWidth ? title ? '100%' : 'auto' : width ?? merge.BUTTON.width,
+        cursor: disabled ? 'not-allowed' : cursor ?? merge.BUTTON.cursor,
+        textTransform: textTransform ?? merge.BUTTON.text.transform,
+        backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : merge.BUTTON.colors.disabledBackground : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : merge.BUTTON.colors.background : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : merge.BUTTON.colors.backgroundHover : backgroundColor ? backgroundColor : merge.BUTTON.colors.background,
+        boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : merge.BUTTON.colors.disabledLine}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : merge.BUTTON.colors.background}` : 'none',
+        color: (outline || !outline) && disabled ? disabledColor ? disabledColor : merge.BUTTON.colors.disabled : outline && !disabled ? isHover ? color ? color : merge.BUTTON.color : backgroundColor ? backgroundColor : merge.BUTTON.colors.background : !outline && !disabled && isHover ? hoverColor ? hoverColor : merge.BUTTON.text.colors.hover : color ? color : merge.BUTTON.color
+      },
+      type: type ?? merge.BUTTON.type,
+      disabled: disabled ?? merge.BUTTON.disabled,
+      onClick: disabled ? _ => _ : type !== 'submit' ? onClick ? onClick : () => alert('Add click event handler on Button component') : _ => _,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      className: classProps
+    }, props), isHover && hoverIcon ? hoverIcon : icon ?? null, ' ', label && /*#__PURE__*/React__default["default"].createElement("span", {
+      style: {
+        marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : merge.BUTTON.icon.marginRight : '0px'
+      }
+    }, label), ' ', !icon && !label && 'Add icon or label prop on Button component');
+  };
   React.useEffect(() => {
     if (!label && !icon) {
       alert('Add icon or label props on Button component');
     }
   }, []);
-  return /*#__PURE__*/React__default["default"].createElement("button", _extends({
+  return title ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      display: 'flex',
-      outline: 'none',
-      alignItems: 'center',
-      justifyContent: 'center',
-      fontSize: size ?? merge.BUTTON.font.size,
-      fontStyle: style ?? merge.BUTTON.font.style,
-      fontFamily: font ?? merge.BUTTON.font.family,
+      position: 'relative',
       height: height ?? merge.BUTTON.height,
-      fontWeight: weight ?? merge.BUTTON.font.weight,
-      padding: padding ?? merge.BUTTON.padding,
-      borderRadius: radius ?? merge.BUTTON.radius,
-      boxSizing: boxSizing ?? merge.BUTTON.box.sizing,
-      transition: transition ?? merge.BUTTON.transition,
-      border: outline ? 'none' : border ?? merge.BUTTON.border,
-      width: contentWidth ? 'auto' : width ?? merge.BUTTON.width,
-      cursor: disabled ? 'not-allowed' : cursor ?? merge.BUTTON.cursor,
-      textTransform: textTransform ?? merge.BUTTON.text.transform,
-      backgroundColor: (outline || !outline) && disabled ? disabledBackgroundColor ? disabledBackgroundColor : merge.BUTTON.colors.disabledBackground : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : merge.BUTTON.colors.background : '#ffffff' : !outline && !disabled && isHover ? backgroundHoverColor ? backgroundHoverColor : merge.BUTTON.colors.backgroundHover : backgroundColor ? backgroundColor : merge.BUTTON.colors.background,
-      boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledLineColor ? disabledLineColor : merge.BUTTON.colors.disabledLine}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : merge.BUTTON.colors.background}` : 'none',
-      color: (outline || !outline) && disabled ? disabledColor ? disabledColor : merge.BUTTON.colors.disabled : outline && !disabled ? isHover ? color ? color : merge.BUTTON.color : backgroundColor ? backgroundColor : merge.BUTTON.colors.background : !outline && !disabled && isHover ? hoverColor ? hoverColor : merge.BUTTON.text.colors.hover : color ? color : merge.BUTTON.color
+      width: contentWidth ? '100%' : 'fit-content'
     },
-    type: type ?? merge.BUTTON.type,
-    disabled: disabled ?? merge.BUTTON.disabled,
-    onClick: disabled ? _ => _ : type !== 'submit' ? onClick ? onClick : () => alert('Add click event handler on Button component') : _ => _,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
     className: classProps
-  }, props), isHover && hoverIcon ? hoverIcon : icon ?? null, ' ', label && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, buttonTemplate(), isHover ? /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
-      marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : merge.BUTTON.icon.marginRight : '0px'
-    }
-  }, label), ' ', !icon && !label && 'Add icon or label prop on Button component');
+      position: 'absolute',
+      margin: '0px',
+      top: titleVerticalPosition === 'bottom' ? `calc(100% + ${titleVerticalDistance})` : '',
+      left: titleHorizontalPosition === 'right' ? `calc(100% + ${titleHorizontalDistance})` : '',
+      right: titleHorizontalPosition === 'left' ? `calc(100% + ${titleHorizontalDistance})` : '',
+      bottom: titleVerticalPosition === 'top' ? `calc(100% + ${titleVerticalDistance})` : '',
+      color: titleColor ?? merge.BUTTON.title.color,
+      fontSize: titleSize ?? merge.BUTTON.title.font.size,
+      fontStyle: titleStyle ?? merge.BUTTON.title.font.style,
+      fontFamily: titleFont ?? merge.BUTTON.title.font.family,
+      fontWeight: titleWeight ?? merge.BUTTON.title.font.weight,
+      width: titleWidth ?? merge.BUTTON.title.width,
+      padding: titlePadding ?? merge.BUTTON.title.padding,
+      backgroundColor: titleBackgroundColor ?? merge.BUTTON.title.colors.background,
+      borderRadius: titleRadius ?? merge.BUTTON.title.radius
+    },
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, title) : '') : buttonTemplate();
 };
 Button.propTypes = {
   type: PropTypes__default["default"].string,
@@ -577,7 +629,6 @@ Button.propTypes = {
   weight: PropTypes__default["default"].string,
   font: PropTypes__default["default"].string,
   icon: PropTypes__default["default"].element,
-  hoverIcon: PropTypes__default["default"].element,
   color: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
   outline: PropTypes__default["default"].bool,
@@ -591,6 +642,7 @@ Button.propTypes = {
   padding: PropTypes__default["default"].string,
   boxSizing: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
+  hoverIcon: PropTypes__default["default"].element,
   hoverColor: PropTypes__default["default"].string,
   transition: PropTypes__default["default"].string,
   contentWidth: PropTypes__default["default"].bool,
@@ -600,7 +652,27 @@ Button.propTypes = {
   disabledLineColor: PropTypes__default["default"].string,
   btnIconMarginRight: PropTypes__default["default"].string,
   backgroundHoverColor: PropTypes__default["default"].string,
-  disabledBackgroundColor: PropTypes__default["default"].string
+  disabledBackgroundColor: PropTypes__default["default"].string,
+  title: PropTypes__default["default"].string,
+  titleFont: PropTypes__default["default"].string,
+  titleSize: PropTypes__default["default"].string,
+  titleColor: PropTypes__default["default"].string,
+  titleWidth: PropTypes__default["default"].string,
+  titleStyle: PropTypes__default["default"].string,
+  titleWeight: PropTypes__default["default"].string,
+  titleRadius: PropTypes__default["default"].string,
+  titlePadding: PropTypes__default["default"].string,
+  titleBackgroundColor: PropTypes__default["default"].string,
+  titleVerticalDistance: PropTypes__default["default"].string,
+  titleHorizontalDistance: PropTypes__default["default"].string,
+  titleVerticalPosition: PropTypes__default["default"].oneOf(Object.values(vertical)),
+  titleHorizontalPosition: PropTypes__default["default"].oneOf(Object.values(horizontal))
+};
+Button.defaultProps = {
+  titleVerticalDistance: '4px',
+  titleVerticalPosition: 'top',
+  titleHorizontalPosition: 'left',
+  titleHorizontalDistance: '10px'
 };
 
 const SvgPdf = ({
@@ -714,7 +786,8 @@ const SvgDeleteComponent = ({
   fill: fillColor ? fillColor : '#E00'
 }));
 
-const File = ({
+// eslint-disable-next-line react/display-name
+const File = /*#__PURE__*/React.forwardRef(({
   or,
   size,
   name,
@@ -810,8 +883,7 @@ const File = ({
   listItemBackgroundColor,
   listItemBackgroundErrorColor,
   maxCHoosenLengthErrorHideTime
-}) => {
-  const ref = React.useRef(null);
+}, ref) => {
   const inpRef = React.useRef(null);
   const memoizedItems = React.useMemo(() => filesArray, [filesArray]);
   const classProps = classnames__default["default"](className ?? merge.FILE.className);
@@ -972,6 +1044,11 @@ const File = ({
   const handleStopPropagation = e => {
     e.stopPropagation();
   };
+  React.useImperativeHandle(ref, () => ({
+    handleReset() {
+      setError('');
+    }
+  }));
   React.useEffect(() => {
     if (!multiple && defaultData) {
       if (!defaultData.type) {
@@ -1020,7 +1097,6 @@ const File = ({
     }
   }, [change]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: ref,
     style: {
       width: '100%',
       maxWidth: maxWidth ?? merge.FILE.maxWidth
@@ -1219,7 +1295,7 @@ const File = ({
       listItemBackgroundErrorColor: listItemBackgroundErrorColor ?? merge.FILE.listItem.colors.backgroundError
     });
   }));
-};
+});
 File.propTypes = {
   or: PropTypes__default["default"].string,
   size: PropTypes__default["default"].string,
@@ -1501,9 +1577,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$b = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{cursor:pointer;margin:0 0 8px;white-space:wrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}";
+var css_248z$a = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{cursor:pointer;margin:0 0 8px;white-space:wrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}";
 var styles$9 = {"sorting-arrows":"table-module_sorting-arrows__BaN-G","td-span":"table-module_td-span__XHo6k","list-text":"table-module_list-text__kmKIq","dots-option-item":"table-module_dots-option-item__jNOxO"};
-styleInject(css_248z$b);
+styleInject(css_248z$a);
 
 /* eslint-disable no-prototype-builtins */
 const TH = ({
@@ -2528,9 +2604,9 @@ Table.propTypes = {
   hideBorder: PropTypes__default["default"].bool
 };
 
-var css_248z$a = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
+var css_248z$9 = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
 var styles$8 = {"animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
-styleInject(css_248z$a);
+styleInject(css_248z$9);
 
 const SvgNext = ({
   title,
@@ -2829,7 +2905,7 @@ const Modal = ({
       width: '100%',
       height: '100%',
       position: 'relative',
-      alignItems: 'center',
+      alignItems: 'flex-start',
       boxSizing: 'border-box',
       justifyContent: 'center',
       overflow: type === 'content' ? 'auto' : 'hidden',
@@ -3269,9 +3345,9 @@ const NumberInput = ({
   });
 };
 
-var css_248z$9 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var css_248z$8 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
 var styles$7 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
-styleInject(css_248z$9);
+styleInject(css_248z$8);
 
 const InputTypes = {
   TEL: 'tel',
@@ -3349,6 +3425,7 @@ const Input = ({
   const [isHover, setIsHover] = React.useState(false);
   const [innerErrorMessage, setInnerErrorMessage] = React.useState('');
   const inpStyles = {
+    color: color ?? merge.INPUT.color,
     width: width ?? merge.INPUT.width,
     cursor: disabled ? 'not-allowed' : 'auto',
     height: height ?? merge.INPUT.height,
@@ -3358,7 +3435,6 @@ const Input = ({
     fontWeight: weight ?? merge.INPUT.font.weight,
     fontFamily: family ?? merge.INPUT.font.family,
     boxSizing: boxSizing ?? merge.INPUT.box.sizing,
-    color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
     backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : merge.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : merge.INPUT.colors.background
   };
   const uuid = v4();
@@ -3777,9 +3853,9 @@ const SvgArrow = ({
   fill: fillColor ? fillColor : '#3C393E'
 }));
 
-var css_248z$8 = ".select-module_select-content__GCMDX{-webkit-appearance:none;display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;-webkit-appearance:none;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:99999999999}.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}.select-module_ellipsis__uNgol{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
+var css_248z$7 = ".select-module_select-content__GCMDX{-webkit-appearance:none;display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;-webkit-appearance:none;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:99999999999}.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}.select-module_ellipsis__uNgol{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
 var styles$6 = {"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","ellipsis":"select-module_ellipsis__uNgol"};
-styleInject(css_248z$8);
+styleInject(css_248z$7);
 
 const Select = ({
   dots,
@@ -4002,7 +4078,7 @@ const Select = ({
       whiteSpace: disabled ? 'pre-wrap' : 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      color: errorMessage ? errorColor ? errorColor : merge.SELECT.error.color : isHover ? selectedHoverColor ? selectedHoverColor : merge.SELECT.selected.colors.hover : selectedColor ? selectedColor : merge.SELECT.selected.color
+      color: isHover ? selectedHoverColor ? selectedHoverColor : merge.SELECT.selected.colors.hover : selectedColor ? selectedColor : merge.SELECT.selected.color
     }
   }, !multiple && newSelected && newSelected[0] && newSelected[0][keyNames.name] ? newSelected[0][keyNames.name] : newSelected && newSelected.length > 0 ? newSelected.map((_, index) => {
     if (newSelected[index][keyNames.name]) {
@@ -4256,9 +4332,9 @@ const SvgToasterSuccess = ({
   fill: fillColor ? fillColor : '#0DA574'
 }));
 
-var css_248z$7 = "#toaster-module_top-left__q0LcN{left:0;top:1em}#toaster-module_top-right__f-AFL{right:0;top:1em}#toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}#toaster-module_bottom-left__b-YHI{bottom:1em;left:0}#toaster-module_bottom-right__g9ACP{bottom:1em;right:0}#toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_top-left__q0LcN{left:0;top:1em}.toaster-module_top-right__f-AFL{right:0;top:1em}.toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_bottom-left__b-YHI{bottom:1em;left:0}.toaster-module_bottom-right__g9ACP{bottom:1em;right:0}.toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_notify-block__pRnEB{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.toaster-module_bounce-in-right__shR2D{-webkit-animation-name:toaster-module_bounceInRight__rSk5p;animation-name:toaster-module_bounceInRight__rSk5p}.toaster-module_bounce-out-right__48pyA{-webkit-animation-name:toaster-module_bounceOutRight__bmFGS;animation-name:toaster-module_bounceOutRight__bmFGS}.toaster-module_notify-desc__bcWe2,.toaster-module_notify-title__8lFLy{overflow:hidden;text-overflow:ellipsis}.toaster-module_notify-desc__bcWe2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box}@keyframes toaster-module_bounceInRight__rSk5p{0%{opacity:0;right:-100%}60%{opacity:1;right:40px}75%{right:0}90%{right:30px}to{right:20px}}@keyframes toaster-module_bounceOutRight__bmFGS{0%{opacity:1;right:20px}60%{opacity:1;right:60px}to{opacity:0;right:-100%}}.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeft__to59v;animation-name:toaster-module_bounceInLeft__to59v}.toaster-module_bounce-out-left__fDOZw{-webkit-animation-name:toaster-module_bounceOutLeft__k5QgO;animation-name:toaster-module_bounceOutLeft__k5QgO}@keyframes toaster-module_bounceInLeft__to59v{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:20px}}@keyframes toaster-module_bounceOutLeft__k5QgO{0%{left:20px;opacity:1}60%{left:60px;opacity:1}to{left:-100%;opacity:0}}";
+var css_248z$6 = "#toaster-module_top-left__q0LcN{left:0;top:1em}#toaster-module_top-right__f-AFL{right:0;top:1em}#toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}#toaster-module_bottom-left__b-YHI{bottom:1em;left:0}#toaster-module_bottom-right__g9ACP{bottom:1em;right:0}#toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_top-left__q0LcN{left:0;top:1em}.toaster-module_top-right__f-AFL{right:0;top:1em}.toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_bottom-left__b-YHI{bottom:1em;left:0}.toaster-module_bottom-right__g9ACP{bottom:1em;right:0}.toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_notify-block__pRnEB{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.toaster-module_bounce-in-right__shR2D{-webkit-animation-name:toaster-module_bounceInRight__rSk5p;animation-name:toaster-module_bounceInRight__rSk5p}.toaster-module_bounce-out-right__48pyA{-webkit-animation-name:toaster-module_bounceOutRight__bmFGS;animation-name:toaster-module_bounceOutRight__bmFGS}.toaster-module_notify-desc__bcWe2,.toaster-module_notify-title__8lFLy{overflow:hidden;text-overflow:ellipsis}.toaster-module_notify-desc__bcWe2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box}@keyframes toaster-module_bounceInRight__rSk5p{0%{opacity:0;right:-100%}60%{opacity:1;right:40px}75%{right:0}90%{right:30px}to{right:20px}}@keyframes toaster-module_bounceOutRight__bmFGS{0%{opacity:1;right:20px}60%{opacity:1;right:60px}to{opacity:0;right:-100%}}.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeft__to59v;animation-name:toaster-module_bounceInLeft__to59v}.toaster-module_bounce-out-left__fDOZw{-webkit-animation-name:toaster-module_bounceOutLeft__k5QgO;animation-name:toaster-module_bounceOutLeft__k5QgO}@keyframes toaster-module_bounceInLeft__to59v{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:20px}}@keyframes toaster-module_bounceOutLeft__k5QgO{0%{left:20px;opacity:1}60%{left:60px;opacity:1}to{left:-100%;opacity:0}}";
 var styles$5 = {"top-left":"toaster-module_top-left__q0LcN","top-right":"toaster-module_top-right__f-AFL","top-center":"toaster-module_top-center__eVRbc","bottom-left":"toaster-module_bottom-left__b-YHI","bottom-right":"toaster-module_bottom-right__g9ACP","bottom-center":"toaster-module_bottom-center__4KcFe","notify-block":"toaster-module_notify-block__pRnEB","bounce-in-right":"toaster-module_bounce-in-right__shR2D","bounceInRight":"toaster-module_bounceInRight__rSk5p","bounce-out-right":"toaster-module_bounce-out-right__48pyA","bounceOutRight":"toaster-module_bounceOutRight__bmFGS","notify-title":"toaster-module_notify-title__8lFLy","notify-desc":"toaster-module_notify-desc__bcWe2","bounce-in-left":"toaster-module_bounce-in-left__xoF-M","bounceInLeft":"toaster-module_bounceInLeft__to59v","bounce-out-left":"toaster-module_bounce-out-left__fDOZw","bounceOutLeft":"toaster-module_bounceOutLeft__k5QgO"};
-styleInject(css_248z$7);
+styleInject(css_248z$6);
 
 let wWidth$1 = window.innerWidth;
 const ToasterType = {
@@ -4561,9 +4637,9 @@ const SvgTooltip = ({
   fill: fillColor ? fillColor : '#D1D1D1'
 }));
 
-var css_248z$6 = ".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 css_248z$5 = ".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$6);
+styleInject(css_248z$5);
 
 const Tooltip = ({
   type,
@@ -4700,9 +4776,9 @@ const SvgCaptchaArrowDown = ({
   fill: fillColor ? fillColor : '#00236A'
 }));
 
-var css_248z$5 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
+var css_248z$4 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
 var styles$3 = {"start-point":"captcha-module_start-point__LkOqy","range":"captcha-module_range__k24I2","range-default":"captcha-module_range-default__-O0QD","range-error":"captcha-module_range-error__FKMfG","range-success":"captcha-module_range-success__VzLPq"};
-styleInject(css_248z$5);
+styleInject(css_248z$4);
 
 const Captcha = ({
   color,
@@ -4831,9 +4907,9 @@ Captcha.propTypes = {
   getRange: PropTypes__default["default"].func.isRequired
 };
 
-var css_248z$4 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
+var css_248z$3 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
 var styles$2 = {"stepper-container":"stepper-module_stepper-container__-OVGy","bigRing":"stepper-module_bigRing__5GBm0","activeRing":"stepper-module_activeRing__Lzvh1","smallRing":"stepper-module_smallRing__u-5a8","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
-styleInject(css_248z$4);
+styleInject(css_248z$3);
 
 const Stepper = ({
   stepLength,
@@ -4966,8 +5042,8 @@ Checkbox.defaultProps = {
   direction: 'vertical'
 };
 
-var css_248z$3 = "textarea{-webkit-appearance:none}textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
-styleInject(css_248z$3);
+var css_248z$2 = "textarea{-webkit-appearance:none}textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
+styleInject(css_248z$2);
 
 const PositionSide = {
   TOP: 'top',
@@ -5036,6 +5112,7 @@ const Textarea = ({
   const handleChange = e => {
     const value = e.target.value;
     onChange(value);
+    setInnerValue(() => value);
     if (maxLength) {
       if (value.length > maxLength) {
         onChange(value.substr(0, maxLength));
@@ -5060,7 +5137,7 @@ const Textarea = ({
     } else {
       setError('');
     }
-    setInnerValue(value);
+    setInnerValue(() => value);
   }, [value, errorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -5189,9 +5266,6 @@ Textarea.defaultProps = {
   characterCountPosition: 'top'
 };
 
-var css_248z$2 = "";
-styleInject(css_248z$2);
-
 const TypographyType = {
   p: 'p',
   h1: 'h1',

package/package.json

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