@xaypay/tui 0.2.32 → 0.2.34

package/dist/index.js

@@ -626,7 +626,11 @@ var packageResult = {
       ...fontObject
     },
     label: {
+      showMore: false,
       useTooltip: false,
+      showLessText: 'Փակել',
+      showMoreText: 'Ավելին',
+      showMoreTextColor: '#2C46C1',
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
@@ -819,7 +823,11 @@ var packageResult = {
       shadowHover: `0 0 0 2px ${presetColors.dark}` // like border
     },
     label: {
+      showMore: false,
       useTooltip: false,
+      showLessText: 'Փակել',
+      showMoreText: 'Ավելին',
+      showMoreTextColor: '#2C46C1',
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
@@ -931,7 +939,11 @@ var packageResult = {
       background: 'white'
     },
     label: {
+      showMore: false,
       useTooltip: false,
+      showLessText: 'Փակել',
+      showMoreText: 'Ավելին',
+      showMoreTextColor: '#2C46C1',
       color: presetColors.dark,
       display: 'block',
       marginBottom: '10px',
@@ -1000,7 +1012,11 @@ var packageResult = {
       backgroundDisable: presetColors.secondary
     },
     label: {
+      showMore: false,
       useTooltip: false,
+      showLessText: 'Փակել',
+      showMoreText: 'Ավելին',
+      showMoreTextColor: '#2C46C1',
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
@@ -1124,6 +1140,8 @@ var packageResult = {
     label: {
       showMore: false,
       useTooltip: false,
+      showLessText: 'Փակել',
+      showMoreText: 'Ավելին',
       showMoreTextColor: '#2C46C1',
       color: '#4A4A4D',
       font: {
@@ -1853,9 +1871,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$c = ".file-module_small-file-component__nlpcW>svg{max-height:77%!important}.file-module_show-more-text__WIGLx{align-self:self-end;cursor:pointer}";
-var styles$b = {"small-file-component":"file-module_small-file-component__nlpcW","show-more-text":"file-module_show-more-text__WIGLx"};
-styleInject(css_248z$c);
+var css_248z$d = ".file-module_small-file-component__nlpcW>svg{max-height:77%!important}.file-module_show-more-text__WIGLx{align-self:self-end;cursor:pointer}";
+var styles$c = {"small-file-component":"file-module_small-file-component__nlpcW","show-more-text":"file-module_show-more-text__WIGLx"};
+styleInject(css_248z$d);
 
 // eslint-disable-next-line react/display-name
 const File = /*#__PURE__*/React.forwardRef(({
@@ -2484,12 +2502,23 @@ const File = /*#__PURE__*/React.forwardRef(({
       fontFamily: labelFamily ?? configStyles.FILE.label.font.family,
       whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.FILE.label.showMore) && !showMore ? 'nowrap' : 'normal',
       overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.FILE.label.showMore) && !showMore ? 'hidden' : 'visible',
-      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.FILE.label.showMore) && !showMore ? 'ellipsis' : ''
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.FILE.label.showMore) && !showMore ? 'ellipsis' : '',
+      wordBreak: 'break-all'
     },
     onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) && !lableShowMore && !configStyles.FILE.label.showMore ? handleLabelMouseEnter : _ => _,
     onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.FILE.label.useTooltip) && !lableShowMore && !configStyles.FILE.label.showMore ? handleLabelMouseLeave : _ => _
-  }, label), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), lableShowMore || configStyles.FILE.label.showMore ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: styles$b['show-more-text'],
+  }, label, handleCheckTextWidth('label') === 'more' && showMore && (lableShowMore || configStyles.FILE.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles$c['show-more-text'],
+    style: {
+      fontSize: labelSize ?? configStyles.FILE.label.font.size,
+      fontStyle: labelStyle ?? configStyles.FILE.label.font.style,
+      fontWeight: labelWeight ?? configStyles.FILE.label.font.weight,
+      fontFamily: labelFamily ?? configStyles.FILE.label.font.family,
+      color: showMoreTextColor ?? configStyles.FILE.label.showMoreTextColor
+    },
+    onClick: handleChangeShowMore
+  }, ' ', " ", labelShowLessText ?? configStyles.FILE.label.showLessText) : ''), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), handleCheckTextWidth('label') === 'more' && !showMore && (lableShowMore || configStyles.FILE.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles$c['show-more-text'],
     style: {
       fontSize: labelSize ?? configStyles.FILE.label.font.size,
       fontStyle: labelStyle ?? configStyles.FILE.label.font.style,
@@ -2498,7 +2527,7 @@ const File = /*#__PURE__*/React.forwardRef(({
       color: showMoreTextColor ?? configStyles.FILE.label.showMoreTextColor
     },
     onClick: handleChangeShowMore
-  }, showMore ? labelShowLessText ? labelShowLessText : '' : labelShowMoreText ? labelShowMoreText : '') : ''), deleteComponent && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, labelShowMoreText ?? configStyles.FILE.label.showMoreText) : ''), deleteComponent && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       cursor: 'pointer'
     },
@@ -2585,7 +2614,7 @@ const File = /*#__PURE__*/React.forwardRef(({
       color: extentionsTextColor ?? configStyles.FILE.extentionsTextColor
     }
   }, "(", fileExtensions.toString().split(',').join(', '), ")"))))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$b['small-file-component'],
