@xaypay/tui 0.0.87 → 0.0.89

package/dist/index.es.js

@@ -815,6 +815,9 @@ const Input = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
+  const handleShowPass = () => {
+    setShow(!show);
+  };
   useEffect(() => {
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);
@@ -876,10 +879,11 @@ const Input = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
   }, leftIcon && leftIcon.length > 0 && type != 'tel' ? /*#__PURE__*/React__default.createElement("div", {
-    onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
-    onMouseDown: type === 'password' ? _ => setShow(true) : _ => _,
-    onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
+    onClick: type === 'password' ? handleShowPass : _ => _,
     style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
       cursor: type === 'password' ? 'pointer' : 'default',
       height: height ? height : configStyles.INPUT.height,
       padding: padding ? padding : configStyles.INPUT.padding,
@@ -931,10 +935,11 @@ const Input = ({
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
   })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
-    onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
-    onMouseDown: type === 'password' ? _ => setShow(true) : _ => _,
-    onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
+    onClick: type === 'password' ? handleShowPass : _ => _,
     style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
       cursor: type === 'password' ? 'pointer' : 'default',
       height: height ? height : configStyles.INPUT.height,
       padding: padding ? padding : configStyles.INPUT.padding,
@@ -1102,6 +1107,7 @@ const Button = ({
   textTransform,
   backgroundColor,
   disabledLineColor,
+  btnIconMarginRight,
   backgroundHoverColor,
   disabledBackgroundColor,
   ...props
@@ -1124,12 +1130,12 @@ const Button = ({
     style: {
       display: 'flex',
       alignItems: 'center',
+      justifyContent: 'center',
       fontSize: size ? size : configStyles.BUTTON.size,
       fontFamily: font ? font : configStyles.BUTTON.font,
       height: height ? height : configStyles.BUTTON.height,
       fontWeight: weight ? weight : configStyles.BUTTON.weight,
       padding: padding ? padding : configStyles.BUTTON.padding,
-      justifyContent: icon && label ? 'space-between' : 'center',
       borderRadius: radius ? radius : configStyles.BUTTON.radius,
       boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
       transition: transition ? transition : configStyles.BUTTON.transition,
@@ -1147,7 +1153,11 @@ const Button = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     className: classProps
-  }, props), icon && icon, " ", label && label, " ", !icon && !label && 'Add icon or label prop on Button component');
+  }, props), icon && icon, " ", label && /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.btnIconMarginRight : '0px'
+    }
+  }, label), " ", !icon && !label && 'Add icon or label prop on Button component');
 };
 Button.propTypes = {
   type: PropTypes.string,
@@ -1175,6 +1185,7 @@ Button.propTypes = {
   disabledColor: PropTypes.string,
   backgroundColor: PropTypes.string,
   disabledLineColor: PropTypes.string,
+  btnIconMarginRight: PropTypes.string,
   backgroundHoverColor: PropTypes.string,
   disabledBackgroundColor: PropTypes.string
 };
@@ -1198,7 +1209,7 @@ const SvgArrow = ({
   fill: fillColor ? fillColor : '#3C393E'
 }));
 
