@xaypay/tui 0.0.52 → 0.0.53

package/dist/index.es.js

@@ -1,22 +1,25 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import React, { useState, useEffect, createRef, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import styled from 'styled-components';
 
-function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends.apply(this, arguments);
-}
+const _ = require('lodash');
+const compereConfigs = () => {
+  let projectConfig = {};
+  let packageConfig = {};
+  try {
+    packageConfig = require('../tui.config.js');
+  } catch (error) {
+    // console.log(error, 'Package: tui.config.js file is not define');
+  }
+  try {
+    projectConfig = require('../../../../tui.config.js');
+  } catch (error) {
+    projectConfig = {};
+    // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
+  }
+
+  return _.merge(packageConfig, projectConfig);
+};
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -45,144 +48,234 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".button-module_btn__ffRtT{border:none;border-radius:6px;box-sizing:border-box;cursor:pointer;font-size:16px;line-height:20px;max-height:46px;min-height:46px;outline:none;overflow:hidden;padding:12px 20px;text-transform:none;transition:background-color .24s,color .24s}.button-module_btn__ffRtT.button-module_full-size__vmV2E{width:100%}.button-module_btn__ffRtT.button-module_content-size__f7JSE{width:auto}.button-module_btn__ffRtT.button-module_type-filled__BiyVo{background-color:#00236a;color:#fff}.button-module_btn__ffRtT.button-module_type-filled__BiyVo:hover{background-color:#001745}.button-module_btn__ffRtT.button-module_type-filled__BiyVo:disabled{background-color:#eee;color:#3c393e;pointer-events:none}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V{background-color:#fff;box-shadow:inset 0 0 0 2px #00236a}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V:hover{background-color:#001745;color:#fff}.button-module_btn__ffRtT.button-module_type-outline__RpZ2V:disabled{box-shadow:inset 0 0 0 2px #eee;color:#3c393e;pointer-events:none}";
-var styles$b = {"btn":"button-module_btn__ffRtT","full-size":"button-module_full-size__vmV2E","content-size":"button-module_content-size__f7JSE","size-default":"button-module_size-default__ydEgl","type-filled":"button-module_type-filled__BiyVo","with-icon":"button-module_with-icon__mfKU-","type-outline":"button-module_type-outline__RpZ2V"};
-styleInject(css_248z$d);
-
-/**
- * Primary UI component for user interaction
- */
+var css_248z$c = ".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 styles$b = {"tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
+styleInject(css_248z$c);
 
-const ButtonType = {
-  BUTTON: 'button',
-  RESET: 'reset',
-  SUBMIT: 'submit'
-};
-const ButtonTheme = {
-  DEFAULT: 'content-size',
-  PRIMARY: 'full-size',
-  SUCCESS: 'btn-success',
-  INFO: 'btn-info',
-  WARNING: 'btn-warning',
-  DANGER: 'btn-danger',
-  LINK: 'btn-link'
+const Tooltip = ({
+  type,
+  text,
+  width,
+  color,
+  height,
+  bgColor,
+  fontSize,
+  tBgColor,
+  className,
+  fontFamily,
+  borderRadius,
+  tBorderRadius
+}) => {
+  const tooltipRef = /*#__PURE__*/createRef(null);
+  const [tooltipWidth, setTooltipWidth] = useState(0);
+  const [tooltipHeight, setTooltipHeight] = useState(0);
+  useState(false);
+  const configStyles = compereConfigs();
+  const classProps = classnames(styles$b['tooltip'], className);
+  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]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${styles$b['tooltip-block']}`,
+    style: {
+      width: width ? width : configStyles.TOOLTIP.width,
+      height: height ? height : configStyles.TOOLTIP.height,
+      backgroundColor: bgColor ? bgColor : configStyles.TOOLTIP.bgColor
+    }
+  }, /*#__PURE__*/React.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'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${styles$b['tooltip-rel']}`
+  }, /*#__PURE__*/React.createElement("div", {
+    className: `${styles$b['tooltip-decor']}`,
+    style: {
+      backgroundColor: tBgColor ? tBgColor : configStyles.TOOLTIP.bgColor,
+      left: type === 'top' || type === 'bottom' ? 'calc(50% - 5px)' : type === 'right' ? '-15px' : type === 'left' ? 'calc(100% + 5px)' : '0px',
+      top: type === 'top' ? 'calc(100% + 5px)' : type === 'bottom' ? '-15px' : type === 'right' || type === 'left' ? 'calc(50% - 5px)' : '0px'
+    }
+  }), /*#__PURE__*/React.createElement("p", {
+    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))));
 };