+    className: styles$c['small-file-component'],
     style: {
       width: '100%',
       padding: '5px',
@@ -3102,9 +3131,9 @@ SingleCheckbox.propTypes = {
   ignoreDisabledForChecked: PropTypes__default["default"].bool
 };
 
-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$b);
+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 styles$b = {"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);
 
 /* eslint-disable no-prototype-builtins */
 const TH = ({
@@ -3146,7 +3175,7 @@ const TH = ({
       borderColor: hideBorder ? 'transparent' : '#eeeeee'
     },
     onClick: handleHeaderItemClick,
-    className: `${hasOwnerProperty(item, 'sortingArrows') ? item.sortingArrows === true ? styles$a['sorting-arrows'] : '' : ''}`
+    className: `${hasOwnerProperty(item, 'sortingArrows') ? item.sortingArrows === true ? styles$b['sorting-arrows'] : '' : ''}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
@@ -3307,7 +3336,7 @@ const TD = ({
         },
         id: newItem.id,
         type: newItem.type,
-        className: styles$a['td-span'],
+        className: styles$b['td-span'],
         key: `${newItem.id}_${newIndex}`,
         onClick: e => handleCheckActions(e, newItem, 'type', newIndex),
         onMouseEnter: () => handleMouseEnter(newItem, newIndex),
@@ -3331,7 +3360,7 @@ const TD = ({
           },
           id: iT.id ? iT.id : '',
           type: iT.type ? iT.type : '',
-          className: styles$a['td-span'],
+          className: styles$b['td-span'],
           key: `${iT.id || iT.content}_${iN}`,
           onMouseEnter: () => handleMouseEnter(iT, iN),
           onMouseLeave: () => handleMouseLeave(),
@@ -3357,7 +3386,7 @@ const TD = ({
       cursor: 'pointer'
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
-    className: styles$a['td-span']
+    className: styles$b['td-span']
   }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'draggableIcon') && /*#__PURE__*/React__default["default"].createElement("div", {
     draggable: true,
     style: {
@@ -3426,7 +3455,7 @@ const TD = ({
   }, hasOwnerProperty(item, 'options') && item.options.map((optionItem, optionIndex) => {
     return /*#__PURE__*/React__default["default"].createElement("span", {
       key: `${optionItem.content}_${optionIndex}`,
-      className: styles$a['dots-option-item'],
+      className: styles$b['dots-option-item'],
       style: {
         color: '#3C393E',
         fontSize: '14px',
@@ -3468,7 +3497,7 @@ const TD = ({
       }, innerItem.content.map((contInnerItem, contInnerIndex) => {
         return /*#__PURE__*/React__default["default"].createElement("p", {
           key: `${contInnerItem}_${contInnerIndex}`,
-          className: styles$a['list-text'],
+          className: styles$b['list-text'],
           style: {
             maxWidth: '100%',
             color: openListColor,
@@ -3485,7 +3514,7 @@ const TD = ({
     } else {
       return /*#__PURE__*/React__default["default"].createElement("p", {
         key: `${innerItem}_${innerItemIndex}`,
-        className: styles$a['list-text'],
+        className: styles$b['list-text'],
         style: {
           maxWidth: '100%',
           color: openListColor,
@@ -3506,7 +3535,7 @@ const TD = ({
       cursor: 'pointer'
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
-    className: styles$a['td-span']
+    className: styles$b['td-span']
   }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '') : '');
 };
 
@@ -4491,7 +4520,7 @@ const Table = ({
       borderRightColor: innerIndex === Object.values(draggedItem).length - 1 ? 'transparent' : configStyles.TABLE.body.row.borderColor
     });
   })))), !body.length && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$a['no-tabel-data']
+    className: styles$b['no-tabel-data']
   }, /*#__PURE__*/React__default["default"].createElement("p", null, "\u054F\u057E\u0575\u0561\u056C\u0576\u0565\u0580 \u0579\u056F\u0561\u0576")));
 };
 Table.propTypes = {
@@ -4542,9 +4571,9 @@ Table.propTypes = {
   clickableRowColumnTd: PropTypes__default["default"].bool
 };
 
-var css_248z$a = "body.modal-module_tui-no-srcoll-class__gZjNK,html.modal-module_tui-no-srcoll-class__gZjNK{height:100%;overflow:hidden!important;overscroll-behavior:none!important;touch-action:none}#modal-module_tui-modal-id-for-no-scroll-area__s79-a{touch-action:auto}.modal-module_animation__modal__3mt48{animation:modal-module_show-popup__WrH7a .15s;-webkit-animation:modal-module_show-popup__WrH7a .15s}@keyframes modal-module_show-popup__WrH7a{0%{transform:translate3d(0,-50%,0);-webkit-transform:translate3d(0,-50%,0);-moz-transform:translate3d(0,-50%,0);-ms-transform:translate3d(0,-50%,0);-o-transform:translate3d(0,-50%,0)}to{opacity:1;transform:translateZ(0);-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0)}}";
-var styles$9 = {"tui-no-srcoll-class":"modal-module_tui-no-srcoll-class__gZjNK","tui-modal-id-for-no-scroll-area":"modal-module_tui-modal-id-for-no-scroll-area__s79-a","animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
-styleInject(css_248z$a);
+var css_248z$b = "body.modal-module_tui-no-srcoll-class__gZjNK,html.modal-module_tui-no-srcoll-class__gZjNK{height:100%;overflow:hidden!important;overscroll-behavior:none!important;touch-action:none}#modal-module_tui-modal-id-for-no-scroll-area__s79-a{touch-action:auto}.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$a = {"tui-no-srcoll-class":"modal-module_tui-no-srcoll-class__gZjNK","tui-modal-id-for-no-scroll-area":"modal-module_tui-modal-id-for-no-scroll-area__s79-a","animation__modal":"modal-module_animation__modal__3mt48","show-popup":"modal-module_show-popup__WrH7a"};
+styleInject(css_248z$b);
 
 const SvgNext = ({
   title,
@@ -4865,7 +4894,7 @@ const Modal = ({
       justifyContent: justifyContent ?? configStyles.MODAL.justifyContent
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$9['animation__modal']}`,
+    className: `${styles$a['animation__modal']}`,
     onClick: handleStopClosing,
     style: {
       position: 'relative',
@@ -5448,9 +5477,9 @@ const NumberInput = ({
   });
 };
 
-var css_248z$9 = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{appearance:none!important;-webkit-appearance:none!important;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
-var styles$8 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
-styleInject(css_248z$9);
+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-module_show-more-text__PQC9x{align-self:self-end;cursor:pointer}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$9 = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","show-more-text":"input-module_show-more-text__PQC9x","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);
 
 const InputTypes = {
   TEL: 'tel',
@@ -5544,6 +5573,10 @@ const Input = ({
   labelFontFamily,
   labelLineHeight,
   labelMarginBottom,
+  lableShowMore,
+  labelShowLessText,
+  labelShowMoreText,
+  showMoreTextColor,
   iconRequired,
   useLabelTooltip,
   labelTooltipColor,
@@ -5562,6 +5595,7 @@ const Input = ({
   const [show, setShow] = React.useState(false);
   const [removeID, setRemoveID] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
+  const [showMore, setShowMore] = React.useState(false);
   const [classProps, setClassProps] = React.useState({});
   const [innerValue, setInnerValue] = React.useState('');
   const [tooltipElem, setTooltipElem] = React.useState(null);
@@ -5688,6 +5722,21 @@ const Input = ({
     }
     setRemoveID(() => '');
   };
+  const handleCheckTextWidth = () => {
+    if (labelRef.current) {
+      const rect = labelRef.current.getBoundingClientRect();
+      const elementWidth = rect.width;
+      const textWidth = getRenderedTextWidth(labelRef.current);
+      if (textWidth > Math.ceil(elementWidth)) {
+        return 'more';
+      } else {
+        return 'less';
+      }
+    }
+  };
+  const handleChangeShowMore = () => {
+    setShowMore(() => !showMore);
+  };
   React.useEffect(() => {
     if (errorMessage) {
       setInnerErrorMessage(errorMessage);
@@ -5703,7 +5752,7 @@ const Input = ({
     setInnerValue(() => val);
   }, [value]);
   React.useEffect(() => {
-    className && setClassProps(() => classnames__default["default"](className ?? configStyles.INPUT.className, type === 'number' ? styles$8['inp-num'] : '', styles$8['input-wrap']));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.INPUT.className, type === 'number' ? styles$9['inp-num'] : '', styles$9['input-wrap']));
   }, [className]);
   React.useEffect(() => {
     setInnerErrorIcon(() => errorIcon);
@@ -5721,9 +5770,18 @@ const Input = ({
       setInnerLabelIconSide(() => labelIconSide);
     }
   }, [labelIconSide]);
+  React.useEffect(() => {
+    if ((useLabelTooltip || configStyles.INPUT?.label?.useTooltip) && (lableShowMore || configStyles.INPUT?.label?.showMore)) {
+      alert(`
+                    Please use one of this props or config,
+                    use ( useLabelTooltip / configStyles.FILE.label.useTooltip )
+                    or ( lableShowMore / configStyles.FILE.label.showMore )
+                `);
+    }
+  }, [lableShowMore, useLabelTooltip, configStyles.INPUT?.label?.useTooltip, configStyles.INPUT?.label?.showMore]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames__default["default"](className ?? data.INPUT.className, type === 'number' ? styles$8['inp-num'] : '', styles$8['input-wrap']));
+      setClassProps(() => classnames__default["default"](className ?? data.INPUT.className, type === 'number' ? styles$9['inp-num'] : '', styles$9['input-wrap']));
       setConfigStyles(() => {
         return {
           ...data
@@ -5767,13 +5825,24 @@ const Input = ({
       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' : ''
+      whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.INPUT.label.showMore) && !showMore ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.INPUT.label.showMore) && !showMore ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.INPUT.label.showMore) && !showMore ? 'ellipsis' : '',
+      wordBreak: 'break-all'
     },
     onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) ? handleLabelMouseEnter : _ => _,
     onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.INPUT.label.useTooltip) ? handleLabelMouseLeave : _ => _
-  }, label), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.INPUT.icon.required ? configStyles.INPUT.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), showLabelIcon && innerLabelIcon && innerLabelIconSide === 'right' ? /*#__PURE__*/React__default["default"].createElement("img", {
+  }, label, handleCheckTextWidth() === 'more' && showMore && (lableShowMore || configStyles.INPUT.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles$9['show-more-text'],
+    style: {
+      fontSize: labelSize ?? configStyles.INPUT.label.font.size,
+      fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
+      fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
+      fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family,
+      color: showMoreTextColor ?? configStyles.INPUT.label.showMoreTextColor
+    },
+    onClick: handleChangeShowMore
+  }, ' ', " ", labelShowLessText ?? configStyles.INPUT.label.showLessText) : ''), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.INPUT.icon.required ? configStyles.INPUT.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), showLabelIcon && innerLabelIcon && innerLabelIconSide === 'right' ? /*#__PURE__*/React__default["default"].createElement("img", {
     alt: "label icon",
     src: innerLabelIcon,
     style: {
@@ -5783,8 +5852,19 @@ const Input = ({
       marginLeft: labelIconMargin ?? configStyles.INPUT.label.iconMargin
     },
     onClick: labelAction ? () => labelAction() : _ => _
-  }) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$8['input-content']}`,
+  }) : '', handleCheckTextWidth() === 'more' && !showMore && (lableShowMore || configStyles.INPUT.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles$9['show-more-text'],
+    style: {
+      fontSize: labelSize ?? configStyles.INPUT.label.font.size,
+      fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
+      fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
+      fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family,
+      color: showMoreTextColor ?? configStyles.INPUT.label.showMoreTextColor,
+      marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom
+    },
+    onClick: handleChangeShowMore
+  }, labelShowMoreText ?? configStyles.INPUT.label.showMoreText) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${styles$9['input-content']}`,
     style: {
       width: width ?? configStyles.INPUT.width,
       borderRadius: radius ?? configStyles.INPUT.radius,
@@ -6016,6 +6096,10 @@ Input.propTypes = {
   labelFontFamily: PropTypes__default["default"].string,
   labelIconMargin: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
+  lableShowMore: PropTypes__default["default"].bool,
+  labelShowLessText: PropTypes__default["default"].string,
+  labelShowMoreText: PropTypes__default["default"].string,
+  showMoreTextColor: PropTypes__default["default"].string,
   useLabelTooltip: PropTypes__default["default"].bool,
   labelTooltipColor: PropTypes__default["default"].string,
   labelTooltipPadding: PropTypes__default["default"].string,
@@ -6236,9 +6320,9 @@ const SvgArrow = ({
   fill: fillColor ? fillColor : '#3C393E'
 }));
 
-var css_248z$8 = ".select-module_select-content__GCMDX{-webkit-appearance:none;display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;-webkit-appearance:none;display:flex;flex-direction:row;flex-wrap:nowrap}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:99999999999}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:fit-content;justify-content:center;max-height:30px;max-width:30px;min-height:14px;min-width:14px;width:fit-content}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_ellipsis__uNgol{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
-var styles$7 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L","ellipsis":"select-module_ellipsis__uNgol"};
-styleInject(css_248z$8);
+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}.select-module_show-more-text__kY3zS{align-self:self-end;cursor:pointer}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
+var styles$8 = {"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","show-more-text":"select-module_show-more-text__kY3zS"};
+styleInject(css_248z$9);
 
 const Select = ({
   dots,
@@ -6270,6 +6354,10 @@ const Select = ({
   labelFontFamily,
   labelMarginBottom,
   labelTextTransform,
+  lableShowMore,
+  labelShowLessText,
+  labelShowMoreText,
+  showMoreTextColor,
   iconRequired,
   useLabelTooltip,
   labelTooltipColor,
@@ -6330,6 +6418,7 @@ const Select = ({
   const [opened, setOpened] = React.useState(false);
   const [removeID, setRemoveID] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
+  const [showMore, setShowMore] = React.useState(false);
   const [classProps, setClassProps] = React.useState({});
   const [newSelected, setNewSelected] = React.useState([]);
   const [tooltipElem, setTooltipElem] = React.useState(null);
@@ -6471,6 +6560,21 @@ const Select = ({
     }
     setRemoveID(() => '');
   };
+  const handleCheckTextWidth = () => {
+    if (labelRef.current) {
+      const rect = labelRef.current.getBoundingClientRect();
+      const elementWidth = rect.width;
+      const textWidth = getRenderedTextWidth(labelRef.current);
+      if (textWidth > Math.ceil(elementWidth)) {
+        return 'more';
+      } else {
+        return 'less';
+      }
+    }
+  };
+  const handleChangeShowMore = () => {
+    setShowMore(() => !showMore);
+  };
   React.useEffect(() => {
     if (opened) {
       const checkIfClickedOutside = e => {
@@ -6512,6 +6616,15 @@ const Select = ({
   React.useEffect(() => {
     className && setClassProps(() => classnames__default["default"](className ?? configStyles.SELECT.className));
   }, [className]);
+  React.useEffect(() => {
+    if ((useLabelTooltip || configStyles.SELECT?.label?.useTooltip) && (lableShowMore || configStyles.SELECT?.label?.showMore)) {
+      alert(`
+                    Please use one of this props or config,
+                    use ( useLabelTooltip / configStyles.FILE.label.useTooltip )
+                    or ( lableShowMore / configStyles.FILE.label.showMore )
+                `);
+    }
+  }, [lableShowMore, useLabelTooltip, configStyles.SELECT?.label?.useTooltip, configStyles.SELECT?.label?.showMore]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.SELECT.className));
@@ -6551,18 +6664,40 @@ const Select = ({
       lineHeight: labelLineHeight ?? configStyles.SELECT.label.lineHeight,
       marginBottom: labelMarginBottom ?? configStyles.SELECT.label.marginBottom,
       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' : ''
+      whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.SELECT.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.SELECT.label.showMore) && !showMore ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.SELECT.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.SELECT.label.showMore) && !showMore ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.SELECT.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.SELECT.label.showMore) && !showMore ? 'ellipsis' : '',
+      wordBreak: 'break-all'
     },
     onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.SELECT.label.useTooltip) ? handleLabelMouseEnter : _ => _,
     onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.SELECT.label.useTooltip) ? handleLabelMouseLeave : _ => _
-  }, label), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.SELECT.icon.required ? configStyles.SELECT.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, label, handleCheckTextWidth() === 'more' && showMore && (lableShowMore || configStyles.SELECT.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles$8['show-more-text'],
+    style: {
+      fontSize: labelFontSize ?? configStyles.SELECT.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.SELECT.label.font.style,
+      fontWeight: labelWeight ?? configStyles.SELECT.label.font.weight,
+      fontFamily: labelFontFamily ?? configStyles.SELECT.label.font.family,
+      color: showMoreTextColor ?? configStyles.SELECT.label.showMoreTextColor
+    },
+    onClick: handleChangeShowMore
+  }, ' ', " ", labelShowLessText ?? configStyles.SELECT.label.showLessText) : ''), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.SELECT.icon.required ? configStyles.SELECT.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), handleCheckTextWidth() === 'more' && !showMore && (lableShowMore || configStyles.SELECT.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles$8['show-more-text'],
+    style: {
+      fontSize: labelFontSize ?? configStyles.SELECT.label.font.size,
+      fontStyle: labelFontStyle ?? configStyles.SELECT.label.font.style,
+      fontWeight: labelWeight ?? configStyles.SELECT.label.font.weight,
+      fontFamily: labelFontFamily ?? configStyles.SELECT.label.font.family,
+      color: showMoreTextColor ?? configStyles.SELECT.label.showMoreTextColor,
+      marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom
+    },
+    onClick: handleChangeShowMore
+  }, labelShowMoreText ?? configStyles.SELECT.label.showMoreText) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     ref: ref
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: styles$7['select-content']
+    className: styles$8['select-content']
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$7['select-content-top']}`,
+    className: `${styles$8['select-content-top']}`,
     style: {
       cursor: disabled ? 'not-allowed' : cursor ? cursor : configStyles.SELECT.selected.cursor,
       minHeight: selectedMinHeight ?? configStyles.SELECT.selected.minHeight,
@@ -6599,18 +6734,18 @@ const Select = ({
       }
     }
   }) : defaultOption ? defaultOption : ''), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$7['select-content-top-icon']}`,
+    className: `${styles$8['select-content-top-icon']}`,
     style: {
       padding: lang ? '0px' : insidePagination ? '0px 5px' : '0 5px 0 20px'
     }
   }, !disabled && multiple && newSelected.length > 1 && /*#__PURE__*/React__default["default"].createElement("span", null, newSelected.length), (showCloseIcon === true || showCloseIcon === false ? showCloseIcon : configStyles.SELECT.showCloseIcon) && !disabled && newSelected && newSelected.length > 0 && /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$7['close-icon']}`,
+    className: `${styles$8['close-icon']}`,
     onClick: disabled ? _ => _ : handleClearSelect,
     style: {
       marginLeft: multiple && newSelected.length > 1 ? '17px' : '0px'
     }
   }, closeIcon ? closeIcon : configStyles.SELECT.closeIcon ? configStyles.SELECT.closeIcon : /*#__PURE__*/React__default["default"].createElement(SvgCloseIcon, null)), !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$7['arrow-icon']}`,
+    className: `${styles$8['arrow-icon']}`,
     style: {
       marginLeft: lang ? '0px' : '9px',
       transform: arrowNoRotate || configStyles.SELECT.arrowNoRotate ? 'rotate(0deg)' : opened ? 'rotate(180deg)' : 'rotate(0deg)'
@@ -6622,9 +6757,9 @@ const Select = ({
       backgroundColor: optionsBackgroundColor ?? configStyles.SELECT.options.colors.background,
       top: selectedMinHeight ? selectedMinHeight.includes('rem') ? parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 3)) + 0.6 + 'rem' : parseFloat(selectedMinHeight.substr(0, selectedMinHeight.length - 2)) + 6 + 'px' : configStyles.SELECT.selected.minHeight.includes('rem') ? parseFloat(configStyles.SELECT.selected.minHeight.substr(0, configStyles.SELECT.selected.minHeight.length - 3)) + 0.6 + 'rem' : parseFloat(configStyles.SELECT.selected.minHeight.substr(0, configStyles.SELECT.selected.minHeight.length - 2)) + 6 + 'px'
     },
-    className: `${styles$7['select-content-bottom']}`
+    className: `${styles$8['select-content-bottom']}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$7['select-content-bottom-inner']}`
+    className: `${styles$8['select-content-bottom-inner']}`
   }, existOptions && existOptions.length > 0 && existOptions.map((option, i) => {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       key: i,
@@ -6633,7 +6768,7 @@ const Select = ({
       onClick: disabled ? _ => _ : () => handleSelectItem(option),
       onMouseEnter: disabled ? _ => _ : e => handleMouseEnterOption(e),
       onMouseLeave: disabled ? _ => _ : e => handleMouseLeaveOption(e),
-      className: `${styles$7['select-content-bottom-row']} ${dots || configStyles.SELECT.dots ? styles$7['ellipsis'] : ''}`,
+      className: `${styles$8['select-content-bottom-row']} ${dots || configStyles.SELECT.dots ? styles$8['ellipsis'] : ''}`,
       style: {
         overflowWrap: !dots && !configStyles.SELECT.dots ? 'anywhere' : 'break-word',
         color: optionItemColor ?? configStyles.SELECT.options.item.color,
@@ -6698,6 +6833,10 @@ Select.propTypes = {
   labelFontFamily: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
   labelTextTransform: PropTypes__default["default"].string,
+  lableShowMore: PropTypes__default["default"].bool,
+  labelShowLessText: PropTypes__default["default"].string,
+  labelShowMoreText: PropTypes__default["default"].string,
+  showMoreTextColor: PropTypes__default["default"].string,
   cursor: PropTypes__default["default"].string,
   errorSize: PropTypes__default["default"].string,
   errorColor: PropTypes__default["default"].string,
@@ -6869,9 +7008,9 @@ const SvgToasterSuccess = ({
   fill: fillColor ? fillColor : '#0DA574'
 }));
 
-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$7);
+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 styles$7 = {"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);
 
 const ToasterType = {
   info: 'info',
@@ -6938,8 +7077,8 @@ const Toast = ({
       ...propStyles
     },
     className: `
-                ${styles$6['notify-block']}
-                ${position === 'top-left' ? showToaster ? styles$6['bounce-in-left'] : styles$6['bounce-out-left'] : position === 'top-right' ? showToaster ? styles$6['bounce-in-right'] : styles$6['bounce-out-right'] : position === 'top-center' ? showToaster ? styles$6['bounce-in-left'] : styles$6['bounce-out-left'] : position === 'bottom-left' ? showToaster ? styles$6['bounce-in-left'] : styles$6['bounce-out-left'] : position === 'bottom-right' ? showToaster ? styles$6['bounce-in-right'] : styles$6['bounce-out-right'] : position === 'bottom-center' ? showToaster ? styles$6['bounce-in-left'] : styles$6['bounce-out-left'] : ''}
+                ${styles$7['notify-block']}
+                ${position === 'top-left' ? showToaster ? styles$7['bounce-in-left'] : styles$7['bounce-out-left'] : position === 'top-right' ? showToaster ? styles$7['bounce-in-right'] : styles$7['bounce-out-right'] : position === 'top-center' ? showToaster ? styles$7['bounce-in-left'] : styles$7['bounce-out-left'] : position === 'bottom-left' ? showToaster ? styles$7['bounce-in-left'] : styles$7['bounce-out-left'] : position === 'bottom-right' ? showToaster ? styles$7['bounce-in-right'] : styles$7['bounce-out-right'] : position === 'bottom-center' ? showToaster ? styles$7['bounce-in-left'] : styles$7['bounce-out-left'] : ''}
             `
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -7006,7 +7145,7 @@ const Toast = ({
       fontFamily: titleStyles.font.family,
       ...titleStyles.props
     },
-    className: styles$6['notify-title']
+    className: styles$7['notify-title']
   }, title), description && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: descriptionStyles.color,
@@ -7017,7 +7156,7 @@ const Toast = ({
       fontFamily: descriptionStyles.font.family,
       ...descriptionStyles.props
     },
-    className: styles$6['notify-desc']
+    className: styles$7['notify-desc']
   }, description)), /*#__PURE__*/React__default["default"].createElement("div", {
     onClick: () => handleCloseToaster(ref),
     style: {
@@ -7139,17 +7278,17 @@ const createToast = ({
   }, error => {
     console.error(error);
   });
-  if (!document.getElementById(styles$6[position]) || document.getElementById(styles$6[position]) == null) {
+  if (!document.getElementById(styles$7[position]) || document.getElementById(styles$7[position]) == null) {
     toastParentBlock = document.createElement('div');
     toastParentBlock.style.position = 'fixed';
     toastParentBlock.style.display = 'flex';
     toastParentBlock.style.zIndex = 999999999999;
     toastParentBlock.style.flexDirection = position === 'top-left' || position === 'top-right' || position === 'top-center' ? 'column-reverse' : 'column';
-    toastParentBlock.setAttribute('id', styles$6[position]);
+    toastParentBlock.setAttribute('id', styles$7[position]);
     toastParentBlock.appendChild(toastBlock);
     toastify.appendChild(toastParentBlock);
   } else {
-    document.getElementById(styles$6[position]).appendChild(toastBlock);
+    document.getElementById(styles$7[position]).appendChild(toastBlock);
   }
 };
 const toast = {
@@ -7271,9 +7410,9 @@ const SvgTooltip = ({
   fill: fillColor ? fillColor : '#D1D1D1'
 }));
 
-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$6);
+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 styles$6 = {"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);
 
 const TooltipDirections = {
   TOP: 'top',
@@ -7361,7 +7500,7 @@ const Tooltip = ({
   }, [showTooltip]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames__default["default"](styles$5['tooltip-block'], className ?? data.TOOLTIP.className));
+      setClassProps(() => classnames__default["default"](styles$6['tooltip-block'], className ?? data.TOOLTIP.className));
       setConfigStyles(() => {
         return {
           ...data
@@ -7383,7 +7522,7 @@ const Tooltip = ({
     onClick: e => e.stopPropagation()
   }, showTooltip ? /*#__PURE__*/React__default["default"].createElement("div", {
     ref: tooltipRef,
-    className: `${styles$5['tooltip']}`,
+    className: `${styles$6['tooltip']}`,
     style: {
       width: tooltipWidth ?? configStyles.TOOLTIP.width,
       borderRadius: tooltipRadius ?? configStyles.TOOLTIP.radius,
@@ -7392,9 +7531,9 @@ const Tooltip = ({
       left: direction === 'top' || direction === 'bottom' ? `calc(50% - ${checkTooltipWidth / 2}px)` : direction === 'left' || direction === 'left-top' || direction === 'left-bottom' ? `-${checkTooltipWidth + 7}px` : direction === 'top-left' || direction === 'bottom-left' ? `0px` : direction === 'top-right' || direction === 'bottom-right' ? `-${checkTooltipWidth - tooltipIconParentWidth}px` : direction === 'right' || direction === 'right-top' || direction === 'right-bottom' ? 'calc(100% + 7px)' : '0px'
     }
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$5['tooltip-rel']}`
+    className: `${styles$6['tooltip-rel']}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: `${styles$5['tooltip-decor']}`,
+    className: `${styles$6['tooltip-decor']}`,
     style: {
       backgroundColor: tooltipBackgroundColor ?? configStyles.TOOLTIP.colors.background,
       left: direction === 'top' || direction === 'bottom' ? 'calc(50% - 5px)' : direction === 'right' || direction === 'right-top' || direction === 'right-bottom' ? '-15px' : direction === 'left' || direction === 'left-top' || direction === 'left-bottom' ? 'calc(100% + 5px)' : direction === 'top-left' || direction === 'bottom-left' ? `${tooltipIconParentWidth / 2 - tooltipIconBlockWidth}px` : direction === 'top-right' || direction === 'bottom-right' ? `calc(100% - ${tooltipIconParentWidth / 2 - tooltipIconBlockWidth / 2}px` : '0px',
@@ -7477,9 +7616,9 @@ const SvgCaptchaArrowDown = ({
   fill: fillColor ? fillColor : '#00236A'
 }));
 
-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$5);
+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 styles$5 = {"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);
 
 const Captcha = ({
   color,
@@ -7567,7 +7706,7 @@ const Captcha = ({
       alignItems: 'center',
       zIndex: 1
     },
-    className: styles$4['start-point']
+    className: styles$5['start-point']
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
@@ -7593,8 +7732,8 @@ const Captcha = ({
       backgroundColor: 'transparent'
     },
     className: `
-                            ${styles$4['range']}
-                            ${+rangeProgress === rangeNumber ? styles$4['range-success'] : +rangeProgress !== rangeNumber && +rangeProgress > 0 ? styles$4['range-error'] : styles$4['range-default']}
+                            ${styles$5['range']}
+                            ${+rangeProgress === rangeNumber ? styles$5['range-success'] : +rangeProgress !== rangeNumber && +rangeProgress > 0 ? styles$5['range-error'] : styles$5['range-default']}
                         `,
     onInput: handleRange
   }), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -7624,9 +7763,9 @@ Captcha.propTypes = {
   getRange: PropTypes__default["default"].func.isRequired
 };
 
-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$4);
+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 styles$4 = {"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);
 
 const Stepper = ({
   stepLength,
@@ -7636,11 +7775,11 @@ const Stepper = ({
   const [classProps, setClassProps] = React.useState({});
   const [configStyles, setConfigStyles] = React.useState({});
   React.useEffect(() => {
-    className && setClassProps(() => classnames__default["default"](className ?? configStyles.STEPPER.className, `${styles$3['stepper-container']} stepper-container-rem`));
+    className && setClassProps(() => classnames__default["default"](className ?? configStyles.STEPPER.className, `${styles$4['stepper-container']} stepper-container-rem`));
   }, [className]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
-      setClassProps(() => classnames__default["default"](className ?? data.STEPPER.className, `${styles$3['stepper-container']} stepper-container-rem`));
+      setClassProps(() => classnames__default["default"](className ?? data.STEPPER.className, `${styles$4['stepper-container']} stepper-container-rem`));
       setConfigStyles(() => {
         return {
           ...data
@@ -7656,10 +7795,10 @@ const Stepper = ({
     let steppers = [];
     for (let step = 1; step <= stepLength; step++) {
       steppers.push(/*#__PURE__*/React__default["default"].createElement("div", {
-        className: classnames__default["default"](`${step <= activeSteps ? styles$3.activeRing : styles$3.bigRing}`),
+        className: classnames__default["default"](`${step <= activeSteps ? styles$4.activeRing : styles$4.bigRing}`),
         key: step
       }, /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classnames__default["default"](`${step <= activeSteps ? styles$3.smallActiveRing : styles$3.smallRing}`)
+        className: classnames__default["default"](`${step <= activeSteps ? styles$4.smallActiveRing : styles$4.smallRing}`)
       }, step <= activeSteps ? step : '')));
     }
     return steppers;
@@ -7789,6 +7928,10 @@ Checkbox.propTypes = {
   data: PropTypes__default["default"].oneOfType([PropTypes__default["default"].arrayOf(PropTypes__default["default"].object), PropTypes__default["default"].object])
 };
 
+var css_248z$4 = "textarea{-webkit-appearance:none}textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}.textarea-module_show-more-text__xQa-I{align-self:self-end;cursor:pointer}";
+var styles$3 = {"show-more-text":"textarea-module_show-more-text__xQa-I"};
+styleInject(css_248z$4);
+
 const PositionSide = {
   TOP: 'top',
   BOTTOM: 'bottom'
@@ -7831,10 +7974,15 @@ const Textarea = ({
   label,
   labelSize,
   labelColor,
+  labelStyle,
   labelWeight,
   labelDisplay,
   labelFontFamily,
   labelMarginBottom,
+  lableShowMore,
+  labelShowLessText,
+  labelShowMoreText,
+  showMoreTextColor,
   iconRequired,
   useLabelTooltip,
   labelTooltipColor,
@@ -7853,6 +8001,7 @@ const Textarea = ({
   const [removeID, setRemoveID] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
   const [isFocus, setIsFocus] = React.useState(false);
+  const [showMore, setShowMore] = React.useState(false);
   const [innerValue, setInnerValue] = React.useState('');
   const [classProps, setClassProps] = React.useState({});
   const [tooltipElem, setTooltipElem] = React.useState(null);
@@ -7964,6 +8113,21 @@ const Textarea = ({
     }
     setRemoveID(() => '');
   };
+  const handleCheckTextWidth = () => {
+    if (labelRef.current) {
+      const rect = labelRef.current.getBoundingClientRect();
+      const elementWidth = rect.width;
+      const textWidth = getRenderedTextWidth(labelRef.current);
+      if (textWidth > Math.ceil(elementWidth)) {
+        return 'more';
+      } else {
+        return 'less';
+      }
+    }
+  };
+  const handleChangeShowMore = () => {
+    setShowMore(() => !showMore);
+  };
   React.useEffect(() => {
     if (value === undefined) {
       alert('Please add value prop on Textarea component');
@@ -7978,6 +8142,15 @@ const Textarea = ({
   React.useEffect(() => {
     className && setClassProps(() => classnames__default["default"](className ?? configStyles.TEXTAREA.className));
   }, [className]);
+  React.useEffect(() => {
+    if ((useLabelTooltip || configStyles.TEXTAREA?.label?.useTooltip) && (lableShowMore || configStyles.TEXTAREA?.label?.showMore)) {
+      alert(`
+                    Please use one of this props or config,
+                    use ( useLabelTooltip / configStyles.FILE.label.useTooltip )
+                    or ( lableShowMore / configStyles.FILE.label.showMore )
+                `);
+    }
+  }, [lableShowMore, useLabelTooltip, configStyles.TEXTAREA?.label?.useTooltip, configStyles.TEXTAREA?.label?.showMore]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.TEXTAREA.className));
@@ -8019,13 +8192,34 @@ const Textarea = ({
     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' : ''
+      whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.TEXTAREA.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.TEXTAREA.label.showMore) && !showMore ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.TEXTAREA.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.TEXTAREA.label.showMore) && !showMore ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.TEXTAREA.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.TEXTAREA.label.showMore) && !showMore ? 'ellipsis' : '',
+      wordBreak: 'break-all'
     },
     onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.TEXTAREA.label.useTooltip) ? handleLabelMouseEnter : _ => _,
     onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.TEXTAREA.label.useTooltip) ? handleLabelMouseLeave : _ => _
-  }, label), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.TEXTAREA.icon.required ? configStyles.TEXTAREA.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))), showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, label, handleCheckTextWidth() === 'more' && showMore && (lableShowMore || configStyles.TEXTAREA.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles$3['show-more-text'],
+    style: {
+      fontSize: labelSize ?? configStyles.TEXTAREA.label.font.size,
+      fontStyle: labelStyle ?? configStyles.TEXTAREA.label.font.style,
+      fontWeight: labelWeight ?? configStyles.TEXTAREA.label.font.weight,
+      fontFamily: labelFontFamily ?? configStyles.TEXTAREA.label.font.family,
+      color: showMoreTextColor ?? configStyles.TEXTAREA.label.showMoreTextColor
+    },
+    onClick: handleChangeShowMore
+  }, ' ', " ", labelShowLessText ?? configStyles.TEXTAREA.label.showLessText) : ''), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.TEXTAREA.icon.required ? configStyles.TEXTAREA.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), handleCheckTextWidth() === 'more' && !showMore && (lableShowMore || configStyles.TEXTAREA.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles$3['show-more-text'],
+    style: {
+      fontSize: labelSize ?? configStyles.TEXTAREA.label.font.size,
+      fontStyle: labelStyle ?? configStyles.TEXTAREA.label.font.style,
+      fontWeight: labelWeight ?? configStyles.TEXTAREA.label.font.weight,
+      fontFamily: labelFontFamily ?? configStyles.TEXTAREA.label.font.family,
+      color: showMoreTextColor ?? configStyles.TEXTAREA.label.showMoreTextColor
+    },
+    onClick: handleChangeShowMore
+  }, labelShowMoreText ?? configStyles.TEXTAREA.label.showMoreText) : ''), showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       width: 'fit-content',
       flexShrink: 0
@@ -8128,11 +8322,16 @@ Textarea.propTypes = {
   borderHoverColor: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string,
   labelSize: PropTypes__default["default"].string,
+  labelStyle: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
   labelWeight: PropTypes__default["default"].string,
   labelDisplay: PropTypes__default["default"].string,
   labelFontFamily: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
+  lableShowMore: PropTypes__default["default"].bool,
+  labelShowLessText: PropTypes__default["default"].string,
+  labelShowMoreText: PropTypes__default["default"].string,
+  showMoreTextColor: PropTypes__default["default"].string,
   iconRequired: PropTypes__default["default"].element,
   useLabelTooltip: PropTypes__default["default"].bool,
   labelTooltipColor: PropTypes__default["default"].string,
@@ -9300,8 +9499,8 @@ Pagination.propTypes = {
   borderRadius: PropTypes__default["default"].string
 };
 
-var css_248z = ".autocomplete-module_auto-complete__oUOv9{appearance:none!important;-webkit-appearance:none!important}";
-var styles = {"auto-complete":"autocomplete-module_auto-complete__oUOv9"};
+var css_248z = ".autocomplete-module_auto-complete__oUOv9{appearance:none!important;-webkit-appearance:none!important}.autocomplete-module_show-more-text__1FXFu{align-self:self-end;cursor:pointer}";
+var styles = {"auto-complete":"autocomplete-module_auto-complete__oUOv9","show-more-text":"autocomplete-module_show-more-text__1FXFu"};
 styleInject(css_248z);
 
 const Autocomplete = ({
@@ -9383,6 +9582,10 @@ const Autocomplete = ({
   labelFontFamily,
   labelMarginBottom,
   labelTextTransform,
+  lableShowMore,
+  labelShowLessText,
+  labelShowMoreText,
+  showMoreTextColor,
   iconRequired,
   useLabelTooltip,
   labelTooltipColor,
@@ -9408,6 +9611,7 @@ const Autocomplete = ({
   const [removeID, setRemoveID] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
   const [isFocus, setIsFocus] = React.useState(false);
+  const [showMore, setShowMore] = React.useState(false);
   const [innerError, setInnerError] = React.useState('');
   const [innerValue, setInnerValue] = React.useState('');
   const [classProps, setClassProps] = React.useState({});
@@ -9600,6 +9804,21 @@ const Autocomplete = ({
     }
     setRemoveID(() => '');
   };
+  const handleCheckTextWidth = () => {
+    if (labelRef.current) {
+      const rect = labelRef.current.getBoundingClientRect();
+      const elementWidth = rect.width;
+      const textWidth = getRenderedTextWidth(labelRef.current);
+      if (textWidth > Math.ceil(elementWidth)) {
+        return 'more';
+      } else {
+        return 'less';
+      }
+    }
+  };
+  const handleChangeShowMore = () => {
+    setShowMore(() => !showMore);
+  };
   React.useEffect(() => {
     if (options === undefined) {
       alert('Please add options prop');
@@ -9634,6 +9853,15 @@ const Autocomplete = ({
   React.useEffect(() => {
     className && setClassProps(() => classnames__default["default"](className ?? configStyles.AUTOCOMPLETE.className, styles['auto-complete']));
   }, [className]);
+  React.useEffect(() => {
+    if ((useLabelTooltip || configStyles.AUTOCOMPLETE?.label?.useTooltip) && (lableShowMore || configStyles.AUTOCOMPLETE?.label?.showMore)) {
+      alert(`
+                    Please use one of this props or config,
+                    use ( useLabelTooltip / configStyles.FILE.label.useTooltip )
+                    or ( lableShowMore / configStyles.FILE.label.showMore )
+                `);
+    }
+  }, [lableShowMore, useLabelTooltip, configStyles.AUTOCOMPLETE?.label?.useTooltip, configStyles.AUTOCOMPLETE?.label?.showMore]);
   React.useEffect(() => {
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.AUTOCOMPLETE.className, styles['auto-complete']));
@@ -9672,13 +9900,35 @@ const Autocomplete = ({
       lineHeight: labelLineHeight ?? configStyles.AUTOCOMPLETE.label.lineHeight,
       marginBottom: labelMarginBottom ?? configStyles.AUTOCOMPLETE.label.marginBottom,
       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' : ''
+      whiteSpace: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.AUTOCOMPLETE.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.AUTOCOMPLETE.label.showMore) && !showMore ? 'nowrap' : 'normal',
+      overflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.AUTOCOMPLETE.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.AUTOCOMPLETE.label.showMore) && !showMore ? 'hidden' : 'visible',
+      textOverflow: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.AUTOCOMPLETE.label.useTooltip) || (lableShowMore ? lableShowMore : (lableShowMore === null || lableShowMore === undefined) && configStyles.AUTOCOMPLETE.label.showMore) && !showMore ? 'ellipsis' : '',
+      wordBreak: 'break-all'
     },
     onMouseEnter: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.AUTOCOMPLETE.label.useTooltip) ? handleLabelMouseEnter : _ => _,
     onMouseLeave: (useLabelTooltip ? useLabelTooltip : (useLabelTooltip === null || useLabelTooltip === undefined) && configStyles.AUTOCOMPLETE.label.useTooltip) ? handleLabelMouseLeave : _ => _
-  }, label), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, label, handleCheckTextWidth() === 'more' && showMore && (lableShowMore || configStyles.AUTOCOMPLETE.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles['show-more-text'],
+    style: {
+      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,
+      color: showMoreTextColor ?? configStyles.AUTOCOMPLETE.label.showMoreTextColor
+    },
+    onClick: handleChangeShowMore
+  }, ' ', " ", labelShowLessText ?? configStyles.AUTOCOMPLETE.label.showLessText) : ''), required && /*#__PURE__*/React__default["default"].createElement("sup", null, iconRequired ? iconRequired : configStyles.FILE.icon.required ? configStyles.FILE.icon.required : /*#__PURE__*/React__default["default"].createElement(SvgRequired, null)), handleCheckTextWidth() === 'more' && !showMore && (lableShowMore || configStyles.AUTOCOMPLETE.label.showMore) ? /*#__PURE__*/React__default["default"].createElement("span", {
+    className: styles['show-more-text'],
+    style: {
+      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,
+      color: showMoreTextColor ?? configStyles.AUTOCOMPLETE.label.showMoreTextColor,
+      marginBottom: labelMarginBottom ?? configStyles.AUTOCOMPLETE.label.marginBottom
+    },
+    onClick: handleChangeShowMore
+  }, labelShowMoreText ?? configStyles.AUTOCOMPLETE.label.showMoreText) : ''), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: contentDisplay ?? configStyles.AUTOCOMPLETE.parent.display,
       position: contentPosition ?? configStyles.AUTOCOMPLETE.parent.position,
@@ -9823,7 +10073,11 @@ Autocomplete.propTypes = {
   labelTooltipFontWeight: PropTypes__default["default"].string,
   labelTooltipBorderRadius: PropTypes__default["default"].string,
   labelTooltipBackgroundColor: PropTypes__default["default"].string,
-  backgroundDisableColor: PropTypes__default["default"].string
+  backgroundDisableColor: PropTypes__default["default"].string,
+  lableShowMore: PropTypes__default["default"].bool,
+  labelShowLessText: PropTypes__default["default"].string,
+  labelShowMoreText: PropTypes__default["default"].string,
+  showMoreTextColor: PropTypes__default["default"].string
 };
 
 exports.Accordion = Accordion;