-var css_248z$9 = ".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:10}.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}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
+var css_248z$9 = ".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: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}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
 var styles$7 = {"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$9);
 
@@ -1422,7 +1433,7 @@ const Select = ({
     }
   }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$7['select-content-top-icon']}`
-  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), showCloseIcon && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
+  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default.createElement("span", null, newSelected.length), (showCloseIcon ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$7['close-icon']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
     style: {
@@ -2198,14 +2209,13 @@ Stepper.propTypes = {
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
 // generators (like Math.random()).
-var getRandomValues;
-var rnds8 = new Uint8Array(16);
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
 function rng() {
   // lazy load so that environments that need to polyfill have a chance to do so
   if (!getRandomValues) {
-    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
-    // find the complete implementation of crypto (msCrypto) on IE11.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
 
     if (!getRandomValues) {
       throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
@@ -2215,43 +2225,35 @@ function rng() {
   return getRandomValues(rnds8);
 }
 
-var REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
-
-function validate(uuid) {
-  return typeof uuid === 'string' && REGEX.test(uuid);
-}
-
 /**
  * Convert array of 16 byte values to UUID string format of the form:
  * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
  */
 
-var byteToHex = [];
+const byteToHex = [];
 
-for (var i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).substr(1));
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
 }
 
-function stringify(arr) {
-  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+function unsafeStringify(arr, offset = 0) {
   // Note: Be careful editing this code!  It's been tuned for performance
   // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID.  If this throws, it's likely due to one
-  // of the following:
-  // - One or more input array values don't map to a hex octet (leading to
-  // "undefined" in the uuid)
-  // - Invalid input values for the RFC `version` or `variant` fields
-
-  if (!validate(uuid)) {
-    throw TypeError('Stringified UUID is invalid');
-  }
-
-  return uuid;
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
 }
 
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native = {
+  randomUUID
+};
+
 function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+
   options = options || {};
-  var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
 
   rnds[6] = rnds[6] & 0x0f | 0x40;
   rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
@@ -2259,14 +2261,14 @@ function v4(options, buf, offset) {
   if (buf) {
     offset = offset || 0;
 
-    for (var i = 0; i < 16; ++i) {
+    for (let i = 0; i < 16; ++i) {
       buf[offset + i] = rnds[i];
     }
 
     return buf;
   }
 
-  return stringify(rnds);
+  return unsafeStringify(rnds);
 }
 
 const SvgListItemPdf = ({
@@ -3984,7 +3986,7 @@ const NewAutocomplete = ({
       setId('');
       setInnerValue('');
     }
-  }, []);
+  }, [selected]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,

package/dist/index.js

@@ -845,6 +845,9 @@ const Input = ({
   const handleMouseLeave = () => {
     setIsHover(false);
   };
+  const handleShowPass = () => {
+    setShow(!show);
+  };
   React.useEffect(() => {
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);
@@ -906,10 +909,11 @@ const Input = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
   }, leftIcon && leftIcon.length > 0 && type != 'tel' ? /*#__PURE__*/React__default["default"].createElement("div", {
-    onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
-    onMouseDown: type === 'password' ? _ => setShow(true) : _ => _,
-    onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
+    onClick: type === 'password' ? handleShowPass : _ => _,
     style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
       cursor: type === 'password' ? 'pointer' : 'default',
       height: height ? height : configStyles.INPUT.height,
       padding: padding ? padding : configStyles.INPUT.padding,
@@ -961,10 +965,11 @@ const Input = ({
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.backgroundColor
     }
   })), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
-    onMouseUp: type === 'password' ? _ => setShow(false) : _ => _,
-    onMouseDown: type === 'password' ? _ => setShow(true) : _ => _,
-    onMouseOut: type === 'password' ? _ => setShow(false) : _ => _,
+    onClick: type === 'password' ? handleShowPass : _ => _,
     style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
       cursor: type === 'password' ? 'pointer' : 'default',
       height: height ? height : configStyles.INPUT.height,
       padding: padding ? padding : configStyles.INPUT.padding,
@@ -1132,6 +1137,7 @@ const Button = ({
   textTransform,
   backgroundColor,
   disabledLineColor,
+  btnIconMarginRight,
   backgroundHoverColor,
   disabledBackgroundColor,
   ...props
@@ -1154,12 +1160,12 @@ const Button = ({
     style: {
       display: 'flex',
       alignItems: 'center',
+      justifyContent: 'center',
       fontSize: size ? size : configStyles.BUTTON.size,
       fontFamily: font ? font : configStyles.BUTTON.font,
       height: height ? height : configStyles.BUTTON.height,
       fontWeight: weight ? weight : configStyles.BUTTON.weight,
       padding: padding ? padding : configStyles.BUTTON.padding,
-      justifyContent: icon && label ? 'space-between' : 'center',
       borderRadius: radius ? radius : configStyles.BUTTON.radius,
       boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
       transition: transition ? transition : configStyles.BUTTON.transition,
@@ -1177,7 +1183,11 @@ const Button = ({
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave,
     className: classProps
-  }, props), icon && icon, " ", label && label, " ", !icon && !label && 'Add icon or label prop on Button component');
+  }, props), icon && icon, " ", label && /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.btnIconMarginRight : '0px'
+    }
+  }, label), " ", !icon && !label && 'Add icon or label prop on Button component');
 };
 Button.propTypes = {
   type: PropTypes__default["default"].string,
@@ -1205,6 +1215,7 @@ Button.propTypes = {
   disabledColor: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   disabledLineColor: PropTypes__default["default"].string,
+  btnIconMarginRight: PropTypes__default["default"].string,
   backgroundHoverColor: PropTypes__default["default"].string,
   disabledBackgroundColor: PropTypes__default["default"].string
 };
@@ -1228,7 +1239,7 @@ const SvgArrow = ({
   fill: fillColor ? fillColor : '#3C393E'
 }));
 
-var css_248z$9 = ".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:10}.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}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
+var css_248z$9 = ".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: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}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
 var styles$7 = {"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$9);
 
@@ -1452,7 +1463,7 @@ const Select = ({
     }
   }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7['select-content-top-icon']}`
