@xaypay/tui 0.2.24 → 0.2.25

package/dist/index.es.js

@@ -48,7 +48,7 @@ var native = {
 };
 
 function v4(options, buf, offset) {
-  if (native.randomUUID && !buf && !options) {
+  if (native.randomUUID && true && !options) {
     return native.randomUUID();
   }
 
@@ -58,16 +58,6 @@ function v4(options, buf, offset) {
   rnds[6] = rnds[6] & 0x0f | 0x40;
   rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
 
-  if (buf) {
-    offset = offset || 0;
-
-    for (let i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
-
-    return buf;
-  }
-
   return unsafeStringify(rnds);
 }
 
@@ -497,19 +487,22 @@ var img$3 = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16
 var img$2 = "data:image/svg+xml,%3csvg width='16' height='2' viewBox='0 0 16 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1H15' stroke='%23009B8B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
 
 // import React from 'react'
+// import info from './src/assetsTMP/info.png';
+// import error from './src/assetsTMP/error.png';
+// import close from './src/assetsTMP/close.svg';
+// import warn from './src/assetsTMP/warning.png';
+// import success from './src/assetsTMP/success.png';
 const boxSizing = 'border-box';
 const fontStyle = 'normal';
 const fontFamily = 'Arial';
 const fontWeight = 500;
 const transparent = 'transparent';
 const presetColors = {
-  info: '#F24C4C',
   dark: '#3C393E',
   light: '#EEEEEE',
   extraLight: '#FBFBFB',
   danger: '#EE0000',
   success: '#0DA574',
-  warning: '#FECD29',
   secondary: '#D1D1D1',
   primary: '#051942',
   primarySecond: '#00236A'
@@ -595,7 +588,7 @@ var packageResult = {
       ...fontObject
     },
     label: {
-      dots: false,
+      useTooltip: false,
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
@@ -603,6 +596,15 @@ var packageResult = {
       marginBottom: '6px',
       font: {
         ...fontObject
+      },
+      tooltip: {
+        color: '#fff',
+        padding: '12px',
+        borderRadius: '8px',
+        font: {
+          ...fontObject
+        },
+        backgroundColor: '#000'
       }
     },
     error: {
@@ -633,6 +635,10 @@ var packageResult = {
           hover: presetColors.dark
         }
       }
+    },
+    icon: {
+      // comment here for example,     
+      // required: React.createElement(SvgChecked, { fill: 'green' }),
     }
   },
   // default properties for <Tooltip /> component
@@ -775,6 +781,7 @@ var packageResult = {
       shadowHover: `0 0 0 2px ${presetColors.dark}` // like border
     },
     label: {
+      useTooltip: false,
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
@@ -782,6 +789,15 @@ var packageResult = {
       textTransform: 'none',
       font: {
         ...fontObject
+      },
+      tooltip: {
+        color: '#fff',
+        padding: '12px',
+        borderRadius: '8px',
+        font: {
+          ...fontObject
+        },
+        backgroundColor: '#000'
       }
     },
     selected: {
@@ -842,6 +858,10 @@ var packageResult = {
       font: {
         ...fontObject
       }
+    },
+    icon: {
+      // comment here for example,     
+      // required: React.createElement(SvgChecked, { fill: 'green' }),
     }
   },
   // default properties for <Textarea /> component
@@ -873,11 +893,21 @@ var packageResult = {
       background: 'white'
     },
     label: {
+      useTooltip: false,
       color: presetColors.dark,
       display: 'block',
       marginBottom: '10px',
       font: {
         ...fontObject
+      },
+      tooltip: {
+        color: '#fff',
+        padding: '12px',
+        borderRadius: '8px',
+        font: {
+          ...fontObject
+        },
+        backgroundColor: '#000'
       }
     },
     font: {
@@ -892,6 +922,10 @@ var packageResult = {
       font: {
         ...fontObject
       }
+    },
+    icon: {
+      // comment here for example,     
+      // required: React.createElement(SvgChecked, { fill: 'green' }),
     }
   },
   // default properties for <NewAutocomplete /> component
@@ -928,6 +962,7 @@ var packageResult = {
       backgroundDisable: presetColors.secondary
     },
     label: {
+      useTooltip: false,
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
@@ -935,6 +970,15 @@ var packageResult = {
       textTransform: 'none',
       font: {
         ...fontObject
+      },
+      tooltip: {
+        color: '#fff',
+        padding: '12px',
+        borderRadius: '8px',
+        font: {
+          ...fontObject
+        },
+        backgroundColor: '#000'
       }
     },
     contentBottom: {
@@ -1025,6 +1069,7 @@ var packageResult = {
     sizeText: 'Առավելագույնը',
     timeForRemoveError: 4000,
     extentionsRowMarginTop: '40px',
+    extentionsTextColor: 'black',
     border: {
       width: '2px',
       style: 'dashed',
@@ -1038,6 +1083,7 @@ var packageResult = {
       backgroundHidden: 'rgba(60, 57, 62, 0.4)'
     },
     label: {
+      useTooltip: false,
       color: '#4A4A4D',
       font: {
         ...fontObject
@@ -1764,9 +1810,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".file-module_small-file-component__nlpcW>svg{max-height:77%!important}.file-module_file-label__uscgT{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-module_tooltip__FjCUU{background-color:#333;border-radius:4px;color:#fff;font-size:14px;pointer-events:none;position:fixed;visibility:hidden;white-space:nowrap;z-index:1000}";
-var styles$b = {"small-file-component":"file-module_small-file-component__nlpcW","file-label":"file-module_file-label__uscgT","tooltip":"file-module_tooltip__FjCUU"};
-styleInject(css_248z$d);
+var css_248z$c = ".file-module_small-file-component__nlpcW>svg{max-height:77%!important}";
+var styles$b = {"small-file-component":"file-module_small-file-component__nlpcW"};
+styleInject(css_248z$c);
 
 // eslint-disable-next-line react/display-name
 const File = /*#__PURE__*/forwardRef(({
@@ -1774,7 +1820,6 @@ const File = /*#__PURE__*/forwardRef(({
   size,
   name,
   color,
-  label,
   style,
   weight,
   family,
@@ -1794,10 +1839,13 @@ const File = /*#__PURE__*/forwardRef(({
   errorStyle,
   errorWeight,
   errorFamily,
+  label,
   labelSize,
+  labelColor,
   labelStyle,
   labelWeight,
   labelFamily,
+  useLabelTooltip,
   labelTooltipColor,
   labelTooltipPadding,
   labelTooltipFontSize,
@@ -1807,7 +1855,6 @@ const File = /*#__PURE__*/forwardRef(({
   labelTooltipBorderRadius,
   labelTooltipBackgroundColor,
   removeFile,
-  labelColor,
   errorColor,
   filesArray,
   componentId,
@@ -1876,6 +1923,7 @@ const File = /*#__PURE__*/forwardRef(({
   maxCHoosenLengthErrorHideTime,
   textAlignLeftInSmallComponent,
   showPreviewIconInSmallComponent,
+  extentionsTextColor,
   maxSize = 10,
   preview = true,
   timeForRemoveError = 5000,
@@ -1883,11 +1931,11 @@ const File = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const inpRef = useRef(null);
   const labelRef = useRef(null);
-  const parentlRef = useRef(null);
+  const parentRef = useRef(null);
   const memoizedItems = useMemo(() => filesArray, [filesArray]);
   const [error, setError] = useState('');
-  const [isHover, setIsHover] = useState(false);
   const [removeID, setRemoveID] = useState('');
+  const [isHover, setIsHover] = useState(false);
   const [classProps, setClassProps] = useState({});
   const [singleFile, setSingleFile] = useState(null);
   const [configStyles, setConfigStyles] = useState({});
@@ -2182,7 +2230,7 @@ const File = /*#__PURE__*/forwardRef(({
     event.preventDefault();
     setRemoveID(() => v4());
     if (labelRef.current) {
-      const parentElem = parentlRef.current.getBoundingClientRect();
+      const parentElem = parentRef.current.getBoundingClientRect();
       const rect = labelRef.current.getBoundingClientRect();
       const top = rect.top;
       const left = rect.left;
@@ -2315,9 +2363,8 @@ const File = /*#__PURE__*/forwardRef(({
       }
     };
   }, []);
-  console.log(image, ' - - - -image');
   return configStyles.FILE && /*#__PURE__*/React__default.createElement("div", {
-    ref: parentlRef,
+    ref: parentRef,
     style: {
       width: '100%',
       maxWidth: maxWidth ?? configStyles.FILE.maxWidth
@@ -2340,17 +2387,19 @@ const File = /*#__PURE__*/forwardRef(({
     }
   }, /*#__PURE__*/React__default.createElement("label", {
     ref: labelRef,
-    className: styles$b['file-label'],
     style: {
       width: '100%',
       color: labelColor ?? configStyles.FILE.label.color,
       fontSize: labelSize ?? configStyles.FILE.label.font.size,
       fontStyle: labelStyle ?? configStyles.FILE.label.font.style,
       fontWeight: labelWeight ?? configStyles.FILE.label.font.weight,
-      fontFamily: labelFamily ?? configStyles.FILE.label.font.family
+      fontFamily: labelFamily ?? configStyles.FILE.label.font.family,
+      whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) ? 'ellipsis' : ''
     },
-    onMouseEnter: handleLabelMouseEnter,
-    onMouseLeave: handleLabelMouseLeave
+    onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) ? handleLabelMouseEnter : _ => _,
+    onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) ? handleLabelMouseLeave : _ => _
   }, label), required && /*#__PURE__*/React__default.createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default.createElement(SvgRequired, null))), deleteComponent && /*#__PURE__*/React__default.createElement("span", {
     style: {
       cursor: 'pointer'
@@ -2426,7 +2475,8 @@ const File = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React__default.createElement("p", {
     style: {
       margin: '0px',
-      padding: '0px 10px'
+      padding: '0px 10px',
+      color: extentionsTextColor ?? configStyles.FILE.extentionsTextColor
     }
   }, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: styles$b['small-file-component'],
@@ -2467,12 +2517,14 @@ const File = /*#__PURE__*/forwardRef(({
   }), /*#__PURE__*/React__default.createElement("p", {
     style: {
       margin: '0px',
-      marginLeft: '5px',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
+      padding: '0px 10px',
+      color: extentionsTextColor ?? configStyles.FILE.extentionsTextColor
     }
-  }, singleFile && singleFile[`${0}`] ? singleFile[`${0}`].name : /*#__PURE__*/React__default.createElement("span", null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default.createElement("div", {
+  }, singleFile && singleFile[`${0}`] ? singleFile[`${0}`].name : /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      color: color ?? configStyles.FILE.color
+    }
+  }, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -2580,6 +2632,7 @@ File.propTypes = {
   labelWeight: PropTypes.string,
   labelFamily: PropTypes.string,
   labelColor: PropTypes.string,
+  useLabelTooltip: PropTypes.bool,
   labelTooltipColor: PropTypes.string,
   labelTooltipPadding: PropTypes.string,
   labelTooltipFontSize: PropTypes.string,
@@ -2657,7 +2710,8 @@ File.propTypes = {
   filesArray: PropTypes.arrayOf(PropTypes.object),
   textAlignLeftInSmallComponent: PropTypes.bool,
   showPreviewIconInSmallComponent: PropTypes.bool,
-  fileExtensions: PropTypes.arrayOf(PropTypes.string)
+  fileExtensions: PropTypes.arrayOf(PropTypes.string),
+  extentionsTextColor: PropTypes.string
 };
 
 const hasOwnerProperty = (object, property) => {
@@ -2694,11 +2748,7 @@ const handleUtilsCheckTypeTel = (val, prevVal) => {
   return val;
 };
 const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize, numberMaxLength, cardNumber) => {
-  if (maxLength && maxLength > 0) {
-    if (val.length > maxLength) {
-      val = val.substr(0, maxLength);
-    }
-  } else {
+  {
     const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.|\․|\.|\,)?(\d+)?$/ : /^\d+$/;
     if (cardNumber) {
       if (val.length > 19 && !val.includes('.')) {
@@ -2921,9 +2971,9 @@ SingleCheckbox.propTypes = {
   ignoreDisabledForChecked: PropTypes.bool
 };
 
-var css_248z$c = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{align-items:center;cursor:pointer;display:flex;margin:0 0 8px;min-height:38px;white-space:wrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}.table-module_no-tabel-data__6xp3N{align-items:center;display:flex;height:200px;justify-content:center;width:100%}";
+var css_248z$b = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{align-items:center;cursor:pointer;display:flex;margin:0 0 8px;min-height:38px;white-space:wrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}.table-module_no-tabel-data__6xp3N{align-items:center;display:flex;height:200px;justify-content:center;width:100%}";
 var styles$a = {"sorting-arrows":"table-module_sorting-arrows__BaN-G","td-span":"table-module_td-span__XHo6k","list-text":"table-module_list-text__kmKIq","dots-option-item":"table-module_dots-option-item__jNOxO","no-tabel-data":"table-module_no-tabel-data__6xp3N"};
-styleInject(css_248z$c);
+styleInject(css_248z$b);
 
 /* eslint-disable no-prototype-builtins */
 const TH = ({
@@ -4361,9 +4411,9 @@ Table.propTypes = {
   clickableRowColumnTd: PropTypes.bool
 };
 
-var css_248z$b = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
-var styles$9 = {"animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
-styleInject(css_248z$b);
+var css_248z$a = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
+var styles$9 = {"animation__modal":"modal-module_animation__modal__3mt48"};
+styleInject(css_248z$a);
 
 const SvgNext = ({
   title,
@@ -5239,9 +5289,9 @@ const NumberInput = ({
   });
 };
 
-var css_248z$a = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
-var styles$8 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
-styleInject(css_248z$a);
+var css_248z$9 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var styles$8 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","inp-num":"input-module_inp-num__vH7HL"};
+styleInject(css_248z$9);
 
 const InputTypes = {
   TEL: 'tel',
@@ -5262,7 +5312,6 @@ const Input = ({
   name,
   style,
   color,
-  label,
   value,
   width,
   regexp,
@@ -5272,14 +5321,12 @@ const Input = ({
   weight,
   family,
   padding,
-  tooltip,
   telClass,
   leftIcon,
   required,
   disabled,
   errorDots,
   errorIcon,
-  labelDots,
   iconWidth,
   rightIcon,
   className,
@@ -5287,30 +5334,22 @@ const Input = ({
   boxShadow,
   errorLeft,
   errorSize,
-  labelSize,
   maxLength,
-  labelIcon,
-  labelStyle,
   floatToFix,
   minNumSize,
   maxNumSize,
-  labelColor,
   errorColor,
   withoutDot,
   errorStyle,
   iconPadding,
-  labelAction,
   errorAction,
   placeholder,
   errorZindex,
-  labelWeight,
   errorWeight,
   errorFamily,
   phoneDisplay,
   errorMessage,
   autoComplete,
-  labelDisplay,
-  labelIconSide,
   showLabelIcon,
   errorIconSide,
   showErrorIcon,
@@ -5318,17 +5357,13 @@ const Input = ({
   errorBoxShadow,
   boxShadowHover,
   errorClassName,
-  labelIconMargin,
-  labelFontFamily,
   phoneAlignItems,
   errorLineHeight,
-  labelLineHeight,
   numberMaxLength,
   backgroundColor,
   errorIconMargin,
   placeholderColor,
   withZero = false,
-  labelMarginBottom,
   regexpErrorMessage,
   phoneJustifyContent,
   telBorderRightWidth,
@@ -5337,13 +5372,40 @@ const Input = ({
   fireInputInsideError,
   backgroundDisableColor,
   telBorderRightColorHover,
+  label,
+  labelSize,
+  labelIcon,
+  labelStyle,
+  labelColor,
+  labelAction,
+  labelWeight,
+  labelDisplay,
+  labelIconSide,
+  labelIconMargin,
+  labelFontFamily,
+  labelLineHeight,
+  labelMarginBottom,
+  iconRequired,
+  useLabelTooltip,
+  labelTooltipColor,
+  labelTooltipPadding,
+  labelTooltipFontSize,
+  labelTooltipFontStyle,
+  labelTooltipFontFamily,
+  labelTooltipFontWeight,
+  labelTooltipBorderRadius,
+  labelTooltipBackgroundColor,
   cardNumber,
   type = 'text'
 }) => {
+  const labelRef = useRef(null);
+  const parentRef = useRef(null);
   const [show, setShow] = useState(false);
+  const [removeID, setRemoveID] = useState('');
   const [isHover, setIsHover] = useState(false);
   const [classProps, setClassProps] = useState({});
   const [innerValue, setInnerValue] = useState('');
+  const [tooltipElem, setTooltipElem] = useState(null);
   const [configStyles, setConfigStyles] = useState({});
   const [innerErrorIcon, setInnerErrorIcon] = useState('');
   const [innerLabelIcon, setInnerLabelIcon] = useState('');
@@ -5394,6 +5456,79 @@ const Input = ({
   const handleShowPass = () => {
     setShow(!show);
   };
+  const getRenderedTextWidth = element => {
+    const clone = element.cloneNode(true);
+    clone.style.width = 'fit-content';
+    document.body.appendChild(clone);
+    const width = clone.offsetWidth;
+    document.body.removeChild(clone);
+    return width;
+  };
+  const handleLabelMouseEnter = event => {
+    event.preventDefault();
+    setRemoveID(() => v4());
+    if (labelRef.current) {
+      const parentElem = parentRef.current.getBoundingClientRect();
+      const rect = labelRef.current.getBoundingClientRect();
+      const top = rect.top;
+      const left = rect.left;
+      const height = rect.height;
+      const elementWidth = rect.width;
+      const x = event.clientX - rect.left;
+      const parentWidth = parentElem.width;
+      const textWidth = getRenderedTextWidth(labelRef.current);
+      if (textWidth > Math.ceil(elementWidth)) {
+        const newTooltipElem = document.createElement('div');
+        newTooltipElem.id = `fake_id_for_remove_dom${removeID}`;
+        const newTootltipTextElem = document.createElement('p');
+        const newTooltipChildElem = document.createElement('div');
+        const newTooltipDecorElem = document.createElement('div');
+        newTooltipElem.style.position = 'fixed';
+        newTooltipElem.style.left = showLabelIcon && innerLabelIcon && innerLabelIconSide === 'left' ? left - 14 - (labelIconMargin ? labelIconMargin : configStyles.INPUT.label.iconMargin) + 'px' : left + 'px';
+        newTooltipElem.style.paddingTop = '20px';
+        newTooltipElem.style.height = 'fit-content';
+        newTooltipElem.style.boxSizing = 'border-box';
+        newTooltipElem.style.top = top + height + 'px';
+        newTooltipElem.style.width = parentWidth + 'px';
+        newTooltipChildElem.style.width = '100%';
+        newTooltipChildElem.style.position = 'relative';
+        newTooltipChildElem.style.height = 'fit-content';
+        newTooltipChildElem.style.boxSizing = 'border-box';
+        newTooltipChildElem.style.padding = labelTooltipPadding ?? configStyles.INPUT.label.tooltip.padding;
+        newTooltipChildElem.style.borderRadius = labelTooltipBorderRadius ?? configStyles.INPUT.label.tooltip.borderRadius;
+        newTooltipChildElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.INPUT.label.tooltip.backgroundColor;
+        newTooltipDecorElem.style.zIndex = -1;
+        newTooltipDecorElem.style.top = '-8px';
+        newTooltipDecorElem.style.width = '18px';
+        newTooltipDecorElem.style.height = '18px';
+        newTooltipDecorElem.style.rotate = '45deg';
+        newTooltipDecorElem.style.position = 'absolute';
+        newTooltipDecorElem.style.left = x > elementWidth / 2 ? 'calc(100% - 40px)' : '23px';
+        newTooltipDecorElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.INPUT.label.tooltip.backgroundColor;
+        newTootltipTextElem.innerText = label;
+        newTootltipTextElem.style.color = labelTooltipColor ?? configStyles.INPUT.label.tooltip.color;
+        newTootltipTextElem.style.fontSize = labelTooltipFontSize ?? configStyles.INPUT.label.tooltip.font.size;
+        newTootltipTextElem.style.fontStyle = labelTooltipFontStyle ?? configStyles.INPUT.label.tooltip.font.style;
+        newTootltipTextElem.style.fontFamily = labelTooltipFontFamily ?? configStyles.INPUT.label.tooltip.font.family;
+        newTootltipTextElem.style.fontWeight = labelTooltipFontWeight ?? configStyles.INPUT.label.tooltip.font.weight;
+        document.body.appendChild(newTooltipElem);
+        newTooltipElem.appendChild(newTooltipChildElem);
+        newTooltipChildElem.appendChild(newTooltipDecorElem);
+        newTooltipChildElem.appendChild(newTootltipTextElem);
+        setTooltipElem(() => newTooltipElem);
+      }
+    }
+  };
+  const handleLabelMouseLeave = () => {
+    const removableElem = document.getElementById(`fake_id_for_remove_dom${removeID}`);
+    if (removableElem) {
+      document.body.removeChild(removableElem);
+    }
+    if (tooltipElem) {
+      document.body.removeChild(tooltipElem);
+    }
+    setRemoveID(() => '');
+  };
   useEffect(() => {
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);
@@ -5440,25 +5575,18 @@ const Input = ({
     });
   }, []);
   return configStyles.INPUT && /*#__PURE__*/React__default.createElement("div", {
+    ref: parentRef,
     className: classProps
   }, /*#__PURE__*/React__default.createElement("style", null, `.tui-color-placeholder::placeholder {
                             color: ${placeholderColor ?? configStyles.INPUT.colors.placeholder};
-                        }`), label ? /*#__PURE__*/React__default.createElement("label", {
+                        }`), label && /*#__PURE__*/React__default.createElement("div", {
     style: {
+      display: 'flex',
       maxWidth: '100%',
-      color: labelColor ?? configStyles.INPUT.label.color,
-      fontSize: labelSize ?? configStyles.INPUT.label.font.size,
-      fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
-      display: labelDisplay ?? configStyles.INPUT.label.display,
-      fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
-      lineHeight: labelLineHeight ?? configStyles.INPUT.label.lineHeight,
-      marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom,
-      fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family,
-      whiteSpace: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'nowrap' : 'normal',
-      overflow: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'hidden' : 'visible',
-      textOverflow: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'ellipsis' : ''
-    },
-    title: label
+      width: 'fit-content',
+      columnGap: '4px',
+      justifyContent: 'flex-start'
+    }
   }, showLabelIcon && innerLabelIcon && innerLabelIconSide === 'left' ? /*#__PURE__*/React__default.createElement("img", {
     alt: "label icon",
     src: innerLabelIcon,
@@ -5469,7 +5597,24 @@ const Input = ({
       marginRight: labelIconMargin ?? configStyles.INPUT.label.iconMargin
     },
     onClick: labelAction ? () => labelAction() : _ => _
-  }) : '', label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null)), showLabelIcon && innerLabelIcon && innerLabelIconSide === 'right' ? /*#__PURE__*/React__default.createElement("img", {
+  }) : '', /*#__PURE__*/React__default.createElement("label", {
+    ref: labelRef,
+    style: {
+      color: labelColor ?? configStyles.INPUT.label.color,
+      fontSize: labelSize ?? configStyles.INPUT.label.font.size,
+      fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
+      display: labelDisplay ?? configStyles.INPUT.label.display,
+      fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
+      lineHeight: labelLineHeight ?? configStyles.INPUT.label.lineHeight,
+      marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom,
+      fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family,
+      whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) ? 'ellipsis' : ''
+    },
+    onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) ? handleLabelMouseEnter : _ => _,
+    onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) ? handleLabelMouseLeave : _ => _
+  }, label), required && /*#__PURE__*/React__default.createElement("sup", null, iconRequired ? iconRequired : configStyles.INPUT.icon.required ? configStyles.INPUT.icon.required : /*#__PURE__*/React__default.createElement(SvgRequired, null)), showLabelIcon && innerLabelIcon && innerLabelIconSide === 'right' ? /*#__PURE__*/React__default.createElement("img", {
     alt: "label icon",
     src: innerLabelIcon,
     style: {
@@ -5479,7 +5624,7 @@ const Input = ({
       marginLeft: labelIconMargin ?? configStyles.INPUT.label.iconMargin
     },
     onClick: labelAction ? () => labelAction() : _ => _
-  }) : '') : '', /*#__PURE__*/React__default.createElement("div", {
+  }) : ''), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8['input-content']}`,
     style: {
       width: width ?? configStyles.INPUT.width,
@@ -5577,7 +5722,7 @@ const Input = ({
       borderBottomRightRadius: radius ?? configStyles.INPUT.radius,
       backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
     }
-  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default.createElement(P
+  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), innerErrorMessage ? /*#__PURE__*/React__default.createElement(P
   // animation={animation}
   , {
     style: {
@@ -5645,7 +5790,6 @@ Input.propTypes = {
   radius: PropTypes.string,
   padding: PropTypes.string,
   cardNumber: PropTypes.bool,
-  tooltip: PropTypes.element,
   withoutDot: PropTypes.bool,
   className: PropTypes.string,
   iconWidth: PropTypes.string,
@@ -5654,21 +5798,6 @@ Input.propTypes = {
   floatToFix: PropTypes.number,
   minNumSize: PropTypes.number,
   maxNumSize: PropTypes.number,
-  label: PropTypes.string,
-  labelDots: PropTypes.bool,
-  labelAction: PropTypes.func,
-  labelIcon: PropTypes.string,
-  labelSize: PropTypes.string,
-  labelColor: PropTypes.string,
-  labelStyle: PropTypes.string,
-  showLabelIcon: PropTypes.bool,
-  labelWeight: PropTypes.string,
-  labelDisplay: PropTypes.string,
-  labelIconSide: PropTypes.oneOf(Object.values(IconSides)),
-  labelLineHeight: PropTypes.string,
-  labelFontFamily: PropTypes.string,
-  labelIconMargin: PropTypes.string,
-  labelMarginBottom: PropTypes.string,
   borderRight: PropTypes.string,
   placeholder: PropTypes.string,
   placeholderColor: PropTypes.string,
@@ -5712,7 +5841,31 @@ Input.propTypes = {
   leftIcon: PropTypes.arrayOf(PropTypes.element),
   rightIcon: PropTypes.arrayOf(PropTypes.element),
   type: PropTypes.oneOf(Object.values(InputTypes)),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object])
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
+  iconRequired: PropTypes.element,
+  label: PropTypes.string,
+  labelAction: PropTypes.func,
+  labelIcon: PropTypes.string,
+  labelSize: PropTypes.string,
+  labelColor: PropTypes.string,
+  labelStyle: PropTypes.string,
+  showLabelIcon: PropTypes.bool,
+  labelWeight: PropTypes.string,
+  labelDisplay: PropTypes.string,
+  labelIconSide: PropTypes.oneOf(Object.values(IconSides)),
+  labelLineHeight: PropTypes.string,
+  labelFontFamily: PropTypes.string,
+  labelIconMargin: PropTypes.string,
+  labelMarginBottom: PropTypes.string,
+  useLabelTooltip: PropTypes.bool,
+  labelTooltipColor: PropTypes.string,
+  labelTooltipPadding: PropTypes.string,
+  labelTooltipFontSize: PropTypes.string,
+  labelTooltipFontStyle: PropTypes.string,
+  labelTooltipFontFamily: PropTypes.string,
+  labelTooltipFontWeight: PropTypes.string,
+  labelTooltipBorderRadius: PropTypes.string,
+  labelTooltipBackgroundColor: PropTypes.string
 };
 
 const RadioDirectionMode = {
@@ -5924,9 +6077,9 @@ const SvgArrow = ({
   fill: fillColor ? fillColor : '#3C393E'
 }));
 
-var css_248z$9 = ".select-module_select-content__GCMDX{-webkit-appearance:none;display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;-webkit-appearance:none;display:flex;flex-direction:row;flex-wrap:nowrap}.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}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:fit-content;justify-content:center;max-height:30px;max-width:30px;min-height:14px;min-width:14px;width:fit-content}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_ellipsis__uNgol{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
-var styles$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","ellipsis":"select-module_ellipsis__uNgol"};
-styleInject(css_248z$9);
+var css_248z$8 = ".select-module_select-content__GCMDX{-webkit-appearance:none;display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;-webkit-appearance:none;display:flex;flex-direction:row;flex-wrap:nowrap}.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}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:fit-content;justify-content:center;max-height:30px;max-width:30px;min-height:14px;min-width:14px;width:fit-content}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_ellipsis__uNgol{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
+var styles$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-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L","ellipsis":"select-module_ellipsis__uNgol"};
+styleInject(css_248z$8);
 
 const Select = ({
   dots,
@@ -5958,6 +6111,16 @@ const Select = ({
   labelFontFamily,
   labelMarginBottom,
   labelTextTransform,
+  iconRequired,
+  useLabelTooltip,
+  labelTooltipColor,
+  labelTooltipPadding,
+  labelTooltipFontSize,
+  labelTooltipFontStyle,
+  labelTooltipFontFamily,
+  labelTooltipFontWeight,
+  labelTooltipBorderRadius,
+  labelTooltipBackgroundColor,
   cursor,
   errorIcon,
   errorSize,
@@ -5999,13 +6162,18 @@ const Select = ({
   optionItemBackgroudColorHover,
   boxShadow,
   boxShadowHover,
-  insidePagination
+  insidePagination,
+  placeholderColor
 }) => {
-  const ref = useRef();
+  const ref = useRef(null);
+  const labelRef = useRef(null);
+  const parentRef = useRef(null);
   const [opened, setOpened] = useState(false);
+  const [removeID, setRemoveID] = useState('');
   const [isHover, setIsHover] = useState(false);
   const [classProps, setClassProps] = useState({});
   const [newSelected, setNewSelected] = useState([]);
+  const [tooltipElem, setTooltipElem] = useState(null);
   const [existOptions, setExistOptions] = useState([]);
   const [configStyles, setConfigStyles] = useState({});
   const handleOpenClose = () => {
@@ -6071,20 +6239,93 @@ const Select = ({
     }
     return true;
   };
-  useEffect(() => {
-    if (opened) {
-      const checkIfClickedOutside = e => {
-        if (opened && ref.current && !ref.current.contains(e.target)) {
-          setOpened(false);
-        }
-      };
-      document.addEventListener('mousedown', checkIfClickedOutside);
-      return () => {
-        document.removeEventListener('mousedown', checkIfClickedOutside);
-      };
-    }
-  }, [opened]);
-  useEffect(() => {
+  const getRenderedTextWidth = element => {
+    const clone = element.cloneNode(true);
+    clone.style.width = 'fit-content';
+    document.body.appendChild(clone);
+    const width = clone.offsetWidth;
+    document.body.removeChild(clone);
+    return width;
+  };
+  const handleLabelMouseEnter = event => {
+    event.preventDefault();
+    setRemoveID(() => v4());
+    if (labelRef.current) {
+      const parentElem = parentRef.current.getBoundingClientRect();
+      const rect = labelRef.current.getBoundingClientRect();
+      const top = rect.top;
+      const left = rect.left;
+      const height = rect.height;
+      const elementWidth = rect.width;
+      const x = event.clientX - rect.left;
+      const parentWidth = parentElem.width;
+      const textWidth = getRenderedTextWidth(labelRef.current);
+      if (textWidth > Math.ceil(elementWidth)) {
+        const newTooltipElem = document.createElement('div');
+        newTooltipElem.id = `fake_id_for_remove_dom${removeID}`;
+        const newTootltipTextElem = document.createElement('p');
+        const newTooltipChildElem = document.createElement('div');
+        const newTooltipDecorElem = document.createElement('div');
+        newTooltipElem.style.position = 'fixed';
+        newTooltipElem.style.left = left + 'px';
+        newTooltipElem.style.paddingTop = '20px';
+        newTooltipElem.style.height = 'fit-content';
+        newTooltipElem.style.boxSizing = 'border-box';
+        newTooltipElem.style.top = top + height + 'px';
+        newTooltipElem.style.width = parentWidth + 'px';
+        newTooltipChildElem.style.width = '100%';
+        newTooltipChildElem.style.position = 'relative';
+        newTooltipChildElem.style.height = 'fit-content';
+        newTooltipChildElem.style.boxSizing = 'border-box';
+        newTooltipChildElem.style.padding = labelTooltipPadding ?? configStyles.SELECT.label.tooltip.padding;
+        newTooltipChildElem.style.borderRadius = labelTooltipBorderRadius ?? configStyles.SELECT.label.tooltip.borderRadius;
+        newTooltipChildElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.SELECT.label.tooltip.backgroundColor;
+        newTooltipDecorElem.style.zIndex = -1;
+        newTooltipDecorElem.style.top = '-8px';
+        newTooltipDecorElem.style.width = '18px';
+        newTooltipDecorElem.style.height = '18px';
+        newTooltipDecorElem.style.rotate = '45deg';
+        newTooltipDecorElem.style.position = 'absolute';
+        newTooltipDecorElem.style.left = x > elementWidth / 2 ? 'calc(100% - 40px)' : '23px';
+        newTooltipDecorElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.SELECT.label.tooltip.backgroundColor;
+        newTootltipTextElem.innerText = label;
+        newTootltipTextElem.style.color = labelTooltipColor ?? configStyles.SELECT.label.tooltip.color;
+        newTootltipTextElem.style.fontSize = labelTooltipFontSize ?? configStyles.SELECT.label.tooltip.font.size;
+        newTootltipTextElem.style.fontStyle = labelTooltipFontStyle ?? configStyles.SELECT.label.tooltip.font.style;
+        newTootltipTextElem.style.fontFamily = labelTooltipFontFamily ?? configStyles.SELECT.label.tooltip.font.family;
+        newTootltipTextElem.style.fontWeight = labelTooltipFontWeight ?? configStyles.SELECT.label.tooltip.font.weight;
+        document.body.appendChild(newTooltipElem);
+        newTooltipElem.appendChild(newTooltipChildElem);
+        newTooltipChildElem.appendChild(newTooltipDecorElem);
+        newTooltipChildElem.appendChild(newTootltipTextElem);
+        setTooltipElem(() => newTooltipElem);
+      }
+    }
+  };
+  const handleLabelMouseLeave = () => {
+    const removableElem = document.getElementById(`fake_id_for_remove_dom${removeID}`);
+    if (removableElem) {
+      document.body.removeChild(removableElem);
+    }
+    if (tooltipElem) {
+      document.body.removeChild(tooltipElem);
+    }
+    setRemoveID(() => '');
+  };
+  useEffect(() => {
+    if (opened) {
+      const checkIfClickedOutside = e => {
+        if (opened && ref.current && !ref.current.contains(e.target)) {
+          setOpened(false);
+        }
+      };
+      document.addEventListener('mousedown', checkIfClickedOutside);
+      return () => {
+        document.removeEventListener('mousedown', checkIfClickedOutside);
+      };
+    }
+  }, [opened]);
+  useEffect(() => {
     if (selected) {
       if (selected.length > 0) {
         setNewSelected(isObjectEmpty(selected[0]) ? [] : selected);
@@ -6125,12 +6366,22 @@ const Select = ({
     });
   }, []);
   return configStyles.SELECT && /*#__PURE__*/React__default.createElement("div", {
+    ref: parentRef,
     className: classProps,
     style: {
       position: 'relative',
       width: '100%'
     }
-  }, label ? /*#__PURE__*/React__default.createElement("label", {
+  }, label && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      maxWidth: '100%',
+      width: 'fit-content',
+      columnGap: '4px',
+      justifyContent: 'flex-start'
+    }
+  }, /*#__PURE__*/React__default.createElement("label", {
+    ref: labelRef,
     style: {
       color: labelColor ?? configStyles.SELECT.label.color,
       fontWeight: labelWeight ?? configStyles.SELECT.label.font.weight,
@@ -6140,9 +6391,14 @@ const Select = ({
       fontFamily: labelFontFamily ?? configStyles.SELECT.label.font.family,
       lineHeight: labelLineHeight ?? configStyles.SELECT.label.lineHeight,
       marginBottom: labelMarginBottom ?? configStyles.SELECT.label.marginBottom,
-      textTransform: labelTextTransform ?? configStyles.SELECT.label.textTransform
-    }
-  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default.createElement("div", {
+      textTransform: labelTextTransform ?? configStyles.SELECT.label.textTransform,
+      whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.SELECT.label.useTooltip) ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.SELECT.label.useTooltip) ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.SELECT.label.useTooltip) ? 'ellipsis' : ''
+    },
+    onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.SELECT.label.useTooltip) ? handleLabelMouseEnter : _ => _,
+    onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.SELECT.label.useTooltip) ? handleLabelMouseLeave : _ => _
+  }, label), required && /*#__PURE__*/React__default.createElement("sup", null, iconRequired ? iconRequired : configStyles.SELECT.icon.required ? configStyles.SELECT.icon.required : /*#__PURE__*/React__default.createElement(SvgRequired, null))), /*#__PURE__*/React__default.createElement("div", {
     ref: ref
   }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$7['select-content']
@@ -6168,12 +6424,12 @@ const Select = ({
     onMouseEnter: disabled ? _ => _ : () => handleMouseEnter(),
     onMouseLeave: disabled ? _ => _ : () => handleMouseLeave()
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$7['select-content-top-text']}`,
+    className: "select-content-top-text",
     style: {
       whiteSpace: disabled ? 'pre-wrap' : 'nowrap',
       overflow: insidePagination ? 'visible' : 'hidden',
       textOverflow: insidePagination ? 'initial' : 'ellipsis',
-      color: isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selected.colors.hover : selectedColor ? selectedColor : configStyles.SELECT.selected.color
+      color: placeholderColor && !newSelected.length ? placeholderColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selected.colors.hover : selectedColor ? selectedColor : configStyles.SELECT.selected.color
     }
   }, !multiple && newSelected && newSelected[0] && newSelected[0][keyNames.name] ? newSelected[0][keyNames.name] : newSelected && newSelected.length > 0 ? newSelected.map((_, index) => {
     if (newSelected[index][keyNames.name]) {
@@ -6319,9 +6575,20 @@ Select.propTypes = {
   optionItemMarginBottom: PropTypes.string,
   optionItemBackgroudColor: PropTypes.string,
   optionItemBackgroudColorHover: PropTypes.string,
+  iconRequired: PropTypes.element,
+  useLabelTooltip: PropTypes.bool,
+  labelTooltipColor: PropTypes.string,
+  labelTooltipPadding: PropTypes.string,
+  labelTooltipFontSize: PropTypes.string,
+  labelTooltipFontStyle: PropTypes.string,
+  labelTooltipFontFamily: PropTypes.string,
+  labelTooltipFontWeight: PropTypes.string,
+  labelTooltipBorderRadius: PropTypes.string,
+  labelTooltipBackgroundColor: PropTypes.string,
   boxShadow: PropTypes.string,
   boxShadowHover: PropTypes.string,
-  insidePagination: PropTypes.bool
+  insidePagination: PropTypes.bool,
+  placeholderColor: PropTypes.string
 };
 
 const SvgToasterInfo = ({
@@ -6443,9 +6710,9 @@ const SvgToasterSuccess = ({
   fill: fillColor ? fillColor : '#0DA574'
 }));
 
-var css_248z$8 = "#toaster-module_top-left__q0LcN{left:0;top:1em}#toaster-module_top-right__f-AFL{right:0;top:1em}#toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}#toaster-module_bottom-left__b-YHI{bottom:1em;left:0}#toaster-module_bottom-right__g9ACP{bottom:1em;right:0}#toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_top-left__q0LcN{left:0;top:1em}.toaster-module_top-right__f-AFL{right:0;top:1em}.toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_bottom-left__b-YHI{bottom:1em;left:0}.toaster-module_bottom-right__g9ACP{bottom:1em;right:0}.toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_notify-block__pRnEB{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.toaster-module_bounce-in-right__shR2D{-webkit-animation-name:toaster-module_bounceInRight__rSk5p;animation-name:toaster-module_bounceInRight__rSk5p}.toaster-module_bounce-out-right__48pyA{-webkit-animation-name:toaster-module_bounceOutRight__bmFGS;animation-name:toaster-module_bounceOutRight__bmFGS}.toaster-module_notify-desc__bcWe2,.toaster-module_notify-title__8lFLy{overflow:hidden;text-overflow:ellipsis}.toaster-module_notify-desc__bcWe2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box}@keyframes toaster-module_bounceInRight__rSk5p{0%{opacity:0;right:-100%}60%{opacity:1;right:40px}75%{right:0}90%{right:30px}to{right:20px}}@keyframes toaster-module_bounceOutRight__bmFGS{0%{opacity:1;right:20px}60%{opacity:1;right:60px}to{opacity:0;right:-100%}}.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeft__to59v;animation-name:toaster-module_bounceInLeft__to59v}.toaster-module_bounce-out-left__fDOZw{-webkit-animation-name:toaster-module_bounceOutLeft__k5QgO;animation-name:toaster-module_bounceOutLeft__k5QgO}@keyframes toaster-module_bounceInLeft__to59v{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:20px}}@keyframes toaster-module_bounceInLeftMobile__CA2dc{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:0}}@keyframes toaster-module_bounceOutLeft__k5QgO{0%{left:20px;opacity:1}60%{left:60px;opacity:1}to{left:-100%;opacity:0}}@media(max-width:480px){.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeftMobile__CA2dc;animation-name:toaster-module_bounceInLeftMobile__CA2dc}}";
+var css_248z$7 = "#toaster-module_top-left__q0LcN{left:0;top:1em}#toaster-module_top-right__f-AFL{right:0;top:1em}#toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}#toaster-module_bottom-left__b-YHI{bottom:1em;left:0}#toaster-module_bottom-right__g9ACP{bottom:1em;right:0}#toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_top-left__q0LcN{left:0;top:1em}.toaster-module_top-right__f-AFL{right:0;top:1em}.toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_bottom-left__b-YHI{bottom:1em;left:0}.toaster-module_bottom-right__g9ACP{bottom:1em;right:0}.toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_notify-block__pRnEB{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.toaster-module_bounce-in-right__shR2D{-webkit-animation-name:toaster-module_bounceInRight__rSk5p;animation-name:toaster-module_bounceInRight__rSk5p}.toaster-module_bounce-out-right__48pyA{-webkit-animation-name:toaster-module_bounceOutRight__bmFGS;animation-name:toaster-module_bounceOutRight__bmFGS}.toaster-module_notify-desc__bcWe2,.toaster-module_notify-title__8lFLy{overflow:hidden;text-overflow:ellipsis}.toaster-module_notify-desc__bcWe2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box}@keyframes toaster-module_bounceInRight__rSk5p{0%{opacity:0;right:-100%}60%{opacity:1;right:40px}75%{right:0}90%{right:30px}to{right:20px}}@keyframes toaster-module_bounceOutRight__bmFGS{0%{opacity:1;right:20px}60%{opacity:1;right:60px}to{opacity:0;right:-100%}}.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeft__to59v;animation-name:toaster-module_bounceInLeft__to59v}.toaster-module_bounce-out-left__fDOZw{-webkit-animation-name:toaster-module_bounceOutLeft__k5QgO;animation-name:toaster-module_bounceOutLeft__k5QgO}@keyframes toaster-module_bounceInLeft__to59v{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:20px}}@keyframes toaster-module_bounceInLeftMobile__CA2dc{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:0}}@keyframes toaster-module_bounceOutLeft__k5QgO{0%{left:20px;opacity:1}60%{left:60px;opacity:1}to{left:-100%;opacity:0}}@media(max-width:480px){.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeftMobile__CA2dc;animation-name:toaster-module_bounceInLeftMobile__CA2dc}}";
 var styles$6 = {"top-left":"toaster-module_top-left__q0LcN","top-right":"toaster-module_top-right__f-AFL","top-center":"toaster-module_top-center__eVRbc","bottom-left":"toaster-module_bottom-left__b-YHI","bottom-right":"toaster-module_bottom-right__g9ACP","bottom-center":"toaster-module_bottom-center__4KcFe","notify-block":"toaster-module_notify-block__pRnEB","bounce-in-right":"toaster-module_bounce-in-right__shR2D","bounceInRight":"toaster-module_bounceInRight__rSk5p","bounce-out-right":"toaster-module_bounce-out-right__48pyA","bounceOutRight":"toaster-module_bounceOutRight__bmFGS","notify-title":"toaster-module_notify-title__8lFLy","notify-desc":"toaster-module_notify-desc__bcWe2","bounce-in-left":"toaster-module_bounce-in-left__xoF-M","bounceInLeft":"toaster-module_bounceInLeft__to59v","bounce-out-left":"toaster-module_bounce-out-left__fDOZw","bounceOutLeft":"toaster-module_bounceOutLeft__k5QgO","bounceInLeftMobile":"toaster-module_bounceInLeftMobile__CA2dc"};
-styleInject(css_248z$8);
+styleInject(css_248z$7);
 
 const ToasterType = {
   info: 'info',
@@ -6845,9 +7112,9 @@ const SvgTooltip = ({
   fill: fillColor ? fillColor : '#D1D1D1'
 }));
 
-var css_248z$7 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{box-sizing:border-box;padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
+var css_248z$6 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{box-sizing:border-box;padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
 var styles$5 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
-styleInject(css_248z$7);
+styleInject(css_248z$6);
 
 const TooltipDirections = {
   TOP: 'top',
@@ -7051,9 +7318,9 @@ const SvgCaptchaArrowDown = ({
   fill: fillColor ? fillColor : '#00236A'
 }));
 
-var css_248z$6 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
+var css_248z$5 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
 var styles$4 = {"start-point":"captcha-module_start-point__LkOqy","range":"captcha-module_range__k24I2","range-default":"captcha-module_range-default__-O0QD","range-error":"captcha-module_range-error__FKMfG","range-success":"captcha-module_range-success__VzLPq"};
-styleInject(css_248z$6);
+styleInject(css_248z$5);
 
 const Captcha = ({
   color,
@@ -7198,9 +7465,9 @@ Captcha.propTypes = {
   getRange: PropTypes.func.isRequired
 };
 
-var css_248z$5 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
+var css_248z$4 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
 var styles$3 = {"stepper-container":"stepper-module_stepper-container__-OVGy","bigRing":"stepper-module_bigRing__5GBm0","activeRing":"stepper-module_activeRing__Lzvh1","smallRing":"stepper-module_smallRing__u-5a8","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
-styleInject(css_248z$5);
+styleInject(css_248z$4);
 
 const Stepper = ({
   stepLength,
@@ -7363,9 +7630,6 @@ Checkbox.propTypes = {
   data: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object])
 };
 
-var css_248z$4 = "textarea{-webkit-appearance:none}textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
-styleInject(css_248z$4);
-
 const PositionSide = {
   TOP: 'top',
   BOTTOM: 'bottom'
@@ -7376,7 +7640,6 @@ const Textarea = ({
   style,
   family,
   weight,
-  label,
   width,
   value,
   height,
@@ -7393,32 +7656,47 @@ const Textarea = ({
   maxHeight,
   boxSizing,
   maxLength,
-  labelSize,
   errorSize,
   errorStyle,
   errorWeight,
   errorFamily,
   marginTop,
   className,
-  labelColor,
   errorColor,
-  labelWeight,
   placeholder,
-  labelDisplay,
   errorMessage,
-  labelFontFamily,
   backgroundColor,
   borderFocusColor,
   borderHoverColor,
-  labelMarginBottom,
   showCharacterCount,
+  label,
+  labelSize,
+  labelColor,
+  labelWeight,
+  labelDisplay,
+  labelFontFamily,
+  labelMarginBottom,
+  iconRequired,
+  useLabelTooltip,
+  labelTooltipColor,
+  labelTooltipPadding,
+  labelTooltipFontSize,
+  labelTooltipFontStyle,
+  labelTooltipFontFamily,
+  labelTooltipFontWeight,
+  labelTooltipBorderRadius,
+  labelTooltipBackgroundColor,
   characterCountPosition = 'top'
 }) => {
+  const labelRef = useRef(null);
+  const parentRef = useRef(null);
   const [error, setError] = useState('');
+  const [removeID, setRemoveID] = useState('');
   const [isHover, setIsHover] = useState(false);
   const [isFocus, setIsFocus] = useState(false);
   const [innerValue, setInnerValue] = useState('');
   const [classProps, setClassProps] = useState({});
+  const [tooltipElem, setTooltipElem] = useState(null);
   const [configStyles, setConfigStyles] = useState({});
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -7454,6 +7732,79 @@ const Textarea = ({
       }
     }
   };
+  const getRenderedTextWidth = element => {
+    const clone = element.cloneNode(true);
+    clone.style.width = 'fit-content';
+    document.body.appendChild(clone);
+    const width = clone.offsetWidth;
+    document.body.removeChild(clone);
+    return width;
+  };
+  const handleLabelMouseEnter = event => {
+    event.preventDefault();
+    setRemoveID(() => v4());
+    if (labelRef.current) {
+      const parentElem = parentRef.current.getBoundingClientRect();
+      const rect = labelRef.current.getBoundingClientRect();
+      const top = rect.top;
+      const left = rect.left;
+      const height = rect.height;
+      const elementWidth = rect.width;
+      const x = event.clientX - rect.left;
+      const parentWidth = parentElem.width;
+      const textWidth = getRenderedTextWidth(labelRef.current);
+      if (textWidth > Math.ceil(elementWidth)) {
+        const newTooltipElem = document.createElement('div');
+        newTooltipElem.id = `fake_id_for_remove_dom${removeID}`;
+        const newTootltipTextElem = document.createElement('p');
+        const newTooltipChildElem = document.createElement('div');
+        const newTooltipDecorElem = document.createElement('div');
+        newTooltipElem.style.position = 'fixed';
+        newTooltipElem.style.left = left + 'px';
+        newTooltipElem.style.paddingTop = '20px';
+        newTooltipElem.style.height = 'fit-content';
+        newTooltipElem.style.boxSizing = 'border-box';
+        newTooltipElem.style.top = top + height + 'px';
+        newTooltipElem.style.width = parentWidth + 'px';
+        newTooltipChildElem.style.width = '100%';
+        newTooltipChildElem.style.position = 'relative';
+        newTooltipChildElem.style.height = 'fit-content';
+        newTooltipChildElem.style.boxSizing = 'border-box';
+        newTooltipChildElem.style.padding = labelTooltipPadding ?? configStyles.TEXTAREA.label.tooltip.padding;
+        newTooltipChildElem.style.borderRadius = labelTooltipBorderRadius ?? configStyles.TEXTAREA.label.tooltip.borderRadius;
+        newTooltipChildElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.TEXTAREA.label.tooltip.backgroundColor;
+        newTooltipDecorElem.style.zIndex = -1;
+        newTooltipDecorElem.style.top = '-8px';
+        newTooltipDecorElem.style.width = '18px';
+        newTooltipDecorElem.style.height = '18px';
+        newTooltipDecorElem.style.rotate = '45deg';
+        newTooltipDecorElem.style.position = 'absolute';
+        newTooltipDecorElem.style.left = x > elementWidth / 2 ? 'calc(100% - 40px)' : '23px';
+        newTooltipDecorElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.TEXTAREA.label.tooltip.backgroundColor;
+        newTootltipTextElem.innerText = label;
+        newTootltipTextElem.style.color = labelTooltipColor ?? configStyles.TEXTAREA.label.tooltip.color;
+        newTootltipTextElem.style.fontSize = labelTooltipFontSize ?? configStyles.TEXTAREA.label.tooltip.font.size;
+        newTootltipTextElem.style.fontStyle = labelTooltipFontStyle ?? configStyles.TEXTAREA.label.tooltip.font.style;
+        newTootltipTextElem.style.fontFamily = labelTooltipFontFamily ?? configStyles.TEXTAREA.label.tooltip.font.family;
+        newTootltipTextElem.style.fontWeight = labelTooltipFontWeight ?? configStyles.TEXTAREA.label.tooltip.font.weight;
+        document.body.appendChild(newTooltipElem);
+        newTooltipElem.appendChild(newTooltipChildElem);
+        newTooltipChildElem.appendChild(newTooltipDecorElem);
+        newTooltipChildElem.appendChild(newTootltipTextElem);
+        setTooltipElem(() => newTooltipElem);
+      }
+    }
+  };
+  const handleLabelMouseLeave = () => {
+    const removableElem = document.getElementById(`fake_id_for_remove_dom${removeID}`);
+    if (removableElem) {
+      document.body.removeChild(removableElem);
+    }
+    if (tooltipElem) {
+      document.body.removeChild(tooltipElem);
+    }
+    setRemoveID(() => '');
+  };
   useEffect(() => {
     if (value === undefined) {
       alert('Please add value prop on Textarea component');
@@ -7481,6 +7832,7 @@ const Textarea = ({
     });
   }, []);
   return configStyles.TEXTAREA && /*#__PURE__*/React__default.createElement("div", {
+    ref: parentRef,
     style: {
       width: width ?? configStyles.TEXTAREA.width
     },
@@ -7496,11 +7848,30 @@ const Textarea = ({
       fontWeight: labelWeight ?? configStyles.TEXTAREA.label.font.weight,
       marginBottom: labelMarginBottom ?? configStyles.TEXTAREA.label.marginBottom
     }
-  }, label ? /*#__PURE__*/React__default.createElement("label", {
+  }, label && /*#__PURE__*/React__default.createElement("div", {
     style: {
-      display: labelDisplay ?? configStyles.TEXTAREA.label.display
+      display: 'flex',
+      maxWidth: '100%',
+      columnGap: '4px',
+      justifyContent: 'flex-start',
+      width: showCharacterCount && maxLength && characterCountPosition === 'top' ? 'calc(100% - 80px)' : '100%'
     }
-  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default.createElement("span", null, maxLength - innerValue.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default.createElement("textarea", {
+  }, /*#__PURE__*/React__default.createElement("label", {
+    ref: labelRef,
+    style: {
+      display: labelDisplay ?? configStyles.TEXTAREA.label.display,
+      whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.TEXTAREA.label.useTooltip) ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.TEXTAREA.label.useTooltip) ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.TEXTAREA.label.useTooltip) ? 'ellipsis' : ''
+    },
+    onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.TEXTAREA.label.useTooltip) ? handleLabelMouseEnter : _ => _,
+    onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.TEXTAREA.label.useTooltip) ? handleLabelMouseLeave : _ => _
+  }, label), required && /*#__PURE__*/React__default.createElement("sup", null, iconRequired ? iconRequired : configStyles.TEXTAREA.icon.required ? configStyles.TEXTAREA.icon.required : /*#__PURE__*/React__default.createElement(SvgRequired, null))), showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      width: 'fit-content',
+      flexShrink: 0
+    }
+  }, maxLength - innerValue.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default.createElement("textarea", {
     style: {
       width: '100%',
       border: 'none',
@@ -7567,7 +7938,6 @@ Textarea.propTypes = {
   style: PropTypes.string,
   family: PropTypes.string,
   weight: PropTypes.string,
-  label: PropTypes.string,
   width: PropTypes.string,
   height: PropTypes.string,
   resize: PropTypes.string,
@@ -7584,25 +7954,36 @@ Textarea.propTypes = {
   minHeight: PropTypes.string,
   maxHeight: PropTypes.string,
   maxLength: PropTypes.number,
-  labelSize: PropTypes.string,
   errorSize: PropTypes.string,
   errorStyle: PropTypes.string,
   errorWeight: PropTypes.string,
   errorFamily: PropTypes.string,
   className: PropTypes.string,
-  labelColor: PropTypes.string,
   errorColor: PropTypes.string,
-  labelWeight: PropTypes.string,
   placeholder: PropTypes.string,
   errorMessage: PropTypes.string,
-  labelDisplay: PropTypes.string,
-  labelFontFamily: PropTypes.string,
   backgroundColor: PropTypes.string,
   showCharacterCount: PropTypes.bool,
   value: PropTypes.string.isRequired,
   borderFocusColor: PropTypes.string,
   borderHoverColor: PropTypes.string,
+  label: PropTypes.string,
+  labelSize: PropTypes.string,
+  labelColor: PropTypes.string,
+  labelWeight: PropTypes.string,
+  labelDisplay: PropTypes.string,
+  labelFontFamily: PropTypes.string,
   labelMarginBottom: PropTypes.string,
+  iconRequired: PropTypes.element,
+  useLabelTooltip: PropTypes.bool,
+  labelTooltipColor: PropTypes.string,
+  labelTooltipPadding: PropTypes.string,
+  labelTooltipFontSize: PropTypes.string,
+  labelTooltipFontStyle: PropTypes.string,
+  labelTooltipFontFamily: PropTypes.string,
+  labelTooltipFontWeight: PropTypes.string,
+  labelTooltipBorderRadius: PropTypes.string,
+  labelTooltipBackgroundColor: PropTypes.string,
   characterCountPosition: PropTypes.oneOf(Object.values(PositionSide))
 };
 
@@ -7618,6 +7999,7 @@ const AccordionItem = ({
   titleAlign,
   multipleOpen,
   openHoverIcon,
+  closeHoverIcon,
   color,
   border,
   padding,
@@ -7698,7 +8080,7 @@ const AccordionItem = ({
       alignItems: 'center',
       justifyContent: 'center'
     }
-  }, isOpen ? closeIcon : isHover ? openHoverIcon ? openHoverIcon : openIcon : openIcon)), /*#__PURE__*/React__default.createElement("div", {
+  }, isOpen ? isHover ? closeHoverIcon : closeIcon : isHover ? openHoverIcon : openIcon)), /*#__PURE__*/React__default.createElement("div", {
     style: {
       overflow: 'hidden',
       height: isOpen ? 'auto' : '0px'
@@ -7764,6 +8146,7 @@ const Accordion = ({
   titleAlign,
   multipleOpen,
   openHoverIcon,
+  closeHoverIcon,
   borderTop,
   borderLeft,
   borderRight,
@@ -7844,6 +8227,13 @@ const Accordion = ({
         src: configStyles.ACCORDION.icon.close,
         alt: "close icon"
       }) : /*#__PURE__*/React__default.createElement(SvgGreenminus, null),
+      closeHoverIcon: closeHoverIcon ? /*#__PURE__*/React__default.createElement("img", {
+        src: closeHoverIcon,
+        alt: "close icon"
+      }) : configStyles.ACCORDION.icon.closeHover ? /*#__PURE__*/React__default.createElement("img", {
+        src: configStyles.ACCORDION.icon.closeHover,
+        alt: "close icon"
+      }) : /*#__PURE__*/React__default.createElement(SvgGreenminus, null),
       className: classProps,
       color: color ?? configStyles.ACCORDION.color,
       padding: padding ?? configStyles.ACCORDION.padding,
@@ -7887,6 +8277,7 @@ Accordion.propTypes = {
   closeIcon: PropTypes.string,
   marginBottom: PropTypes.string,
   openHoverIcon: PropTypes.string,
+  closeHoverIcon: PropTypes.string,
   borderTop: PropTypes.bool,
   borderLeft: PropTypes.bool,
   borderRight: PropTypes.bool,
@@ -7902,6 +8293,7 @@ Accordion.propTypes = {
 };
 
 // import React from 'react';
+
 const Swipe = ({
   id,
   title,
@@ -7980,10 +8372,13 @@ const Swipe = ({
 };
 
 var css_248z$2 = ".swipe-module_to-top__lrHfG{bottom:0}.swipe-module_to-left__kgLsE{right:0}.swipe-module_to-right__Xu3Ul{left:0}.swipe-module_to-bottom__94M7H{top:0}.swipe-module_visible__---aC{visibility:visible!important}.swipe-module_swipe-block__Yv1B3{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.swipe-module_move-top__m6t2O{-webkit-animation-name:swipe-module_slideTop__-Bbap;animation-name:swipe-module_slideTop__-Bbap}.swipe-module_move-left__4TDLs{-webkit-animation-name:swipe-module_slideLeft__i24cS;animation-name:swipe-module_slideLeft__i24cS}.swipe-module_move-right__FrYo0{-webkit-animation-name:swipe-module_slideRight__swgSY;animation-name:swipe-module_slideRight__swgSY}.swipe-module_move-bottom__eYDx6{-webkit-animation-name:swipe-module_slideBottom__TBoZo;animation-name:swipe-module_slideBottom__TBoZo}.swipe-module_back-top__gJZv0{-webkit-animation-name:swipe-module_backTop__32loc;animation-name:swipe-module_backTop__32loc}.swipe-module_back-left__Wd3aY{-webkit-animation-name:swipe-module_backLeft__q89ub;animation-name:swipe-module_backLeft__q89ub}.swipe-module_back-right__Lgwz7{-webkit-animation-name:swipe-module_backRight__8t5Dm;animation-name:swipe-module_backRight__8t5Dm}.swipe-module_back-bottom__JRN-7{-webkit-animation-name:swipe-module_backBottom__lwR8B;animation-name:swipe-module_backBottom__lwR8B}@keyframes swipe-module_slideTop__-Bbap{0%{bottom:-100%}to{bottom:0}}@keyframes swipe-module_slideLeft__i24cS{0%{right:-100%}to{right:0}}@keyframes swipe-module_slideRight__swgSY{0%{left:-100%}to{left:0}}@keyframes swipe-module_slideBottom__TBoZo{0%{top:-100%}to{top:0}}@keyframes swipe-module_backTop__32loc{0%{bottom:0}to{bottom:-100%}}@keyframes swipe-module_backLeft__q89ub{0%{right:0}to{right:-100%}}@keyframes swipe-module_backRight__8t5Dm{0%{left:0}to{left:-100%}}@keyframes swipe-module_backBottom__lwR8B{0%{top:0}to{top:-100%}}";
-var styles$2 = {"to-top":"swipe-module_to-top__lrHfG","to-left":"swipe-module_to-left__kgLsE","to-right":"swipe-module_to-right__Xu3Ul","to-bottom":"swipe-module_to-bottom__94M7H","visible":"swipe-module_visible__---aC","swipe-block":"swipe-module_swipe-block__Yv1B3","move-top":"swipe-module_move-top__m6t2O","slideTop":"swipe-module_slideTop__-Bbap","move-left":"swipe-module_move-left__4TDLs","slideLeft":"swipe-module_slideLeft__i24cS","move-right":"swipe-module_move-right__FrYo0","slideRight":"swipe-module_slideRight__swgSY","move-bottom":"swipe-module_move-bottom__eYDx6","slideBottom":"swipe-module_slideBottom__TBoZo","back-top":"swipe-module_back-top__gJZv0","backTop":"swipe-module_backTop__32loc","back-left":"swipe-module_back-left__Wd3aY","backLeft":"swipe-module_backLeft__q89ub","back-right":"swipe-module_back-right__Lgwz7","backRight":"swipe-module_backRight__8t5Dm","back-bottom":"swipe-module_back-bottom__JRN-7","backBottom":"swipe-module_backBottom__lwR8B"};
+var styles$2 = {"to-top":"swipe-module_to-top__lrHfG","to-left":"swipe-module_to-left__kgLsE","to-right":"swipe-module_to-right__Xu3Ul","to-bottom":"swipe-module_to-bottom__94M7H","visible":"swipe-module_visible__---aC","swipe-block":"swipe-module_swipe-block__Yv1B3","move-top":"swipe-module_move-top__m6t2O","move-left":"swipe-module_move-left__4TDLs","move-right":"swipe-module_move-right__FrYo0","move-bottom":"swipe-module_move-bottom__eYDx6","back-top":"swipe-module_back-top__gJZv0","back-left":"swipe-module_back-left__Wd3aY","back-right":"swipe-module_back-right__Lgwz7","back-bottom":"swipe-module_back-bottom__JRN-7"};
 styleInject(css_248z$2);
 
 // import React, { useEffect, useRef } from 'react';
+// import ReactDOM from 'react-dom/client';
+// import PropTypes from 'prop-types';
+
 let swipeCount = 0;
 const createElem = (id, title, child, props, swipeBlock, innerConfigStyles) => {
   const {
@@ -8321,7 +8716,7 @@ const SvgNextarrow = ({
 }));
 
 var css_248z$1 = ".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>ul{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{align-items:center;border:none;cursor:pointer;display:flex;justify-content:center;outline:none}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;cursor:pointer;display:flex;flex:0 0 auto;justify-content:center;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}.pagination-module_show-offset-block__ksPGm{height:34px;margin-left:10px!important;margin-right:4px!important;width:91px}i{color:#3c393e;font-size:12px;line-height:12px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}";
-var styles$1 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8","show-offset-block":"pagination-module_show-offset-block__ksPGm"};
+var styles$1 = {"pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8"};
 styleInject(css_248z$1);
 
 const Pagination = ({
@@ -8696,7 +9091,6 @@ var styles = {"auto-complete":"autocomplete-module_auto-complete__oUOv9"};
 styleInject(css_248z);
 
 const Autocomplete = ({
-  label,
   change,
   options,
   getItem,
@@ -8707,37 +9101,28 @@ const Autocomplete = ({
   errorStyle,
   errorWeight,
   errorFamily,
-  labelSize,
-  labelStyle,
   marginTop,
   errorColor,
-  labelColor,
-  labelWeight,
   placeHolder,
   errorMessage,
   autoComplete,
-  labelDisplay,
   contentDisplay,
   contentTopSize,
   contentTopStyle,
   contentTopFamily,
   contentPosition,
   contentTopColor,
-  labelLineHeight,
-  labelFontFamily,
   contentDirection,
   contentTopWeight,
   contentTopRadius,
   contentTopHeight,
   contentTopBorder,
-  labelMarginBottom,
   contentTopDisplay,
   contentTopPadding,
   contentBottomLeft,
   innerErrorPadding,
   showOptionDuration,
   contentTopMaxWidth,
-  labelTextTransform,
   contentBottomWidth,
   contentBottomZindex,
   contentBottomRadius,
@@ -8774,6 +9159,26 @@ const Autocomplete = ({
   contentBottomRowBackgroundColor,
   contentBottomRowHoverBackgroundColor,
   backgroundDisableColor,
+  label,
+  labelSize,
+  labelStyle,
+  labelColor,
+  labelWeight,
+  labelDisplay,
+  labelLineHeight,
+  labelFontFamily,
+  labelMarginBottom,
+  labelTextTransform,
+  iconRequired,
+  useLabelTooltip,
+  labelTooltipColor,
+  labelTooltipPadding,
+  labelTooltipFontSize,
+  labelTooltipFontStyle,
+  labelTooltipFontFamily,
+  labelTooltipFontWeight,
+  labelTooltipBorderRadius,
+  labelTooltipBackgroundColor,
   searchCount = 3,
   disabled = false,
   keyNames = {
@@ -8782,14 +9187,18 @@ const Autocomplete = ({
   },
   ...props
 }) => {
+  const labelRef = useRef(null);
+  const parentRef = useRef(null);
   const [id, setId] = useState('');
   const [show, setShow] = useState(false);
+  const [removeID, setRemoveID] = useState('');
   const [isHover, setIsHover] = useState(false);
   const [isFocus, setIsFocus] = useState(false);
   const [innerError, setInnerError] = useState('');
   const [innerValue, setInnerValue] = useState('');
-  const [innerOptions, setInnerOptions] = useState([]);
   const [classProps, setClassProps] = useState({});
+  const [tooltipElem, setTooltipElem] = useState(null);
+  const [innerOptions, setInnerOptions] = useState([]);
   const [configStyles, setConfigStyles] = useState({});
   const showOption = keyframes`
         100% {
@@ -8904,6 +9313,79 @@ const Autocomplete = ({
       backgroundColor: innerErrorBackgroundColor ?? configStyles.AUTOCOMPLETE.innerError.colors.background
     }
   }, innerValue.length >= searchCount ? 'Նման տվյալ առկա չէ' : `Լրացնել առնվազն ${searchCount} նիշ`) : '');
+  const getRenderedTextWidth = element => {
+    const clone = element.cloneNode(true);
+    clone.style.width = 'fit-content';
+    document.body.appendChild(clone);
+    const width = clone.offsetWidth;
+    document.body.removeChild(clone);
+    return width;
+  };
+  const handleLabelMouseEnter = event => {
+    event.preventDefault();
+    setRemoveID(() => v4());
+    if (labelRef.current) {
+      const parentElem = parentRef.current.getBoundingClientRect();
+      const rect = labelRef.current.getBoundingClientRect();
+      const top = rect.top;
+      const left = rect.left;
+      const height = rect.height;
+      const elementWidth = rect.width;
+      const x = event.clientX - rect.left;
+      const parentWidth = parentElem.width;
+      const textWidth = getRenderedTextWidth(labelRef.current);
+      if (textWidth > Math.ceil(elementWidth)) {
+        const newTooltipElem = document.createElement('div');
+        newTooltipElem.id = `fake_id_for_remove_dom${removeID}`;
+        const newTootltipTextElem = document.createElement('p');
+        const newTooltipChildElem = document.createElement('div');
+        const newTooltipDecorElem = document.createElement('div');
+        newTooltipElem.style.position = 'fixed';
+        newTooltipElem.style.left = left + 'px';
+        newTooltipElem.style.paddingTop = '20px';
+        newTooltipElem.style.height = 'fit-content';
+        newTooltipElem.style.boxSizing = 'border-box';
+        newTooltipElem.style.top = top + height + 'px';
+        newTooltipElem.style.width = parentWidth + 'px';
+        newTooltipChildElem.style.width = '100%';
+        newTooltipChildElem.style.position = 'relative';
+        newTooltipChildElem.style.height = 'fit-content';
+        newTooltipChildElem.style.boxSizing = 'border-box';
+        newTooltipChildElem.style.padding = labelTooltipPadding ?? configStyles.FILE.label.tooltip.padding;
+        newTooltipChildElem.style.borderRadius = labelTooltipBorderRadius ?? configStyles.FILE.label.tooltip.borderRadius;
+        newTooltipChildElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.FILE.label.tooltip.backgroundColor;
+        newTooltipDecorElem.style.zIndex = -1;
+        newTooltipDecorElem.style.top = '-8px';
+        newTooltipDecorElem.style.width = '18px';
+        newTooltipDecorElem.style.height = '18px';
+        newTooltipDecorElem.style.rotate = '45deg';
+        newTooltipDecorElem.style.position = 'absolute';
+        newTooltipDecorElem.style.left = x > elementWidth / 2 ? 'calc(100% - 40px)' : '23px';
+        newTooltipDecorElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.FILE.label.tooltip.backgroundColor;
+        newTootltipTextElem.innerText = label;
+        newTootltipTextElem.style.color = labelTooltipColor ?? configStyles.FILE.label.tooltip.color;
+        newTootltipTextElem.style.fontSize = labelTooltipFontSize ?? configStyles.FILE.label.tooltip.font.size;
+        newTootltipTextElem.style.fontStyle = labelTooltipFontStyle ?? configStyles.FILE.label.tooltip.font.style;
+        newTootltipTextElem.style.fontFamily = labelTooltipFontFamily ?? configStyles.FILE.label.tooltip.font.family;
+        newTootltipTextElem.style.fontWeight = labelTooltipFontWeight ?? configStyles.FILE.label.tooltip.font.weight;
+        document.body.appendChild(newTooltipElem);
+        newTooltipElem.appendChild(newTooltipChildElem);
+        newTooltipChildElem.appendChild(newTooltipDecorElem);
+        newTooltipChildElem.appendChild(newTootltipTextElem);
+        setTooltipElem(() => newTooltipElem);
+      }
+    }
+  };
+  const handleLabelMouseLeave = () => {
+    const removableElem = document.getElementById(`fake_id_for_remove_dom${removeID}`);
+    if (removableElem) {
+      document.body.removeChild(removableElem);
+    }
+    if (tooltipElem) {
+      document.body.removeChild(tooltipElem);
+    }
+    setRemoveID(() => '');
+  };
   useEffect(() => {
     if (options === undefined) {
       alert('Please add options prop');
@@ -8951,24 +9433,38 @@ const Autocomplete = ({
     });
   }, []);
   return configStyles.AUTOCOMPLETE && /*#__PURE__*/React__default.createElement("div", {
+    ref: parentRef,
     className: classProps,
     style: {
       width: contentTopMaxWidth ?? configStyles.AUTOCOMPLETE.maxWidth
     }
-  }, label ? /*#__PURE__*/React__default.createElement("label", {
+  }, label && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      maxWidth: '100%',
+      width: 'fit-content',
+      columnGap: '4px',
+      justifyContent: 'flex-start'
+    }
+  }, /*#__PURE__*/React__default.createElement("label", {
+    ref: labelRef,
     style: {
       color: labelColor ?? configStyles.AUTOCOMPLETE.label.color,
       display: labelDisplay ?? configStyles.AUTOCOMPLETE.label.display,
-      maxWidth: contentTopMaxWidth ?? configStyles.AUTOCOMPLETE.maxWidth,
       fontSize: labelSize ?? configStyles.AUTOCOMPLETE.label.font.size,
       fontStyle: labelStyle ?? configStyles.AUTOCOMPLETE.label.font.style,
       fontWeight: labelWeight ?? configStyles.AUTOCOMPLETE.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.AUTOCOMPLETE.label.font.family,
       lineHeight: labelLineHeight ?? configStyles.AUTOCOMPLETE.label.lineHeight,
       marginBottom: labelMarginBottom ?? configStyles.AUTOCOMPLETE.label.marginBottom,
-      textTransform: labelTextTransform ?? configStyles.AUTOCOMPLETE.label.textTransform
-    }
-  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default.createElement("div", {
+      textTransform: labelTextTransform ?? configStyles.AUTOCOMPLETE.label.textTransform,
+      whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.AUTOCOMPLETE.label.useTooltip) ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.AUTOCOMPLETE.label.useTooltip) ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.AUTOCOMPLETE.label.useTooltip) ? 'ellipsis' : ''
+    },
+    onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.AUTOCOMPLETE.label.useTooltip) ? handleLabelMouseEnter : _ => _,
+    onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.AUTOCOMPLETE.label.useTooltip) ? handleLabelMouseLeave : _ => _
+  }, label), required && /*#__PURE__*/React__default.createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default.createElement(SvgRequired, null))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: contentDisplay ?? configStyles.AUTOCOMPLETE.parent.display,
       position: contentPosition ?? configStyles.AUTOCOMPLETE.parent.position,
@@ -9044,6 +9540,7 @@ Autocomplete.propTypes = {
   errorMessage: PropTypes.string,
   labelDisplay: PropTypes.string,
   autoComplete: PropTypes.string,
+  iconRequired: PropTypes.element,
   contentDisplay: PropTypes.string,
   contentTopSize: PropTypes.string,
   contentTopStyle: PropTypes.string,
@@ -9103,6 +9600,15 @@ Autocomplete.propTypes = {
   contentBottomBackgroundColor: PropTypes.string,
   contentBottomRowBackgroundColor: PropTypes.string,
   contentBottomRowHoverBackgroundColor: PropTypes.string,
+  useLabelTooltip: PropTypes.bool,
+  labelTooltipColor: PropTypes.string,
+  labelTooltipPadding: PropTypes.string,
+  labelTooltipFontSize: PropTypes.string,
+  labelTooltipFontStyle: PropTypes.string,
+  labelTooltipFontFamily: PropTypes.string,
+  labelTooltipFontWeight: PropTypes.string,
+  labelTooltipBorderRadius: PropTypes.string,
+  labelTooltipBackgroundColor: PropTypes.string,
   backgroundDisableColor: PropTypes.string
 };