@xaypay/tui 0.2.23 → 0.2.25

package/dist/index.es.js

@@ -48,7 +48,7 @@ var native = {
 };
 
 function v4(options, buf, offset) {
-  if (native.randomUUID && !buf && !options) {
+  if (native.randomUUID && true && !options) {
     return native.randomUUID();
   }
 
@@ -58,16 +58,6 @@ function v4(options, buf, offset) {
   rnds[6] = rnds[6] & 0x0f | 0x40;
   rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
 
-  if (buf) {
-    offset = offset || 0;
-
-    for (let i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
-
-    return buf;
-  }
-
   return unsafeStringify(rnds);
 }
 
@@ -154,6 +144,28 @@ const SvgDocIcon = ({
   d: "M5.922 23.8H3.859v-5.818h2.08q.878 0 1.511.35.633.346.975.996.343.651.343 1.557 0 .909-.343 1.563-.341.653-.98 1.003-.637.349-1.523.349m-.833-1.054h.782q.546 0 .917-.193.375-.196.563-.605.19-.413.19-1.063 0-.645-.19-1.054a1.23 1.23 0 0 0-.56-.602q-.372-.193-.918-.193H5.09zm9.937-1.855q0 .951-.36 1.62a2.5 2.5 0 0 1-.978 1.02q-.616.348-1.386.349-.776 0-1.392-.353a2.5 2.5 0 0 1-.975-1.02q-.357-.668-.358-1.616 0-.952.358-1.62.359-.667.975-1.017a2.76 2.76 0 0 1 1.392-.352q.77 0 1.386.352.62.35.977 1.018.36.667.361 1.619m-1.247 0q0-.617-.185-1.04a1.4 1.4 0 0 0-.514-.642 1.4 1.4 0 0 0-.778-.219q-.447 0-.779.22-.332.218-.517.641-.182.423-.182 1.04 0 .616.182 1.04.185.423.517.642.332.218.779.218.445 0 .778-.218.333-.219.514-.642.185-.425.185-1.04m7.292-.872h-1.245a1.2 1.2 0 0 0-.139-.43 1.1 1.1 0 0 0-.27-.323 1.2 1.2 0 0 0-.38-.205 1.5 1.5 0 0 0-.463-.07 1.4 1.4 0 0 0-.787.224 1.43 1.43 0 0 0-.52.648q-.185.423-.185 1.028 0 .622.185 1.045.188.423.523.64.335.215.775.215.247 0 .457-.065.215-.065.378-.19.165-.128.273-.31.11-.182.154-.415l1.244.006a2.323 2.323 0 0 1-.756 1.435 2.4 2.4 0 0 1-.767.46q-.443.168-1.003.168-.778 0-1.392-.353a2.5 2.5 0 0 1-.966-1.02q-.352-.668-.352-1.616 0-.952.358-1.62.358-.667.972-1.017.614-.352 1.38-.352.506 0 .938.142.434.142.77.415.335.27.545.662.213.391.273.898"
 }));
 
+const SvgListItemSvg = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "28",
+  height: "36",
+  viewBox: "0 0 28 36",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  d: "M27.39 9.078v16.043a1.213 1.213 0 0 1 .61 1.05v6.778A3.05 3.05 0 0 1 24.957 36H3.043A3.051 3.051 0 0 1 0 32.95v-8.872a1.22 1.22 0 0 1 .61-1.05V2.44c0-.648.257-1.27.71-1.726A2.44 2.44 0 0 1 3.043 0h15.293ZM8.759 27.871q-.585 0-1.043.203c-.309.133-.547.32-.723.559a1.35 1.35 0 0 0-.258.84c-.004.39.13.699.387.93q.393.346 1.066.511l.586.145c.192.046.36.097.493.152a.9.9 0 0 1 .308.207q.105.125.106.3 0 .19-.117.337a.73.73 0 0 1-.333.23 1.4 1.4 0 0 1-.496.082q-.292.001-.527-.086a.9.9 0 0 1-.367-.265.8.8 0 0 1-.152-.446H6.594q.013.573.277.957.271.388.746.582.48.198 1.13.196.65 0 1.112-.192.464-.2.711-.55c.164-.239.25-.52.25-.844a1.331 1.331 0 0 0-.453-1.027 2.1 2.1 0 0 0-.508-.32 3.3 3.3 0 0 0-.64-.204l-.48-.113a3 3 0 0 1-.329-.094 1.4 1.4 0 0 1-.273-.133.6.6 0 0 1-.184-.183.43.43 0 0 1-.062-.247q.001-.17.101-.304a.65.65 0 0 1 .293-.211q.188-.077.465-.078.41 0 .645.175a.64.64 0 0 1 .27.485h1.081a1.47 1.47 0 0 0-.254-.832 1.63 1.63 0 0 0-.695-.559c-.297-.137-.64-.203-1.04-.203m10.426 0q-.528.001-.985.184-.451.181-.793.535a2.45 2.45 0 0 0-.535.855 3.3 3.3 0 0 0-.187 1.149c0 .554.105 1.039.316 1.445q.317.603.887.938.57.328 1.32.328.675 0 1.195-.27.522-.27.82-.77.299-.502.298-1.199v-.664h-2.235v.84h1.145q-.005.316-.145.555a.95.95 0 0 1-.418.383 1.45 1.45 0 0 1-.652.136c-.285 0-.527-.07-.735-.203a1.3 1.3 0 0 1-.48-.59 2.4 2.4 0 0 1-.172-.941q.001-.552.172-.934.175-.386.48-.585c.207-.133.45-.204.723-.204q.217.001.399.055c.12.035.23.09.324.156a1.05 1.05 0 0 1 .394.582h1.149a1.9 1.9 0 0 0-.246-.715 2 2 0 0 0-.5-.566c-.2-.16-.434-.281-.692-.367a2.6 2.6 0 0 0-.847-.133m-6.047 5.36h1.457l1.844-5.286h-1.254l-1.297 4.016h-.047l-1.293-4.016h-1.258ZM3.043 1.218c-.324 0-.633.129-.86.36-.23.226-.359.538-.359.862V22.86h8.633c.352 0 .684.153.918.418l1.46 1.676h13.337V9.938H19.91A2.436 2.436 0 0 1 17.476 7.5V1.218Zm7.738 9.164c.078 0 .137.062.137.14v.313h5.46v-.313a.14.14 0 0 1 .142-.14h1.539a.14.14 0 0 1 .14.14v1.524a.14.14 0 0 1-.14.137h-.313v5.402h.313c.078 0 .14.059.14.137v1.523a.137.137 0 0 1-.14.137h-1.54a.137.137 0 0 1-.14-.137v-.312h-5.461v.312a.134.134 0 0 1-.137.137H9.238a.136.136 0 0 1-.136-.137v-1.523c0-.078.062-.137.136-.137h.317v-5.402h-.317a.14.14 0 0 1-.136-.137v-1.524a.14.14 0 0 1 .136-.14Zm.137 1.664a.14.14 0 0 1-.137.137h-.316v5.402h.316c.074 0 .137.062.137.137v.312h5.46v-.312a.14.14 0 0 1 .142-.137h.316v-5.402h-.316a.14.14 0 0 1-.141-.137v-.313h-5.461Zm0 0",
+  style: {
+    stroke: 'none',
+    fillRule: 'nonzero',
+    fill: '#00236a',
+    fillOpacity: 1
+  }
+}));
+
 const SvgListItemPdf = ({
   title,
   titleId,
@@ -266,6 +278,7 @@ const FileItem = /*#__PURE__*/React__default.memo(({
   radius,
   status,
   iconDoc,
+  iconSvg,
   iconPdf,
   iconPng,
   iconJpg,
@@ -409,7 +422,7 @@ const FileItem = /*#__PURE__*/React__default.memo(({
     style: {
       width: '32px'
     }
-  }, fileFormat === 'pdf' ? iconPdf ? iconPdf : /*#__PURE__*/React__default.createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? iconJpg ? iconJpg : /*#__PURE__*/React__default.createElement(SvgListItemJpg, null) : fileFormat === 'png' ? iconPng ? iconPng : /*#__PURE__*/React__default.createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? iconJpeg ? iconJpeg : /*#__PURE__*/React__default.createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? iconHeic ? iconHeic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : fileFormat === 'msword' ? iconDoc ? iconDoc : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : fileFormat === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ? iconDocx ? iconDocx : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : ''), /*#__PURE__*/React__default.createElement("div", {
+  }, fileFormat === 'svg+xml' ? iconSvg ? iconSvg : /*#__PURE__*/React__default.createElement(SvgListItemSvg, null) : fileFormat === 'pdf' ? iconPdf ? iconPdf : /*#__PURE__*/React__default.createElement(SvgListItemPdf, null) : fileFormat === 'jpg' ? iconJpg ? iconJpg : /*#__PURE__*/React__default.createElement(SvgListItemJpg, null) : fileFormat === 'png' ? iconPng ? iconPng : /*#__PURE__*/React__default.createElement(SvgListItemPng, null) : fileFormat === 'jpeg' ? iconJpeg ? iconJpeg : /*#__PURE__*/React__default.createElement(SvgListItemJpeg, null) : fileFormat === 'heic' || fileFormat === 'heif' ? iconHeic ? iconHeic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : fileFormat === 'msword' ? iconDoc ? iconDoc : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : fileFormat === 'vnd.openxmlformats-officedocument.wordprocessingml.document' ? iconDocx ? iconDocx : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : ''), /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'relative',
       display: 'flex',
@@ -474,19 +487,22 @@ var img$3 = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16
 var img$2 = "data:image/svg+xml,%3csvg width='16' height='2' viewBox='0 0 16 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1H15' stroke='%23009B8B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e";
 
 // import React from 'react'
+// import info from './src/assetsTMP/info.png';
+// import error from './src/assetsTMP/error.png';
+// import close from './src/assetsTMP/close.svg';
+// import warn from './src/assetsTMP/warning.png';
+// import success from './src/assetsTMP/success.png';
 const boxSizing = 'border-box';
 const fontStyle = 'normal';
 const fontFamily = 'Arial';
 const fontWeight = 500;
 const transparent = 'transparent';
 const presetColors = {
-  info: '#F24C4C',
   dark: '#3C393E',
   light: '#EEEEEE',
   extraLight: '#FBFBFB',
   danger: '#EE0000',
   success: '#0DA574',
-  warning: '#FECD29',
   secondary: '#D1D1D1',
   primary: '#051942',
   primarySecond: '#00236A'
@@ -572,7 +588,7 @@ var packageResult = {
       ...fontObject
     },
     label: {
-      dots: false,
+      useTooltip: false,
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
@@ -580,6 +596,15 @@ var packageResult = {
       marginBottom: '6px',
       font: {
         ...fontObject
+      },
+      tooltip: {
+        color: '#fff',
+        padding: '12px',
+        borderRadius: '8px',
+        font: {
+          ...fontObject
+        },
+        backgroundColor: '#000'
       }
     },
     error: {
@@ -610,6 +635,10 @@ var packageResult = {
           hover: presetColors.dark
         }
       }
+    },
+    icon: {
+      // comment here for example,     
+      // required: React.createElement(SvgChecked, { fill: 'green' }),
     }
   },
   // default properties for <Tooltip /> component
@@ -752,6 +781,7 @@ var packageResult = {
       shadowHover: `0 0 0 2px ${presetColors.dark}` // like border
     },
     label: {
+      useTooltip: false,
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
@@ -759,6 +789,15 @@ var packageResult = {
       textTransform: 'none',
       font: {
         ...fontObject
+      },
+      tooltip: {
+        color: '#fff',
+        padding: '12px',
+        borderRadius: '8px',
+        font: {
+          ...fontObject
+        },
+        backgroundColor: '#000'
       }
     },
     selected: {
@@ -819,6 +858,10 @@ var packageResult = {
       font: {
         ...fontObject
       }
+    },
+    icon: {
+      // comment here for example,     
+      // required: React.createElement(SvgChecked, { fill: 'green' }),
     }
   },
   // default properties for <Textarea /> component
@@ -850,11 +893,21 @@ var packageResult = {
       background: 'white'
     },
     label: {
+      useTooltip: false,
       color: presetColors.dark,
       display: 'block',
       marginBottom: '10px',
       font: {
         ...fontObject
+      },
+      tooltip: {
+        color: '#fff',
+        padding: '12px',
+        borderRadius: '8px',
+        font: {
+          ...fontObject
+        },
+        backgroundColor: '#000'
       }
     },
     font: {
@@ -869,6 +922,10 @@ var packageResult = {
       font: {
         ...fontObject
       }
+    },
+    icon: {
+      // comment here for example,     
+      // required: React.createElement(SvgChecked, { fill: 'green' }),
     }
   },
   // default properties for <NewAutocomplete /> component
@@ -905,6 +962,7 @@ var packageResult = {
       backgroundDisable: presetColors.secondary
     },
     label: {
+      useTooltip: false,
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
@@ -912,6 +970,15 @@ var packageResult = {
       textTransform: 'none',
       font: {
         ...fontObject
+      },
+      tooltip: {
+        color: '#fff',
+        padding: '12px',
+        borderRadius: '8px',
+        font: {
+          ...fontObject
+        },
+        backgroundColor: '#000'
       }
     },
     contentBottom: {
@@ -1002,6 +1069,7 @@ var packageResult = {
     sizeText: 'Առավելագույնը',
     timeForRemoveError: 4000,
     extentionsRowMarginTop: '40px',
+    extentionsTextColor: 'black',
     border: {
       width: '2px',
       style: 'dashed',
@@ -1015,6 +1083,7 @@ var packageResult = {
       backgroundHidden: 'rgba(60, 57, 62, 0.4)'
     },
     label: {
+      useTooltip: false,
       color: '#4A4A4D',
       font: {
         ...fontObject
@@ -1145,6 +1214,10 @@ var packageResult = {
       wrapWidth: '100%',
       wrapHeight: '100%'
     },
+    closeIcon: {
+      top: '24px',
+      right: '24px'
+    },
     icon: {
       className: 'tui_close-modal-icon'
       // zoom: React.createElement(SvgChecked, { fill: 'green' }),      
@@ -1581,6 +1654,24 @@ Button.propTypes = {
   withoutStylingHoverColor: PropTypes.string
 };
 
+const SvgSvg = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.createElement("svg", _extends({
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  viewBox: "0 0 40 52",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.createElement("path", {
+  fill: "#00236A",
+  d: "M39.13 13.11v23.175a1.772 1.772 0 0 1 .87 1.518v9.79a4.45 4.45 0 0 1-1.274 3.115A4.33 4.33 0 0 1 35.652 52H4.348a4.33 4.33 0 0 1-3.074-1.292A4.45 4.45 0 0 1 0 47.593V34.78a1.77 1.77 0 0 1 .87-1.517V3.525c0-.934.367-1.831 1.019-2.493A3.46 3.46 0 0 1 4.348 0h21.847zM12.514 40.26q-.836 0-1.492.29a2.5 2.5 0 0 0-1.033.81q-.372.519-.369 1.212-.003.846.556 1.346t1.524.734l.832.21q.417.1.704.223.291.123.44.299a.64.64 0 0 1 .154.432.77.77 0 0 1-.168.489q-.168.212-.473.332-.303.12-.712.119a2.1 2.1 0 0 1-.75-.127 1.2 1.2 0 0 1-.526-.384 1.17 1.17 0 0 1-.22-.642H9.418q.018.824.398 1.383.384.556 1.067.84.686.284 1.611.283.932 0 1.592-.28.663-.283 1.015-.794.353-.514.357-1.216-.003-.477-.175-.845a1.9 1.9 0 0 0-.473-.642 2.8 2.8 0 0 0-.724-.459 5 5 0 0 0-.917-.298l-.687-.164a4 4 0 0 1-.47-.135 2 2 0 0 1-.387-.19.9.9 0 0 1-.265-.264.63.63 0 0 1-.086-.358q0-.246.142-.44a.94.94 0 0 1 .418-.302q.272-.112.667-.112.582 0 .92.25.34.25.386.7h1.547a2.14 2.14 0 0 0-.366-1.2 2.35 2.35 0 0 0-.992-.81q-.633-.29-1.483-.29m14.893 0q-.756 0-1.406.265a3.3 3.3 0 0 0-1.137.772 3.5 3.5 0 0 0-.76 1.238q-.27.727-.269 1.656 0 1.207.451 2.087a3.3 3.3 0 0 0 1.268 1.354q.813.474 1.886.474.962 0 1.709-.388a2.9 2.9 0 0 0 1.17-1.111q.425-.724.425-1.731v-.962h-3.195v1.216h1.638a1.6 1.6 0 0 1-.206.798 1.4 1.4 0 0 1-.597.555q-.388.195-.936.195a1.87 1.87 0 0 1-1.048-.291q-.443-.296-.686-.855-.242-.56-.242-1.356 0-.799.246-1.35.246-.556.685-.847.445-.29 1.03-.29.313 0 .57.078a1.49 1.49 0 0 1 1.03 1.066h1.64a2.8 2.8 0 0 0-.354-1.036 2.9 2.9 0 0 0-.713-.818 3.2 3.2 0 0 0-.99-.529 3.7 3.7 0 0 0-1.209-.19M18.766 48h2.08l2.634-7.637h-1.79l-1.85 5.802h-.07l-1.846-5.802H16.13zM4.349 1.762a1.73 1.73 0 0 0-1.23.516c-.327.33-.51.78-.51 1.246V33.02H14.94c.5 0 .978.219 1.308.601l2.087 2.421h19.056V14.356h-8.949c-.922 0-1.806-.37-2.459-1.032a3.55 3.55 0 0 1-1.018-2.493v-9.07zM15.4 15c.11 0 .2.09.2.2v.45h7.8v-.45a.2.2 0 0 1 .2-.2h2.2c.11 0 .2.09.2.2v2.2a.2.2 0 0 1-.2.2h-.45v7.8h.45a.2.2 0 0 1 .2.2v2.2a.2.2 0 0 1-.2.2h-2.2a.2.2 0 0 1-.2-.2v-.45h-7.8v.45a.2.2 0 0 1-.2.2h-2.2a.2.2 0 0 1-.2-.2v-2.2c0-.11.09-.2.2-.2h.45v-7.8h-.45a.2.2 0 0 1-.2-.2v-2.2c0-.11.09-.2.2-.2zm.2 2.4a.2.2 0 0 1-.2.2h-.45v7.8h.45a.2.2 0 0 1 .2.2v.45h7.8v-.45a.2.2 0 0 1 .2-.2h.45v-7.8h-.45a.2.2 0 0 1-.2-.2v-.45h-7.8z"
+}));
+
 const SvgPdf = ({
   title,
   titleId,
@@ -1719,9 +1810,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$d = ".file-module_small-file-component__nlpcW>svg{max-height:77%!important}.file-module_file-label__uscgT{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-module_tooltip__FjCUU{background-color:#333;border-radius:4px;color:#fff;font-size:14px;pointer-events:none;position:fixed;visibility:hidden;white-space:nowrap;z-index:1000}";
-var styles$b = {"small-file-component":"file-module_small-file-component__nlpcW","file-label":"file-module_file-label__uscgT","tooltip":"file-module_tooltip__FjCUU"};
-styleInject(css_248z$d);
+var css_248z$c = ".file-module_small-file-component__nlpcW>svg{max-height:77%!important}";
+var styles$b = {"small-file-component":"file-module_small-file-component__nlpcW"};
+styleInject(css_248z$c);
 
 // eslint-disable-next-line react/display-name
 const File = /*#__PURE__*/forwardRef(({
@@ -1729,7 +1820,6 @@ const File = /*#__PURE__*/forwardRef(({
   size,
   name,
   color,
-  label,
   style,
   weight,
   family,
@@ -1749,10 +1839,13 @@ const File = /*#__PURE__*/forwardRef(({
   errorStyle,
   errorWeight,
   errorFamily,
+  label,
   labelSize,
+  labelColor,
   labelStyle,
   labelWeight,
   labelFamily,
+  useLabelTooltip,
   labelTooltipColor,
   labelTooltipPadding,
   labelTooltipFontSize,
@@ -1762,7 +1855,6 @@ const File = /*#__PURE__*/forwardRef(({
   labelTooltipBorderRadius,
   labelTooltipBackgroundColor,
   removeFile,
-  labelColor,
   errorColor,
   filesArray,
   componentId,
@@ -1777,6 +1869,7 @@ const File = /*#__PURE__*/forwardRef(({
   maxSizeError,
   progressColor,
   noChoosenFile,
+  iconSvg,
   iconPdf,
   iconDoc,
   iconPng,
@@ -1830,6 +1923,7 @@ const File = /*#__PURE__*/forwardRef(({
   maxCHoosenLengthErrorHideTime,
   textAlignLeftInSmallComponent,
   showPreviewIconInSmallComponent,
+  extentionsTextColor,
   maxSize = 10,
   preview = true,
   timeForRemoveError = 5000,
@@ -1837,11 +1931,11 @@ const File = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const inpRef = useRef(null);
   const labelRef = useRef(null);
-  const parentlRef = useRef(null);
+  const parentRef = useRef(null);
   const memoizedItems = useMemo(() => filesArray, [filesArray]);
   const [error, setError] = useState('');
-  const [isHover, setIsHover] = useState(false);
   const [removeID, setRemoveID] = useState('');
+  const [isHover, setIsHover] = useState(false);
   const [classProps, setClassProps] = useState({});
   const [singleFile, setSingleFile] = useState(null);
   const [configStyles, setConfigStyles] = useState({});
@@ -1891,7 +1985,7 @@ const File = /*#__PURE__*/forwardRef(({
         for (let ix = 0; ix < file.length; ix++) {
           if (file[ix]) {
             if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-              if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword')) {
+              if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword') || fileExtensions.includes('svg') && file[ix].type.split('/')[1] === 'svg+xml') {
                 if (file[ix].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
                   change({
                     id: '',
@@ -1927,6 +2021,15 @@ const File = /*#__PURE__*/forwardRef(({
                       check: formatError ?? configStyles.FILE.error.format
                     });
                   });
+                } else if (file[ix].type === 'image/svg+xml') {
+                  change({
+                    id: '',
+                    check: '',
+                    status: '',
+                    file: file[ix],
+                    uuid: v4()
+                  });
+                  setImage('svg');
                 } else {
                   change({
                     id: '',
@@ -1957,7 +2060,7 @@ const File = /*#__PURE__*/forwardRef(({
       for (let ix = 0; ix < file.length; ix++) {
         if (file[ix]) {
           if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-            if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword')) {
+            if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif') || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[ix].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[ix].type.split('/')[1] === 'msword') || fileExtensions.includes('svg') && file[ix].type.split('/')[1] === 'svg+xml') {
               if (file[ix].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
                 change({
                   id: '',
@@ -1993,6 +2096,15 @@ const File = /*#__PURE__*/forwardRef(({
                     check: formatError ?? configStyles.FILE.error.format
                   });
                 });
+              } else if (file[ix].type === 'image/svg+xml') {
+                change({
+                  id: '',
+                  check: '',
+                  status: '',
+                  file: file[ix],
+                  uuid: v4()
+                });
+                setImage('svg');
               } else {
                 change({
                   id: '',
@@ -2032,7 +2144,7 @@ const File = /*#__PURE__*/forwardRef(({
     } else {
       if (file[0]) {
         if (file[0].size <= maxSize * Math.pow(2, 20)) {
-          if (fileExtensions.includes(file[0].type.split('/')[1]) || (fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[0].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[0].type.split('/')[1] === 'msword')) {
+          if (fileExtensions.includes(file[0].type.split('/')[1]) || (fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) || (fileExtensions.includes('doc') || fileExtensions.includes('docx')) && (file[0].type.split('/')[1] === 'vnd.openxmlformats-officedocument.wordprocessingml.document' || file[0].type.split('/')[1] === 'msword') || fileExtensions.includes('svg') && file[0].type.split('/')[1] === 'svg+xml') {
             setError('');
             if (file[0].type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document') {
               setImage('docx');
@@ -2076,7 +2188,7 @@ const File = /*#__PURE__*/forwardRef(({
     }
   };
   const handleClick = () => {
-    if (!image && !singleFile) {
+    if (!image && !singleFile || multiple) {
       inpRef.current.files = null;
       inpRef.current.value = null;
       inpRef.current.click();
@@ -2118,7 +2230,7 @@ const File = /*#__PURE__*/forwardRef(({
     event.preventDefault();
     setRemoveID(() => v4());
     if (labelRef.current) {
-      const parentElem = parentlRef.current.getBoundingClientRect();
+      const parentElem = parentRef.current.getBoundingClientRect();
       const rect = labelRef.current.getBoundingClientRect();
       const top = rect.top;
       const left = rect.left;
@@ -2252,7 +2364,7 @@ const File = /*#__PURE__*/forwardRef(({
     };
   }, []);
   return configStyles.FILE && /*#__PURE__*/React__default.createElement("div", {
-    ref: parentlRef,
+    ref: parentRef,
     style: {
       width: '100%',
       maxWidth: maxWidth ?? configStyles.FILE.maxWidth
@@ -2275,17 +2387,19 @@ const File = /*#__PURE__*/forwardRef(({
     }
   }, /*#__PURE__*/React__default.createElement("label", {
     ref: labelRef,
-    className: styles$b['file-label'],
     style: {
       width: '100%',
       color: labelColor ?? configStyles.FILE.label.color,
       fontSize: labelSize ?? configStyles.FILE.label.font.size,
       fontStyle: labelStyle ?? configStyles.FILE.label.font.style,
       fontWeight: labelWeight ?? configStyles.FILE.label.font.weight,
-      fontFamily: labelFamily ?? configStyles.FILE.label.font.family
+      fontFamily: labelFamily ?? configStyles.FILE.label.font.family,
+      whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) ? 'ellipsis' : ''
     },
-    onMouseEnter: handleLabelMouseEnter,
-    onMouseLeave: handleLabelMouseLeave
+    onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) ? handleLabelMouseEnter : _ => _,
+    onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) ? handleLabelMouseLeave : _ => _
   }, label), required && /*#__PURE__*/React__default.createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default.createElement(SvgRequired, null))), deleteComponent && /*#__PURE__*/React__default.createElement("span", {
     style: {
       cursor: 'pointer'
@@ -2335,7 +2449,7 @@ const File = /*#__PURE__*/forwardRef(({
       fontFamily: family ?? configStyles.FILE.font.family,
       fontWeight: weight ?? configStyles.FILE.font.weight
     }
-  }, !multiple && image && preview ? image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : /*#__PURE__*/React__default.createElement("img", {
+  }, !multiple && image && preview ? image === 'svg' ? iconSvg ? iconSvg : configStyles.FILE.icon.svg ? configStyles.FILE.icon.svg : /*#__PURE__*/React__default.createElement(SvgSvg, null) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : /*#__PURE__*/React__default.createElement("img", {
     src: image,
     style: {
       display: 'block',
@@ -2361,7 +2475,8 @@ const File = /*#__PURE__*/forwardRef(({
   }, /*#__PURE__*/React__default.createElement("p", {
     style: {
       margin: '0px',
-      padding: '0px 10px'
+      padding: '0px 10px',
+      color: extentionsTextColor ?? configStyles.FILE.extentionsTextColor
     }
   }, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: styles$b['small-file-component'],
@@ -2386,7 +2501,7 @@ const File = /*#__PURE__*/forwardRef(({
     hoverColor: uploadBtnHoverColor ?? configStyles.FILE.uploadBtn.colors.hover,
     backgroundColor: uploadBtnBackgroundColor ?? configStyles.FILE.uploadBtn.colors.background,
     backgroundHoverColor: uploadBtnBackgroundColorHover ?? configStyles.FILE.uploadBtn.colors.backgroundHover
-  }) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : singleFile[0].type === 'image/jpeg' ? iconJpeg ? iconJpeg : configStyles.FILE.icon.jpeg ? configStyles.FILE.icon.jpeg : /*#__PURE__*/React__default.createElement(SvgListItemJpeg, null) : singleFile[0].type === 'image/png' ? iconPng ? iconPng : configStyles.FILE.icon.png ? configStyles.FILE.icon.png : /*#__PURE__*/React__default.createElement(SvgListItemPng, null) : singleFile[0].type === 'image/jpg' ? iconJpeg ? iconJpg : configStyles.FILE.icon.jpg ? configStyles.FILE.icon.jpg : /*#__PURE__*/React__default.createElement(SvgListItemJpg, null) : '' : /*#__PURE__*/React__default.createElement(Button, {
+  }) : image === 'svg' ? iconSvg ? iconSvg : configStyles.FILE.icon.svg ? configStyles.FILE.icon.svg : /*#__PURE__*/React__default.createElement(SvgSvg, null) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : singleFile[0].type === 'image/jpeg' ? iconJpeg ? iconJpeg : configStyles.FILE.icon.jpeg ? configStyles.FILE.icon.jpeg : /*#__PURE__*/React__default.createElement(SvgListItemJpeg, null) : singleFile[0].type === 'image/png' ? iconPng ? iconPng : configStyles.FILE.icon.png ? configStyles.FILE.icon.png : /*#__PURE__*/React__default.createElement(SvgListItemPng, null) : singleFile[0].type === 'image/jpg' ? iconJpeg ? iconJpg : configStyles.FILE.icon.jpg ? configStyles.FILE.icon.jpg : /*#__PURE__*/React__default.createElement(SvgListItemJpg, null) : '' : /*#__PURE__*/React__default.createElement(Button, {
     contentWidth: true,
     onClick: _ => _,
     font: uploadBtnFont ?? configStyles.FILE.uploadBtn.font.family,
@@ -2402,12 +2517,14 @@ const File = /*#__PURE__*/forwardRef(({
   }), /*#__PURE__*/React__default.createElement("p", {
     style: {
       margin: '0px',
-      marginLeft: '5px',
-      overflow: 'hidden',
-      whiteSpace: 'nowrap',
-      textOverflow: 'ellipsis'
+      padding: '0px 10px',
+      color: extentionsTextColor ?? configStyles.FILE.extentionsTextColor
+    }
+  }, singleFile && singleFile[`${0}`] ? singleFile[`${0}`].name : /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      color: color ?? configStyles.FILE.color
     }
-  }, singleFile && singleFile[`${0}`] ? singleFile[`${0}`].name : /*#__PURE__*/React__default.createElement("span", null, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default.createElement("div", {
+  }, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -2450,6 +2567,7 @@ const File = /*#__PURE__*/forwardRef(({
       status: item.status,
       size: item?.file?.size,
       name: item?.file?.name,
+      iconSvg: iconSvg ?? configStyles.FILE.icon.svg,
       iconPdf: iconPdf ?? configStyles.FILE.icon.pdf,
       iconDoc: iconDoc ?? configStyles.FILE.icon.doc,
       iconPng: iconPng ?? configStyles.FILE.icon.png,
@@ -2514,6 +2632,7 @@ File.propTypes = {
   labelWeight: PropTypes.string,
   labelFamily: PropTypes.string,
   labelColor: PropTypes.string,
+  useLabelTooltip: PropTypes.bool,
   labelTooltipColor: PropTypes.string,
   labelTooltipPadding: PropTypes.string,
   labelTooltipFontSize: PropTypes.string,
@@ -2537,6 +2656,7 @@ File.propTypes = {
   progressColor: PropTypes.string,
   deleteComponent: PropTypes.bool,
   removeComponent: PropTypes.func,
+  iconSvg: PropTypes.element,
   iconPdf: PropTypes.element,
   iconDoc: PropTypes.element,
   iconPng: PropTypes.element,
@@ -2590,7 +2710,8 @@ File.propTypes = {
   filesArray: PropTypes.arrayOf(PropTypes.object),
   textAlignLeftInSmallComponent: PropTypes.bool,
   showPreviewIconInSmallComponent: PropTypes.bool,
-  fileExtensions: PropTypes.arrayOf(PropTypes.string)
+  fileExtensions: PropTypes.arrayOf(PropTypes.string),
+  extentionsTextColor: PropTypes.string
 };
 
 const hasOwnerProperty = (object, property) => {
@@ -2627,11 +2748,7 @@ const handleUtilsCheckTypeTel = (val, prevVal) => {
   return val;
 };
 const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize, numberMaxLength, cardNumber) => {
-  if (maxLength && maxLength > 0) {
-    if (val.length > maxLength) {
-      val = val.substr(0, maxLength);
-    }
-  } else {
+  {
     const regNum = floatToFix && floatToFix >= 0 ? /^\d+(\.|\․|\.|\,)?(\d+)?$/ : /^\d+$/;
     if (cardNumber) {
       if (val.length > 19 && !val.includes('.')) {
@@ -2854,9 +2971,9 @@ SingleCheckbox.propTypes = {
   ignoreDisabledForChecked: PropTypes.bool
 };
 
-var css_248z$c = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{align-items:center;cursor:pointer;display:flex;margin:0 0 8px;min-height:38px;white-space:wrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}.table-module_no-tabel-data__6xp3N{align-items:center;display:flex;height:200px;justify-content:center;width:100%}";
+var css_248z$b = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{align-items:center;cursor:pointer;display:flex;margin:0 0 8px;min-height:38px;white-space:wrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}.table-module_no-tabel-data__6xp3N{align-items:center;display:flex;height:200px;justify-content:center;width:100%}";
 var styles$a = {"sorting-arrows":"table-module_sorting-arrows__BaN-G","td-span":"table-module_td-span__XHo6k","list-text":"table-module_list-text__kmKIq","dots-option-item":"table-module_dots-option-item__jNOxO","no-tabel-data":"table-module_no-tabel-data__6xp3N"};
-styleInject(css_248z$c);
+styleInject(css_248z$b);
 
 /* eslint-disable no-prototype-builtins */
 const TH = ({
@@ -2955,6 +3072,7 @@ const TD = ({
   handleCheckedBody,
   openListFontWeight,
   openListFontFamily,
+  handleClickOnRowTd,
   tableColumnMinWidth,
   tableColumnMaxWidth,
   handleBodyActionClick,
@@ -3045,7 +3163,8 @@ const TD = ({
       borderBottomLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
       borderTopRightRadius: rowItem && innerIndex === row.length - 1 ? rowRadius : '0px',
       borderBottomRightRadius: rowItem && innerIndex === row.length - 1 ? rowRadius : '0px'
-    }
+    },
+    onClick: e => handleClickOnRowTd(e, row, item, index, innerIndex)
   }, Array.isArray(item) ? item.length > 0 ? item.map((newItem, newIndex) => {
     if (newItem && !Array.isArray(newItem) && typeof newItem === 'object') {
       return /*#__PURE__*/React__default.createElement("span", {
@@ -3364,7 +3483,8 @@ const Table = ({
   tableBorderColor,
   collapseFullRow,
   openArrow,
-  closeArrow
+  closeArrow,
+  clickableRowColumnTd
 }) => {
   const itemRefs = useRef({});
   const headerRef = useRef(null);
@@ -3939,6 +4059,20 @@ const Table = ({
       return value;
     });
   };
+  const handleClickOnRowTd = (e, row, item, index, innerIndex) => {
+    e.stopPropagation();
+    if (clickableRowColumnTd) {
+      const actionData = {
+        from: 'body',
+        item,
+        id: item.id,
+        index,
+        row,
+        innerIndex
+      };
+      getData(actionData);
+    }
+  };
   useEffect(() => {
     if (checkDrag != null) {
       const draggableArray = body && body.length > 0 ? body.map((item, index) => {
@@ -4155,6 +4289,7 @@ const Table = ({
         openListFontWeight: openListFontWeight ?? configStyles.TABLE.openList.font.weight,
         openListFontFamily: openListFontFamily ?? configStyles.TABLE.openList.font.family,
         handleCheckedBody: handleCheckedBody,
+        handleClickOnRowTd: handleClickOnRowTd,
         handleBodyActionClick: handleBodyActionClick,
         handleMoreOptionsClick: handleMoreOptionsClick,
         handleContentListClick: handleContentListClick,
@@ -4272,12 +4407,13 @@ Table.propTypes = {
   tableBorder: PropTypes.string,
   tableBorderColor: PropTypes.string,
   openArrow: PropTypes.element,
-  closeArrow: PropTypes.element
+  closeArrow: PropTypes.element,
+  clickableRowColumnTd: PropTypes.bool
 };
 
-var css_248z$b = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
-var styles$9 = {"animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
-styleInject(css_248z$b);
+var css_248z$a = ".modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
+var styles$9 = {"animation__modal":"modal-module_animation__modal__3mt48"};
+styleInject(css_248z$a);
 
 const SvgNext = ({
   title,
@@ -4397,9 +4533,12 @@ const Modal = ({
   prevIcon,
   nextIcon,
   closeIcon,
+  closeIconFix,
   showCloseIcon,
   closeIconClass,
   closeSlideIcon,
+  closeIconTopPosition,
+  closeIconRightPosition,
   selected,
   children,
   minWidth,
@@ -4586,6 +4725,7 @@ const Modal = ({
     }
   }, type === 'content' && /*#__PURE__*/React__default.createElement("div", {
     style: {
+      position: closeIconFix ? 'relative' : 'unset',
       width: '100%',
       minWidth: '0',
       display: 'flex',
@@ -4624,6 +4764,9 @@ const Modal = ({
   }, headerText), showCloseIcon ? /*#__PURE__*/React__default.createElement("div", {
     onClick: () => setShow(false),
     style: {
+      position: closeIconFix ? 'absolute' : 'unset',
+      top: closeIconTopPosition ?? configStyles.MODAL?.closeIcon?.top,
+      right: closeIconRightPosition ?? configStyles.MODAL?.closeIcon?.right,
       display: 'flex',
       minWidth: '14px',
       minHeight: '14px',
@@ -4631,7 +4774,7 @@ const Modal = ({
       width: 'fit-content',
       alignItems: 'center',
       alignSelf: 'flex-end',
-      height: '100%',
+      height: closeIconFix ? 'fit-content' : '100%',
       justifyContent: 'center'
     },
     className: closeIconClass ? closeIconClass : configStyles.MODAL.icon.className
@@ -4783,9 +4926,12 @@ Modal.propTypes = {
   prevIcon: PropTypes.element,
   nextIcon: PropTypes.element,
   closeIcon: PropTypes.element,
+  closeIconFix: PropTypes.bool,
   showCloseIcon: PropTypes.bool,
   closeIconClass: PropTypes.string,
   closeSlideIcon: PropTypes.element,
+  closeIconTopPosition: PropTypes.string,
+  closeIconRightPosition: PropTypes.string,
   headerText: PropTypes.string,
   headerSize: PropTypes.string,
   headerStyle: PropTypes.string,
@@ -5143,9 +5289,9 @@ const NumberInput = ({
   });
 };
 
-var css_248z$a = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
-var styles$8 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
-styleInject(css_248z$a);
+var css_248z$9 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var styles$8 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","inp-num":"input-module_inp-num__vH7HL"};
+styleInject(css_248z$9);
 
 const InputTypes = {
   TEL: 'tel',
@@ -5166,7 +5312,6 @@ const Input = ({
   name,
   style,
   color,
-  label,
   value,
   width,
   regexp,
@@ -5176,14 +5321,12 @@ const Input = ({
   weight,
   family,
   padding,
-  tooltip,
   telClass,
   leftIcon,
   required,
   disabled,
   errorDots,
   errorIcon,
-  labelDots,
   iconWidth,
   rightIcon,
   className,
@@ -5191,30 +5334,22 @@ const Input = ({
   boxShadow,
   errorLeft,
   errorSize,
-  labelSize,
   maxLength,
-  labelIcon,
-  labelStyle,
   floatToFix,
   minNumSize,
   maxNumSize,
-  labelColor,
   errorColor,
   withoutDot,
   errorStyle,
   iconPadding,
-  labelAction,
   errorAction,
   placeholder,
   errorZindex,
-  labelWeight,
   errorWeight,
   errorFamily,
   phoneDisplay,
   errorMessage,
   autoComplete,
-  labelDisplay,
-  labelIconSide,
   showLabelIcon,
   errorIconSide,
   showErrorIcon,
@@ -5222,17 +5357,13 @@ const Input = ({
   errorBoxShadow,
   boxShadowHover,
   errorClassName,
-  labelIconMargin,
-  labelFontFamily,
   phoneAlignItems,
   errorLineHeight,
-  labelLineHeight,
   numberMaxLength,
   backgroundColor,
   errorIconMargin,
   placeholderColor,
   withZero = false,
-  labelMarginBottom,
   regexpErrorMessage,
   phoneJustifyContent,
   telBorderRightWidth,
@@ -5241,13 +5372,40 @@ const Input = ({
   fireInputInsideError,
   backgroundDisableColor,
   telBorderRightColorHover,
+  label,
+  labelSize,
+  labelIcon,
+  labelStyle,
+  labelColor,
+  labelAction,
+  labelWeight,
+  labelDisplay,
+  labelIconSide,
+  labelIconMargin,
+  labelFontFamily,
+  labelLineHeight,
+  labelMarginBottom,
+  iconRequired,
+  useLabelTooltip,
+  labelTooltipColor,
+  labelTooltipPadding,
+  labelTooltipFontSize,
+  labelTooltipFontStyle,
+  labelTooltipFontFamily,
+  labelTooltipFontWeight,
+  labelTooltipBorderRadius,
+  labelTooltipBackgroundColor,
   cardNumber,
   type = 'text'
 }) => {
+  const labelRef = useRef(null);
+  const parentRef = useRef(null);
   const [show, setShow] = useState(false);
+  const [removeID, setRemoveID] = useState('');
   const [isHover, setIsHover] = useState(false);
   const [classProps, setClassProps] = useState({});
   const [innerValue, setInnerValue] = useState('');
+  const [tooltipElem, setTooltipElem] = useState(null);
   const [configStyles, setConfigStyles] = useState({});
   const [innerErrorIcon, setInnerErrorIcon] = useState('');
   const [innerLabelIcon, setInnerLabelIcon] = useState('');
@@ -5298,6 +5456,79 @@ const Input = ({
   const handleShowPass = () => {
     setShow(!show);
   };
+  const getRenderedTextWidth = element => {
+    const clone = element.cloneNode(true);
+    clone.style.width = 'fit-content';
+    document.body.appendChild(clone);
+    const width = clone.offsetWidth;
+    document.body.removeChild(clone);
+    return width;
+  };
+  const handleLabelMouseEnter = event => {
+    event.preventDefault();
+    setRemoveID(() => v4());
+    if (labelRef.current) {
+      const parentElem = parentRef.current.getBoundingClientRect();
+      const rect = labelRef.current.getBoundingClientRect();
+      const top = rect.top;
+      const left = rect.left;
+      const height = rect.height;
+      const elementWidth = rect.width;
+      const x = event.clientX - rect.left;
+      const parentWidth = parentElem.width;
+      const textWidth = getRenderedTextWidth(labelRef.current);
+      if (textWidth > Math.ceil(elementWidth)) {
+        const newTooltipElem = document.createElement('div');
+        newTooltipElem.id = `fake_id_for_remove_dom${removeID}`;
+        const newTootltipTextElem = document.createElement('p');
+        const newTooltipChildElem = document.createElement('div');
+        const newTooltipDecorElem = document.createElement('div');
+        newTooltipElem.style.position = 'fixed';
+        newTooltipElem.style.left = showLabelIcon && innerLabelIcon && innerLabelIconSide === 'left' ? left - 14 - (labelIconMargin ? labelIconMargin : configStyles.INPUT.label.iconMargin) + 'px' : left + 'px';
+        newTooltipElem.style.paddingTop = '20px';
+        newTooltipElem.style.height = 'fit-content';
+        newTooltipElem.style.boxSizing = 'border-box';
+        newTooltipElem.style.top = top + height + 'px';
+        newTooltipElem.style.width = parentWidth + 'px';
+        newTooltipChildElem.style.width = '100%';
+        newTooltipChildElem.style.position = 'relative';
+        newTooltipChildElem.style.height = 'fit-content';
+        newTooltipChildElem.style.boxSizing = 'border-box';
+        newTooltipChildElem.style.padding = labelTooltipPadding ?? configStyles.INPUT.label.tooltip.padding;
+        newTooltipChildElem.style.borderRadius = labelTooltipBorderRadius ?? configStyles.INPUT.label.tooltip.borderRadius;
+        newTooltipChildElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.INPUT.label.tooltip.backgroundColor;
+        newTooltipDecorElem.style.zIndex = -1;
+        newTooltipDecorElem.style.top = '-8px';
+        newTooltipDecorElem.style.width = '18px';
+        newTooltipDecorElem.style.height = '18px';
+        newTooltipDecorElem.style.rotate = '45deg';
+        newTooltipDecorElem.style.position = 'absolute';
+        newTooltipDecorElem.style.left = x > elementWidth / 2 ? 'calc(100% - 40px)' : '23px';
+        newTooltipDecorElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.INPUT.label.tooltip.backgroundColor;
+        newTootltipTextElem.innerText = label;
+        newTootltipTextElem.style.color = labelTooltipColor ?? configStyles.INPUT.label.tooltip.color;
+        newTootltipTextElem.style.fontSize = labelTooltipFontSize ?? configStyles.INPUT.label.tooltip.font.size;
+        newTootltipTextElem.style.fontStyle = labelTooltipFontStyle ?? configStyles.INPUT.label.tooltip.font.style;
+        newTootltipTextElem.style.fontFamily = labelTooltipFontFamily ?? configStyles.INPUT.label.tooltip.font.family;
+        newTootltipTextElem.style.fontWeight = labelTooltipFontWeight ?? configStyles.INPUT.label.tooltip.font.weight;
+        document.body.appendChild(newTooltipElem);
+        newTooltipElem.appendChild(newTooltipChildElem);
+        newTooltipChildElem.appendChild(newTooltipDecorElem);
+        newTooltipChildElem.appendChild(newTootltipTextElem);
+        setTooltipElem(() => newTooltipElem);
+      }
+    }
+  };
+  const handleLabelMouseLeave = () => {
+    const removableElem = document.getElementById(`fake_id_for_remove_dom${removeID}`);
+    if (removableElem) {
+      document.body.removeChild(removableElem);
+    }
+    if (tooltipElem) {
+      document.body.removeChild(tooltipElem);
+    }
+    setRemoveID(() => '');
+  };
   useEffect(() => {
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);
@@ -5344,25 +5575,18 @@ const Input = ({
     });
   }, []);
   return configStyles.INPUT && /*#__PURE__*/React__default.createElement("div", {
+    ref: parentRef,
     className: classProps
   }, /*#__PURE__*/React__default.createElement("style", null, `.tui-color-placeholder::placeholder {
                             color: ${placeholderColor ?? configStyles.INPUT.colors.placeholder};
-                        }`), label ? /*#__PURE__*/React__default.createElement("label", {
+                        }`), label && /*#__PURE__*/React__default.createElement("div", {
     style: {
+      display: 'flex',
       maxWidth: '100%',
-      color: labelColor ?? configStyles.INPUT.label.color,
-      fontSize: labelSize ?? configStyles.INPUT.label.font.size,
-      fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
-      display: labelDisplay ?? configStyles.INPUT.label.display,
-      fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
-      lineHeight: labelLineHeight ?? configStyles.INPUT.label.lineHeight,
-      marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom,
-      fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family,
-      whiteSpace: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'nowrap' : 'normal',
-      overflow: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'hidden' : 'visible',
-      textOverflow: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'ellipsis' : ''
-    },
-    title: label
+      width: 'fit-content',
+      columnGap: '4px',
+      justifyContent: 'flex-start'
+    }
   }, showLabelIcon && innerLabelIcon && innerLabelIconSide === 'left' ? /*#__PURE__*/React__default.createElement("img", {
     alt: "label icon",
     src: innerLabelIcon,
@@ -5373,7 +5597,24 @@ const Input = ({
       marginRight: labelIconMargin ?? configStyles.INPUT.label.iconMargin
     },
     onClick: labelAction ? () => labelAction() : _ => _
-  }) : '', label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null)), showLabelIcon && innerLabelIcon && innerLabelIconSide === 'right' ? /*#__PURE__*/React__default.createElement("img", {
+  }) : '', /*#__PURE__*/React__default.createElement("label", {
+    ref: labelRef,
+    style: {
+      color: labelColor ?? configStyles.INPUT.label.color,
+      fontSize: labelSize ?? configStyles.INPUT.label.font.size,
+      fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
+      display: labelDisplay ?? configStyles.INPUT.label.display,
+      fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
+      lineHeight: labelLineHeight ?? configStyles.INPUT.label.lineHeight,
+      marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom,
+      fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family,
+      whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) ? 'ellipsis' : ''
+    },
+    onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) ? handleLabelMouseEnter : _ => _,
+    onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) ? handleLabelMouseLeave : _ => _
+  }, label), required && /*#__PURE__*/React__default.createElement("sup", null, iconRequired ? iconRequired : configStyles.INPUT.icon.required ? configStyles.INPUT.icon.required : /*#__PURE__*/React__default.createElement(SvgRequired, null)), showLabelIcon && innerLabelIcon && innerLabelIconSide === 'right' ? /*#__PURE__*/React__default.createElement("img", {
     alt: "label icon",
     src: innerLabelIcon,
     style: {
@@ -5383,7 +5624,7 @@ const Input = ({
       marginLeft: labelIconMargin ?? configStyles.INPUT.label.iconMargin
     },
     onClick: labelAction ? () => labelAction() : _ => _
-  }) : '') : '', /*#__PURE__*/React__default.createElement("div", {
+  }) : ''), /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$8['input-content']}`,
     style: {
       width: width ?? configStyles.INPUT.width,
@@ -5481,7 +5722,7 @@ const Input = ({
       borderBottomRightRadius: radius ?? configStyles.INPUT.radius,
       backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
     }
-  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default.createElement(P
+  }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), innerErrorMessage ? /*#__PURE__*/React__default.createElement(P
   // animation={animation}
   , {
     style: {
@@ -5549,7 +5790,6 @@ Input.propTypes = {
   radius: PropTypes.string,
   padding: PropTypes.string,
   cardNumber: PropTypes.bool,
-  tooltip: PropTypes.element,
   withoutDot: PropTypes.bool,
   className: PropTypes.string,
   iconWidth: PropTypes.string,
@@ -5558,21 +5798,6 @@ Input.propTypes = {
   floatToFix: PropTypes.number,
   minNumSize: PropTypes.number,
   maxNumSize: PropTypes.number,
-  label: PropTypes.string,
-  labelDots: PropTypes.bool,
-  labelAction: PropTypes.func,
-  labelIcon: PropTypes.string,
-  labelSize: PropTypes.string,
-  labelColor: PropTypes.string,
-  labelStyle: PropTypes.string,
-  showLabelIcon: PropTypes.bool,
-  labelWeight: PropTypes.string,
-  labelDisplay: PropTypes.string,
-  labelIconSide: PropTypes.oneOf(Object.values(IconSides)),
-  labelLineHeight: PropTypes.string,
-  labelFontFamily: PropTypes.string,
-  labelIconMargin: PropTypes.string,
-  labelMarginBottom: PropTypes.string,
   borderRight: PropTypes.string,
   placeholder: PropTypes.string,
   placeholderColor: PropTypes.string,
@@ -5616,8 +5841,32 @@ Input.propTypes = {
   leftIcon: PropTypes.arrayOf(PropTypes.element),
   rightIcon: PropTypes.arrayOf(PropTypes.element),
   type: PropTypes.oneOf(Object.values(InputTypes)),
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object])
-};
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.object]),
+  iconRequired: PropTypes.element,
+  label: PropTypes.string,
+  labelAction: PropTypes.func,
+  labelIcon: PropTypes.string,
+  labelSize: PropTypes.string,
+  labelColor: PropTypes.string,
+  labelStyle: PropTypes.string,
+  showLabelIcon: PropTypes.bool,
+  labelWeight: PropTypes.string,
+  labelDisplay: PropTypes.string,
+  labelIconSide: PropTypes.oneOf(Object.values(IconSides)),
+  labelLineHeight: PropTypes.string,
+  labelFontFamily: PropTypes.string,
+  labelIconMargin: PropTypes.string,
+  labelMarginBottom: PropTypes.string,
+  useLabelTooltip: PropTypes.bool,
+  labelTooltipColor: PropTypes.string,
+  labelTooltipPadding: PropTypes.string,
+  labelTooltipFontSize: PropTypes.string,
+  labelTooltipFontStyle: PropTypes.string,
+  labelTooltipFontFamily: PropTypes.string,
+  labelTooltipFontWeight: PropTypes.string,
+  labelTooltipBorderRadius: PropTypes.string,
+  labelTooltipBackgroundColor: PropTypes.string
+};
 
 const RadioDirectionMode = {
   VERTICAL: 'vertical',
@@ -5828,9 +6077,9 @@ const SvgArrow = ({
   fill: fillColor ? fillColor : '#3C393E'
 }));
 
-var css_248z$9 = ".select-module_select-content__GCMDX{-webkit-appearance:none;display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;-webkit-appearance:none;display:flex;flex-direction:row;flex-wrap:nowrap}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:99999999999}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:fit-content;justify-content:center;max-height:30px;max-width:30px;min-height:14px;min-width:14px;width:fit-content}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_ellipsis__uNgol{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
-var styles$7 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L","ellipsis":"select-module_ellipsis__uNgol"};
-styleInject(css_248z$9);
+var css_248z$8 = ".select-module_select-content__GCMDX{-webkit-appearance:none;display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;-webkit-appearance:none;display:flex;flex-direction:row;flex-wrap:nowrap}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:99999999999}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:fit-content;justify-content:center;max-height:30px;max-width:30px;min-height:14px;min-width:14px;width:fit-content}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_ellipsis__uNgol{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
+var styles$7 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L","ellipsis":"select-module_ellipsis__uNgol"};
+styleInject(css_248z$8);
 
 const Select = ({
   dots,
@@ -5862,6 +6111,16 @@ const Select = ({
   labelFontFamily,
   labelMarginBottom,
   labelTextTransform,
+  iconRequired,
+  useLabelTooltip,
+  labelTooltipColor,
+  labelTooltipPadding,
+  labelTooltipFontSize,
+  labelTooltipFontStyle,
+  labelTooltipFontFamily,
+  labelTooltipFontWeight,
+  labelTooltipBorderRadius,
+  labelTooltipBackgroundColor,
   cursor,
   errorIcon,
   errorSize,
@@ -5903,13 +6162,18 @@ const Select = ({
   optionItemBackgroudColorHover,
   boxShadow,
   boxShadowHover,
-  insidePagination
+  insidePagination,
+  placeholderColor
 }) => {
-  const ref = useRef();
+  const ref = useRef(null);
+  const labelRef = useRef(null);
+  const parentRef = useRef(null);
   const [opened, setOpened] = useState(false);
+  const [removeID, setRemoveID] = useState('');
   const [isHover, setIsHover] = useState(false);
   const [classProps, setClassProps] = useState({});
   const [newSelected, setNewSelected] = useState([]);
+  const [tooltipElem, setTooltipElem] = useState(null);
   const [existOptions, setExistOptions] = useState([]);
   const [configStyles, setConfigStyles] = useState({});
   const handleOpenClose = () => {
@@ -5975,6 +6239,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(() => '');
+  };
   useEffect(() => {
     if (opened) {
       const checkIfClickedOutside = e => {
@@ -6029,12 +6366,22 @@ const Select = ({
     });
   }, []);
   return configStyles.SELECT && /*#__PURE__*/React__default.createElement("div", {
+    ref: parentRef,
     className: classProps,
     style: {
       position: 'relative',
       width: '100%'
     }
-  }, label ? /*#__PURE__*/React__default.createElement("label", {
+  }, label && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      maxWidth: '100%',
+      width: 'fit-content',
+      columnGap: '4px',
+      justifyContent: 'flex-start'
+    }
+  }, /*#__PURE__*/React__default.createElement("label", {
+    ref: labelRef,
     style: {
       color: labelColor ?? configStyles.SELECT.label.color,
       fontWeight: labelWeight ?? configStyles.SELECT.label.font.weight,
@@ -6044,9 +6391,14 @@ const Select = ({
       fontFamily: labelFontFamily ?? configStyles.SELECT.label.font.family,
       lineHeight: labelLineHeight ?? configStyles.SELECT.label.lineHeight,
       marginBottom: labelMarginBottom ?? configStyles.SELECT.label.marginBottom,
-      textTransform: labelTextTransform ?? configStyles.SELECT.label.textTransform
-    }
-  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default.createElement("div", {
+      textTransform: labelTextTransform ?? configStyles.SELECT.label.textTransform,
+      whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.SELECT.label.useTooltip) ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.SELECT.label.useTooltip) ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.SELECT.label.useTooltip) ? 'ellipsis' : ''
+    },
+    onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.SELECT.label.useTooltip) ? handleLabelMouseEnter : _ => _,
+    onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.SELECT.label.useTooltip) ? handleLabelMouseLeave : _ => _
+  }, label), required && /*#__PURE__*/React__default.createElement("sup", null, iconRequired ? iconRequired : configStyles.SELECT.icon.required ? configStyles.SELECT.icon.required : /*#__PURE__*/React__default.createElement(SvgRequired, null))), /*#__PURE__*/React__default.createElement("div", {
     ref: ref
   }, /*#__PURE__*/React__default.createElement("div", {
     className: styles$7['select-content']
@@ -6072,12 +6424,12 @@ const Select = ({
     onMouseEnter: disabled ? _ => _ : () => handleMouseEnter(),
     onMouseLeave: disabled ? _ => _ : () => handleMouseLeave()
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: `${styles$7['select-content-top-text']}`,
+    className: "select-content-top-text",
     style: {
       whiteSpace: disabled ? 'pre-wrap' : 'nowrap',
       overflow: insidePagination ? 'visible' : 'hidden',
       textOverflow: insidePagination ? 'initial' : 'ellipsis',
-      color: isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selected.colors.hover : selectedColor ? selectedColor : configStyles.SELECT.selected.color
+      color: placeholderColor && !newSelected.length ? placeholderColor : isHover ? selectedHoverColor ? selectedHoverColor : configStyles.SELECT.selected.colors.hover : selectedColor ? selectedColor : configStyles.SELECT.selected.color
     }
   }, !multiple && newSelected && newSelected[0] && newSelected[0][keyNames.name] ? newSelected[0][keyNames.name] : newSelected && newSelected.length > 0 ? newSelected.map((_, index) => {
     if (newSelected[index][keyNames.name]) {
@@ -6223,9 +6575,20 @@ Select.propTypes = {
   optionItemMarginBottom: PropTypes.string,
   optionItemBackgroudColor: PropTypes.string,
   optionItemBackgroudColorHover: PropTypes.string,
+  iconRequired: PropTypes.element,
+  useLabelTooltip: PropTypes.bool,
+  labelTooltipColor: PropTypes.string,
+  labelTooltipPadding: PropTypes.string,
+  labelTooltipFontSize: PropTypes.string,
+  labelTooltipFontStyle: PropTypes.string,
+  labelTooltipFontFamily: PropTypes.string,
+  labelTooltipFontWeight: PropTypes.string,
+  labelTooltipBorderRadius: PropTypes.string,
+  labelTooltipBackgroundColor: PropTypes.string,
   boxShadow: PropTypes.string,
   boxShadowHover: PropTypes.string,
-  insidePagination: PropTypes.bool
+  insidePagination: PropTypes.bool,
+  placeholderColor: PropTypes.string
 };
 
 const SvgToasterInfo = ({
@@ -6347,9 +6710,9 @@ const SvgToasterSuccess = ({
   fill: fillColor ? fillColor : '#0DA574'
 }));
 
-var css_248z$8 = "#toaster-module_top-left__q0LcN{left:0;top:1em}#toaster-module_top-right__f-AFL{right:0;top:1em}#toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}#toaster-module_bottom-left__b-YHI{bottom:1em;left:0}#toaster-module_bottom-right__g9ACP{bottom:1em;right:0}#toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_top-left__q0LcN{left:0;top:1em}.toaster-module_top-right__f-AFL{right:0;top:1em}.toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_bottom-left__b-YHI{bottom:1em;left:0}.toaster-module_bottom-right__g9ACP{bottom:1em;right:0}.toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_notify-block__pRnEB{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.toaster-module_bounce-in-right__shR2D{-webkit-animation-name:toaster-module_bounceInRight__rSk5p;animation-name:toaster-module_bounceInRight__rSk5p}.toaster-module_bounce-out-right__48pyA{-webkit-animation-name:toaster-module_bounceOutRight__bmFGS;animation-name:toaster-module_bounceOutRight__bmFGS}.toaster-module_notify-desc__bcWe2,.toaster-module_notify-title__8lFLy{overflow:hidden;text-overflow:ellipsis}.toaster-module_notify-desc__bcWe2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box}@keyframes toaster-module_bounceInRight__rSk5p{0%{opacity:0;right:-100%}60%{opacity:1;right:40px}75%{right:0}90%{right:30px}to{right:20px}}@keyframes toaster-module_bounceOutRight__bmFGS{0%{opacity:1;right:20px}60%{opacity:1;right:60px}to{opacity:0;right:-100%}}.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeft__to59v;animation-name:toaster-module_bounceInLeft__to59v}.toaster-module_bounce-out-left__fDOZw{-webkit-animation-name:toaster-module_bounceOutLeft__k5QgO;animation-name:toaster-module_bounceOutLeft__k5QgO}@keyframes toaster-module_bounceInLeft__to59v{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:20px}}@keyframes toaster-module_bounceInLeftMobile__CA2dc{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:0}}@keyframes toaster-module_bounceOutLeft__k5QgO{0%{left:20px;opacity:1}60%{left:60px;opacity:1}to{left:-100%;opacity:0}}@media(max-width:480px){.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeftMobile__CA2dc;animation-name:toaster-module_bounceInLeftMobile__CA2dc}}";
+var css_248z$7 = "#toaster-module_top-left__q0LcN{left:0;top:1em}#toaster-module_top-right__f-AFL{right:0;top:1em}#toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}#toaster-module_bottom-left__b-YHI{bottom:1em;left:0}#toaster-module_bottom-right__g9ACP{bottom:1em;right:0}#toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_top-left__q0LcN{left:0;top:1em}.toaster-module_top-right__f-AFL{right:0;top:1em}.toaster-module_top-center__eVRbc{left:50%;top:1em;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_bottom-left__b-YHI{bottom:1em;left:0}.toaster-module_bottom-right__g9ACP{bottom:1em;right:0}.toaster-module_bottom-center__4KcFe{bottom:1em;left:50%;transform:translateX(-50%);-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%)}.toaster-module_notify-block__pRnEB{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.toaster-module_bounce-in-right__shR2D{-webkit-animation-name:toaster-module_bounceInRight__rSk5p;animation-name:toaster-module_bounceInRight__rSk5p}.toaster-module_bounce-out-right__48pyA{-webkit-animation-name:toaster-module_bounceOutRight__bmFGS;animation-name:toaster-module_bounceOutRight__bmFGS}.toaster-module_notify-desc__bcWe2,.toaster-module_notify-title__8lFLy{overflow:hidden;text-overflow:ellipsis}.toaster-module_notify-desc__bcWe2{-webkit-box-orient:vertical;-webkit-line-clamp:2;display:-webkit-box}@keyframes toaster-module_bounceInRight__rSk5p{0%{opacity:0;right:-100%}60%{opacity:1;right:40px}75%{right:0}90%{right:30px}to{right:20px}}@keyframes toaster-module_bounceOutRight__bmFGS{0%{opacity:1;right:20px}60%{opacity:1;right:60px}to{opacity:0;right:-100%}}.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeft__to59v;animation-name:toaster-module_bounceInLeft__to59v}.toaster-module_bounce-out-left__fDOZw{-webkit-animation-name:toaster-module_bounceOutLeft__k5QgO;animation-name:toaster-module_bounceOutLeft__k5QgO}@keyframes toaster-module_bounceInLeft__to59v{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:20px}}@keyframes toaster-module_bounceInLeftMobile__CA2dc{0%{left:-100%;opacity:0}60%{left:40px;opacity:1}75%{left:0}90%{left:30px}to{left:0}}@keyframes toaster-module_bounceOutLeft__k5QgO{0%{left:20px;opacity:1}60%{left:60px;opacity:1}to{left:-100%;opacity:0}}@media(max-width:480px){.toaster-module_bounce-in-left__xoF-M{-webkit-animation-name:toaster-module_bounceInLeftMobile__CA2dc;animation-name:toaster-module_bounceInLeftMobile__CA2dc}}";
 var styles$6 = {"top-left":"toaster-module_top-left__q0LcN","top-right":"toaster-module_top-right__f-AFL","top-center":"toaster-module_top-center__eVRbc","bottom-left":"toaster-module_bottom-left__b-YHI","bottom-right":"toaster-module_bottom-right__g9ACP","bottom-center":"toaster-module_bottom-center__4KcFe","notify-block":"toaster-module_notify-block__pRnEB","bounce-in-right":"toaster-module_bounce-in-right__shR2D","bounceInRight":"toaster-module_bounceInRight__rSk5p","bounce-out-right":"toaster-module_bounce-out-right__48pyA","bounceOutRight":"toaster-module_bounceOutRight__bmFGS","notify-title":"toaster-module_notify-title__8lFLy","notify-desc":"toaster-module_notify-desc__bcWe2","bounce-in-left":"toaster-module_bounce-in-left__xoF-M","bounceInLeft":"toaster-module_bounceInLeft__to59v","bounce-out-left":"toaster-module_bounce-out-left__fDOZw","bounceOutLeft":"toaster-module_bounceOutLeft__k5QgO","bounceInLeftMobile":"toaster-module_bounceInLeftMobile__CA2dc"};
-styleInject(css_248z$8);
+styleInject(css_248z$7);
 
 const ToasterType = {
   info: 'info',
@@ -6749,9 +7112,9 @@ const SvgTooltip = ({
   fill: fillColor ? fillColor : '#D1D1D1'
 }));
 
-var css_248z$7 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{box-sizing:border-box;padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
+var css_248z$6 = ".tooltip-module_tooltip-block__v8U9u{align-items:center;display:flex;justify-content:center;position:relative}.tooltip-module_tooltip__emM6A{box-sizing:border-box;padding:10px;position:absolute;z-index:1}.tooltip-module_tooltip-rel__to9gq{align-items:center;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;-ms-border-radius:5px;-o-border-radius:5px;display:flex;height:auto;justify-content:center;min-height:10px;min-width:30px;position:relative;width:auto}.tooltip-module_tooltip-decor__qvt7t{border-radius:2px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;height:10px;position:absolute;transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);width:10px;z-index:-1}";
 var styles$5 = {"tooltip-block":"tooltip-module_tooltip-block__v8U9u","tooltip":"tooltip-module_tooltip__emM6A","tooltip-rel":"tooltip-module_tooltip-rel__to9gq","tooltip-decor":"tooltip-module_tooltip-decor__qvt7t"};
-styleInject(css_248z$7);
+styleInject(css_248z$6);
 
 const TooltipDirections = {
   TOP: 'top',
@@ -6955,9 +7318,9 @@ const SvgCaptchaArrowDown = ({
   fill: fillColor ? fillColor : '#00236A'
 }));
 
-var css_248z$6 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
+var css_248z$5 = ".captcha-module_start-point__LkOqy:after{background-color:#d1d1d1;border:2px solid #fff;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;-ms-border-radius:6px;-o-border-radius:6px;content:\"\";height:10px;left:0;position:absolute;top:7.5px;width:10px;z-index:-1}.captcha-module_range__k24I2{-webkit-appearance:none;margin:0}.captcha-module_range__k24I2::-webkit-slider-runnable-track{-webkit-appearance:none;width:100%}.captcha-module_range-default__-O0QD::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-default.svg)}.captcha-module_range-default__-O0QD::-webkit-slider-thumb,.captcha-module_range-error__FKMfG::-webkit-slider-thumb{-webkit-appearance:none;background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}.captcha-module_range-error__FKMfG::-webkit-slider-thumb{background-image:url(../../assets/range-arrow-error.svg)}.captcha-module_range-success__VzLPq::-webkit-slider-thumb{-webkit-appearance:none;background-image:url(../../assets/range-arrow-success.svg);background-position:-5px;background-repeat:no-repeat;background-size:46px 46px;border-radius:17px;-webkit-border-radius:17px;-moz-border-radius:17px;-ms-border-radius:17px;-o-border-radius:17px;cursor:ew-resize;height:34px;width:34px}";
 var styles$4 = {"start-point":"captcha-module_start-point__LkOqy","range":"captcha-module_range__k24I2","range-default":"captcha-module_range-default__-O0QD","range-error":"captcha-module_range-error__FKMfG","range-success":"captcha-module_range-success__VzLPq"};
-styleInject(css_248z$6);
+styleInject(css_248z$5);
 
 const Captcha = ({
   color,
@@ -7102,9 +7465,9 @@ Captcha.propTypes = {
   getRange: PropTypes.func.isRequired
 };
 
-var css_248z$5 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
+var css_248z$4 = ".stepper-module_stepper-container__-OVGy>div:last-child:before{display:none}.stepper-module_activeRing__Lzvh1,.stepper-module_bigRing__5GBm0{border-radius:50%;height:36px;margin-bottom:36px;position:relative;width:36px}.stepper-module_bigRing__5GBm0{box-shadow:0 0 0 2px #d1d1d1}.stepper-module_bigRing__5GBm0:before{background:#d1d1d1}.stepper-module_activeRing__Lzvh1{box-shadow:0 0 0 2px #00236a}.stepper-module_activeRing__Lzvh1:before{background:#00236a}.stepper-module_activeRing__Lzvh1:before,.stepper-module_bigRing__5GBm0:before{border-radius:20px;bottom:-32px;content:\"\";height:28px;left:0;margin:auto;overflow:hidden;position:absolute;right:0;width:2px}.stepper-module_smallActiveRing__im-XG,.stepper-module_smallRing__u-5a8{border-radius:50%;bottom:0;left:0;margin:auto;position:absolute;right:0;top:0}.stepper-module_smallRing__u-5a8{background-color:#d1d1d1;height:14px;width:14px}.stepper-module_smallActiveRing__im-XG{align-items:center;background-color:#00236a;color:#fff;display:flex;height:28px;justify-content:center;width:28px}";
 var styles$3 = {"stepper-container":"stepper-module_stepper-container__-OVGy","bigRing":"stepper-module_bigRing__5GBm0","activeRing":"stepper-module_activeRing__Lzvh1","smallRing":"stepper-module_smallRing__u-5a8","smallActiveRing":"stepper-module_smallActiveRing__im-XG"};
-styleInject(css_248z$5);
+styleInject(css_248z$4);
 
 const Stepper = ({
   stepLength,
@@ -7267,9 +7630,6 @@ Checkbox.propTypes = {
   data: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object])
 };
 
-var css_248z$4 = "textarea{-webkit-appearance:none}textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
-styleInject(css_248z$4);
-
 const PositionSide = {
   TOP: 'top',
   BOTTOM: 'bottom'
@@ -7280,7 +7640,6 @@ const Textarea = ({
   style,
   family,
   weight,
-  label,
   width,
   value,
   height,
@@ -7297,32 +7656,47 @@ const Textarea = ({
   maxHeight,
   boxSizing,
   maxLength,
-  labelSize,
   errorSize,
   errorStyle,
   errorWeight,
   errorFamily,
   marginTop,
   className,
-  labelColor,
   errorColor,
-  labelWeight,
   placeholder,
-  labelDisplay,
   errorMessage,
-  labelFontFamily,
   backgroundColor,
   borderFocusColor,
   borderHoverColor,
-  labelMarginBottom,
   showCharacterCount,
+  label,
+  labelSize,
+  labelColor,
+  labelWeight,
+  labelDisplay,
+  labelFontFamily,
+  labelMarginBottom,
+  iconRequired,
+  useLabelTooltip,
+  labelTooltipColor,
+  labelTooltipPadding,
+  labelTooltipFontSize,
+  labelTooltipFontStyle,
+  labelTooltipFontFamily,
+  labelTooltipFontWeight,
+  labelTooltipBorderRadius,
+  labelTooltipBackgroundColor,
   characterCountPosition = 'top'
 }) => {
+  const labelRef = useRef(null);
+  const parentRef = useRef(null);
   const [error, setError] = useState('');
+  const [removeID, setRemoveID] = useState('');
   const [isHover, setIsHover] = useState(false);
   const [isFocus, setIsFocus] = useState(false);
   const [innerValue, setInnerValue] = useState('');
   const [classProps, setClassProps] = useState({});
+  const [tooltipElem, setTooltipElem] = useState(null);
   const [configStyles, setConfigStyles] = useState({});
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -7358,6 +7732,79 @@ const Textarea = ({
       }
     }
   };
+  const getRenderedTextWidth = element => {
+    const clone = element.cloneNode(true);
+    clone.style.width = 'fit-content';
+    document.body.appendChild(clone);
+    const width = clone.offsetWidth;
+    document.body.removeChild(clone);
+    return width;
+  };
+  const handleLabelMouseEnter = event => {
+    event.preventDefault();
+    setRemoveID(() => v4());
+    if (labelRef.current) {
+      const parentElem = parentRef.current.getBoundingClientRect();
+      const rect = labelRef.current.getBoundingClientRect();
+      const top = rect.top;
+      const left = rect.left;
+      const height = rect.height;
+      const elementWidth = rect.width;
+      const x = event.clientX - rect.left;
+      const parentWidth = parentElem.width;
+      const textWidth = getRenderedTextWidth(labelRef.current);
+      if (textWidth > Math.ceil(elementWidth)) {
+        const newTooltipElem = document.createElement('div');
+        newTooltipElem.id = `fake_id_for_remove_dom${removeID}`;
+        const newTootltipTextElem = document.createElement('p');
+        const newTooltipChildElem = document.createElement('div');
+        const newTooltipDecorElem = document.createElement('div');
+        newTooltipElem.style.position = 'fixed';
+        newTooltipElem.style.left = left + 'px';
+        newTooltipElem.style.paddingTop = '20px';
+        newTooltipElem.style.height = 'fit-content';
+        newTooltipElem.style.boxSizing = 'border-box';
+        newTooltipElem.style.top = top + height + 'px';
+        newTooltipElem.style.width = parentWidth + 'px';
+        newTooltipChildElem.style.width = '100%';
+        newTooltipChildElem.style.position = 'relative';
+        newTooltipChildElem.style.height = 'fit-content';
+        newTooltipChildElem.style.boxSizing = 'border-box';
+        newTooltipChildElem.style.padding = labelTooltipPadding ?? configStyles.TEXTAREA.label.tooltip.padding;
+        newTooltipChildElem.style.borderRadius = labelTooltipBorderRadius ?? configStyles.TEXTAREA.label.tooltip.borderRadius;
+        newTooltipChildElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.TEXTAREA.label.tooltip.backgroundColor;
+        newTooltipDecorElem.style.zIndex = -1;
+        newTooltipDecorElem.style.top = '-8px';
+        newTooltipDecorElem.style.width = '18px';
+        newTooltipDecorElem.style.height = '18px';
+        newTooltipDecorElem.style.rotate = '45deg';
+        newTooltipDecorElem.style.position = 'absolute';
+        newTooltipDecorElem.style.left = x > elementWidth / 2 ? 'calc(100% - 40px)' : '23px';
+        newTooltipDecorElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.TEXTAREA.label.tooltip.backgroundColor;
+        newTootltipTextElem.innerText = label;
+        newTootltipTextElem.style.color = labelTooltipColor ?? configStyles.TEXTAREA.label.tooltip.color;
+        newTootltipTextElem.style.fontSize = labelTooltipFontSize ?? configStyles.TEXTAREA.label.tooltip.font.size;
+        newTootltipTextElem.style.fontStyle = labelTooltipFontStyle ?? configStyles.TEXTAREA.label.tooltip.font.style;
+        newTootltipTextElem.style.fontFamily = labelTooltipFontFamily ?? configStyles.TEXTAREA.label.tooltip.font.family;
+        newTootltipTextElem.style.fontWeight = labelTooltipFontWeight ?? configStyles.TEXTAREA.label.tooltip.font.weight;
+        document.body.appendChild(newTooltipElem);
+        newTooltipElem.appendChild(newTooltipChildElem);
+        newTooltipChildElem.appendChild(newTooltipDecorElem);
+        newTooltipChildElem.appendChild(newTootltipTextElem);
+        setTooltipElem(() => newTooltipElem);
+      }
+    }
+  };
+  const handleLabelMouseLeave = () => {
+    const removableElem = document.getElementById(`fake_id_for_remove_dom${removeID}`);
+    if (removableElem) {
+      document.body.removeChild(removableElem);
+    }
+    if (tooltipElem) {
+      document.body.removeChild(tooltipElem);
+    }
+    setRemoveID(() => '');
+  };
   useEffect(() => {
     if (value === undefined) {
       alert('Please add value prop on Textarea component');
@@ -7385,6 +7832,7 @@ const Textarea = ({
     });
   }, []);
   return configStyles.TEXTAREA && /*#__PURE__*/React__default.createElement("div", {
+    ref: parentRef,
     style: {
       width: width ?? configStyles.TEXTAREA.width
     },
@@ -7400,11 +7848,30 @@ const Textarea = ({
       fontWeight: labelWeight ?? configStyles.TEXTAREA.label.font.weight,
       marginBottom: labelMarginBottom ?? configStyles.TEXTAREA.label.marginBottom
     }
-  }, label ? /*#__PURE__*/React__default.createElement("label", {
+  }, label && /*#__PURE__*/React__default.createElement("div", {
     style: {
-      display: labelDisplay ?? configStyles.TEXTAREA.label.display
+      display: 'flex',
+      maxWidth: '100%',
+      columnGap: '4px',
+      justifyContent: 'flex-start',
+      width: showCharacterCount && maxLength && characterCountPosition === 'top' ? 'calc(100% - 80px)' : '100%'
     }
-  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default.createElement("span", null, maxLength - innerValue.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default.createElement("textarea", {
+  }, /*#__PURE__*/React__default.createElement("label", {
+    ref: labelRef,
+    style: {
+      display: labelDisplay ?? configStyles.TEXTAREA.label.display,
+      whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.TEXTAREA.label.useTooltip) ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.TEXTAREA.label.useTooltip) ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.TEXTAREA.label.useTooltip) ? 'ellipsis' : ''
+    },
+    onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.TEXTAREA.label.useTooltip) ? handleLabelMouseEnter : _ => _,
+    onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.TEXTAREA.label.useTooltip) ? handleLabelMouseLeave : _ => _
+  }, label), required && /*#__PURE__*/React__default.createElement("sup", null, iconRequired ? iconRequired : configStyles.TEXTAREA.icon.required ? configStyles.TEXTAREA.icon.required : /*#__PURE__*/React__default.createElement(SvgRequired, null))), showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      width: 'fit-content',
+      flexShrink: 0
+    }
+  }, maxLength - innerValue.length, " \u0576\u056B\u0577")), /*#__PURE__*/React__default.createElement("textarea", {
     style: {
       width: '100%',
       border: 'none',
@@ -7471,7 +7938,6 @@ Textarea.propTypes = {
   style: PropTypes.string,
   family: PropTypes.string,
   weight: PropTypes.string,
-  label: PropTypes.string,
   width: PropTypes.string,
   height: PropTypes.string,
   resize: PropTypes.string,
@@ -7488,25 +7954,36 @@ Textarea.propTypes = {
   minHeight: PropTypes.string,
   maxHeight: PropTypes.string,
   maxLength: PropTypes.number,
-  labelSize: PropTypes.string,
   errorSize: PropTypes.string,
   errorStyle: PropTypes.string,
   errorWeight: PropTypes.string,
   errorFamily: PropTypes.string,
   className: PropTypes.string,
-  labelColor: PropTypes.string,
   errorColor: PropTypes.string,
-  labelWeight: PropTypes.string,
   placeholder: PropTypes.string,
   errorMessage: PropTypes.string,
-  labelDisplay: PropTypes.string,
-  labelFontFamily: PropTypes.string,
   backgroundColor: PropTypes.string,
   showCharacterCount: PropTypes.bool,
   value: PropTypes.string.isRequired,
   borderFocusColor: PropTypes.string,
   borderHoverColor: PropTypes.string,
+  label: PropTypes.string,
+  labelSize: PropTypes.string,
+  labelColor: PropTypes.string,
+  labelWeight: PropTypes.string,
+  labelDisplay: PropTypes.string,
+  labelFontFamily: PropTypes.string,
   labelMarginBottom: PropTypes.string,
+  iconRequired: PropTypes.element,
+  useLabelTooltip: PropTypes.bool,
+  labelTooltipColor: PropTypes.string,
+  labelTooltipPadding: PropTypes.string,
+  labelTooltipFontSize: PropTypes.string,
+  labelTooltipFontStyle: PropTypes.string,
+  labelTooltipFontFamily: PropTypes.string,
+  labelTooltipFontWeight: PropTypes.string,
+  labelTooltipBorderRadius: PropTypes.string,
+  labelTooltipBackgroundColor: PropTypes.string,
   characterCountPosition: PropTypes.oneOf(Object.values(PositionSide))
 };
 
@@ -7522,6 +7999,7 @@ const AccordionItem = ({
   titleAlign,
   multipleOpen,
   openHoverIcon,
+  closeHoverIcon,
   color,
   border,
   padding,
@@ -7602,7 +8080,7 @@ const AccordionItem = ({
       alignItems: 'center',
       justifyContent: 'center'
     }
-  }, isOpen ? closeIcon : isHover ? openHoverIcon ? openHoverIcon : openIcon : openIcon)), /*#__PURE__*/React__default.createElement("div", {
+  }, isOpen ? isHover ? closeHoverIcon : closeIcon : isHover ? openHoverIcon : openIcon)), /*#__PURE__*/React__default.createElement("div", {
     style: {
       overflow: 'hidden',
       height: isOpen ? 'auto' : '0px'
@@ -7668,6 +8146,7 @@ const Accordion = ({
   titleAlign,
   multipleOpen,
   openHoverIcon,
+  closeHoverIcon,
   borderTop,
   borderLeft,
   borderRight,
@@ -7748,6 +8227,13 @@ const Accordion = ({
         src: configStyles.ACCORDION.icon.close,
         alt: "close icon"
       }) : /*#__PURE__*/React__default.createElement(SvgGreenminus, null),
+      closeHoverIcon: closeHoverIcon ? /*#__PURE__*/React__default.createElement("img", {
+        src: closeHoverIcon,
+        alt: "close icon"
+      }) : configStyles.ACCORDION.icon.closeHover ? /*#__PURE__*/React__default.createElement("img", {
+        src: configStyles.ACCORDION.icon.closeHover,
+        alt: "close icon"
+      }) : /*#__PURE__*/React__default.createElement(SvgGreenminus, null),
       className: classProps,
       color: color ?? configStyles.ACCORDION.color,
       padding: padding ?? configStyles.ACCORDION.padding,
@@ -7791,6 +8277,7 @@ Accordion.propTypes = {
   closeIcon: PropTypes.string,
   marginBottom: PropTypes.string,
   openHoverIcon: PropTypes.string,
+  closeHoverIcon: PropTypes.string,
   borderTop: PropTypes.bool,
   borderLeft: PropTypes.bool,
   borderRight: PropTypes.bool,
@@ -7805,6 +8292,8 @@ Accordion.propTypes = {
   fontFamily: PropTypes.string
 };
 
+// import React from 'react';
+
 const Swipe = ({
   id,
   title,
@@ -7826,8 +8315,8 @@ const Swipe = ({
   } = props || {};
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
-      width: '100%',
-      height: '100%'
+      width: position === 'left' || position === 'right' ? width ?? SWIPEMODAL.width : '100%',
+      height: position === 'top' || position === 'bottom' ? height ?? SWIPEMODAL.height : '100vh'
     }
   }, (title || showCloseIcon) && /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -7883,9 +8372,13 @@ const Swipe = ({
 };
 
 var css_248z$2 = ".swipe-module_to-top__lrHfG{bottom:0}.swipe-module_to-left__kgLsE{right:0}.swipe-module_to-right__Xu3Ul{left:0}.swipe-module_to-bottom__94M7H{top:0}.swipe-module_visible__---aC{visibility:visible!important}.swipe-module_swipe-block__Yv1B3{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.swipe-module_move-top__m6t2O{-webkit-animation-name:swipe-module_slideTop__-Bbap;animation-name:swipe-module_slideTop__-Bbap}.swipe-module_move-left__4TDLs{-webkit-animation-name:swipe-module_slideLeft__i24cS;animation-name:swipe-module_slideLeft__i24cS}.swipe-module_move-right__FrYo0{-webkit-animation-name:swipe-module_slideRight__swgSY;animation-name:swipe-module_slideRight__swgSY}.swipe-module_move-bottom__eYDx6{-webkit-animation-name:swipe-module_slideBottom__TBoZo;animation-name:swipe-module_slideBottom__TBoZo}.swipe-module_back-top__gJZv0{-webkit-animation-name:swipe-module_backTop__32loc;animation-name:swipe-module_backTop__32loc}.swipe-module_back-left__Wd3aY{-webkit-animation-name:swipe-module_backLeft__q89ub;animation-name:swipe-module_backLeft__q89ub}.swipe-module_back-right__Lgwz7{-webkit-animation-name:swipe-module_backRight__8t5Dm;animation-name:swipe-module_backRight__8t5Dm}.swipe-module_back-bottom__JRN-7{-webkit-animation-name:swipe-module_backBottom__lwR8B;animation-name:swipe-module_backBottom__lwR8B}@keyframes swipe-module_slideTop__-Bbap{0%{bottom:-100%}to{bottom:0}}@keyframes swipe-module_slideLeft__i24cS{0%{right:-100%}to{right:0}}@keyframes swipe-module_slideRight__swgSY{0%{left:-100%}to{left:0}}@keyframes swipe-module_slideBottom__TBoZo{0%{top:-100%}to{top:0}}@keyframes swipe-module_backTop__32loc{0%{bottom:0}to{bottom:-100%}}@keyframes swipe-module_backLeft__q89ub{0%{right:0}to{right:-100%}}@keyframes swipe-module_backRight__8t5Dm{0%{left:0}to{left:-100%}}@keyframes swipe-module_backBottom__lwR8B{0%{top:0}to{top:-100%}}";
-var styles$2 = {"to-top":"swipe-module_to-top__lrHfG","to-left":"swipe-module_to-left__kgLsE","to-right":"swipe-module_to-right__Xu3Ul","to-bottom":"swipe-module_to-bottom__94M7H","visible":"swipe-module_visible__---aC","swipe-block":"swipe-module_swipe-block__Yv1B3","move-top":"swipe-module_move-top__m6t2O","slideTop":"swipe-module_slideTop__-Bbap","move-left":"swipe-module_move-left__4TDLs","slideLeft":"swipe-module_slideLeft__i24cS","move-right":"swipe-module_move-right__FrYo0","slideRight":"swipe-module_slideRight__swgSY","move-bottom":"swipe-module_move-bottom__eYDx6","slideBottom":"swipe-module_slideBottom__TBoZo","back-top":"swipe-module_back-top__gJZv0","backTop":"swipe-module_backTop__32loc","back-left":"swipe-module_back-left__Wd3aY","backLeft":"swipe-module_backLeft__q89ub","back-right":"swipe-module_back-right__Lgwz7","backRight":"swipe-module_backRight__8t5Dm","back-bottom":"swipe-module_back-bottom__JRN-7","backBottom":"swipe-module_backBottom__lwR8B"};
+var styles$2 = {"to-top":"swipe-module_to-top__lrHfG","to-left":"swipe-module_to-left__kgLsE","to-right":"swipe-module_to-right__Xu3Ul","to-bottom":"swipe-module_to-bottom__94M7H","visible":"swipe-module_visible__---aC","swipe-block":"swipe-module_swipe-block__Yv1B3","move-top":"swipe-module_move-top__m6t2O","move-left":"swipe-module_move-left__4TDLs","move-right":"swipe-module_move-right__FrYo0","move-bottom":"swipe-module_move-bottom__eYDx6","back-top":"swipe-module_back-top__gJZv0","back-left":"swipe-module_back-left__Wd3aY","back-right":"swipe-module_back-right__Lgwz7","back-bottom":"swipe-module_back-bottom__JRN-7"};
 styleInject(css_248z$2);
 
+// import React, { useEffect, useRef } from 'react';
+// import ReactDOM from 'react-dom/client';
+// import PropTypes from 'prop-types';
+
 let swipeCount = 0;
 const createElem = (id, title, child, props, swipeBlock, innerConfigStyles) => {
   const {
@@ -7896,11 +8389,11 @@ const createElem = (id, title, child, props, swipeBlock, innerConfigStyles) => {
     borderRadius,
     backgroundColor
   } = props || {};
-  swipeBlock.style.position = 'absolute';
+  swipeBlock.style.position = 'fixed';
   swipeBlock.style.zIndex = swipeCount;
   swipeBlock.style.backgroundColor = backgroundColor ?? innerConfigStyles.SWIPEMODAL.colors.background;
   swipeBlock.style.width = position === 'left' || position === 'right' ? width ?? innerConfigStyles.SWIPEMODAL.width : '100%';
-  swipeBlock.style.height = position === 'top' || position === 'bottom' ? height ?? innerConfigStyles.SWIPEMODAL.height : '100%';
+  swipeBlock.style.height = position === 'top' || position === 'bottom' ? height ?? innerConfigStyles.SWIPEMODAL.height : '100vh';
   swipeBlock.style.borderTopLeftRadius = position === 'right' || position === 'bottom' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
   swipeBlock.style.borderTopRightRadius = position === 'left' || position === 'bottom' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
   swipeBlock.style.borderBottomLeftRadius = position === 'right' || position === 'top' ? '0px' : borderRadius ?? innerConfigStyles.SWIPEMODAL.border.radius;
@@ -7934,25 +8427,26 @@ const createSwipe = (id, title, child, props, swipable) => {
     };
     createElem(id, title, child, props, swipeBlock, innerConfigStyles);
     if (!swipable) {
+      const widthParent = hasOwnerProperty(props, 'withParent') ? props.withParent === true ? true : false : innerConfigStyles.SWIPEMODAL.withParent;
       swipable = document.createElement('div');
       swipable.setAttribute('id', 'swipable');
-      swipable.style.position = 'absolute';
+      swipable.style.position = 'fixed';
       swipable.style.top = '0px';
       swipable.style.left = '0px';
       swipable.style.zIndex = 99999;
       swipable.style.maxWidth = '100%';
       swipable.style.maxHeight = '100vh';
-      swipable.style.width = '100%';
-      swipable.style.height = '100%';
+      swipable.style.visibility = 'hidden';
+      swipable.style.width = widthParent ? '100%' : '0px';
+      swipable.style.height = widthParent ? '100vh' : '0px';
       swipable.style.backgroundColor = props?.parent?.backgroundColor ?? innerConfigStyles.SWIPEMODAL.parent.colors.background;
+      swipable.classList.add(styles$2['visible']);
       if (props.outSideClose || innerConfigStyles.SWIPEMODAL.outSideClose) {
         swipable.addEventListener('click', function () {
           hasOwnerProperty(props, 'callClose') && {}.toString.call(props.callClose) === '[object Function]' ? props.callClose() : '';
         });
       }
-      const SwipifyBlock = document.getElementById('swipify_tui');
-      SwipifyBlock.style.display = 'block';
-      SwipifyBlock.appendChild(swipable);
+      document.body.appendChild(swipable);
     }
     swipable.appendChild(swipeBlock);
   }, error => {
@@ -8001,6 +8495,7 @@ const swipe = {
   close: id => {
     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;
     }
     let swipable = document.getElementById('swipable');
     swipeCount -= 1;
@@ -8015,9 +8510,7 @@ const swipe = {
           if (swipeCount === 0 && swipable) {
             window.removeEventListener('popstate', handleNavigationChange);
             window.removeEventListener('navigationchange', handleNavigationChange);
-            const SwipifyBlock = document.getElementById('swipify_tui');
-            SwipifyBlock.style.display = 'none';
-            SwipifyBlock.removeChild(swipable);
+            document.body.removeChild(swipable);
           }
         }, 200);
       } else {
@@ -8025,42 +8518,14 @@ const swipe = {
         if (swipeCount === 0 && swipable) {
           window.removeEventListener('popstate', handleNavigationChange);
           window.removeEventListener('navigationchange', handleNavigationChange);
-          const SwipifyBlock = document.getElementById('swipify_tui');
-          SwipifyBlock.style.display = 'none';
-          SwipifyBlock.removeChild(swipable);
+          document.body.removeChild(swipable);
         }
       }
-    } else {
-      if (swipeCount === 0 && swipable) {
-        const SwipifyBlock = document.getElementById('swipify_tui');
-        SwipifyBlock.style.display = 'none';
-        SwipifyBlock.removeChild(swipable);
-      }
     }
   }
 };
 const SwipeModal = () => {
-  const ref = useRef(null);
-  useEffect(() => {
-    const parentSize = ref.current.parentNode.style.height;
-    if (Number(parentSize.replace(/\D/g, '')) > 0) {
-      ref.current.style.height = '100%';
-    } else {
-      ref.current.style.height = '100vh';
-    }
-  }, [ref]);
-  return /*#__PURE__*/React__default.createElement("div", {
-    ref: ref,
-    id: "swipify_tui",
-    style: {
-      position: 'absolute',
-      width: '100%',
-      top: 0,
-      overflow: 'hidden',
-      zIndex: 1,
-      display: 'none'
-    }
-  });
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
 
 const TypographyType = {
@@ -8251,7 +8716,7 @@ const SvgNextarrow = ({
 }));
 
 var css_248z$1 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT>ul{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{align-items:center;border:none;cursor:pointer;display:flex;justify-content:center;outline:none}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;cursor:pointer;display:flex;flex:0 0 auto;justify-content:center;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}.pagination-module_show-offset-block__ksPGm{height:34px;margin-left:10px!important;margin-right:4px!important;width:91px}i{color:#3c393e;font-size:12px;line-height:12px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}";
-var styles$1 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8","show-offset-block":"pagination-module_show-offset-block__ksPGm"};
+var styles$1 = {"pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8"};
 styleInject(css_248z$1);
 
 const Pagination = ({
@@ -8626,7 +9091,6 @@ var styles = {"auto-complete":"autocomplete-module_auto-complete__oUOv9"};
 styleInject(css_248z);
 
 const Autocomplete = ({
-  label,
   change,
   options,
   getItem,
@@ -8637,37 +9101,28 @@ const Autocomplete = ({
   errorStyle,
   errorWeight,
   errorFamily,
-  labelSize,
-  labelStyle,
   marginTop,
   errorColor,
-  labelColor,
-  labelWeight,
   placeHolder,
   errorMessage,
   autoComplete,
-  labelDisplay,
   contentDisplay,
   contentTopSize,
   contentTopStyle,
   contentTopFamily,
   contentPosition,
   contentTopColor,
-  labelLineHeight,
-  labelFontFamily,
   contentDirection,
   contentTopWeight,
   contentTopRadius,
   contentTopHeight,
   contentTopBorder,
-  labelMarginBottom,
   contentTopDisplay,
   contentTopPadding,
   contentBottomLeft,
   innerErrorPadding,
   showOptionDuration,
   contentTopMaxWidth,
-  labelTextTransform,
   contentBottomWidth,
   contentBottomZindex,
   contentBottomRadius,
@@ -8704,6 +9159,26 @@ const Autocomplete = ({
   contentBottomRowBackgroundColor,
   contentBottomRowHoverBackgroundColor,
   backgroundDisableColor,
+  label,
+  labelSize,
+  labelStyle,
+  labelColor,
+  labelWeight,
+  labelDisplay,
+  labelLineHeight,
+  labelFontFamily,
+  labelMarginBottom,
+  labelTextTransform,
+  iconRequired,
+  useLabelTooltip,
+  labelTooltipColor,
+  labelTooltipPadding,
+  labelTooltipFontSize,
+  labelTooltipFontStyle,
+  labelTooltipFontFamily,
+  labelTooltipFontWeight,
+  labelTooltipBorderRadius,
+  labelTooltipBackgroundColor,
   searchCount = 3,
   disabled = false,
   keyNames = {
@@ -8712,14 +9187,18 @@ const Autocomplete = ({
   },
   ...props
 }) => {
+  const labelRef = useRef(null);
+  const parentRef = useRef(null);
   const [id, setId] = useState('');
   const [show, setShow] = useState(false);
+  const [removeID, setRemoveID] = useState('');
   const [isHover, setIsHover] = useState(false);
   const [isFocus, setIsFocus] = useState(false);
   const [innerError, setInnerError] = useState('');
   const [innerValue, setInnerValue] = useState('');
-  const [innerOptions, setInnerOptions] = useState([]);
   const [classProps, setClassProps] = useState({});
+  const [tooltipElem, setTooltipElem] = useState(null);
+  const [innerOptions, setInnerOptions] = useState([]);
   const [configStyles, setConfigStyles] = useState({});
   const showOption = keyframes`
         100% {
@@ -8834,6 +9313,79 @@ const Autocomplete = ({
       backgroundColor: innerErrorBackgroundColor ?? configStyles.AUTOCOMPLETE.innerError.colors.background
     }
   }, innerValue.length >= searchCount ? 'Նման տվյալ առկա չէ' : `Լրացնել առնվազն ${searchCount} նիշ`) : '');
+  const getRenderedTextWidth = element => {
+    const clone = element.cloneNode(true);
+    clone.style.width = 'fit-content';
+    document.body.appendChild(clone);
+    const width = clone.offsetWidth;
+    document.body.removeChild(clone);
+    return width;
+  };
+  const handleLabelMouseEnter = event => {
+    event.preventDefault();
+    setRemoveID(() => v4());
+    if (labelRef.current) {
+      const parentElem = parentRef.current.getBoundingClientRect();
+      const rect = labelRef.current.getBoundingClientRect();
+      const top = rect.top;
+      const left = rect.left;
+      const height = rect.height;
+      const elementWidth = rect.width;
+      const x = event.clientX - rect.left;
+      const parentWidth = parentElem.width;
+      const textWidth = getRenderedTextWidth(labelRef.current);
+      if (textWidth > Math.ceil(elementWidth)) {
+        const newTooltipElem = document.createElement('div');
+        newTooltipElem.id = `fake_id_for_remove_dom${removeID}`;
+        const newTootltipTextElem = document.createElement('p');
+        const newTooltipChildElem = document.createElement('div');
+        const newTooltipDecorElem = document.createElement('div');
+        newTooltipElem.style.position = 'fixed';
+        newTooltipElem.style.left = left + 'px';
+        newTooltipElem.style.paddingTop = '20px';
+        newTooltipElem.style.height = 'fit-content';
+        newTooltipElem.style.boxSizing = 'border-box';
+        newTooltipElem.style.top = top + height + 'px';
+        newTooltipElem.style.width = parentWidth + 'px';
+        newTooltipChildElem.style.width = '100%';
+        newTooltipChildElem.style.position = 'relative';
+        newTooltipChildElem.style.height = 'fit-content';
+        newTooltipChildElem.style.boxSizing = 'border-box';
+        newTooltipChildElem.style.padding = labelTooltipPadding ?? configStyles.FILE.label.tooltip.padding;
+        newTooltipChildElem.style.borderRadius = labelTooltipBorderRadius ?? configStyles.FILE.label.tooltip.borderRadius;
+        newTooltipChildElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.FILE.label.tooltip.backgroundColor;
+        newTooltipDecorElem.style.zIndex = -1;
+        newTooltipDecorElem.style.top = '-8px';
+        newTooltipDecorElem.style.width = '18px';
+        newTooltipDecorElem.style.height = '18px';
+        newTooltipDecorElem.style.rotate = '45deg';
+        newTooltipDecorElem.style.position = 'absolute';
+        newTooltipDecorElem.style.left = x > elementWidth / 2 ? 'calc(100% - 40px)' : '23px';
+        newTooltipDecorElem.style.backgroundColor = labelTooltipBackgroundColor ?? configStyles.FILE.label.tooltip.backgroundColor;
+        newTootltipTextElem.innerText = label;
+        newTootltipTextElem.style.color = labelTooltipColor ?? configStyles.FILE.label.tooltip.color;
+        newTootltipTextElem.style.fontSize = labelTooltipFontSize ?? configStyles.FILE.label.tooltip.font.size;
+        newTootltipTextElem.style.fontStyle = labelTooltipFontStyle ?? configStyles.FILE.label.tooltip.font.style;
+        newTootltipTextElem.style.fontFamily = labelTooltipFontFamily ?? configStyles.FILE.label.tooltip.font.family;
+        newTootltipTextElem.style.fontWeight = labelTooltipFontWeight ?? configStyles.FILE.label.tooltip.font.weight;
+        document.body.appendChild(newTooltipElem);
+        newTooltipElem.appendChild(newTooltipChildElem);
+        newTooltipChildElem.appendChild(newTooltipDecorElem);
+        newTooltipChildElem.appendChild(newTootltipTextElem);
+        setTooltipElem(() => newTooltipElem);
+      }
+    }
+  };
+  const handleLabelMouseLeave = () => {
+    const removableElem = document.getElementById(`fake_id_for_remove_dom${removeID}`);
+    if (removableElem) {
+      document.body.removeChild(removableElem);
+    }
+    if (tooltipElem) {
+      document.body.removeChild(tooltipElem);
+    }
+    setRemoveID(() => '');
+  };
   useEffect(() => {
     if (options === undefined) {
       alert('Please add options prop');
@@ -8881,24 +9433,38 @@ const Autocomplete = ({
     });
   }, []);
   return configStyles.AUTOCOMPLETE && /*#__PURE__*/React__default.createElement("div", {
+    ref: parentRef,
     className: classProps,
     style: {
       width: contentTopMaxWidth ?? configStyles.AUTOCOMPLETE.maxWidth
     }
-  }, label ? /*#__PURE__*/React__default.createElement("label", {
+  }, label && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      maxWidth: '100%',
+      width: 'fit-content',
+      columnGap: '4px',
+      justifyContent: 'flex-start'
+    }
+  }, /*#__PURE__*/React__default.createElement("label", {
+    ref: labelRef,
     style: {
       color: labelColor ?? configStyles.AUTOCOMPLETE.label.color,
       display: labelDisplay ?? configStyles.AUTOCOMPLETE.label.display,
-      maxWidth: contentTopMaxWidth ?? configStyles.AUTOCOMPLETE.maxWidth,
       fontSize: labelSize ?? configStyles.AUTOCOMPLETE.label.font.size,
       fontStyle: labelStyle ?? configStyles.AUTOCOMPLETE.label.font.style,
       fontWeight: labelWeight ?? configStyles.AUTOCOMPLETE.label.font.weight,
       fontFamily: labelFontFamily ?? configStyles.AUTOCOMPLETE.label.font.family,
       lineHeight: labelLineHeight ?? configStyles.AUTOCOMPLETE.label.lineHeight,
       marginBottom: labelMarginBottom ?? configStyles.AUTOCOMPLETE.label.marginBottom,
-      textTransform: labelTextTransform ?? configStyles.AUTOCOMPLETE.label.textTransform
-    }
-  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default.createElement("div", {
+      textTransform: labelTextTransform ?? configStyles.AUTOCOMPLETE.label.textTransform,
+      whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.AUTOCOMPLETE.label.useTooltip) ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.AUTOCOMPLETE.label.useTooltip) ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.AUTOCOMPLETE.label.useTooltip) ? 'ellipsis' : ''
+    },
+    onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.AUTOCOMPLETE.label.useTooltip) ? handleLabelMouseEnter : _ => _,
+    onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.AUTOCOMPLETE.label.useTooltip) ? handleLabelMouseLeave : _ => _
+  }, label), required && /*#__PURE__*/React__default.createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default.createElement(SvgRequired, null))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: contentDisplay ?? configStyles.AUTOCOMPLETE.parent.display,
       position: contentPosition ?? configStyles.AUTOCOMPLETE.parent.position,
@@ -8974,6 +9540,7 @@ Autocomplete.propTypes = {
   errorMessage: PropTypes.string,
   labelDisplay: PropTypes.string,
   autoComplete: PropTypes.string,
+  iconRequired: PropTypes.element,
   contentDisplay: PropTypes.string,
   contentTopSize: PropTypes.string,
   contentTopStyle: PropTypes.string,
@@ -9033,6 +9600,15 @@ Autocomplete.propTypes = {
   contentBottomBackgroundColor: PropTypes.string,
   contentBottomRowBackgroundColor: PropTypes.string,
   contentBottomRowHoverBackgroundColor: PropTypes.string,
+  useLabelTooltip: PropTypes.bool,
+  labelTooltipColor: PropTypes.string,
+  labelTooltipPadding: PropTypes.string,
+  labelTooltipFontSize: PropTypes.string,
+  labelTooltipFontStyle: PropTypes.string,
+  labelTooltipFontFamily: PropTypes.string,
+  labelTooltipFontWeight: PropTypes.string,
+  labelTooltipBorderRadius: PropTypes.string,
+  labelTooltipBackgroundColor: PropTypes.string,
   backgroundDisableColor: PropTypes.string
 };