@xaypay/tui 0.0.56 → 0.0.57

package/dist/index.js

@@ -108,6 +108,12 @@ const File = ({
     setFileName('no selected file');
     document.querySelector(`.${name}`).value = "";
   };
+  React.useEffect(() => {
+    return () => {
+      setError('');
+      setImage(null);
+    };
+  }, []);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("p", {
     className: `${styles$b['file-form-title']} ile-form-title-rem`
   }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
@@ -373,13 +379,7 @@ const _ = require('lodash');
 const compereConfigs = () => {
   let projectConfig = {};
   let packageConfig = {};
-  try {
-    packageConfig = require('../tui.config.js');
-  } catch (error) {
-    packageConfig = require('../../tui.config.js');
-    // console.log(error, 'Package: tui.config.js file is not define');
-  }
-
+  packageConfig = require(process.env.STORYBOOK_PATH);
   try {
     projectConfig = require('../../../../tui.config.js');
   } catch (error) {
@@ -410,7 +410,6 @@ const Typography = ({
   margin,
   padding,
   variant,
-  bgColor,
   onClick,
   children,
   textAlign,
@@ -422,45 +421,18 @@ const Typography = ({
   fontFamily,
   textTransform,
   textDecoration,
+  backgroundColor,
   ...props
 }) => {
   const configStyles = compereConfigs();
   const classProps = classnames__default["default"](className);
   const [isHover, setIsHover] = React.useState(false);
   const [validVariant, setValidVariant] = React.useState(false);
-  const [style, setStyle] = React.useState({
-    border: border ? border : configStyles.TYPOGRAPHY.border,
-    cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
-    borderRadius: radius ? radius : configStyles.TYPOGRAPHY.radius,
-    fontSize: size ? size : configStyles.TYPOGRAPHY['size' + variant],
-    margin: margin ? margin : configStyles.TYPOGRAPHY['margin' + variant],
-    fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight' + variant],
-    padding: padding ? padding : configStyles.TYPOGRAPHY['padding' + variant],
-    textShadow: textShadow ? textShadow : configStyles.TYPOGRAPHY.textShadow,
-    textAlign: textAlign ? textAlign : configStyles.TYPOGRAPHY['textAlign' + variant],
-    backgroundColor: bgColor ? bgColor : configStyles.TYPOGRAPHY['bgColor' + variant],
-    fontStyle: fontStyle ? fontStyle : configStyles.TYPOGRAPHY['fontStyle' + variant],
-    lineHeight: lineHeight ? lineHeight : configStyles.TYPOGRAPHY['lineHeight' + variant],
-    fontFamily: fontFamily ? fontFamily : configStyles.TYPOGRAPHY['fontFamily' + variant],
-    textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform' + variant],
-    textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration' + variant],
-    color: isHover ? colorHover ? colorHover : configStyles.TYPOGRAPHY['colorHover' + variant] : color ? color : configStyles.TYPOGRAPHY['color' + variant]
-  });
   React.useEffect(() => {
     if (!Object.values(TypographyType).includes(variant)) {
       setValidVariant(true);
     }
   }, [variant]);
-  React.useEffect(() => {
-    if (color) {
-      setStyle(prev => {
-        return {
-          ...prev,
-          color: color
-        };
-      });
-    }
-  }, [color]);
   const handleMouseEnter = () => {
     setIsHover(true);
   };
@@ -468,7 +440,24 @@ const Typography = ({
     setIsHover(false);
   };
   const tagT = /*#__PURE__*/React__default["default"].createElement(variant, {
-    style,
+    style: {
+      border: border ? border : configStyles.TYPOGRAPHY.border,
+      cursor: cursor ? cursor : configStyles.TYPOGRAPHY.cursor,
+      borderRadius: radius ? radius : configStyles.TYPOGRAPHY.radius,
+      fontSize: size ? size : configStyles.TYPOGRAPHY['size' + variant],
+      margin: margin ? margin : configStyles.TYPOGRAPHY['margin' + variant],
+      fontWeight: weight ? weight : configStyles.TYPOGRAPHY['weight' + variant],
+      padding: padding ? padding : configStyles.TYPOGRAPHY['padding' + variant],
+      textShadow: textShadow ? textShadow : configStyles.TYPOGRAPHY.textShadow,
+      textAlign: textAlign ? textAlign : configStyles.TYPOGRAPHY['textAlign' + variant],
+      fontStyle: fontStyle ? fontStyle : configStyles.TYPOGRAPHY['fontStyle' + variant],
+      lineHeight: lineHeight ? lineHeight : configStyles.TYPOGRAPHY['lineHeight' + variant],
+      fontFamily: fontFamily ? fontFamily : configStyles.TYPOGRAPHY['fontFamily' + variant],
+      textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform' + variant],
+      textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration' + variant],
+      backgroundColor: backgroundColor ? backgroundColor : configStyles.TYPOGRAPHY['backgroundColor' + variant],
+      color: isHover ? colorHover ? colorHover : configStyles.TYPOGRAPHY['colorHover' + variant] : color ? color : configStyles.TYPOGRAPHY['color' + variant]
+    },
     ...props,
     className: classProps,
     onClick: onClick ? onClick : _ => _,
@@ -486,7 +475,6 @@ Typography.propTypes = {
   cursor: PropTypes__default["default"].string,
   margin: PropTypes__default["default"].string,
   radius: PropTypes__default["default"].string,
-  bgColor: PropTypes__default["default"].string,
   padding: PropTypes__default["default"].string,
   textAlign: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
@@ -497,6 +485,7 @@ Typography.propTypes = {
   colorHover: PropTypes__default["default"].string,
   textTransform: PropTypes__default["default"].string,
   textDecoration: PropTypes__default["default"].string,
+  backgroundColor: PropTypes__default["default"].string,
   variant: PropTypes__default["default"].oneOf(Object.values(TypographyType))
 };
 Typography.defaultProps = {
@@ -676,6 +665,7 @@ const Input = ({
   }, "*")) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7["input-content"]}`,
     style: {
+      width: width ? width : configStyles.INPUT.width,
       borderRadius: radius ? radius : configStyles.INPUT.radius,
       boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
     },
@@ -743,7 +733,7 @@ const Input = ({
       borderBottomRightRadius: radius ? radius : configStyles.INPUT.radius,
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
-  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip && tooltip.length > 0 ? tooltip[0] : '', errorMessage ? /*#__PURE__*/React__default["default"].createElement(P, {
+  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', errorMessage ? /*#__PURE__*/React__default["default"].createElement(P, {
     style: {
       left: errorLeft ? errorLeft : configStyles.INPUT.errorLeft,
       color: errorColor ? errorColor : configStyles.INPUT.errorColor,
@@ -770,6 +760,7 @@ 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,7 +787,6 @@ 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))
@@ -953,42 +943,99 @@ Button.propTypes = {
   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}";
-var styles$5 = {"select-title":"select-module_select-title__c8bR7","select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","active":"select-module_active__v2Dce","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-text":"select-module_select-content-top-text__euajq","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L","error-message":"select-module_error-message__-ac6X","eMessage":"select-module_eMessage__Mm-F7"};
+var ReactArrowIcon = "<svg width=\"15\" height=\"9\" viewBox=\"0 0 15 9\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.9878 8.00003C7.75456 8.00049 7.52851 7.91911 7.34892 7.77003L1.3594 2.77003C1.15554 2.60029 1.02734 2.35638 1.003 2.09196C0.978666 1.82753 1.06019 1.56425 1.22963 1.36003C1.39907 1.15581 1.64255 1.02739 1.90652 1.00301C2.17048 0.978631 2.4333 1.06029 2.63716 1.23003L7.9878 5.71003L13.3384 1.39003C13.4405 1.30697 13.558 1.24493 13.6842 1.2075C13.8103 1.17007 13.9425 1.15798 14.0733 1.17192C14.2041 1.18586 14.3309 1.22555 14.4463 1.28873C14.5618 1.3519 14.6636 1.4373 14.746 1.54003C14.8374 1.64285 14.9066 1.76348 14.9493 1.89435C14.9921 2.02523 15.0073 2.16353 14.9942 2.30059C14.9811 2.43765 14.9399 2.57053 14.8731 2.69088C14.8063 2.81124 14.7155 2.91649 14.6062 3.00003L8.6167 7.83003C8.43194 7.95555 8.21051 8.0154 7.9878 8.00003Z\" fill=\"#3C393E\"/>\n</svg>";
+
+var ReactCloseIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.4253 0.241029L12.431 0.236144C12.6129 0.0804082 12.8468 -0.00097097 13.0861 0.00827014C13.3253 0.0175112 13.5523 0.116692 13.7216 0.285992C13.8909 0.455292 13.9901 0.682241 13.9993 0.921488C14.0085 1.16074 13.9272 1.39466 13.7714 1.57651L13.7665 1.58222L8.38622 6.96254L13.7665 12.3429L13.7714 12.3486C13.9272 12.5304 14.0085 12.7643 13.9993 13.0036C13.9901 13.2428 13.8909 13.4698 13.7216 13.6391C13.5523 13.8084 13.3253 13.9076 13.0861 13.9168C12.8468 13.926 12.6129 13.8447 12.431 13.6889L12.4253 13.684L7.04493 8.30363L1.66742 13.6738C1.58315 13.7705 1.48016 13.8492 1.36462 13.9051C1.24669 13.9622 1.11823 13.9942 0.987309 13.9993C0.85639 14.0043 0.72584 13.9823 0.603852 13.9345C0.481865 13.8867 0.371073 13.8142 0.27843 13.7216C0.185788 13.6289 0.113295 13.5181 0.0655034 13.3961C0.0177115 13.2742 -0.00434842 13.1436 0.000708381 13.0127C0.00576522 12.8818 0.0378304 12.7533 0.0948891 12.6354C0.150805 12.5198 0.229542 12.4168 0.326326 12.3325L5.70384 6.96235L0.323475 1.57461L0.318633 1.56895C0.162897 1.3871 0.0815178 1.15317 0.0907589 0.913926C0.1 0.674678 0.199181 0.447729 0.36848 0.27843C0.53778 0.10913 0.76473 0.00995005 1.00398 0.000708956C1.24322 -0.00853214 1.47715 0.0728459 1.659 0.228582L1.66476 0.233511L7.04512 5.62125L12.4253 0.241029Z\" fill=\"#3C393E\"/>\n</svg>";
+
+var css_248z$5 = ".select-module_select-content__GCMDX{display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:1}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
+var styles$5 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
 styleInject(css_248z$5);
 
-const SelectTheme = {
-  DEFAULT: 'select-default',
-  PRIMARY: 'select-primary',
-  SUCCESS: 'select-success',
-  INFO: 'select-info',
-  WARNING: 'select-warning',
-  DANGER: 'select-danger',
-  LINK: 'select-link'
-};
-const SelectSize = {
-  SMALL: 'small',
-  MEDIUM: 'medium',
-  LARGE: 'large'
-};
 const Select = ({
-  theme,
-  size,
-  className,
   disabled,
-  label,
   jsonData,
-  eMessage,
   required,
-  defaultOption,
   onChange,
   keyNames,
-  selected
+  selected,
+  className,
+  arrowIcon,
+  closeIcon,
+  errorMessage,
+  defaultOption,
+  label,
+  labelColor,
+  labelWeight,
+  labelDisplay,
+  labelFontSize,
+  labelLineHeight,
+  labelMarginBottom,
+  labelTextTransform,
+  cursor,
+  errorSize,
+  errorColor,
+  selectedColor,
+  selectedRadius,
+  selectedHeight,
+  selectedBorder,
+  selectedPadding,
+  selectedFontSize,
+  selectedBoxSizing,
+  selectedFontWeight,
+  selectedLineHeight,
+  selectedHoverColor,
+  selectedTransition,
+  selectedBorderColor,
+  optionsBoxShadow,
+  optionsBorderRadius,
+  optionsBackgroundColor,
+  optionItemColor,
+  optionItemCursor,
+  optionItemPadding,
+  optionItemFontSize,
+  optionItemMinHeight,
+  optionItemBoxSizing,
+  optionItemFontWeight,
+  optionItemLineHeight,
+  optionItemColorHover,
+  optionItemMarginBottom,
+  optionItemBackgroudColor,
+  optionItemBackgroudColorHover
 }) => {
   const options = jsonData.length ? JSON.parse(jsonData) : [];
   const ref = React.useRef();
-  let [opened, setOpened] = React.useState(false);
-  let [newSelected, setNewSelected] = React.useState({});
+  const [opened, setOpened] = React.useState(false);
+  const [isHover, setIsHover] = React.useState(false);
+  const [newSelected, setNewSelected] = React.useState({});
+  const configStyles = compereConfigs();
+  const classProps = classnames__default["default"](className);
+  const handleOpenClose = () => {
+    setOpened(!opened);
+  };
+  const handleClearSelect = e => {
+    onChange({});
+    setNewSelected({});
+    e.stopPropagation();
+  };
+  const handleSelectItem = option => {
+    onChange(option);
+    setOpened(!opened);
+    setNewSelected(option);
+  };
+  const handleMouseEnter = () => {
+    setIsHover(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHover(false);
+  };
+  const handleMouseEnterOption = e => {
+    e.target.style.color = optionItemColorHover ? optionItemColorHover : configStyles.SELECT.optionItemColorHover;
+    e.target.style.backgroundColor = optionItemBackgroudColorHover ? optionItemBackgroudColorHover : configStyles.SELECT.optionItemBackgroudColorHover;
+  };
+  const handleMouseLeaveOption = e => {
+    e.target.style.color = optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor;
+    e.target.style.backgroundColor = optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor;
+  };
   React.useEffect(() => {
     const parseSelectedData = selected.length !== 0 ? JSON.parse(selected) : {};
     setNewSelected(parseSelectedData);
@@ -1006,77 +1053,154 @@ const Select = ({
       };
     }
   }, [opened]);
-  classnames__default["default"](styles$5[theme], styles$5[size], {
-    [styles$5.disabled]: disabled,
-    [styles$5.required]: required
-  }, className);
-  return /*#__PURE__*/React__default["default"].createElement("div", null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
-    className: `${styles$5['select-title']} select-title-rem`
-  }, label, " ", required && /*#__PURE__*/React__default["default"].createElement("sup", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    className: classProps
+  }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
+    style: {
+      color: labelColor ? labelColor : configStyles.SELECT.labelColor,
+      fontWeight: labelWeight ? labelWeight : configStyles.SELECT.labelWeight,
+      display: labelDisplay ? labelDisplay : configStyles.SELECT.labelDisplay,
+      fontSize: labelFontSize ? labelFontSize : configStyles.SELECT.labelFontSize,
+      lineHeight: labelLineHeight ? labelLineHeight : configStyles.SELECT.labelLineHeight,
+      marginBottom: labelMarginBottom ? labelMarginBottom : configStyles.SELECT.labelMarginBottom,
+      textTransform: labelTextTransform ? labelTextTransform : configStyles.SELECT.labelTextTransform
+    }
+  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", {
     style: {
       color: "#ee0000"
     }
   }, "*")) : "", /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$5['select-wrap']} select-wrap-rem`,
     ref: ref
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$5['select-content'],
-    id: styles$5.selector
+    className: styles$5['select-content']
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$5['select-content-top']} select-content-top-rem ${eMessage ? styles$5['error-message'] : ''}`,
-    onClick: () => {
-      setOpened(!opened);
-    }
+    style: {
+      cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.cursor,
+      height: selectedHeight ? selectedHeight : configStyles.SELECT.selectedHeight,
+      border: selectedBorder ? selectedBorder : configStyles.SELECT.selectedBorder,
+      padding: selectedPadding ? selectedPadding : configStyles.SELECT.selectedPadding,
+      borderRadius: selectedRadius ? selectedRadius : configStyles.SELECT.selectedRadius,
+      fontSize: selectedFontSize ? selectedFontSize : configStyles.SELECT.selectedFontSize,
+      boxSizing: selectedBoxSizing ? selectedBoxSizing : configStyles.SELECT.selectedBoxSizing,
+      fontWeight: selectedFontWeight ? selectedFontWeight : configStyles.SELECT.selectedFontWeight,
+      lineHeight: selectedLineHeight ? selectedLineHeight : configStyles.SELECT.selectedLineHeight,
+      transition: selectedTransition ? selectedTransition : configStyles.SELECT.selectedTransition,
+      borderColor: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : selectedBorderColor ? selectedBorderColor : configStyles.SELECT.selectedBorderColor
+    },
+    onClick: disabled ? _ => _ : _ => handleOpenClose(),
+    onMouseEnter: disabled ? _ => _ : handleMouseEnter,
+    onMouseLeave: disabled ? _ => _ : handleMouseLeave,
+    className: `${styles$5['select-content-top']}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$5['select-content-top-text']} select-content-top-text-rem`
-  }, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$5['select-content-top-icon']} select-content-top-icon-rem`
-  }, Object.keys(newSelected).length > 0 && /*#__PURE__*/React__default["default"].createElement("i", {
-    className: "icon-close",
-    onClick: e => {
-      setNewSelected({});
-      onChange({});
-      e.stopPropagation();
+    className: `${styles$5['select-content-top-text']}`,
+    style: {
+      color: errorMessage ? errorColor ? errorColor : configStyles.SELECT.errorColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selectedHoverColor : selectedColor ? selectedColor : configStyles.SELECT.selectedColor
     }
-  }), /*#__PURE__*/React__default["default"].createElement("i", {
-    className: opened ? 'icon-icon-up' : 'icon-icon-down'
-  }))), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$5['select-content-bottom']} select-content-bottom-rem`
+  }, newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${styles$5['select-content-top-icon']}`
+  }, Object.keys(newSelected).length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${styles$5['close-icon']}`,
+    onClick: disabled ? _ => _ : handleClearSelect
+  }, closeIcon ? closeIcon : /*#__PURE__*/React__default["default"].createElement("img", {
+    src: ReactCloseIcon,
+    alt: "icon"
+  })), /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
+    },
+    className: `${styles$5['arrow-icon']}`
+  }, arrowIcon ? arrowIcon : /*#__PURE__*/React__default["default"].createElement("img", {
+    src: ReactArrowIcon,
+    alt: "icon"
+  })))), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      boxShadow: optionsBoxShadow ? optionsBoxShadow : configStyles.SELECT.optionsBoxShadow,
+      borderRadius: optionsBorderRadius ? optionsBorderRadius : configStyles.SELECT.optionsBorderRadius,
+      backgroundColor: optionsBackgroundColor ? optionsBackgroundColor : configStyles.SELECT.optionsBackgroundColor,
+      top: parseFloat(selectedHeight ? selectedHeight.substring(0, selectedHeight.length - 2) : configStyles.SELECT.selectedHeight.substring(0, configStyles.SELECT.selectedHeight.length - 2)) + 6 + 'px'
+    },
+    className: `${styles$5['select-content-bottom']}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$5['select-content-bottom-inner']} select-content-bottom-inner-rem`
+    className: `${styles$5['select-content-bottom-inner']}`
   }, options.map((option, i) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: i,
-      className: `${styles$5['select-content-bottom-row']} select-content-bottom-row-rem`,
       disabled: true,
-      onClick: () => {
-        setNewSelected(option);
-        onChange(option);
-        setOpened(!opened);
-      },
-      defaultValue: option[keyNames.id]
+      defaultValue: option[keyNames.id],
+      onClick: disabled ? _ => _ : _ => handleSelectItem(option),
+      onMouseEnter: disabled ? _ => _ : e => handleMouseEnterOption(e),
+      onMouseLeave: disabled ? _ => _ : e => handleMouseLeaveOption(e),
+      className: `${styles$5['select-content-bottom-row']}`,
+      style: {
+        color: optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor,
+        cursor: optionItemCursor ? optionItemCursor : configStyles.SELECT.optionItemCursor,
+        padding: optionItemPadding ? optionItemPadding : configStyles.SELECT.optionItemPadding,
+        fontSize: optionItemFontSize ? optionItemFontSize : configStyles.SELECT.optionItemFontSize,
+        boxSizing: optionItemBoxSizing ? optionItemBoxSizing : configStyles.SELECT.optionItemBoxSizing,
+        minHeight: optionItemMinHeight ? optionItemMinHeight : configStyles.SELECT.optionItemMinHeight,
+        fontWeight: optionItemFontWeight ? optionItemFontWeight : configStyles.SELECT.optionItemFontWeight,
+        lineHeight: optionItemLineHeight ? optionItemLineHeight : configStyles.SELECT.optionItemLineHeight,
+        marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
+        backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor
+      }
     }, option[keyNames.name]);
-  }))) : null)), eMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styles$5.eMessage
-  }, eMessage) : null);
+  }))) : null)), errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      color: errorColor ? errorColor : configStyles.SELECT.errorColor,
+      fontSize: errorSize ? errorSize : configStyles.SELECT.errorSize
+    }
+  }, errorMessage) : '');
 };
 Select.propTypes = {
-  theme: PropTypes__default["default"].oneOf(Object.values(SelectTheme)),
-  size: PropTypes__default["default"].oneOf(Object.values(SelectSize)),
-  label: PropTypes__default["default"].string,
-  eMessage: PropTypes__default["default"].string,
-  defaultOption: PropTypes__default["default"].string,
   onChange: PropTypes__default["default"].func,
   required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
-  className: PropTypes__default["default"].string,
   selected: PropTypes__default["default"].string,
   jsonData: PropTypes__default["default"].string,
-  keyNames: PropTypes__default["default"].object
-};
-Select.defaultProps = {
-  size: 'medium',
-  required: false
+  keyNames: PropTypes__default["default"].object,
+  className: PropTypes__default["default"].string,
+  arrowIcon: PropTypes__default["default"].element,
+  closeIcon: PropTypes__default["default"].element,
+  errorMessage: PropTypes__default["default"].string,
+  defaultOption: PropTypes__default["default"].string,
+  label: PropTypes__default["default"].string,
+  labelColor: PropTypes__default["default"].string,
+  labelWeight: PropTypes__default["default"].string,
+  labelDisplay: PropTypes__default["default"].string,
+  labelFontSize: PropTypes__default["default"].string,
+  labelLineHeight: PropTypes__default["default"].string,
+  labelMarginBottom: PropTypes__default["default"].string,
+  labelTextTransform: PropTypes__default["default"].string,
+  cursor: PropTypes__default["default"].string,
+  errorSize: PropTypes__default["default"].string,
+  errorColor: PropTypes__default["default"].string,
+  selectedColor: PropTypes__default["default"].string,
+  selectedBorder: PropTypes__default["default"].string,
+  selectedRadius: PropTypes__default["default"].string,
+  selectedHeight: PropTypes__default["default"].string,
+  selectedPadding: PropTypes__default["default"].string,
+  selectedFontSize: PropTypes__default["default"].string,
+  selectedBoxSizing: PropTypes__default["default"].string,
+  selectedHoverColor: PropTypes__default["default"].string,
+  selectedFontWeight: PropTypes__default["default"].string,
+  selectedLineHeight: PropTypes__default["default"].string,
+  selectedTransition: PropTypes__default["default"].string,
+  selectedBorderColor: PropTypes__default["default"].string,
+  optionsBoxShadow: PropTypes__default["default"].string,
+  optionsBorderRadius: PropTypes__default["default"].string,
+  optionsBackgroundColor: PropTypes__default["default"].string,
+  optionItemColor: PropTypes__default["default"].string,
+  optionItemCursor: PropTypes__default["default"].string,
+  optionItemPadding: PropTypes__default["default"].string,
+  optionItemFontSize: PropTypes__default["default"].string,
+  optionItemMinHeight: PropTypes__default["default"].string,
+  optionItemBoxSizing: PropTypes__default["default"].string,
+  optionItemFontWeight: PropTypes__default["default"].string,
+  optionItemColorHover: PropTypes__default["default"].string,
+  optionItemLineHeight: PropTypes__default["default"].string,
+  optionItemMarginBottom: PropTypes__default["default"].string,
+  optionItemBackgroudColor: PropTypes__default["default"].string,
+  optionItemBackgroudColorHover: PropTypes__default["default"].string
 };
 
 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>";
@@ -1155,7 +1279,7 @@ const Tooltip = ({
       cursor: 'pointer'
     },
     onClick: handleShow
-  }, tooltipIcon && tooltipIcon[0] ? tooltipIcon[0] : /*#__PURE__*/React__default["default"].createElement("img", {
+  }, tooltipIcon ? tooltipIcon : /*#__PURE__*/React__default["default"].createElement("img", {
     src: ReactInfoIcon
   })));
 };
@@ -1169,11 +1293,11 @@ Tooltip.propTypes = {
   className: PropTypes__default["default"].string,
   fontFamily: PropTypes__default["default"].string,
   tooltipWidth: PropTypes__default["default"].string,
+  tooltipIcon: PropTypes__default["default"].element,
   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)
+  tooltipBackgroundColor: PropTypes__default["default"].string
 };
 Tooltip.defaultProps = {
   type: 'top'
@@ -1585,8 +1709,6 @@ exports.Modal = Modal;
 exports.Pagination = Pagination;
 exports.Radio = Radio;
 exports.Select = Select;
-exports.SelectSize = SelectSize;
-exports.SelectTheme = SelectTheme;
 exports.Stepper = Stepper;
 exports.Table = Table;
 exports.Tooltip = Tooltip;

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "build-lib": "rollup --config rollup.config.js",
+    "storybook": "STORYBOOK_PATH=../../tui.config.js  start-storybook -p 6006",
+    "build-storybook": "STORYBOOK_PATH=../../tui.config.js build-storybook",
+    "build-lib": "STORYBOOK_PATH=../tui.config.js rollup --config rollup.config.js",
     "svgr": "svgr --icon --title-prop --replace-attr-values '#1D1D1D=currentColor' -d src/components/icon -- src/assets"
   },
   "author": "",

package/src/assets/icons/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.9878 8.00003C7.75456 8.00049 7.52851 7.91911 7.34892 7.77003L1.3594 2.77003C1.15554 2.60029 1.02734 2.35638 1.003 2.09196C0.978666 1.82753 1.06019 1.56425 1.22963 1.36003C1.39907 1.15581 1.64255 1.02739 1.90652 1.00301C2.17048 0.978631 2.4333 1.06029 2.63716 1.23003L7.9878 5.71003L13.3384 1.39003C13.4405 1.30697 13.558 1.24493 13.6842 1.2075C13.8103 1.17007 13.9425 1.15798 14.0733 1.17192C14.2041 1.18586 14.3309 1.22555 14.4463 1.28873C14.5618 1.3519 14.6636 1.4373 14.746 1.54003C14.8374 1.64285 14.9066 1.76348 14.9493 1.89435C14.9921 2.02523 15.0073 2.16353 14.9942 2.30059C14.9811 2.43765 14.9399 2.57053 14.8731 2.69088C14.8063 2.81124 14.7155 2.91649 14.6062 3.00003L8.6167 7.83003C8.43194 7.95555 8.21051 8.0154 7.9878 8.00003Z" fill="#3C393E"/>
+</svg>

package/src/assets/icons/close-icon.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.4253 0.241029L12.431 0.236144C12.6129 0.0804082 12.8468 -0.00097097 13.0861 0.00827014C13.3253 0.0175112 13.5523 0.116692 13.7216 0.285992C13.8909 0.455292 13.9901 0.682241 13.9993 0.921488C14.0085 1.16074 13.9272 1.39466 13.7714 1.57651L13.7665 1.58222L8.38622 6.96254L13.7665 12.3429L13.7714 12.3486C13.9272 12.5304 14.0085 12.7643 13.9993 13.0036C13.9901 13.2428 13.8909 13.4698 13.7216 13.6391C13.5523 13.8084 13.3253 13.9076 13.0861 13.9168C12.8468 13.926 12.6129 13.8447 12.431 13.6889L12.4253 13.684L7.04493 8.30363L1.66742 13.6738C1.58315 13.7705 1.48016 13.8492 1.36462 13.9051C1.24669 13.9622 1.11823 13.9942 0.987309 13.9993C0.85639 14.0043 0.72584 13.9823 0.603852 13.9345C0.481865 13.8867 0.371073 13.8142 0.27843 13.7216C0.185788 13.6289 0.113295 13.5181 0.0655034 13.3961C0.0177115 13.2742 -0.00434842 13.1436 0.000708381 13.0127C0.00576522 12.8818 0.0378304 12.7533 0.0948891 12.6354C0.150805 12.5198 0.229542 12.4168 0.326326 12.3325L5.70384 6.96235L0.323475 1.57461L0.318633 1.56895C0.162897 1.3871 0.0815178 1.15317 0.0907589 0.913926C0.1 0.674678 0.199181 0.447729 0.36848 0.27843C0.53778 0.10913 0.76473 0.00995005 1.00398 0.000708956C1.24322 -0.00853214 1.47715 0.0728459 1.659 0.228582L1.66476 0.233511L7.04512 5.62125L12.4253 0.241029Z" fill="#3C393E"/>
+</svg>

package/src/components/file/index.js

@@ -62,6 +62,13 @@ export const File = ({
     document.querySelector(`.${name}`).value = "";
   };
 
+  useEffect(() => {
+    return () => {
+      setError('');
+      setImage(null);
+    }
+  }, []);
+
   return (
       <>
         <p className={`${styles['file-form-title']} ile-form-title-rem`}>

package/src/components/input/index.js

@@ -1,7 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import classnames from "classnames";
-import { Typography } from "../typography";
 import { compereConfigs } from "./../../utils";
 import styled, { keyframes, css } from 'styled-components';
 
@@ -119,6 +118,7 @@ export const Input = ({
             <div
                 className={`${styles["input-content"]}`}
                 style={{
+                    width: width ? width : configStyles.INPUT.width,
                     borderRadius: radius ? radius : configStyles.INPUT.radius,
                     boxShadow: errorMessage ? errorColor ?  `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.INPUT.errorColor}` : isHover ? boxShadowHover ? boxShadowHover : configStyles.INPUT.boxShadowHover : boxShadow ? boxShadow : configStyles.INPUT.boxShadow
                 }}
@@ -210,7 +210,7 @@ export const Input = ({
                 }
             </div>
             {
-                tooltip && tooltip.length > 0 ? tooltip[0] : ''
+                tooltip ? tooltip : ''
             }
             {
                 errorMessage ?
@@ -248,6 +248,7 @@ Input.propTypes = {
     radius: PropTypes.string,
     padding: PropTypes.string,
     fontSize: PropTypes.string,
+    tooltip: PropTypes.element,
     transform: PropTypes.string,
     className: PropTypes.string,
     iconWidth: PropTypes.string,
@@ -274,7 +275,6 @@ 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)),