-  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), showCloseIcon && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), (showCloseIcon ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7['close-icon']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
     style: {
@@ -2228,14 +2239,13 @@ Stepper.propTypes = {
 // Unique ID creation requires a high quality random # generator. In the browser we therefore
 // require the crypto API and do not support built-in fallback to lower quality random number
 // generators (like Math.random()).
-var getRandomValues;
-var rnds8 = new Uint8Array(16);
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
 function rng() {
   // lazy load so that environments that need to polyfill have a chance to do so
   if (!getRandomValues) {
-    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
-    // find the complete implementation of crypto (msCrypto) on IE11.
-    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
 
     if (!getRandomValues) {
       throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
@@ -2245,43 +2255,35 @@ function rng() {
   return getRandomValues(rnds8);
 }
 
-var REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
-
-function validate(uuid) {
-  return typeof uuid === 'string' && REGEX.test(uuid);
-}
-
 /**
  * Convert array of 16 byte values to UUID string format of the form:
  * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
  */
 
-var byteToHex = [];
+const byteToHex = [];
 
-for (var i = 0; i < 256; ++i) {
-  byteToHex.push((i + 0x100).toString(16).substr(1));
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).slice(1));
 }
 
-function stringify(arr) {
-  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+function unsafeStringify(arr, offset = 0) {
   // Note: Be careful editing this code!  It's been tuned for performance
   // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID.  If this throws, it's likely due to one
-  // of the following:
-  // - One or more input array values don't map to a hex octet (leading to
-  // "undefined" in the uuid)
-  // - Invalid input values for the RFC `version` or `variant` fields
-
-  if (!validate(uuid)) {
-    throw TypeError('Stringified UUID is invalid');
-  }
-
-  return uuid;
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
 }
 
+const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+var native = {
+  randomUUID
+};
+
 function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+
   options = options || {};
-  var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+  const rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
 
   rnds[6] = rnds[6] & 0x0f | 0x40;
   rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
@@ -2289,14 +2291,14 @@ function v4(options, buf, offset) {
   if (buf) {
     offset = offset || 0;
 
-    for (var i = 0; i < 16; ++i) {
+    for (let i = 0; i < 16; ++i) {
       buf[offset + i] = rnds[i];
     }
 
     return buf;
   }
 
-  return stringify(rnds);
+  return unsafeStringify(rnds);
 }
 
 const SvgListItemPdf = ({
@@ -4014,7 +4016,7 @@ const NewAutocomplete = ({
       setId('');
       setInnerValue('');
     }
-  }, []);
+  }, [selected]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,

package/package.json

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

package/src/components/button/index.js

@@ -29,6 +29,7 @@ export const Button = ({
   textTransform,
   backgroundColor,
   disabledLineColor,
+  btnIconMarginRight,
   backgroundHoverColor,
   disabledBackgroundColor,
   ...props
@@ -60,12 +61,12 @@ export const Button = ({
       style={{
         display: 'flex',
         alignItems: 'center',
+        justifyContent: 'center',
         fontSize: size ? size : configStyles.BUTTON.size,
         fontFamily: font ? font : configStyles.BUTTON.font,
         height: height ? height : configStyles.BUTTON.height,
         fontWeight: weight ? weight : configStyles.BUTTON.weight,
         padding: padding ? padding : configStyles.BUTTON.padding,
-        justifyContent: icon && label? 'space-between' : 'center',
         borderRadius: radius ? radius : configStyles.BUTTON.radius,
         boxSizing: boxSizing ? boxSizing : configStyles.BUTTON.boxSizing,
         transition: transition ? transition : configStyles.BUTTON.transition,
@@ -98,7 +99,7 @@ export const Button = ({
       className={classProps}
       {...props}
     >
-      {icon && icon} {label && label} {!icon && !label && 'Add icon or label prop on Button component'}
+      {icon && icon} {label && <span style={{ marginLeft: icon ? btnIconMarginRight ? btnIconMarginRight : configStyles.BUTTON.btnIconMarginRight : '0px' }}>{ label }</span>} {!icon && !label && 'Add icon or label prop on Button component'}
     </button>
   );
 };
@@ -129,6 +130,7 @@ Button.propTypes = {
   disabledColor: PropTypes.string,
   backgroundColor: PropTypes.string,
   disabledLineColor: PropTypes.string,
+  btnIconMarginRight: PropTypes.string,
   backgroundHoverColor: PropTypes.string,
   disabledBackgroundColor: PropTypes.string
 };

package/src/components/input/index.js

@@ -178,6 +178,10 @@ export const Input = ({
         setIsHover(false);
     };
 
+    const handleShowPass = () => {
+        setShow(!show);
+    };
+
     useEffect(() => {
         if (errorMessage) {
             setInnerErrorMessage(errorMessage);
@@ -248,10 +252,11 @@ export const Input = ({
                 {
                     leftIcon && leftIcon.length > 0 && type != 'tel' ?
                         <div
-                            onMouseUp={type === 'password' ? _ => setShow(false) : _ => _}
-                            onMouseDown={type === 'password' ? _ => setShow(true) : _ => _}
-                            onMouseOut={type === 'password' ? _ => setShow(false) : _ => _}
+                            onClick={type === 'password' ? handleShowPass : _ => _}
                             style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
                                 cursor: type === 'password' ? 'pointer' : 'default',
                                 height: height ? height : configStyles.INPUT.height,
                                 padding: padding ? padding : configStyles.INPUT.padding,
@@ -324,10 +329,11 @@ export const Input = ({
                 {
                     rightIcon && rightIcon.length > 0 ?
                     <div
-                        onMouseUp={type === 'password' ? _ => setShow(false) : _ => _}
-                        onMouseDown={type === 'password' ? _ => setShow(true) : _ => _}
-                        onMouseOut={type === 'password' ? _ => setShow(false) : _ => _}
+                        onClick={type === 'password' ? handleShowPass : _ => _}
                         style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
                             cursor: type === 'password' ? 'pointer' : 'default',
                             height: height ? height : configStyles.INPUT.height,
                             padding: padding ? padding : configStyles.INPUT.padding,

package/src/components/newAutocomplete/NewAutocomplete.stories.js

@@ -19,6 +19,7 @@ export default {
 
 const Template = (args) => {
   const [newOptions, setNewOptions] = useState([]);
+  const [sel, setSel] = useState({ "bbb":"0", "name":"gasdfgdsfgdsg" });
   const handleClick = (selected) => {
     console.log(selected, 'selected');
   };
@@ -42,7 +43,14 @@ const Template = (args) => {
       });
   };
 
-  return <NewAutocomplete {...args} getItem={handleClick} selected={{ "bbb":"0", "name":"gasdfgdsfgdsg" }} options={newOptions} change={handleChange} />
+  return (
+    <>
+      <NewAutocomplete {...args} getItem={handleClick} selected={sel} options={newOptions} change={handleChange} />
+      <button style={{ padding: '15px', cursor: 'pointer', margin: '10px 15px 0px 0px', borderRadius: '10px', fontSize: '22px' }} onClick={_ => setSel({ "bbb":"0", "name":"gasdfgdsfgdsg" })}>reset selected</button>
+      <button style={{ padding: '15px', cursor: 'pointer', margin: '10px 15px 0px 0px', borderRadius: '10px', fontSize: '22px' }} onClick={_ => setSel({ "dd": "1", "name": "just ok" })}>change selected</button>
+      <button style={{ padding: '15px', cursor: 'pointer', margin: '10px 15px 0px 0px', borderRadius: '10px', fontSize: '22px' }} onClick={_ => setSel({ "dd": "", "name": "" })}>empty selected</button>
+    </>
+  );
 };
 export const Default = Template.bind({});
 Default.args = {

package/src/components/newAutocomplete/index.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { keyframes, css } from 'styled-components';
 
 import { compereConfigs } from './../../utils';
-
+ 
 export const NewAutocomplete = ({
     label,
     change,
@@ -270,8 +270,8 @@ export const NewAutocomplete = ({
             setId('');
             setInnerValue('');
         }
-    }, []);
-
+    }, [selected]);
+    
     return (
         <>
             {

package/src/components/select/index.js

@@ -267,7 +267,7 @@ export const Select = ({
                                 !disabled && multiple && newSelected.length > 1 && <span>{newSelected.length}</span>
                             }
 
-                            {showCloseIcon && !disabled && newSelected && newSelected.length > 0 && 
+                            {(showCloseIcon ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && 
                                 <div
                                     className={`${styles['close-icon']}`}
                                     onClick={disabled ? _ => _ : handleClearSelect}

package/src/components/select/select.module.css

@@ -16,7 +16,7 @@
     position: absolute;
     width: 100%;
     left: 0px;
-    z-index: 10;
+    z-index: 99999999999;
     max-height: 0;
     overflow: hidden;
     animation: select-show 640ms linear forwards;

package/src/stories/configuration.stories.mdx

@@ -145,7 +145,8 @@ import StackAlt from './assets/stackalt.svg';
     disabledBackgroundColor: 'rgba(238, 238, 238, 1)', // for background color in disabled mode
     transition: 'background-color 240ms, color 240ms', // for transition
     hoverColor: '#001745',                             // for hover color
-    backgroundHoverColor: '#CB3A3A'                    // for hover background color
+    backgroundHoverColor: '#CB3A3A',                   // for hover background color
+    btnIconMarginRight: '5px'                          // for button icon margin right
 }
 ```
 

package/tui.config.js

@@ -22,7 +22,8 @@ module.exports = {
         disabledBackgroundColor: 'rgba(238, 238, 238, 1)', // for background color in disabled mode
         transition: 'background-color 240ms, color 240ms', // for transition
         hoverColor: '#001745',                             // for hover color
-        backgroundHoverColor: '#CB3A3A'                    // for hover background color
+        backgroundHoverColor: '#CB3A3A',                   // for hover background color
+        btnIconMarginRight: '5px'                          // for button icon margin right
     },
     // default properties for <Input /> component
     INPUT: {
@@ -180,6 +181,7 @@ module.exports = {
     },
     // default properties for <Select /> component
     SELECT: {
+        showCloseIcon: true,                               // for select reset icon, when prop exist or true is show, otherwise is hide
         marginTop: '10px',                                 // for error message postion from top
         labelWeight: '500',                                // for label font weight
         labelColor: '#3C393E',                             // for label color