-const ButtonSize = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large'
+Tooltip.propTypes = {
+  width: PropTypes.string,
+  color: PropTypes.string,
+  height: PropTypes.string,
+  bgColor: PropTypes.string,
+  tBgColor: PropTypes.string,
+  fontSize: PropTypes.string,
+  className: PropTypes.string,
+  fontFamily: PropTypes.string,
+  borderRadius: PropTypes.string,
+  tBorderRadius: PropTypes.string,
+  type: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired
 };
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
 const Button = ({
-  primary,
-  backgroundColor,
-  theme,
-  size,
-  className,
-  disabled,
+  type,
+  color,
   label,
+  width,
+  height,
+  cursor,
+  border,
   outline,
+  padding,
+  onClick,
+  fontSize,
+  disabled,
+  className,
+  boxSizing,
+  transition,
+  contentWidth,
+  borderRadius,
+  backgroundColor,
+  disabledThemeColor,
+  disabledThemeBgColor,
+  disabledThemeLineColor,
   ...props
 }) => {
-  const classProps = classnames(styles$b.btn, styles$b[theme], styles$b[size], outline ? styles$b['type-outline'] : styles$b['type-filled'], className, 'button-rem');
-  // className='btn type-outline size-default' 
+  const [isHover, setIsHover] = useState(false);
+  useEffect(() => {
+    if (!label) {
+      alert('Button component: label prop is required, please add it!!!');
+    }
+  }, []);
+  const configStyles = compereConfigs();
+  const classProps = classnames(className);
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
   return /*#__PURE__*/React.createElement("button", _extends({
-    type: "button",
-    className: classProps,
-    style: backgroundColor && {
-      backgroundColor
+    style: {
+      height: height ? height : configStyles.BUTTON.height,
+      padding: padding ? padding : configStyles.BUTTON.padding,
+      fontSize: fontSize ? fontSize : configStyles.BUTTON.fontSize,
+      boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
+      transition: transition ? transition : configStyles.BUTTON.transition,
+      border: outline ? 'none' : border ? border : configStyles.BUTTON.border,
+      width: contentWidth ? 'auto' : width ? width : configStyles.BUTTON.width,
+      borderRadius: borderRadius ? borderRadius : configStyles.BUTTON.borderRadius,
+      cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.BUTTON.cursor,
+      backgroundColor: (outline || !outline) && disabled ? disabledThemeBgColor ? disabledThemeBgColor : configStyles.BUTTON.disabledThemeBgColor : outline && !disabled ? isHover ? backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor : '#ffffff' : backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor,
+      boxShadow: outline ? disabled ? `inset 0 0 0 2px ${disabledThemeLineColor ? disabledThemeLineColor : configStyles.BUTTON.disabledThemeLineColor}` : `inset 0 0 0 2px ${backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor}` : 'none',
+      color: (outline || !outline) && disabled ? disabledThemeColor ? disabledThemeColor : configStyles.BUTTON.disabledThemeColor : outline && !disabled ? isHover ? color ? color : configStyles.BUTTON.color : backgroundColor ? backgroundColor : configStyles.BUTTON.bgColor : color ? color : configStyles.BUTTON.color
     },
-    disabled: disabled ? 'disabled' : ''
+    type: type ? type : configStyles.BUTTON.type,
+    disabled: disabled ? disabled : configStyles.BUTTON.disabled,
+    onClick: disabled ? _ => _ : type !== 'submit' ? onClick ? onClick : _ => alert('Add click event handler on Button component') : _ => _,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    className: classProps
   }, props), label);
 };
 Button.propTypes = {
-  type: PropTypes.oneOf(Object.values(ButtonType)),
-  theme: PropTypes.oneOf(Object.values(ButtonTheme)),
-  size: PropTypes.oneOf(Object.values(ButtonSize)),
-  /**
-   * What background color to use
-   */
-  backgroundColor: PropTypes.string,
-  /**
-   * How large should the button be?
-   */
-  // size: PropTypes.oneOf(['small', 'medium', 'large']),
-  /**
-   * Button contents
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * Optional click handler
-   */
+  type: PropTypes.string,
+  color: PropTypes.string,
+  width: PropTypes.string,
+  outline: PropTypes.bool,
   onClick: PropTypes.func,
-  /**
-   * disabled
-   */
+  height: PropTypes.string,
+  cursor: PropTypes.string,
+  border: PropTypes.string,
   disabled: PropTypes.bool,
+  padding: PropTypes.string,
+  fontSize: PropTypes.string,
+  boxSizing: PropTypes.string,
   className: PropTypes.string,
-  outline: PropTypes.bool
-};
-Button.defaultProps = {
-  backgroundColor: null,
-  primary: false,
-  size: 'medium',
-  onClick: undefined,
-  outline: false
+  transition: PropTypes.string,
+  contentWidth: PropTypes.bool,
+  borderRadius: PropTypes.string,
+  backgroundColor: PropTypes.string,
+  label: PropTypes.string.isRequired,
+  disabledThemeColor: PropTypes.string,
+  disabledThemeBgColor: PropTypes.string,
+  disabledThemeLineColor: PropTypes.string
 };
 
-var css_248z$c = "h1{font-size:70px;line-height:78px}h1,h2{font-weight:400;text-transform:uppercase}h2{font-size:50px;line-height:56px}h3{font-size:38px;font-weight:400;line-height:44px;text-transform:uppercase}h4{font-size:24px;line-height:28px}h4,h5{font-weight:600;text-transform:uppercase}h5{font-size:20px;line-height:26px}h6{font-size:14px;font-weight:600;line-height:20px;text-transform:none}p{font-size:13px;line-height:18px}p,span{color:#3c393e;font-weight:500;text-transform:none}span{font-size:12px;line-height:16px}i{font-family:icomoon;font-style:inherit}";
-styleInject(css_248z$c);
-
 const TypographyType = {
+  p: 'p',
   h1: 'h1',
   h2: 'h2',
   h3: 'h3',
   h4: 'h4',
   h5: 'h5',
   h6: 'h6',
-  span: 'span',
-  p: 'p',
-  i: 'i'
+  span: 'span'
 };
 const Typography = ({
+  size,
+  weight,
   onClick,
   variant,
-  className,
-  color,
-  bold,
   children,
+  className,
   ...props
 }) => {
-  const classProps = classnames(className, 'sizes-rem', bold ? 'bold' : '');
-  const CustomTag = variant;
-
-  // const Tag = ({ className, children }) => (
-  // 	<CustomTag
-  // 		className={className}
-  // 		{...props}
-  // 	>
-  // 		{children}
-  // 	</CustomTag>
-  // );
-
-  const StyledTypograpy = styled(CustomTag)`
-		${color ? 'color: ' + color + ';' : ''}
-		${bold ? 'font-weight: bold;' : ''}
-	`;
-  return /*#__PURE__*/React.createElement(StyledTypograpy, {
+  const [validVariant, setValidVariant] = useState(false);
+  const configStyles = compereConfigs();
+  const classProps = classnames(className);
+  useEffect(() => {
+    if (!Object.values(TypographyType).includes(variant)) {
+      setValidVariant(true);
+    }
+  }, [variant]);
+  const tagT = /*#__PURE__*/React.createElement(variant, {
+    ...props,
     className: classProps,
-    onClick: onClick
-  }, " ", children, " ");
+    style: {
+      fontSize: size ? size : configStyles.TYPOGRAPHY['fSize' + variant],
+      fontWeight: weight ? weight : configStyles.TYPOGRAPHY['fWeight' + variant]
+    },
+    onClick: onClick ? onClick : _ => _
+  }, [children]);
+  return validVariant ? 'Please set Typography valid variant' : tagT;
 };
 Typography.propTypes = {
-  variant: PropTypes.oneOf(Object.values(TypographyType)),
+  size: PropTypes.string,
+  weight: PropTypes.string,
+  onClick: PropTypes.func,
   className: PropTypes.string,
-  bold: PropTypes.bool,
-  color: PropTypes.string,
-  onClick: PropTypes.func
-};
-Typography.defaultProps = {
-  variant: 'h1',
-  onClick: () => {}
+  variant: PropTypes.oneOf(Object.values(TypographyType)).isRequired
 };
 
 var css_248z$b = ".autocomplate-module_autocomplate-content__UbIUT{display:flex;flex-direction:column;position:relative}.autocomplate-module_autocomplate-content-top__FVgCp{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}.autocomplate-module_autocomplate-content-top__FVgCp.autocomplate-module_active__40fdV{border-color:#00236a}.autocomplate-module_autocomplate-content-top__FVgCp:hover{border-color:#3c393e}.autocomplate-module_autocomplate-content-bottom__yk0zP{animation:autocomplate-module_select-show__7Uap4 .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}.autocomplate-module_autocomplate-content-bottom-inner__rF5IF{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}@keyframes autocomplate-module_select-show__7Uap4{to{max-height:400px}}.autocomplate-module_autocomplate-content-bottom-row__dRsZa{align-items:center;background:#fff;box-sizing:border-box;color:#3c393e;cursor:pointer;display:flex;font-size:16px;font-weight:500;height:46px;line-height:22px;margin-bottom:2px;padding:0 15px;transition:background .24s,color .24s}.autocomplate-module_autocomplate-content-bottom-row__dRsZa .autocomplate-module_no-option__xv0-E{color:red}.autocomplate-module_autocomplate-content-bottom-row__dRsZa:hover{background:unset;color:#00236a}.autocomplate-module_option-active__WuH4I .autocomplate-module_autocomplate-content-bottom-row__dRsZa{color:#00236a}.autocomplate-module_autocomplate-title__3Qxqz{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}.autocomplate-module_errorBorder__LV-nb{border:2px solid #e00!important}.autocomplate-module_errorMessage__Gchpc{color:#e00!important}";
@@ -405,118 +498,161 @@ Checkbox.defaultProps = {
 var css_248z$9 = "";
 styleInject(css_248z$9);
 
-var css_248z$8 = ".input-module_input-wrap__NunrE{max-width:400px;position:relative}.input-module_input__-ipHD{border:none;border-radius:6px;box-shadow:inset 0 0 0 2px #d1d1d1;box-sizing:border-box;color:#3c393e;cursor:text;font-size:16px;line-height:20px;outline:none;overflow:hidden;transition:background-color .24s,color .24s}.input-module_input__-ipHD.input-module_full-size__38YG7{width:100%}.input-module_input__-ipHD.input-module_content-size__rZ5EA{width:auto}.input-module_input__-ipHD.input-module_size-medium__frTDq{min-height:46px;padding:12px 15px}.input-module_input__-ipHD:hover{box-shadow:inset 0 0 0 2px #3c393e}.input-module_input__-ipHD:active{box-shadow:inset 0 0 0 2px #00236a}.input-module_inputErrorMessages__hx490{animation:input-module_error-message-show__OrVSo .24s forwards;bottom:0;color:#e00;font-size:14px;left:0;line-height:19px;position:absolute;transform:scale3d(0,0,0);z-index:1}.input-module_labelInput__sUMKQ{color:#000}.input-module_input__-ipHD.input-module_state-disabled__402v0{background-color:#fbfbfb;pointer-events:none}.input-module_input__-ipHD.input-module_error-message__7NphF{box-shadow:inset 0 0 0 2px #e00}.input-module_input-title__giCsY{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px;text-transform:none}@keyframes input-module_error-message-show__OrVSo{to{bottom:-20px;transform:scaleX(1)}}";
-var styles$8 = {"input-wrap":"input-module_input-wrap__NunrE","input":"input-module_input__-ipHD","full-size":"input-module_full-size__38YG7","content-size":"input-module_content-size__rZ5EA","size-medium":"input-module_size-medium__frTDq","with-icon":"input-module_with-icon__w3jTW","inputErrorMessages":"input-module_inputErrorMessages__hx490","error-message-show":"input-module_error-message-show__OrVSo","labelInput":"input-module_labelInput__sUMKQ","state-disabled":"input-module_state-disabled__402v0","error-message":"input-module_error-message__7NphF","input-title":"input-module_input-title__giCsY"};
+var css_248z$8 = ".input-module_input-wrap__NunrE{width:100%}.input-module_input-content__kP7lZ{display:flex;width:100%}.input-module_input-title__giCsY{color:#3c393e;display:block;font-size:16px;font-weight:500;line-height:22px;margin-bottom:6px}.input-module_inputErrorMessages__hx490{color:#e00;font-size:14px;line-height:19px}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}";
+var styles$8 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","input-title":"input-module_input-title__giCsY","inputErrorMessages":"input-module_inputErrorMessages__hx490"};
 styleInject(css_248z$8);
 
 const InputTypes = {
   TEXT: "text",
-  PASSWORD: "password",
-  EMAIL: "email",
-  NUMBER: "number",
-  TEL: "tel"
-};
-const InputSizes = {
-  SMALL: "size-small",
-  MEDIUM: "size-medium",
-  LARGE: "size-large"
+  PASSWORD: "password"
 };
 const Input = ({
-  size,
+  type,
+  name,
   color,
-  className,
   label,
-  regexp,
-  regexpError,
-  errorMesage,
+  value,
+  width,
+  height,
+  radius,
+  border,
+  padding,
+  tooltip,
+  bgColor,
+  leftIcon,
+  fontSize,
   required,
-  showEye,
   disabled,
-  type,
-  tooltip,
   onChange,
-  value,
+  iconWidth,
+  rightIcon,
+  className,
+  boxSizing,
+  boxShadow,
+  errorMesage,
+  borderColor,
+  placeholder,
+  autoComplete,
+  boxShadowHover,
   ...props
 }) => {
-  const [inputValue, setInputValue] = useState(value);
-  const [eyeStatus, setEyeStatus] = useState("");
+  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();
+  const classProps = classnames(className);
   const handleChange = event => {
-    setInputValue(event.target.value);
-    onChange ? onChange(event.target.value) : "";
+    onChange ? onChange(event.target.value) : _ => _;
   };
-  document.onmouseup = () => {
-    setEyeStatus("");
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(false);
   };
-  useEffect(() => {
-    setInputValue(value);
-  }, [value]);
-  let eMessage = "";
-  if (errorMesage) {
-    eMessage = errorMesage;
-  } else if (regexp) {
-    const regex = new RegExp(regexp);
-    eMessage = regex.test(inputValue) ? "" : regexpError;
-  }
-  const classProps = classnames(styles$8.input, styles$8[size], eMessage != "" ? styles$8["error-message"] : "", className, "input-inner-rem");
   return /*#__PURE__*/React.createElement("div", {
-    className: `${styles$8["input-wrap"]} input-wrap-rem`
+    className: `${styles$8["input-wrap"]}`
   }, label ? /*#__PURE__*/React.createElement("label", {
-    className: `${styles$8["input-title"]} input-title-rem`
+    className: `${styles$8["input-title"]}`
   }, label, " ", required && /*#__PURE__*/React.createElement("sup", {
     style: {
       color: "#ee0000"
     }
-  }, "*")) : "", /*#__PURE__*/React.createElement("input", _extends({}, props, {
-    type: eyeStatus || type,
-    className: classProps,
-    style: color && {
-      color
+  }, "*")) : '', /*#__PURE__*/React.createElement("div", {
+    className: `${styles$8["input-content"]}`,
+    style: {
+      borderRadius: radius ? radius : configStyles.INPUT.radius,
+      boxShadow: isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
     },
-    disabled: disabled ? disabled : "",
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave
+  }, leftIcon && leftIcon.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
+    onMouseDown: type === 'password' ? _ => setShow(true) : _ => _,
+    onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
+    style: {
+      cursor: type === 'password' ? 'pointer' : 'default',
+      height: height ? height : configStyles.INPUT.height,
+      padding: padding ? padding : configStyles.INPUT.padding,
+      width: iconWidth ? iconWidth : configStyles.INPUT.iconWidth,
+      boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
+      borderTopLeftRadius: radius ? radius : configStyles.INPUT.radius,
+      borderBottomLeftRadius: radius ? radius : configStyles.INPUT.radius,
+      backgroundColor: disabled ? '#FBFBFB' : bgColor ? bgColor : configStyles.INPUT.bgColor
+    }
+  }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', /*#__PURE__*/React.createElement("input", _extends({}, props, {
+    value: value,
+    className: classProps,
     onChange: handleChange,
-    value: inputValue
-  })), type === "password" && showEye ? /*#__PURE__*/React.createElement("p", {
-    onMouseDown: () => {
-      setEyeStatus("text");
-    },
-    onMouseUp: () => {
-      setEyeStatus("");
+    type: show ? 'text' : type,
+    disabled: disabled ? disabled : "",
+    name: name ? name : `tui_${random}_tui`,
+    placeholder: placeholder ? placeholder : '',
+    autoComplete: autoComplete ? autoComplete : configStyles.INPUT.autoComplete,
+    style: {
+      border: 'none',
+      outline: 'none',
+      pointerEvents: disabled ? 'none' : 'auto',
+      width: width ? width : configStyles.INPUT.width,
+      height: height ? height : configStyles.INPUT.height,
+      padding: padding ? padding : configStyles.INPUT.padding,
+      borderRadius: radius ? radius : configStyles.INPUT.radius,
+      fontSize: fontSize ? fontSize : configStyles.INPUT.fontSize,
+      boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
+      color: errorMesage ? 'rgba(238, 0, 0, 1)' : color ? color : configStyles.INPUT.color,
+      backgroundColor: disabled ? '#FBFBFB' : bgColor ? bgColor : configStyles.INPUT.bgColor
     }
-  }, "\uD83D\uDC41") : null, tooltip ? /*#__PURE__*/React.createElement(Typography, {
-    variant: "p",
-    onClick: () => {
-      setTooltipStatus(!tooltipStatus);
+  })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
+    onMouseDown: type === 'password' ? _ => setShow(true) : _ => _,
+    onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
+    style: {
+      cursor: type === 'password' ? 'pointer' : 'default',
+      border: border ? border : configStyles.INPUT.border,
+      height: height ? height : configStyles.INPUT.height,
+      padding: padding ? padding : configStyles.INPUT.padding,
+      width: iconWidth ? iconWidth : configStyles.INPUT.iconWidth,
+      boxSizing: boxSizing ? boxSizing : configStyles.INPUT.boxSizing,
+      borderTopRightRadius: radius ? radius : configStyles.INPUT.radius,
+      borderBottomRightRadius: radius ? radius : configStyles.INPUT.radius,
+      backgroundColor: disabled ? '#FBFBFB' : bgColor ? bgColor : configStyles.INPUT.bgColor
     }
-  }, "\u24D8") : null, tooltipStatus ? /*#__PURE__*/React.createElement("p", null, tooltip) : null, eMessage ? /*#__PURE__*/React.createElement("span", {
+  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? /*#__PURE__*/React.createElement(Typography, {
+    variant: "p",
+    onClick: () => setTooltipStatus(!tooltipStatus)
+  }, "\u24D8") : null, tooltipStatus ? /*#__PURE__*/React.createElement("p", null, tooltip) : null, errorMesage ? /*#__PURE__*/React.createElement("span", {
     className: styles$8.inputErrorMessages
-  }, eMessage) : "");
+  }, errorMesage) : "");
 };
 Input.propTypes = {
-  type: PropTypes.oneOf(Object.values(InputTypes)),
-  size: PropTypes.oneOf(Object.values(InputSizes)),
+  name: PropTypes.string,
   color: PropTypes.string,
-  className: PropTypes.string,
+  value: PropTypes.string,
+  width: PropTypes.string,
+  label: PropTypes.string,
   onChange: PropTypes.func,
   required: PropTypes.bool,
-  errorMesage: PropTypes.string,
-  regexp: PropTypes.string,
-  regexpError: PropTypes.string,
-  label: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
-  value: PropTypes.string,
-  showEye: PropTypes.bool,
-  tooltip: PropTypes.string
+  height: PropTypes.string,
+  radius: PropTypes.string,
+  bgColor: PropTypes.string,
+  fontSize: PropTypes.string,
+  tooltip: PropTypes.element,
+  className: PropTypes.string,
+  iconWidth: PropTypes.string,
+  boxSizing: PropTypes.string,
+  boxShadow: PropTypes.string,
+  placeholder: PropTypes.string,
+  errorMesage: PropTypes.string,
+  autoComplete: PropTypes.string,
+  boxShadowHover: PropTypes.string,
+  leftIcon: PropTypes.arrayOf(PropTypes.element),
+  rightIcon: PropTypes.arrayOf(PropTypes.element),
+  type: PropTypes.oneOf(Object.values(InputTypes))
 };
 Input.defaultProps = {
-  label: "",
-  color: null,
-  size: InputSizes.MEDIUM,
-  onChange: undefined,
-  required: false,
-  errorMesage: "",
-  type: "text",
-  value: ""
+  type: "text"
 };
 
 var css_248z$7 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:13px;line-height:16px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}";
@@ -1253,4 +1389,4 @@ Table.defaultProps = {
   hearderData: []
 };
 
-export { Autocomplate, Button, ButtonSize, ButtonTheme, ButtonType, Captcha, Checkbox, File, Input, InputSizes, InputTypes, Modal, Pagination, Radio, Select, SelectSize, SelectTheme, Stepper, Table, Typography, TypographyType };
+export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, Pagination, Radio, Select, SelectSize, SelectTheme, Stepper, Table, Tooltip, Typography, TypographyType };