@xaypay/tui 0.2.24 → 0.2.26

package/dist/index.js

@@ -626,7 +626,7 @@ var packageResult = {
       ...fontObject
     },
     label: {
-      dots: false,
+      useTooltip: false,
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
@@ -634,6 +634,15 @@ var packageResult = {
       marginBottom: '6px',
       font: {
         ...fontObject
+      },
+      tooltip: {
+        color: '#fff',
+        padding: '12px',
+        borderRadius: '8px',
+        font: {
+          ...fontObject
+        },
+        backgroundColor: '#000'
       }
     },
     error: {
@@ -664,6 +673,10 @@ var packageResult = {
           hover: presetColors.dark
         }
       }
+    },
+    icon: {
+      // comment here for example,     
+      // required: React.createElement(SvgChecked, { fill: 'green' }),
     }
   },
   // default properties for <Tooltip /> component
@@ -806,6 +819,7 @@ var packageResult = {
       shadowHover: `0 0 0 2px ${presetColors.dark}` // like border
     },
     label: {
+      useTooltip: false,
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
@@ -813,6 +827,15 @@ var packageResult = {
       textTransform: 'none',
       font: {
         ...fontObject
+      },
+      tooltip: {
+        color: '#fff',
+        padding: '12px',
+        borderRadius: '8px',
+        font: {
+          ...fontObject
+        },
+        backgroundColor: '#000'
       }
     },
     selected: {
@@ -873,6 +896,10 @@ var packageResult = {
       font: {
         ...fontObject
       }
+    },
+    icon: {
+      // comment here for example,     
+      // required: React.createElement(SvgChecked, { fill: 'green' }),
     }
   },
   // default properties for <Textarea /> component
@@ -904,11 +931,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: {
@@ -923,6 +960,10 @@ var packageResult = {
       font: {
         ...fontObject
       }
+    },
+    icon: {
+      // comment here for example,     
+      // required: React.createElement(SvgChecked, { fill: 'green' }),
     }
   },
   // default properties for <NewAutocomplete /> component
@@ -959,6 +1000,7 @@ var packageResult = {
       backgroundDisable: presetColors.secondary
     },
     label: {
+      useTooltip: false,
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
@@ -966,6 +1008,15 @@ var packageResult = {
       textTransform: 'none',
       font: {
         ...fontObject
+      },
+      tooltip: {
+        color: '#fff',
+        padding: '12px',
+        borderRadius: '8px',
+        font: {
+          ...fontObject
+        },
+        backgroundColor: '#000'
       }
     },
     contentBottom: {
@@ -1056,6 +1107,8 @@ var packageResult = {
     sizeText: 'Առավելագույնը',
     timeForRemoveError: 4000,
     extentionsRowMarginTop: '40px',
+    extentionsTextColor: 'black',
+    extentionsTextDots: false,
     border: {
       width: '2px',
       style: 'dashed',
@@ -1069,6 +1122,9 @@ var packageResult = {
       backgroundHidden: 'rgba(60, 57, 62, 0.4)'
     },
     label: {
+      showMore: false,
+      useTooltip: false,
+      showMoreTextColor: '#2C46C1',
       color: '#4A4A4D',
       font: {
         ...fontObject
@@ -1163,6 +1219,7 @@ var packageResult = {
     maxHeight: '95vh',
     minHeight: '200px',
     radius: '14px',
+    noScroll: false,
     padding: '20px 20px 20px',
     className: '',
     alignItems: 'center',
@@ -1217,6 +1274,7 @@ var packageResult = {
   SWIPEMODAL: {
     width: '300px',
     height: '100vh',
+    noScroll: false,
     titleStyle: {
       color: '#1C212D',
       textAlign: 'left',
@@ -1795,9 +1853,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}.file-module_show-more-text__WIGLx{align-self:self-end;cursor:pointer}";
+var styles$b = {"small-file-component":"file-module_small-file-component__nlpcW","show-more-text":"file-module_show-more-text__WIGLx"};
+styleInject(css_248z$c);
 
 // eslint-disable-next-line react/display-name
 const File = /*#__PURE__*/React.forwardRef(({
@@ -1805,7 +1863,6 @@ const File = /*#__PURE__*/React.forwardRef(({
   size,
   name,
   color,
-  label,
   style,
   weight,
   family,
@@ -1825,10 +1882,17 @@ const File = /*#__PURE__*/React.forwardRef(({
   errorStyle,
   errorWeight,
   errorFamily,
+  label,
   labelSize,
+  labelColor,
   labelStyle,
   labelWeight,
   labelFamily,
+  lableShowMore,
+  labelShowLessText,
+  labelShowMoreText,
+  showMoreTextColor,
+  useLabelTooltip,
   labelTooltipColor,
   labelTooltipPadding,
   labelTooltipFontSize,
@@ -1838,7 +1902,6 @@ const File = /*#__PURE__*/React.forwardRef(({
   labelTooltipBorderRadius,
   labelTooltipBackgroundColor,
   removeFile,
-  labelColor,
   errorColor,
   filesArray,
   componentId,
@@ -1907,6 +1970,8 @@ const File = /*#__PURE__*/React.forwardRef(({
   maxCHoosenLengthErrorHideTime,
   textAlignLeftInSmallComponent,
   showPreviewIconInSmallComponent,
+  extentionsTextDots,
+  extentionsTextColor,
   maxSize = 10,
   preview = true,
   timeForRemoveError = 5000,
@@ -1914,11 +1979,12 @@ const File = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const inpRef = React.useRef(null);
   const labelRef = React.useRef(null);
-  const parentlRef = React.useRef(null);
+  const parentRef = React.useRef(null);
   const memoizedItems = React.useMemo(() => filesArray, [filesArray]);
   const [error, setError] = React.useState('');
-  const [isHover, setIsHover] = React.useState(false);
   const [removeID, setRemoveID] = React.useState('');
+  const [isHover, setIsHover] = React.useState(false);
+  const [showMore, setShowMore] = React.useState(false);
   const [classProps, setClassProps] = React.useState({});
   const [singleFile, setSingleFile] = React.useState(null);
   const [configStyles, setConfigStyles] = React.useState({});
@@ -2213,7 +2279,7 @@ const File = /*#__PURE__*/React.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;
@@ -2274,6 +2340,21 @@ const File = /*#__PURE__*/React.forwardRef(({
     }
     setRemoveID(() => '');
   };
+  const handleCheckTextWidth = () => {
+    if (labelRef.current) {
+      const rect = labelRef.current.getBoundingClientRect();
+      const elementWidth = rect.width;
+      const textWidth = getRenderedTextWidth(labelRef.current);
+      if (textWidth > Math.ceil(elementWidth)) {
+        return 'more';
+      } else {
+        return 'less';
+      }
+    }
+  };
+  const handleChangeShowMore = () => {
+    setShowMore(() => !showMore);
+  };
   React.useImperativeHandle(ref, () => ({
     handleReset() {
       setError('');
@@ -2329,6 +2410,15 @@ const File = /*#__PURE__*/React.forwardRef(({
   React.useEffect(() => {
     className && setClassProps(() => classnames__default["default"](className ?? configStyles.FILE.className));
   }, [className]);
+  React.useEffect(() => {
+    if ((useLabelTooltip || configStyles.FILE?.label?.useTooltip) && (lableShowMore || configStyles.FILE?.label?.showMore)) {
+      alert(`
+                        Please use one of this props or config,
+                        use ( useLabelTooltip / configStyles.FILE.label.useTooltip )
+                        or ( lableShowMore / configStyles.FILE.label.showMore )
+                    `);
+    }
+  }, [lableShowMore, useLabelTooltip, configStyles.FILE?.label?.useTooltip, configStyles.FILE?.label?.showMore]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.FILE.className));
@@ -2346,9 +2436,8 @@ const File = /*#__PURE__*/React.forwardRef(({
       }
     };
   }, []);
-  console.log(image, ' - - - -image');
   return configStyles.FILE && /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: parentlRef,
+    ref: parentRef,
     style: {
       width: '100%',
       maxWidth: maxWidth ?? configStyles.FILE.maxWidth
@@ -2359,30 +2448,43 @@ const File = /*#__PURE__*/React.forwardRef(({
       display: 'flex',
       marginBottom: '6px',
       alignItems: 'center',
-      justifyContent: label ? 'space-between' : 'flex-end'
+      justifyContent: label ? 'space-between' : 'flex-end',
+      width: deleteComponent && useLabelTooltip && handleCheckTextWidth() === 'more' ? 'calc(100% - 26px)' : '100%'
     }
   }, label && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
       maxWidth: '100%',
-      width: 'fit-content',
       columnGap: '4px',
+      width: 'fit-content',
       justifyContent: 'flex-start'
     }
   }, /*#__PURE__*/React__default["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) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.FILE.label.showMore) && !showMore ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.FILE.label.showMore) && !showMore ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.FILE.label.showMore) && !showMore ? 'ellipsis' : ''
+    },
+    onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) && !lableShowMore && !configStyles.FILE.label.showMore ? handleLabelMouseEnter : _ => _,
+    onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) && !lableShowMore && !configStyles.FILE.label.showMore ? handleLabelMouseLeave : _ => _
+  }, label), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), lableShowMore || configStyles.FILE.label.showMore ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles$b['show-more-text'],
+    style: {
+      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,
+      color: showMoreTextColor ?? configStyles.FILE.label.showMoreTextColor
     },
-    onMouseEnter: handleLabelMouseEnter,
-    onMouseLeave: handleLabelMouseLeave
-  }, label), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))), deleteComponent && /*#__PURE__*/React__default["default"].createElement("span", {
+    onClick: handleChangeShowMore
+  }, showMore ? labelShowLessText ? labelShowLessText : '' : labelShowMoreText ? labelShowMoreText : '') : ''), deleteComponent && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       cursor: 'pointer'
     },
@@ -2452,14 +2554,23 @@ const File = /*#__PURE__*/React.forwardRef(({
     }
   }, upload ?? configStyles.FILE.upload))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
+      maxWidth: '100%',
       marginTop: extentionsRowMarginTop ?? configStyles.FILE.extentionsRowMarginTop
     }
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px',
-      padding: '0px 10px'
+      padding: '0px 10px',
+      color: color ?? configStyles.FILE.color,
+      whiteSpace: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'nowrap' : 'normal',
+      overflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'hidden' : 'visible',
+      textOverflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'ellipsis' : ''
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532", /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      color: extentionsTextColor ?? configStyles.FILE.extentionsTextColor
     }
-  }, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "(", ' ', " ", fileExtensions.toString().split(',').join(', '), ")"))))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$b['small-file-component'],
     style: {
       width: '100%',
@@ -2498,12 +2609,17 @@ const File = /*#__PURE__*/React.forwardRef(({
   }), /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px',
-      marginLeft: '5px',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
+      padding: '0px 10px',
+      color: color ?? configStyles.FILE.color,
+      whiteSpace: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'nowrap' : 'normal',
+      overflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'hidden' : 'visible',
+      textOverflow: extentionsTextDots || configStyles.FILE.extentionsTextDots ? 'ellipsis' : ''
+    }
+  }, singleFile && singleFile[`${0}`] ? singleFile[`${0}`].name : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532", /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      color: extentionsTextColor ?? configStyles.FILE.extentionsTextColor
     }
-  }, singleFile && singleFile[`${0}`] ? singleFile[`${0}`].name : /*#__PURE__*/React__default["default"].createElement("span", null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, "(", ' ', " ", fileExtensions.toString().split(',').join(', '), ")")))))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -2611,6 +2727,11 @@ File.propTypes = {
   labelWeight: PropTypes__default["default"].string,
   labelFamily: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
+  lableShowMore: PropTypes__default["default"].bool,
+  labelShowLessText: PropTypes__default["default"].string,
+  labelShowMoreText: PropTypes__default["default"].string,
+  showMoreTextColor: PropTypes__default["default"].string,
+  useLabelTooltip: PropTypes__default["default"].bool,
   labelTooltipColor: PropTypes__default["default"].string,
   labelTooltipPadding: PropTypes__default["default"].string,
   labelTooltipFontSize: PropTypes__default["default"].string,
@@ -2688,7 +2809,9 @@ File.propTypes = {
   filesArray: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
   textAlignLeftInSmallComponent: PropTypes__default["default"].bool,
   showPreviewIconInSmallComponent: PropTypes__default["default"].bool,
-  fileExtensions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
+  fileExtensions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
+  extentionsTextDots: PropTypes__default["default"].bool,
+  extentionsTextColor: PropTypes__default["default"].string
 };
 
 const hasOwnerProperty = (object, property) => {
@@ -2952,9 +3075,9 @@ SingleCheckbox.propTypes = {
   ignoreDisabledForChecked: PropTypes__default["default"].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 = ({
@@ -4240,7 +4363,7 @@ const Table = ({
   }, body.map((item, index) => {
     return /*#__PURE__*/React__default["default"].createElement("tr", {
       onDragOver: e => e.preventDefault(),
-      onDrop: e => handleDrop(e, index),
+      onDrop: draggable ? e => handleDrop(e, index) : _ => _,
       key: `${item}_${index}`,
       style: {
         backgroundColor: tableRowBGColor ?? configStyles.TABLE.body.row.colors.background,
@@ -4253,12 +4376,12 @@ const Table = ({
       return /*#__PURE__*/React__default["default"].createElement(TD, {
         index: index,
         item: innerItem,
-        dragged: handleDrag,
+        dragged: draggable ? handleDrag : _ => _,
         hideBorder: hideBorder,
         innerIndex: innerIndex,
-        dragEnd: handleDragEnd,
+        dragEnd: draggable ? handleDragEnd : _ => _,
         row: Object.values(item),
-        dragStart: handleDragStart,
+        dragStart: draggable ? handleDragStart : _ => _,
         id: item.id ? item.id : '',
         handleCheckDots: handleCheckDots,
         key: `${innerItem}_${index}_${innerIndex}`,
@@ -4310,11 +4433,11 @@ const Table = ({
   }, draggedItem.map((innerItem, innerIndex) => {
     return /*#__PURE__*/React__default["default"].createElement(TD, {
       item: innerItem,
-      dragged: handleDrag,
+      dragged: draggable ? handleDrag : _ => _,
       hideBorder: hideBorder,
       innerIndex: innerIndex,
       row: Object.values(draggedItem),
-      dragStart: handleDragStart,
+      dragStart: draggable ? handleDragStart : _ => _,
       handleCheckDots: handleCheckDots,
       key: `${innerItem}__${innerIndex}`,
       openListColor: openListColor ?? configStyles.TABLE.openList.color,
@@ -4392,9 +4515,9 @@ Table.propTypes = {
   clickableRowColumnTd: PropTypes__default["default"].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 = "body.modal-module_tui-no-srcoll-class__gZjNK,html.modal-module_tui-no-srcoll-class__gZjNK{height:100%;overflow:hidden!important}.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 = {"tui-no-srcoll-class":"modal-module_tui-no-srcoll-class__gZjNK","animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
+styleInject(css_248z$a);
 
 const SvgNext = ({
   title,
@@ -4642,11 +4765,22 @@ const Modal = ({
     className && setClassProps(() => classnames__default["default"](className ?? configStyles.MODAL.className));
   }, [className]);
   React.useEffect(() => {
+    let newConfigStyles = {};
+    const style = document.createElement('style');
     document.addEventListener('keydown', e => {
       handleESC(e);
       handleNavigateArrow(e);
     }, false);
     configStylesPromise.then(data => {
+      newConfigStyles = {
+        ...data
+      };
+      if (hasOwnerProperty(newConfigStyles.MODAL, 'noScroll') && newConfigStyles.MODAL.noScroll) {
+        style.textContent = `.tui-no-srcoll-class{overflow:hidden!important;}`;
+        document.head.appendChild(style);
+        document.body.classList.add('tui-no-srcoll-class');
+        document.documentElement.classList.add('tui-no-srcoll-class');
+      }
       setClassProps(() => classnames__default["default"](className ?? data.MODAL.className));
       setConfigStyles(() => {
         return {
@@ -4659,6 +4793,14 @@ const Modal = ({
     return () => {
       setSelect(0);
       setInnerData([]);
+      if (hasOwnerProperty(newConfigStyles.MODAL, 'noScroll') && newConfigStyles.MODAL.noScroll) {
+        const noScrllable = document.getElementsByClassName('tui-no-srcoll-class');
+        if (noScrllable) {
+          style.remove();
+          document.body.classList.remove('tui-no-srcoll-class');
+          document.documentElement.classList.remove('tui-no-srcoll-class');
+        }
+      }
       document.removeEventListener('keydown', e => {
         handleESC(e);
         handleNavigateArrow(e);
@@ -4692,14 +4834,14 @@ const Modal = ({
     style: {
       position: 'relative',
       boxSizing: 'border-box',
-      display: type === 'content' ? 'grid' : 'block',
       width: width ?? configStyles.MODAL.width,
-      overflow: type === 'content' ? 'auto' : 'hidden',
       height: height ?? configStyles.MODAL.height,
-      gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
+      display: type === 'content' ? 'grid' : 'block',
+      overflow: type === 'content' ? 'auto' : 'hidden',
       borderRadius: radius ?? configStyles.MODAL.radius,
       maxWidth: mMaxWidth ?? configStyles.MODAL.maxWidth,
       maxHeight: mMaxHeight ?? configStyles.MODAL.maxHeight,
+      gridTemplateRows: type === 'content' ? 'auto 10fr' : '',
       minWidth: type === 'content' ? minWidth ?? configStyles.MODAL.minWidth : '',
       backgroundColor: backgroundColor ?? configStyles.MODAL.colors.background,
       minHeight: type === 'content' ? minHeight ?? configStyles.MODAL.minHeight : ''
@@ -5270,9 +5412,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 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","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);
+styleInject(css_248z$9);
 
 const InputTypes = {
   TEL: 'tel',
@@ -5293,7 +5435,6 @@ const Input = ({
   name,
   style,
   color,
-  label,
   value,
   width,
   regexp,
@@ -5303,14 +5444,12 @@ const Input = ({
   weight,
   family,
   padding,
-  tooltip,
   telClass,
   leftIcon,
   required,
   disabled,
   errorDots,
   errorIcon,
-  labelDots,
   iconWidth,
   rightIcon,
   className,
@@ -5318,30 +5457,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,
@@ -5349,17 +5480,13 @@ const Input = ({
   errorBoxShadow,
   boxShadowHover,
   errorClassName,
-  labelIconMargin,
-  labelFontFamily,
   phoneAlignItems,
   errorLineHeight,
-  labelLineHeight,
   numberMaxLength,
   backgroundColor,
   errorIconMargin,
   placeholderColor,
   withZero = false,
-  labelMarginBottom,
   regexpErrorMessage,
   phoneJustifyContent,
   telBorderRightWidth,
@@ -5368,13 +5495,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 = React.useRef(null);
+  const parentRef = React.useRef(null);
   const [show, setShow] = React.useState(false);
+  const [removeID, setRemoveID] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
   const [classProps, setClassProps] = React.useState({});
   const [innerValue, setInnerValue] = React.useState('');
+  const [tooltipElem, setTooltipElem] = React.useState(null);
   const [configStyles, setConfigStyles] = React.useState({});
   const [innerErrorIcon, setInnerErrorIcon] = React.useState('');
   const [innerLabelIcon, setInnerLabelIcon] = React.useState('');
@@ -5425,6 +5579,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(() => '');
+  };
   React.useEffect(() => {
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);
@@ -5471,25 +5698,18 @@ const Input = ({
     });
   }, []);
   return configStyles.INPUT && /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: parentRef,
     className: classProps
   }, /*#__PURE__*/React__default["default"].createElement("style", null, `.tui-color-placeholder::placeholder {
                             color: ${placeholderColor ?? configStyles.INPUT.colors.placeholder};
-                        }`), label ? /*#__PURE__*/React__default["default"].createElement("label", {
+                        }`), label && /*#__PURE__*/React__default["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["default"].createElement("img", {
     alt: "label icon",
     src: innerLabelIcon,
@@ -5500,7 +5720,24 @@ const Input = ({
       marginRight: labelIconMargin ?? configStyles.INPUT.label.iconMargin
     },
     onClick: labelAction ? () => labelAction() : _ => _
-  }) : '', label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), showLabelIcon && innerLabelIcon && innerLabelIconSide === 'right' ? /*#__PURE__*/React__default["default"].createElement("img", {
+  }) : '', /*#__PURE__*/React__default["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["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.INPUT.icon.required ? configStyles.INPUT.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), showLabelIcon && innerLabelIcon && innerLabelIconSide === 'right' ? /*#__PURE__*/React__default["default"].createElement("img", {
     alt: "label icon",
     src: innerLabelIcon,
     style: {
@@ -5510,7 +5747,7 @@ const Input = ({
       marginLeft: labelIconMargin ?? configStyles.INPUT.label.iconMargin
     },
     onClick: labelAction ? () => labelAction() : _ => _
-  }) : '') : '', /*#__PURE__*/React__default["default"].createElement("div", {
+  }) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$8['input-content']}`,
     style: {
       width: width ?? configStyles.INPUT.width,
@@ -5608,7 +5845,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["default"].createElement(P
+  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), innerErrorMessage ? /*#__PURE__*/React__default["default"].createElement(P
   // animation={animation}
   , {
     style: {
@@ -5676,7 +5913,6 @@ Input.propTypes = {
   radius: PropTypes__default["default"].string,
   padding: PropTypes__default["default"].string,
   cardNumber: PropTypes__default["default"].bool,
-  tooltip: PropTypes__default["default"].element,
   withoutDot: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
   iconWidth: PropTypes__default["default"].string,
@@ -5685,21 +5921,6 @@ Input.propTypes = {
   floatToFix: PropTypes__default["default"].number,
   minNumSize: PropTypes__default["default"].number,
   maxNumSize: PropTypes__default["default"].number,
-  label: PropTypes__default["default"].string,
-  labelDots: PropTypes__default["default"].bool,
-  labelAction: PropTypes__default["default"].func,
-  labelIcon: PropTypes__default["default"].string,
-  labelSize: PropTypes__default["default"].string,
-  labelColor: PropTypes__default["default"].string,
-  labelStyle: PropTypes__default["default"].string,
-  showLabelIcon: PropTypes__default["default"].bool,
-  labelWeight: PropTypes__default["default"].string,
-  labelDisplay: PropTypes__default["default"].string,
-  labelIconSide: PropTypes__default["default"].oneOf(Object.values(IconSides)),
-  labelLineHeight: PropTypes__default["default"].string,
-  labelFontFamily: PropTypes__default["default"].string,
-  labelIconMargin: PropTypes__default["default"].string,
-  labelMarginBottom: PropTypes__default["default"].string,
   borderRight: PropTypes__default["default"].string,
   placeholder: PropTypes__default["default"].string,
   placeholderColor: PropTypes__default["default"].string,
@@ -5743,7 +5964,31 @@ Input.propTypes = {
   leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   rightIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   type: PropTypes__default["default"].oneOf(Object.values(InputTypes)),
-  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].object])
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number, PropTypes__default["default"].object]),
+  iconRequired: PropTypes__default["default"].element,
+  label: PropTypes__default["default"].string,
+  labelAction: PropTypes__default["default"].func,
+  labelIcon: PropTypes__default["default"].string,
+  labelSize: PropTypes__default["default"].string,
+  labelColor: PropTypes__default["default"].string,
+  labelStyle: PropTypes__default["default"].string,
+  showLabelIcon: PropTypes__default["default"].bool,
+  labelWeight: PropTypes__default["default"].string,
+  labelDisplay: PropTypes__default["default"].string,
+  labelIconSide: PropTypes__default["default"].oneOf(Object.values(IconSides)),
+  labelLineHeight: PropTypes__default["default"].string,
+  labelFontFamily: PropTypes__default["default"].string,
+  labelIconMargin: PropTypes__default["default"].string,
+  labelMarginBottom: PropTypes__default["default"].string,
+  useLabelTooltip: PropTypes__default["default"].bool,
+  labelTooltipColor: PropTypes__default["default"].string,
+  labelTooltipPadding: PropTypes__default["default"].string,
+  labelTooltipFontSize: PropTypes__default["default"].string,
+  labelTooltipFontStyle: PropTypes__default["default"].string,
+  labelTooltipFontFamily: PropTypes__default["default"].string,
+  labelTooltipFontWeight: PropTypes__default["default"].string,
+  labelTooltipBorderRadius: PropTypes__default["default"].string,
+  labelTooltipBackgroundColor: PropTypes__default["default"].string
 };
 
 const RadioDirectionMode = {
@@ -5955,9 +6200,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 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-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);
+styleInject(css_248z$8);
 
 const Select = ({
   dots,
@@ -5989,6 +6234,16 @@ const Select = ({
   labelFontFamily,
   labelMarginBottom,
   labelTextTransform,
+  iconRequired,
+  useLabelTooltip,
+  labelTooltipColor,
+  labelTooltipPadding,
+  labelTooltipFontSize,
+  labelTooltipFontStyle,
+  labelTooltipFontFamily,
+  labelTooltipFontWeight,
+  labelTooltipBorderRadius,
+  labelTooltipBackgroundColor,
   cursor,
   errorIcon,
   errorSize,
@@ -6030,13 +6285,18 @@ const Select = ({
   optionItemBackgroudColorHover,
   boxShadow,
   boxShadowHover,
-  insidePagination
+  insidePagination,
+  placeholderColor
 }) => {
-  const ref = React.useRef();
+  const ref = React.useRef(null);
+  const labelRef = React.useRef(null);
+  const parentRef = React.useRef(null);
   const [opened, setOpened] = React.useState(false);
+  const [removeID, setRemoveID] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
   const [classProps, setClassProps] = React.useState({});
   const [newSelected, setNewSelected] = React.useState([]);
+  const [tooltipElem, setTooltipElem] = React.useState(null);
   const [existOptions, setExistOptions] = React.useState([]);
   const [configStyles, setConfigStyles] = React.useState({});
   const handleOpenClose = () => {
@@ -6102,6 +6362,79 @@ const Select = ({
     }
     return true;
   };
+  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(() => '');
+  };
   React.useEffect(() => {
     if (opened) {
       const checkIfClickedOutside = e => {
@@ -6156,12 +6489,22 @@ const Select = ({
     });
   }, []);
   return configStyles.SELECT && /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: parentRef,
     className: classProps,
     style: {
       position: 'relative',
       width: '100%'
     }
-  }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
+  }, label && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      maxWidth: '100%',
+      width: 'fit-content',
+      columnGap: '4px',
+      justifyContent: 'flex-start'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("label", {
+    ref: labelRef,
     style: {
       color: labelColor ?? configStyles.SELECT.label.color,
       fontWeight: labelWeight ?? configStyles.SELECT.label.font.weight,
@@ -6171,9 +6514,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["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default["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["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.SELECT.icon.required ? configStyles.SELECT.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: styles$7['select-content']
@@ -6199,12 +6547,12 @@ const Select = ({
     onMouseEnter: disabled ? _ => _ : () => handleMouseEnter(),
     onMouseLeave: disabled ? _ => _ : () => handleMouseLeave()
   }, /*#__PURE__*/React__default["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]) {
@@ -6350,9 +6698,20 @@ Select.propTypes = {
   optionItemMarginBottom: PropTypes__default["default"].string,
   optionItemBackgroudColor: PropTypes__default["default"].string,
   optionItemBackgroudColorHover: PropTypes__default["default"].string,
+  iconRequired: PropTypes__default["default"].element,
+  useLabelTooltip: PropTypes__default["default"].bool,
+  labelTooltipColor: PropTypes__default["default"].string,
+  labelTooltipPadding: PropTypes__default["default"].string,
+  labelTooltipFontSize: PropTypes__default["default"].string,
+  labelTooltipFontStyle: PropTypes__default["default"].string,
+  labelTooltipFontFamily: PropTypes__default["default"].string,
+  labelTooltipFontWeight: PropTypes__default["default"].string,
+  labelTooltipBorderRadius: PropTypes__default["default"].string,
+  labelTooltipBackgroundColor: PropTypes__default["default"].string,
   boxShadow: PropTypes__default["default"].string,
   boxShadowHover: PropTypes__default["default"].string,
-  insidePagination: PropTypes__default["default"].bool
+  insidePagination: PropTypes__default["default"].bool,
+  placeholderColor: PropTypes__default["default"].string
 };
 
 const SvgToasterInfo = ({
@@ -6474,9 +6833,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',
@@ -6876,9 +7235,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',
@@ -7082,9 +7441,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,
@@ -7229,9 +7588,9 @@ Captcha.propTypes = {
   getRange: PropTypes__default["default"].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,
@@ -7394,9 +7753,6 @@ Checkbox.propTypes = {
   data: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].object), PropTypes__default["default"].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'
@@ -7407,7 +7763,6 @@ const Textarea = ({
   style,
   family,
   weight,
-  label,
   width,
   value,
   height,
@@ -7424,32 +7779,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 = React.useRef(null);
+  const parentRef = React.useRef(null);
   const [error, setError] = React.useState('');
+  const [removeID, setRemoveID] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
   const [isFocus, setIsFocus] = React.useState(false);
   const [innerValue, setInnerValue] = React.useState('');
   const [classProps, setClassProps] = React.useState({});
+  const [tooltipElem, setTooltipElem] = React.useState(null);
   const [configStyles, setConfigStyles] = React.useState({});
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -7485,6 +7855,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(() => '');
+  };
   React.useEffect(() => {
     if (value === undefined) {
       alert('Please add value prop on Textarea component');
@@ -7512,6 +7955,7 @@ const Textarea = ({
     });
   }, []);
   return configStyles.TEXTAREA && /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: parentRef,
     style: {
       width: width ?? configStyles.TEXTAREA.width
     },
@@ -7527,11 +7971,30 @@ const Textarea = ({
       fontWeight: labelWeight ?? configStyles.TEXTAREA.label.font.weight,
       marginBottom: labelMarginBottom ?? configStyles.TEXTAREA.label.marginBottom
     }
-  }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
+  }, label && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      maxWidth: '100%',
+      columnGap: '4px',
+      justifyContent: 'flex-start',
+      width: showCharacterCount && maxLength && characterCountPosition === 'top' ? 'calc(100% - 80px)' : '100%'
+    }
+  }, /*#__PURE__*/React__default["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["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.TEXTAREA.icon.required ? configStyles.TEXTAREA.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))), showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
-      display: labelDisplay ?? configStyles.TEXTAREA.label.display
+      width: 'fit-content',
+      flexShrink: 0
     }
-  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default["default"].createElement("span", null, maxLength - innerValue.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default["default"].createElement("textarea", {
+  }, maxLength - innerValue.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default["default"].createElement("textarea", {
     style: {
       width: '100%',
       border: 'none',
@@ -7598,7 +8061,6 @@ Textarea.propTypes = {
   style: PropTypes__default["default"].string,
   family: PropTypes__default["default"].string,
   weight: PropTypes__default["default"].string,
-  label: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
   height: PropTypes__default["default"].string,
   resize: PropTypes__default["default"].string,
@@ -7615,25 +8077,36 @@ Textarea.propTypes = {
   minHeight: PropTypes__default["default"].string,
   maxHeight: PropTypes__default["default"].string,
   maxLength: PropTypes__default["default"].number,
-  labelSize: PropTypes__default["default"].string,
   errorSize: PropTypes__default["default"].string,
   errorStyle: PropTypes__default["default"].string,
   errorWeight: PropTypes__default["default"].string,
   errorFamily: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
-  labelColor: PropTypes__default["default"].string,
   errorColor: PropTypes__default["default"].string,
-  labelWeight: PropTypes__default["default"].string,
   placeholder: PropTypes__default["default"].string,
   errorMessage: PropTypes__default["default"].string,
-  labelDisplay: PropTypes__default["default"].string,
-  labelFontFamily: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   showCharacterCount: PropTypes__default["default"].bool,
   value: PropTypes__default["default"].string.isRequired,
   borderFocusColor: PropTypes__default["default"].string,
   borderHoverColor: PropTypes__default["default"].string,
+  label: PropTypes__default["default"].string,
+  labelSize: PropTypes__default["default"].string,
+  labelColor: PropTypes__default["default"].string,
+  labelWeight: PropTypes__default["default"].string,
+  labelDisplay: PropTypes__default["default"].string,
+  labelFontFamily: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
+  iconRequired: PropTypes__default["default"].element,
+  useLabelTooltip: PropTypes__default["default"].bool,
+  labelTooltipColor: PropTypes__default["default"].string,
+  labelTooltipPadding: PropTypes__default["default"].string,
+  labelTooltipFontSize: PropTypes__default["default"].string,
+  labelTooltipFontStyle: PropTypes__default["default"].string,
+  labelTooltipFontFamily: PropTypes__default["default"].string,
+  labelTooltipFontWeight: PropTypes__default["default"].string,
+  labelTooltipBorderRadius: PropTypes__default["default"].string,
+  labelTooltipBackgroundColor: PropTypes__default["default"].string,
   characterCountPosition: PropTypes__default["default"].oneOf(Object.values(PositionSide))
 };
 
@@ -7649,6 +8122,7 @@ const AccordionItem = ({
   titleAlign,
   multipleOpen,
   openHoverIcon,
+  closeHoverIcon,
   color,
   border,
   padding,
@@ -7729,7 +8203,7 @@ const AccordionItem = ({
       alignItems: 'center',
       justifyContent: 'center'
     }
-  }, isOpen ? closeIcon : isHover ? openHoverIcon ? openHoverIcon : openIcon : openIcon)), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, isOpen ? isHover ? closeHoverIcon : closeIcon : isHover ? openHoverIcon : openIcon)), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       overflow: 'hidden',
       height: isOpen ? 'auto' : '0px'
@@ -7795,6 +8269,7 @@ const Accordion = ({
   titleAlign,
   multipleOpen,
   openHoverIcon,
+  closeHoverIcon,
   borderTop,
   borderLeft,
   borderRight,
@@ -7875,6 +8350,13 @@ const Accordion = ({
         src: configStyles.ACCORDION.icon.close,
         alt: "close icon"
       }) : /*#__PURE__*/React__default["default"].createElement(SvgGreenminus, null),
+      closeHoverIcon: closeHoverIcon ? /*#__PURE__*/React__default["default"].createElement("img", {
+        src: closeHoverIcon,
+        alt: "close icon"
+      }) : configStyles.ACCORDION.icon.closeHover ? /*#__PURE__*/React__default["default"].createElement("img", {
+        src: configStyles.ACCORDION.icon.closeHover,
+        alt: "close icon"
+      }) : /*#__PURE__*/React__default["default"].createElement(SvgGreenminus, null),
       className: classProps,
       color: color ?? configStyles.ACCORDION.color,
       padding: padding ?? configStyles.ACCORDION.padding,
@@ -7918,6 +8400,7 @@ Accordion.propTypes = {
   closeIcon: PropTypes__default["default"].string,
   marginBottom: PropTypes__default["default"].string,
   openHoverIcon: PropTypes__default["default"].string,
+  closeHoverIcon: PropTypes__default["default"].string,
   borderTop: PropTypes__default["default"].bool,
   borderLeft: PropTypes__default["default"].bool,
   borderRight: PropTypes__default["default"].bool,
@@ -8010,8 +8493,8 @@ const Swipe = ({
   }, child));
 };
 
-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 css_248z$2 = "body.swipe-module_tui-no-srcoll-class__YS9cI,html.swipe-module_tui-no-srcoll-class__YS9cI{height:100%;overflow:hidden!important}.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 = {"tui-no-srcoll-class":"swipe-module_tui-no-srcoll-class__YS9cI","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"};
 styleInject(css_248z$2);
 
 // import React, { useEffect, useRef } from 'react';
@@ -8113,22 +8596,45 @@ const handleNavigationChange = () => {
     return result;
   };
 })(window.history);
+const style = document.createElement('style');
 const swipe = {
   open: (title = '', id, child, props) => {
-    if (id === undefined || id === null && (typeof id !== 'string' || typeof id !== 'number')) {
-      alert('Please pass valid id prop (string / number)  when call swipe.open function');
-      return;
-    }
-    if (swipeCount === 0) {
-      window.addEventListener('popstate', handleNavigationChange);
-      window.addEventListener('navigationchange', handleNavigationChange);
-    }
-    let swipable = document.getElementById('swipable');
-    swipeCount += 1;
-    createSwipe(id, title, child, props, swipable);
-    return Promise.resolve(id);
+    let newConfigStyles = {};
+    configStylesPromise.then(data => {
+      newConfigStyles = {
+        ...data
+      };
+      if (id === undefined || id === null && (typeof id !== 'string' || typeof id !== 'number')) {
+        alert('Please pass valid id prop (string / number)  when call swipe.open function');
+        return;
+      }
+      if (swipeCount === 0) {
+        if (hasOwnerProperty(newConfigStyles.SWIPEMODAL, 'noScroll') && newConfigStyles.SWIPEMODAL.noScroll) {
+          style.textContent = `.tui-no-srcoll-class{overflow:hidden!important;}`;
+          document.head.appendChild(style);
+          document.body.classList.add('tui-no-srcoll-class');
+          document.documentElement.classList.add('tui-no-srcoll-class');
+        }
+        window.addEventListener('popstate', handleNavigationChange);
+        window.addEventListener('navigationchange', handleNavigationChange);
+      }
+      let swipable = document.getElementById('swipable');
+      swipeCount += 1;
+      createSwipe(id, title, child, props, swipable);
+      return Promise.resolve(id);
+    }, error => {
+      console.error(error);
+    });
   },
   close: id => {
+    let newConfigStyles = {};
+    configStylesPromise.then(data => {
+      newConfigStyles = {
+        ...data
+      };
+    }, error => {
+      console.error(error);
+    });
     if (id === undefined || id === null && (typeof id !== 'string' || typeof id !== 'number')) {
       alert('Please pass valid id prop (string / number)  when call swipe.close function');
       return;
@@ -8147,6 +8653,14 @@ const swipe = {
             window.removeEventListener('popstate', handleNavigationChange);
             window.removeEventListener('navigationchange', handleNavigationChange);
             document.body.removeChild(swipable);
+            if (hasOwnerProperty(newConfigStyles.SWIPEMODAL, 'noScroll') && newConfigStyles.SWIPEMODAL.noScroll) {
+              const noScrllable = document.getElementsByClassName('tui-no-srcoll-class');
+              if (noScrllable) {
+                style.remove();
+                document.body.classList.remove('tui-no-srcoll-class');
+                document.documentElement.classList.remove('tui-no-srcoll-class');
+              }
+            }
           }
         }, 200);
       } else {
@@ -8155,6 +8669,14 @@ const swipe = {
           window.removeEventListener('popstate', handleNavigationChange);
           window.removeEventListener('navigationchange', handleNavigationChange);
           document.body.removeChild(swipable);
+          if (hasOwnerProperty(newConfigStyles.SWIPEMODAL, 'noScroll') && newConfigStyles.SWIPEMODAL.noScroll) {
+            const noScrllable = document.getElementsByClassName('tui-no-srcoll-class');
+            if (noScrllable) {
+              style.remove();
+              document.body.classList.remove('tui-no-srcoll-class');
+              document.documentElement.classList.remove('tui-no-srcoll-class');
+            }
+          }
         }
       }
     }
@@ -8727,7 +9249,6 @@ var styles = {"auto-complete":"autocomplete-module_auto-complete__oUOv9"};
 styleInject(css_248z);
 
 const Autocomplete = ({
-  label,
   change,
   options,
   getItem,
@@ -8738,37 +9259,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,
@@ -8805,6 +9317,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 = {
@@ -8813,14 +9345,18 @@ const Autocomplete = ({
   },
   ...props
 }) => {
+  const labelRef = React.useRef(null);
+  const parentRef = React.useRef(null);
   const [id, setId] = React.useState('');
   const [show, setShow] = React.useState(false);
+  const [removeID, setRemoveID] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
   const [isFocus, setIsFocus] = React.useState(false);
   const [innerError, setInnerError] = React.useState('');
   const [innerValue, setInnerValue] = React.useState('');
-  const [innerOptions, setInnerOptions] = React.useState([]);
   const [classProps, setClassProps] = React.useState({});
+  const [tooltipElem, setTooltipElem] = React.useState(null);
+  const [innerOptions, setInnerOptions] = React.useState([]);
   const [configStyles, setConfigStyles] = React.useState({});
   const showOption = styled.keyframes`
         100% {
@@ -8935,6 +9471,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(() => '');
+  };
   React.useEffect(() => {
     if (options === undefined) {
       alert('Please add options prop');
@@ -8982,24 +9591,38 @@ const Autocomplete = ({
     });
   }, []);
   return configStyles.AUTOCOMPLETE && /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: parentRef,
     className: classProps,
     style: {
       width: contentTopMaxWidth ?? configStyles.AUTOCOMPLETE.maxWidth
     }
-  }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
+  }, label && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      maxWidth: '100%',
+      width: 'fit-content',
+      columnGap: '4px',
+      justifyContent: 'flex-start'
+    }
+  }, /*#__PURE__*/React__default["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["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default["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["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: contentDisplay ?? configStyles.AUTOCOMPLETE.parent.display,
       position: contentPosition ?? configStyles.AUTOCOMPLETE.parent.position,
@@ -9075,6 +9698,7 @@ Autocomplete.propTypes = {
   errorMessage: PropTypes__default["default"].string,
   labelDisplay: PropTypes__default["default"].string,
   autoComplete: PropTypes__default["default"].string,
+  iconRequired: PropTypes__default["default"].element,
   contentDisplay: PropTypes__default["default"].string,
   contentTopSize: PropTypes__default["default"].string,
   contentTopStyle: PropTypes__default["default"].string,
@@ -9134,6 +9758,15 @@ Autocomplete.propTypes = {
   contentBottomBackgroundColor: PropTypes__default["default"].string,
   contentBottomRowBackgroundColor: PropTypes__default["default"].string,
   contentBottomRowHoverBackgroundColor: PropTypes__default["default"].string,
+  useLabelTooltip: PropTypes__default["default"].bool,
+  labelTooltipColor: PropTypes__default["default"].string,
+  labelTooltipPadding: PropTypes__default["default"].string,
+  labelTooltipFontSize: PropTypes__default["default"].string,
+  labelTooltipFontStyle: PropTypes__default["default"].string,
+  labelTooltipFontFamily: PropTypes__default["default"].string,
+  labelTooltipFontWeight: PropTypes__default["default"].string,
+  labelTooltipBorderRadius: PropTypes__default["default"].string,
+  labelTooltipBackgroundColor: PropTypes__default["default"].string,
   backgroundDisableColor: PropTypes__default["default"].string
 };